/* SABAQ Лаборатория — история Казахстана: стили модуля Lab.hist (istoriya.js).
   Только палитра sabaq.css; все классы с префиксом h-. Подключается после sabaq.css. */
:root { --h-sea: #E2EAFD; --h-land: var(--scene, #FFF8F5); }

/* ---------- Карта ---------- */
.h-map { display: grid; gap: 10px; min-width: 0; }
.h-map-box { contain: layout paint; position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 76vh; min-height: 300px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.h-map-box.h-twin { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; max-height: none; min-height: 0; border: 0; border-radius: 0; }
.h-map-svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.h-drag .h-map-svg { cursor: grabbing; }
@media (max-width: 760px) { .h-map-box { aspect-ratio: 1 / 1.08; max-height: 80vh; } }
/* базовые слои (толщина линий постоянная: vector-effect) */
.h-sea { fill: var(--h-sea); stroke: none; }
.h-frame { fill: none; stroke: #C9D5F2; stroke-width: 1; pointer-events: none; }
.h-grid { fill: none; stroke: rgb(47 107 240 / .13); stroke-width: .7; pointer-events: none; }
.h-land { fill: var(--h-land); stroke: rgb(47 107 240 / .38); stroke-width: .8; stroke-linejoin: round; }
.h-mtn { fill: rgb(184 106 0 / .09); stroke: none; pointer-events: none; }
.h-mtn-h { stroke: none; pointer-events: none; }
.h-hatch { stroke: rgb(184 106 0 / .26); stroke-width: .9; fill: none; }
.h-lake { fill: var(--h-sea); stroke: rgb(47 107 240 / .38); stroke-width: .8; transition: opacity .6s; pointer-events: none; }
.h-riv { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.h-riv1 { stroke: rgb(47 107 240 / .62); stroke-width: 1.5; }
.h-riv2 { stroke: rgb(47 107 240 / .42); stroke-width: 1; }
.h-riv3 { stroke: rgb(47 107 240 / .28); stroke-width: .7; }
.h-kz { fill: none; stroke: var(--muted); stroke-opacity: .65; stroke-width: 1.1; stroke-dasharray: 5 3.5; pointer-events: none; }
/* территории государств: заливка, «мягкий» край, пунктир — граница приблизительная */
.h-ter { transition: opacity .3s; }
.h-ter-f { fill: var(--c); fill-opacity: .2; stroke: var(--c); stroke-width: 1.7; stroke-opacity: .9; stroke-dasharray: 7 4; stroke-linejoin: round; cursor: pointer; transition: fill-opacity .2s; }
.h-ter-glow { fill: none; stroke: var(--c); stroke-width: 10; stroke-opacity: .13; stroke-linejoin: round; pointer-events: none; }
.h-ter-l .h-ter-f { fill-opacity: .1; }
.h-ter-h .h-ter-f { fill-opacity: .55; }
.h-ter-hl { stroke-width: 2.4; fill: none; }
.h-ter:hover .h-ter-f, .h-ter.h-hi .h-ter-f { fill-opacity: .32; stroke-width: 2.4; }
/* объекты во времени */
.h-obj { transition: opacity .3s; }
/* быстрый режим (лента играет или её тянут): без переходов — каждый переход в SVG перерисовывает всю карту в каждом кадре */
.h-fast .h-obj, .h-fast .h-ter, .h-fast .h-lake, .h-fast .h-ter-f { transition: none; }
svg.h-dim .h-obj:not(.h-hi) { opacity: .25; }
svg .h-obj.h-off, svg.h-dim .h-obj.h-off { opacity: 0; pointer-events: none; }
/* значки мест */
.h-mk { cursor: pointer; outline: none; }
.h-hitc { fill: transparent; stroke: none; }
.h-mk:focus-visible .h-hitc { stroke: var(--blue); stroke-width: 2.5; }
.h-city { fill: #fff; stroke: var(--ink); stroke-width: 2.2; }
.h-cap-o { fill: #fff; stroke: var(--ink); stroke-width: 2.2; }
.h-cap-i { fill: var(--ink); }
.h-site { fill: var(--warn); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.h-kur { fill: var(--warn); fill-opacity: .9; stroke: #fff; stroke-width: 1.2; }
.h-kur-b { stroke: var(--warn); stroke-width: 1.8; stroke-linecap: round; }
.h-bt { fill: #fff; stroke: var(--bad); stroke-width: 2; }
.h-sab { fill: none; stroke: var(--bad); stroke-width: 2.3; stroke-linecap: round; }
.h-apr { fill: none; stroke: var(--ink); stroke-opacity: .6; stroke-width: 1.3; stroke-dasharray: 3 2.6; }
.h-mk:hover .h-city, .h-mk:hover .h-cap-o { stroke: var(--orange); }
.h-mk:hover .h-bt { fill: var(--redBg); }
.h-mk.h-now .h-bt { animation: h-beat 1.1s ease-in-out infinite; }
@keyframes h-beat { 50% { stroke-width: 5; } }
.h-flash .h-hitc { animation: h-ring 1.6s ease-out; }
@keyframes h-ring { 0% { stroke: var(--orange); stroke-width: 0; stroke-opacity: 1; } 40% { stroke: var(--orange); stroke-width: 10; stroke-opacity: .8; } 100% { stroke: var(--orange); stroke-width: 2; stroke-opacity: 0; } }
.h-pulse { fill: none; stroke: var(--orange); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: h-pul 1.6s ease-out forwards; }
@keyframes h-pul { from { transform: scale(.6); opacity: 1; } to { transform: scale(3); opacity: 0; } }
/* подписи: белый ореол, размер шрифта — inline style (его задаёт модуль) */
.h-lab { fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.h-lab-terr { fill: var(--c); stroke-width: 3.6px; }
.h-lab-sea { fill: var(--blue); fill-opacity: .8; stroke: var(--h-sea); stroke-width: 2.4px; }
.h-lab-lake, .h-lab-river { fill: var(--blue); fill-opacity: .9; }
.h-lab-range { fill: var(--warn); }
.h-lab-region { fill: var(--muted); }
.h-lab-camp { fill: var(--c); stroke-width: 3.4px; }
.h-lab.h-hi { fill: var(--orange); }
.h-lab[data-hid] { pointer-events: auto; cursor: pointer; }   /* щелчок по подписи — как по объекту */
.h-mq .h-lab[data-hid] { pointer-events: none; }   /* в «Найдите на карте» подпись открытой цели не перехватывает касание соседней */
/* выключенные слои: m.show('rivers', false) */
.h-no-kz .h-kz, .h-no-grid .h-grid, .h-no-mountains .h-mtn, .h-no-mountains .h-mtn-h, .h-no-rivers .h-riv, .h-no-lakes .h-lake { display: none; }
/* походы */
.h-camp path { pointer-events: none; }
.h-camp path.h-camp-hit { fill: none; stroke: transparent; stroke-width: 16; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.h-camp path.h-camp-nohit { fill: none; stroke: none; }   /* стрелка без card и pick: иначе изогнутый путь заливается чёрным */
.h-camp-cas { fill: none; stroke: #fff; stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .9; }
.h-camp-l { fill: none; stroke: var(--c); stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }
.h-camp-h { fill: var(--c); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.h-retreat .h-camp-l { stroke-dasharray: 9 6; stroke-width: 3.2; }
.h-retreat .h-camp-h { fill: #fff; stroke: var(--c); stroke-width: 2.2; }
/* переселение (move: true): пунктир из точек, наконечник с белой серединой */
.h-move .h-camp-l { stroke-dasharray: 0.1 7.5; stroke-width: 4.6; }
.h-move .h-camp-cas { stroke-width: 7; stroke-opacity: .75; }
.h-move .h-camp-h { fill: #fff; stroke: var(--c); stroke-width: 2.4; }
/* железная дорога (rail: true): тёмная линия с белыми «шпалами», без наконечника */
.h-rail .h-camp-cas { stroke: var(--c); stroke-width: 5.2; stroke-opacity: 1; stroke-linecap: butt; }
.h-rail .h-camp-l { stroke: #fff; stroke-width: 2.2; stroke-dasharray: 8 8; stroke-linecap: butt; }
.h-rail .h-camp-h { display: none; }
.h-tl-tkm { opacity: .5; }
.h-tl-tl.h-tl-ml { font-size: 10px; opacity: .7; }   /* подписи месяцев на приближенной ленте */
/* путь личности */
.h-rt path { pointer-events: none; }
.h-rt-all { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-dasharray: 1.5 6; stroke-linecap: round; stroke-opacity: .7; }
.h-rt-done { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.h-rt-stop circle { fill: #fff; stroke: var(--c); stroke-width: 2; }
.h-rt-stop text { font: 800 9.5px var(--font); fill: var(--c); text-anchor: middle; pointer-events: none; }
.h-rt-stop.h-past circle { fill: var(--c); }
.h-rt-stop.h-past text { fill: #fff; }
.h-rt-stop.h-cur circle { stroke: var(--ink); stroke-width: 2.4; }
.h-rt-fig { color: var(--ink); --h-fa: var(--c); pointer-events: none; }
.h-rt-fc { fill: #fff; stroke: var(--c); stroke-width: 2.6; filter: drop-shadow(0 2px 3px rgb(20 20 40 / .25)); }
.h-rt-fig .h-fa { fill: var(--c); }
.h-rt-fig .h-fs { stroke: var(--c); }
/* интерфейс поверх карты */
.h-ui { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.h-ui > * { pointer-events: auto; }
.h-zoom { position: absolute; top: 10px; left: 10px; display: grid; gap: 6px; }
.h-zoom button { width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgb(20 20 40 / .1); font-size: 19px; font-weight: 800; line-height: 1; display: grid; place-items: center; color: var(--ink); padding: 0; }
.h-zoom button:hover { border-color: #C9CCD5; }
.h-approx { position: absolute; left: 10px; bottom: 10px; display: inline-flex; gap: 6px; align-items: center; background: rgb(255 255 255 / .94); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; color: var(--muted); pointer-events: none; }
.h-approx svg { width: 16px; height: 10px; }
.h-scale { position: absolute; right: 10px; bottom: 10px; display: grid; justify-items: end; gap: 1px; font-size: 11px; font-weight: 700; color: var(--muted); background: rgb(255 255 255 / .88); border-radius: 8px; padding: 3px 8px 4px; pointer-events: none; }
.h-scale i { display: block; height: 5px; border: 1.5px solid var(--muted); border-top: 0; }
.h-pop { position: absolute; top: 10px; right: 10px; z-index: 5; width: min(330px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 24px rgb(20 20 40 / .16); padding: 14px 16px; }
.h-pop-b { display: grid; gap: 8px; }
@media (max-width: 560px) { .h-pop { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 64%; } }
.h-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--sub); font-size: 18px; font-weight: 700; line-height: 1; color: var(--muted); display: grid; place-items: center; padding: 0; }
.h-x:hover { color: var(--ink); }
/* шторка «сравнить два момента» */
.h-cmp-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.h-cmp { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.h-cmp-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 3px solid #fff; box-shadow: 0 0 0 1px rgb(20 20 40 / .18); }
.h-cmp-h { pointer-events: auto; position: absolute; top: 50%; left: -1.5px; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 2px solid var(--orange); color: var(--orange); display: grid; place-items: center; padding: 0; touch-action: none; cursor: ew-resize; box-shadow: 0 2px 8px rgb(20 20 40 / .2); }
.h-cmp-a, .h-cmp-b { position: absolute; top: 10px; font-size: 12.5px; font-weight: 800; background: rgb(255 255 255 / .95); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.h-cmp-a { left: 54px; color: var(--ink); }
.h-cmp-b { right: 10px; color: var(--orange); }

/* ---------- Карточки ---------- */
.h-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; min-width: 0; align-content: start; }
.h-ct { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; padding-right: 28px; }
.h-card .h-ct { padding-right: 0; }
.h-chip-y { justify-self: start; display: inline-block; background: var(--peach); color: var(--orange); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.h-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 12px; font-size: 14px; line-height: 1.5; }
.h-dl dt { color: var(--muted); font-size: 12.5px; font-weight: 700; padding-top: 1px; }
.h-dl dd { margin: 0; min-width: 0; }
@media (max-width: 420px) { .h-dl { grid-template-columns: minmax(0, 1fr); gap: 1px; } .h-dl dd { margin-bottom: 6px; } }
.h-sides { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.h-side { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.h-side i, .h-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.h-vs { color: var(--muted); font-weight: 800; }
.h-confuse { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1.5px solid #FFD8C8; border-radius: 12px; padding: 9px 12px; }
.h-cx { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.h-cap { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--orange); }
.h-confuse p { margin: 1px 0 0; font-size: 13.5px; line-height: 1.5; }
.h-cap2 { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.h-note-a { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.h-note-a::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px dashed var(--muted); }
.h-pc-top { display: flex; gap: 12px; align-items: center; }
.h-pc-info { display: grid; gap: 2px; min-width: 0; }
.h-role { margin: 0; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.h-ava { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--peach); display: grid; place-items: center; padding: 6px 0 2px; overflow: hidden; }
.h-ava .h-fig { height: 100%; width: auto; }
.h-deeds { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; line-height: 1.5; }
.h-sc-top { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; align-items: start; }
.h-sc-top > div:first-child { display: grid; gap: 8px; min-width: 0; }
.h-sc-map svg { display: block; width: 100%; height: auto; border-radius: 10px; }
@media (max-width: 480px) { .h-sc-top { grid-template-columns: minmax(0, 1fr); } }
.h-badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; border: 1.5px solid currentColor; color: var(--orange); background: var(--peach2); font-variant-numeric: tabular-nums; }
/* силуэты */
.h-fig { display: block; color: var(--h-fc, var(--ink)); }
.h-fig .h-fa { fill: var(--h-fa, var(--orange)); }
.h-fig .h-fs { stroke: var(--h-fa, var(--orange)); }

/* ---------- Лента времени ---------- */
.h-tl { display: grid; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.h-tl-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.h-tl-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.h-tl-y { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.h-tl-c { font-size: 13px; font-weight: 800; color: var(--orange); background: var(--peach2); border-radius: 999px; padding: 2px 10px; }
.h-tl-c:empty { display: none; }
.h-tl-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.h-tl-btns .btn { padding: 8px 12px; font-size: 13.5px; }
.h-tl-btns .h-play { min-width: 104px; }
.h-speed button { padding: 6px 9px; }
.h-tl-zoom { display: inline-flex; gap: 4px; }
.h-tl-zoom button { min-width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 800; font-size: 15px; padding: 0 8px; color: var(--ink); }
.h-tl-zoom button.h-wide { font-size: 12.5px; }
.h-tl-track { contain: layout paint; position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.h-tl-track:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.h-tl-svg { display: block; width: 100%; height: 104px; overflow: visible; }
.h-era rect { fill: var(--c); fill-opacity: .16; stroke: var(--c); stroke-opacity: .45; }
.h-era-t { font: 700 11px var(--font); fill: var(--ink); pointer-events: none; }
.h-tl-ax { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1.5; }
.h-tl-tk { stroke: var(--ink); stroke-opacity: .45; }
.h-tl-tl { font: 600 11px var(--font); fill: var(--muted); }
.h-tl-cap { font: 700 10.5px var(--font); fill: var(--muted); }
.h-ev { cursor: pointer; }
.h-ev-l { stroke: var(--c, var(--orange)); stroke-opacity: .45; }
.h-ev-d { fill: #fff; stroke: var(--c, var(--orange)); stroke-width: 2.4; }
.h-ev:hover .h-ev-d, .h-ev.h-sel .h-ev-d { fill: var(--c, var(--orange)); }
.h-tl-wc { font: 700 10px var(--font); fill: var(--muted); }
.h-wd path { fill: var(--blue); fill-opacity: .7; }
.h-wd { cursor: help; }
.h-tl-hl { stroke: var(--orange); stroke-width: 2; pointer-events: none; }
.h-tl-knob { fill: var(--orange); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 1px 2px rgb(20 20 40 / .3)); pointer-events: none; }
/* «Что происходит в …» */
.h-now { display: grid; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.h-tl .h-now { border: 0; padding: 10px 0 0; border-top: 1px solid var(--line); border-radius: 0; }
.h-now-t { margin: 0; font-size: 15px; font-weight: 800; }
.h-now-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 16px; }
.h-now-s { display: grid; gap: 6px; align-content: start; min-width: 0; }
.h-now-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; }
.h-now-l li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.h-now-l li .h-dot { align-self: flex-start; margin-top: .42em; }
.h-nm { min-width: 0; }   /* название и годы — одной строкой текста */
.h-now-l small { color: var(--muted); font-size: 12px; font-weight: 600; }
.h-now-l .h-mut { color: var(--muted); }
.h-evb { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; align-items: baseline; text-align: left; background: none; border: 0; padding: 3px 6px; margin: -3px -6px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; width: calc(100% + 12px); }
.h-evb:hover { background: var(--sub); }
.h-now-ev li.h-on .h-evb { background: var(--peach2); }
.h-evy { font-weight: 800; color: var(--orange); white-space: nowrap; font-variant-numeric: tabular-nums; }
.h-now-w .h-evy { color: var(--blue); }
.h-now-w li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; }
/* узкая колонка панели (4 колонки на 1440, длинные даты до н. э.): дата — строкой над текстом, ссылка на лабку не вылезает */
.h-now-s { container-type: inline-size; }
@container (max-width: 250px) { .h-now-w li, .h-evb { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.h-evb em { font-style: normal; font-size: 11px; font-weight: 800; background: var(--lime); color: #000; border-radius: 999px; padding: 1px 8px; }

/* ---------- Путь личности ---------- */
.h-route { display: grid; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.h-rt-top { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.h-rt-top .h-ava { width: 48px; height: 48px; padding: 4px 0 0; }
.h-rt-info { display: grid; min-width: 0; flex: 1 1 140px; }
.h-rt-info b { font-size: 15px; font-weight: 800; }
.h-rt-cnt { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.h-rt-ctr { display: flex; gap: 6px; }
.h-rt-ctr .btn { padding: 8px 12px; }
.h-rt-ctr .h-play { min-width: 104px; }
.h-rt-sw { font-size: 13px; }
.h-rt-bar { overflow-x: auto; padding: 2px 0; }
.h-rt-bin { position: relative; height: 54px; margin: 0 26px; }
.h-rt-bin::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px; background: var(--line); border-radius: 99px; }
.h-rt-fill { position: absolute; left: 0; top: 13px; height: 4px; width: 0; background: var(--orange); border-radius: 99px; }
.h-rt-s { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 3px; background: none; border: 0; padding: 0; }
.h-rt-n { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.h-rt-s:hover .h-rt-n { border-color: var(--orange); }
.h-rt-s.h-past .h-rt-n { border-color: var(--orange); color: var(--orange); }
.h-rt-s.h-cur .h-rt-n { background: var(--orange); border-color: var(--orange); color: #fff; }
.h-rt-d { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.h-rt-card { background: var(--peach2); border-left: 4px solid var(--orange); border-radius: 12px; padding: 10px 14px; display: grid; gap: 4px; }
.h-rt-ch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.h-rt-ch b { font-size: 15px; }
.h-rt-card p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* ---------- Битва по фазам ---------- */
.h-b-box { position: relative; }
@media (max-width: 1100px) { .h-battle > .lay > .col:first-child { order: 2; } }
.h-b-svg { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; }
.h-b-tag { position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; font-weight: 700; color: var(--muted); background: rgb(255 255 255 / .92); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; pointer-events: none; }
@media (max-width: 560px) { .h-b-tag { position: static; display: table; margin: 0 0 8px 10px; } }   /* на телефоне плашка под схемой: поверх схемы она закрывала отряды и подписи в левом нижнем углу */
.h-b-rng { order: -1; flex: 1 1 100%; margin: 2px 0 4px; -webkit-appearance: none; appearance: none; height: 24px; background: transparent; cursor: pointer; }
.h-b-rng::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--orange) var(--p, 0%), #E3E5EA var(--p, 0%)); }
.h-b-rng::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); box-shadow: 0 1px 3px rgb(20 20 40 / .25); }
.h-b-rng::-moz-range-track { height: 6px; border-radius: 99px; background: #E3E5EA; }
.h-b-rng::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--orange); }
.h-b-rng::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); }
.h-b-rng:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.h-b-side { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--sub); }
.h-b-side b { display: block; font-size: 14px; }
.h-b-side small { display: block; font-size: 12.5px; color: var(--muted); }
.h-b-sides { gap: 8px; }
.h-b-win { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.h-b-field { fill: rgb(184 106 0 / .05); }
.h-tr-rw { fill: none; stroke: rgb(47 107 240 / .24); stroke-linecap: round; stroke-linejoin: round; }
.h-tr-rl { fill: none; stroke: rgb(47 107 240 / .5); stroke-width: 2; stroke-dasharray: 12 9; stroke-linecap: round; }
.h-tr-hl1 { fill: rgb(184 106 0 / .16); } .h-tr-hl2 { fill: rgb(184 106 0 / .1); } .h-tr-hl3 { fill: rgb(184 106 0 / .06); }
.h-tr-hills ellipse { stroke: rgb(184 106 0 / .35); stroke-width: 1; }
.h-tr-mt { fill: rgb(184 106 0 / .3); stroke: rgb(184 106 0 / .65); stroke-width: 1.3; stroke-linejoin: round; }
.h-tr-snow { fill: #fff; }
.h-tr-tree { fill: rgb(24 145 90 / .5); stroke: rgb(24 145 90 / .8); stroke-width: 1.2; }
.h-tr-trunk { stroke: rgb(24 145 90 / .8); stroke-width: 2; }
.h-tr-sw { stroke: rgb(24 145 90 / .65); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.h-tr-rv { fill: none; stroke: rgb(184 106 0 / .28); stroke-width: 18; stroke-linecap: round; }
.h-tr-rv2 { fill: none; stroke: rgb(184 106 0 / .75); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.h-tr-tc { fill: none; stroke: var(--ink); stroke-opacity: .6; stroke-width: 3; stroke-linejoin: miter; }
.h-tr-at { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 2; }
.h-tr-att { fill: var(--ink); fill-opacity: .55; }
.h-tr-wl { fill: none; stroke: rgb(107 111 123 / .42); stroke-linejoin: round; stroke-linecap: round; }
.h-tr-wc { fill: none; stroke: var(--ink); stroke-opacity: .4; stroke-width: 1.4; stroke-dasharray: 7 4; }
.h-tr-tw { fill: #fff; stroke: var(--muted); stroke-width: 2; }
.h-tr-gt { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.h-tr-gd { fill: var(--warn); fill-opacity: .4; stroke: var(--ink); stroke-width: 1.6; }
.h-tr-cd { fill: rgb(107 111 123 / .14); stroke: var(--muted); stroke-width: 3; }
.h-tr-keep { fill: rgb(107 111 123 / .32); stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; }
.h-tr-cp { fill: #fff; stroke: var(--muted); stroke-width: 1.6; }
.h-tr-cpd { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.h-tr-rd { fill: none; stroke: rgb(184 106 0 / .22); stroke-width: 9; stroke-linecap: round; }
.h-tr-hs { fill: #fff; stroke: var(--muted); stroke-width: 1.5; }
.h-tr-ar { fill: rgb(107 111 123 / .08); stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 6 5; }
.h-tr-t { font: italic 600 calc(13px * var(--bs, 1)) var(--font); fill: var(--muted); paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.h-u { transition: opacity .3s; cursor: default; }
.h-u-ring { fill: #fff; filter: drop-shadow(0 1px 2px rgb(20 20 40 / .25)); }
.h-u-d { fill: var(--c); }
.h-u-i { fill: #fff; }
.h-u-t { font: 800 12.5px var(--font); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3.6px; stroke-linejoin: round; }
.h-u-n { font: 800 11px var(--font); fill: var(--c); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.h-u.h-rout .h-u-d { fill-opacity: .45; }
.h-u.h-rout .h-u-ring { stroke: var(--c); stroke-width: 2; stroke-dasharray: 3 3; }
.h-fx-cas { fill: none; stroke: #fff; stroke-width: calc(11px * var(--bs, 1)); stroke-linecap: round; stroke-opacity: .85; }
.h-fx-l { fill: none; stroke: var(--c); stroke-width: calc(6px * var(--bs, 1)); stroke-linecap: round; }
.h-fx-h { fill: var(--c); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.h-fx-retreat .h-fx-l { stroke-dasharray: 11 8; stroke-width: calc(4px * var(--bs, 1)); }
.h-fx-retreat .h-fx-h { fill: #fff; stroke: var(--c); stroke-width: 2.5; }
.h-fx-arrow .h-fx-l { stroke-width: calc(3.5px * var(--bs, 1)); }
.h-fx-ring { fill: none; stroke: var(--c); stroke-width: calc(4px * var(--bs, 1)); stroke-dasharray: 14 10; animation: h-dash 2.4s linear infinite; }
@keyframes h-dash { to { stroke-dashoffset: -48; } }
.h-fx-rh { fill: var(--c); }
.h-fx-br { fill: var(--bad); fill-opacity: .85; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.h-fx-rb { fill: var(--muted); }
.h-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: h-flick .8s ease-in-out infinite alternate; }
@keyframes h-flick { from { transform: scale(1, 1); } to { transform: scale(.88, 1.14); } }
.h-fire-o { fill: var(--orange); }
.h-fire-i { fill: var(--lime); }
.h-fx-pole { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.h-fx-flag { fill: var(--c); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.h-fx-bl { fill: var(--orange); stroke: var(--lime); stroke-width: 2; stroke-linejoin: round; }
.h-fx-note { font: 800 calc(14px * var(--bs, 1)) var(--font); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .h-fire, .h-fx-ring, .h-mk.h-now .h-bt { animation: none; } }

/* ---------- Игры ---------- */
.h-chrono, .h-mq, .h-fact, .h-twins, .h-chain { display: grid; gap: 10px; min-width: 0; }
.h-ch-slots { list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px; border: 1.5px dashed #D9DBE2; border-radius: 12px; }
.h-ch-slot { display: flex; gap: 8px; align-items: center; min-height: 34px; flex-wrap: wrap; }
.h-ch-n { width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: none; }
.h-ch-ph { color: #B9BCC6; font-weight: 800; }
.h-ch-y { font-size: 12.5px; font-weight: 800; color: var(--orange); white-space: nowrap; }
.h-ch-tl { display: grid; gap: 8px; }
.h-ch-svg { display: block; width: 100%; height: auto; background: var(--scene); border-radius: 12px; }
.h-ch-st { stroke: var(--muted); stroke-opacity: .5; }
.h-ch-dot { fill: var(--orange); stroke: #fff; stroke-width: 2; }
.h-ch-yt { fill: var(--orange); paint-order: stroke; stroke: var(--scene, #FFF8F5); stroke-width: 4px; stroke-linejoin: round; }
.h-ch-lt { fill: var(--ink); paint-order: stroke; stroke: var(--scene, #FFF8F5); stroke-width: 4px; stroke-linejoin: round; }
.h-ch-v { list-style: none; margin: 0; padding: 4px 0 4px 6px; display: grid; position: relative; }
.h-ch-v::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.h-ch-v li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.45; }
.h-ch-v li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--orange); position: relative; top: 1px; }
.h-ch-v b { color: var(--orange); margin-right: 6px; white-space: nowrap; }
.h-mq-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.h-mq-ask { font-size: 16px; font-weight: 700; margin-right: auto; }
.h-mq-ask b { color: var(--orange); }
.h-mq-sc { font-size: 13px; font-weight: 800; color: var(--muted); }
.h-q-ok .h-city, .h-q-ok .h-cap-o, .h-q-ok .h-bt { stroke: var(--ok); fill: var(--limeBg); }
.h-q-ok .h-site, .h-q-ok .h-kur { fill: var(--ok); }
.h-q-bad .h-city, .h-q-bad .h-cap-o, .h-q-bad .h-bt { stroke: var(--bad); fill: var(--redBg); }
.h-q-bad .h-site, .h-q-bad .h-kur { fill: var(--bad); }
.h-ter.h-q-ok .h-ter-f { stroke: var(--ok); fill-opacity: .38; }
.h-ter.h-q-bad .h-ter-f { stroke: var(--bad); fill-opacity: .38; }
.h-fc-head { display: flex; gap: 6px 12px; align-items: baseline; flex-wrap: wrap; }
.h-fc-head b { font-size: 15px; font-weight: 800; }
.h-fc-slots { display: grid; gap: 6px; background: var(--peach2); border: 1.5px solid #FFD8C8; border-radius: 14px; padding: 10px 12px; }
.h-fc-slot, .h-fc-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 34px; }
.h-fc-row { align-items: start; }
.h-fc-k { font-size: 11.5px; font-weight: 800; color: var(--orange); text-transform: uppercase; letter-spacing: .06em; }
.h-fc-pk { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 8px; }
.h-fc-v { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.h-fc-ok { font-size: 12.5px; color: var(--ok); font-weight: 700; }
.h-fc-pool { display: grid; gap: 8px; }
@media (max-width: 560px) { .h-fc-slot, .h-fc-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .h-fc-pk { padding-top: 0; } }
.h-tw-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.h-tw-b { display: flex; gap: 10px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; min-height: 64px; min-width: 0; }
.h-tw-b:hover:not(:disabled) { border-color: var(--blue); }
.h-tw-b:disabled { cursor: default; }
.h-tw-b b { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.h-tw-b small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.h-tw-b .h-ava { width: 44px; height: 44px; padding: 4px 0 0; }
.h-tw-b.right { background: var(--limeBg); border-color: var(--limeLine); }
.h-tw-b.wrong { background: var(--redBg); border-color: var(--redLine); }
.h-tw-card { background: var(--sub); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; }
.h-tw-q { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; }
.h-tw-why { background: var(--peach2); border-left: 4px solid var(--orange); border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.55; }
@media (max-width: 420px) { .h-tw-b { padding: 10px; gap: 8px; } .h-tw-b .h-ava { display: none; } }
.h-cg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
.h-cg-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.h-cg-c { position: relative; z-index: 1; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.h-cg-c:hover:not(:disabled) { border-color: #C9CCD5; }
.h-cg-c[aria-pressed="true"] { border-color: var(--blue); background: var(--blueBg); }
.h-cg-c.h-linked { background: var(--sub); }
.h-cg-c:disabled { cursor: default; }
.h-cg-svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; overflow: visible; }
.h-cg-ar path { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; }
.h-cg-ar .h-cg-hd { fill: var(--blue); stroke: none; }
.h-cg-ar.h-ok path { stroke: var(--ok); } .h-cg-ar.h-ok .h-cg-hd { fill: var(--ok); }
.h-cg-ar.h-bad path { stroke: var(--bad); } .h-cg-ar.h-bad .h-cg-hd { fill: var(--bad); }
.h-cg-ar.h-miss path { stroke: var(--ok); stroke-dasharray: 5 4; stroke-opacity: .85; } .h-cg-ar.h-miss .h-cg-hd { fill: var(--ok); stroke: none; }
@media (max-width: 560px) { .h-cg { column-gap: 30px; } .h-cg-c { font-size: 12.5px; padding: 8px 9px; } }

/* ---------- Мини-карта для заданий (Lab.hist.miniMap) ---------- */
.h-mm { background: #fff; }
.h-mm-sea { fill: var(--h-sea); }
.h-mm-land { fill: var(--h-land); stroke: rgb(47 107 240 / .38); stroke-width: .8; }
.h-mm-mtn { fill: rgb(184 106 0 / .11); }
.h-mm-lake { fill: var(--h-sea); stroke: rgb(47 107 240 / .38); stroke-width: .7; }
.h-mm-riv { fill: none; stroke: rgb(47 107 240 / .62); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.h-mm-riv2 { fill: none; stroke: rgb(47 107 240 / .35); stroke-width: .9; }
.h-mm-kz { fill: none; stroke: var(--muted); stroke-opacity: .7; stroke-dasharray: 4 3; stroke-width: 1; }
.h-mm-ter { fill: var(--c); fill-opacity: .32; stroke: var(--c); stroke-width: 2; stroke-dasharray: 7 4; stroke-linejoin: round; }
.h-mm-cas { fill: none; stroke: #fff; stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.h-mm-al { fill: none; stroke: var(--c); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.h-retreat .h-mm-al { stroke-dasharray: 8 6; }
.h-mm-ah { fill: var(--c); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.h-mm-rt { font-size: 11px; font-style: italic; font-weight: 600; fill: var(--blue); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.h-mm-st { font-size: 11.5px; font-style: italic; font-weight: 600; fill: var(--blue); fill-opacity: .85; paint-order: stroke; stroke: var(--h-sea); stroke-width: 2px; }
.h-mm-ct { font-size: 12px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.h-mm-mk circle { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.h-mm-mk text { font-size: 12px; font-weight: 800; fill: var(--ink); }
.h-mm-note rect { fill: rgb(255 255 255 / .93); stroke: var(--line); }
.h-mm-note text { font-size: 11px; font-weight: 700; fill: var(--muted); }
.h-mm-frame { fill: none; stroke: var(--line); stroke-width: 2; }
.h-tl-era0 { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 3 2; }
.h-mm-lead { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-opacity: .75; }
.h-mm-pt { fill: var(--ink); stroke: #fff; stroke-width: 1.2; }
.h-nw { white-space: nowrap; }
/* значок «рудник»: скрещённые молоты */
.h-mine { fill: #fff; stroke: var(--warn); stroke-width: 2; }
.h-mine-x { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.h-mine-h { fill: var(--ink); }
.h-mk:hover .h-mine { stroke: var(--orange); }
.h-q-ok .h-mine { stroke: var(--ok); fill: var(--limeBg); }
.h-q-bad .h-mine { stroke: var(--bad); fill: var(--redBg); }
/* лента: эпохи в два ряда; близкие засечки — кружок с числом */
.h-era-t.h-era-t2 { font-size: 9.5px; }
.h-ev-cl { fill: #fff; stroke: var(--orange); stroke-width: 2; }
.h-ev-n { font: 800 10px var(--font); fill: var(--orange); pointer-events: none; }
.h-evc:hover .h-ev-cl, .h-evc.h-sel .h-ev-cl { fill: var(--orange); }
.h-evc:hover .h-ev-n, .h-evc.h-sel .h-ev-n { fill: #fff; }
/* мини-карта: стрелки крупнее на узкой ширине (--as), выделение одного объекта (highlight) */
.h-mm-arr .h-mm-cas { stroke-width: calc(6.5px * var(--as, 1)); }
.h-mm-arr .h-mm-al { stroke-width: calc(3.4px * var(--as, 1)); }
.h-mm-lo { opacity: .32; }
.h-mm-ter.h-mm-hi { fill-opacity: .5; stroke-width: 3; }
.h-mm-arr.h-mm-hi .h-mm-al { stroke-width: calc(4.6px * var(--as, 1)); }
.h-mm-mk.h-mm-hi circle { fill: var(--lime); stroke-width: 2.6; }
.h-mm-hl { font-size: 13px; font-weight: 800; fill: var(--c, var(--ink)); paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }
/* указатель года — HTML-слой с transform (двигается без перерисовки SVG ленты) */
.h-tl-pin { position: absolute; left: 0; top: 2px; width: 0; height: 60px; pointer-events: none; will-change: transform; z-index: 1; }
.h-tl-pin i { position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--orange); }
.h-tl-pin b { position: absolute; left: -9px; top: 47px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 1px 2px rgb(20 20 40 / .3); box-sizing: border-box; }

/* ---------- Базы всемирной истории (base: 'mir' | 'evropa' | 'vostok' | 'dv' | 'amerika') ---------- */
/* суша — все страны: заливка без обводки, берег и современные границы стран — отдельными линиями */
.h-land-f { stroke: none; }
.h-coast { fill: none; stroke: rgb(47 107 240 / .38); stroke-width: .8; stroke-linejoin: round; pointer-events: none; }
.h-bord { fill: none; stroke: rgb(107 111 123 / .4); stroke-width: .7; stroke-linejoin: round; pointer-events: none; }
.h-no-borders .h-bord { display: none; }
.h-lab-ocean { fill: var(--blue); fill-opacity: .6; stroke: var(--h-sea); stroke-width: 2.4px; }
.h-lab-strait { fill: var(--blue); fill-opacity: .8; stroke: var(--h-sea); stroke-width: 2.2px; }
/* территория из контуров стран (country): заливка без обводки, пунктир — только по внешнему краю набора */
.h-ter-nb { stroke: none; }
.h-ter-o { fill: none; stroke: var(--c); stroke-width: 1.7; stroke-opacity: .9; stroke-dasharray: 7 4; stroke-linejoin: round; pointer-events: none; }
.h-ter:hover .h-ter-o, .h-ter.h-hi .h-ter-o { stroke-width: 2.4; }
.h-ter.h-q-ok .h-ter-o { stroke: var(--ok); }
/* фоновая территория (pick: false, фон mapQuiz): не нажимается */
.h-ter-np .h-ter-f { pointer-events: none; cursor: default; }
.h-ter-np:hover .h-ter-f { fill-opacity: .2; stroke-width: 1.7; }
.h-ter-np.h-ter-l:hover .h-ter-f { fill-opacity: .1; }
/* свой цвет значка: m.city(id, { color }) */
.h-mk-c .h-city { fill: var(--c); stroke: var(--ink); stroke-width: 1.6; }
.h-mk-c .h-cap-o { stroke: var(--c); }
.h-mk-c .h-cap-i { fill: var(--c); }
.h-mk-c .h-site, .h-mk-c .h-kur { fill: var(--c); }
.h-mk-c .h-kur-b { stroke: var(--c); }
.h-mk-c .h-bt, .h-mk-c .h-sab, .h-mk-c .h-mine { stroke: var(--c); }
/* линия фронта: m.front(id, keys, opts) */
.h-front path { pointer-events: none; }
.h-front path.h-front-hit { fill: none; stroke: transparent; stroke-width: 16; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.h-front path.h-front-nohit { fill: none; stroke: none; }
.h-front-cas { fill: none; stroke: #fff; stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .85; }
.h-front-l { fill: none; stroke: var(--c); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.h-front-t { fill: var(--c); stroke: #fff; stroke-width: .9; stroke-linejoin: round; }
/* мини-карта: границы стран, территории из контуров стран */
.h-mm-bord { fill: none; stroke: rgb(107 111 123 / .45); stroke-width: .7; }
.h-mm-nb { stroke: none; }
.h-mm-coast { fill: none; stroke: rgb(47 107 240 / .38); stroke-width: .8; stroke-linejoin: round; }
.h-mm-ter-o { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 7 4; stroke-linejoin: round; }
/* ссылка на готовую лабку (href у события, мира, карточки) */
.h-lablink { justify-self: start; display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 800; color: var(--blue); text-decoration: none; border: 1.5px solid #CFDCFB; background: var(--blueBg, #EEF3FE); border-radius: 12px; padding: 3px 10px 3px 8px; line-height: 1.35; }
.h-lablink::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h12v12M21 3 10 14M17 14v6H4V7h6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h12v12M21 3 10 14M17 14v6H4V7h6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.h-lablink:hover { border-color: var(--blue); }
.h-now-l li.h-hasl { flex-wrap: wrap; row-gap: 3px; }
.h-now-l li.h-hasl .h-lablink { margin-left: 2px; }
.h-now-w .h-lablink { margin-top: 3px; vertical-align: middle; }
/* схема союзов и блоков: Lab.hist.blocs */
.h-blocs { display: grid; gap: 10px; min-width: 0; }
.h-bl-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.h-bl-t { margin: 0; font-size: 15px; font-weight: 800; }
.h-bl-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.h-bl-c { border: 1.5px solid var(--c); border-radius: 14px; background: #fff; padding: 10px 12px 12px; display: grid; gap: 8px; align-content: start; min-width: 0; transition: opacity .3s; }
.h-bl-h { display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; }
.h-bl-h i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); align-self: center; flex: none; }
.h-bl-h b { font-size: 15px; font-weight: 800; }
.h-bl-h small { color: var(--muted); font-size: 12px; font-weight: 700; }
.h-bl-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.h-bl-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.h-bl-m { display: inline-grid; gap: 0; text-align: left; border: 1.5px solid var(--line); background: var(--sub); border-radius: 10px; padding: 5px 9px; font: inherit; color: var(--ink); cursor: pointer; }
.h-bl-m b { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.h-bl-m small { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.h-bl-m:hover { border-color: var(--c); }
.h-bl-m[aria-pressed="true"] { border-color: var(--c); background: #fff; box-shadow: inset 0 0 0 1.5px var(--c); }
.h-bl-out .h-bl-m b { text-decoration: line-through; color: var(--muted); }
.h-bl-pre { display: none; }
.h-bl-dim .h-bl-pre { display: list-item; opacity: .42; }
.h-bl-dim .h-bl-pre .h-bl-m { border-style: dashed; }
.h-bl-c.h-bl-off { opacity: .42; }
/* морская местность в Lab.hist.battle */
.h-tr-sea { fill: #DDE5F7; }
.h-tr-wave { fill: none; stroke: rgb(47 107 240 / .32); stroke-width: 1.6; stroke-linecap: round; }
.h-tr-shore { fill: none; stroke: rgb(47 107 240 / .13); stroke-width: 20; stroke-linejoin: round; }
.h-tr-land { fill: #F7EEE3; stroke: rgb(47 107 240 / .5); stroke-width: 2; stroke-linejoin: round; }
.h-tr-sts { fill: none; stroke: rgb(47 107 240 / .5); stroke-linecap: butt; stroke-linejoin: round; }
.h-tr-stw { fill: none; stroke: #DDE5F7; stroke-linecap: butt; stroke-linejoin: round; }
.h-rt-ch .h-chip-y:empty { display: none; }   /* остановка без даты — без пустого значка */