:root { color-scheme: light; --navy:#18334a; --muted:#4e6e87; --line:#d4dadd; --pale:#f4f8fa; --yellow:#fecc5c; --orange:#ff7f24; --red:#e31a1c; font-family: Inter, Roboto, Arial, sans-serif; }
body .topbar nav a, body .topbar nav button { font-size:14px; line-height:20px; }
body .filters:not(.collapsed) { top:30px; padding:0; max-height:none; overflow:visible; background:transparent; box-shadow:none; }
body .filters:not(.collapsed) .filters-heading { display:none; }
body .filters:not(.collapsed) .region-field { position:relative; margin:0; }
body .filters:not(.collapsed) .region-field > span { display:none; }
body .filters:not(.collapsed) .region-field select { height:40px; margin:0; padding:10px 40px 10px 12px; border:0; border-radius:0; appearance:none; color:#18334a80; font-size:14px; letter-spacing:.15px; }
body .filters:not(.collapsed) .region-field::after { position:absolute; top:7px; right:10px; color:var(--navy); font-size:22px; line-height:24px; content:"⌕"; pointer-events:none; }
body .filters:not(.collapsed) .date-fields { margin:14px 0; }
body .filters:not(.collapsed) section { margin:14px 0 0; padding:0; border:0; }
body .filters:not(.collapsed) section .eyebrow { margin:0 0 8px; color:var(--navy); font-size:14px; font-weight:500; line-height:20px; letter-spacing:.15px; }
body .filters:not(.collapsed) section:nth-of-type(2) .eyebrow { margin-bottom:4px; }
body .filters:not(.collapsed) .severity-list { gap:2px; }
body .filters:not(.collapsed) .severity-list label { min-height:28px; gap:8px; color:var(--navy); font-size:16px; line-height:24px; }
body .filters:not(.collapsed) .severity-list input { width:18px; height:18px; margin:0; flex:none; appearance:none; border:0; border-radius:3px; background:var(--yellow); }
body .filters:not(.collapsed) .severity-list input[value="3"] { background:var(--orange); }
body .filters:not(.collapsed) .severity-list input[value="4"] { background:var(--red); }
body .filters:not(.collapsed) .severity-list input:checked { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9 2.5 2.5L13 6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); }
body .filters:not(.collapsed) .severity-list .dot { display:none; }
body .filters:not(.collapsed) .severity-list .unavailable { color:#d1dee4; }
/* «Без пострадавших (нет данных)»: кастомный серый квадрат 18×18 (r3) вместо нативного disabled чекбокса */
body .filters:not(.collapsed) .severity-list .unavailable input { appearance:none; border:0; border-radius:3px; background:#e3e9ed; box-shadow:inset 0 0 0 1.5px #d1dee4; }
body .filters:not(.collapsed) .professional-toggle { height:auto; margin:14px 0 0; padding:16px 0 0; border-top:2px solid var(--pale); font-size:14px; font-weight:500; line-height:20px; letter-spacing:.15px; } /* DTP-40: надпись по центру между разделителями — 16px под верхним и 16px над нижним (margin у .quick-filters) */
body .filters:not(.collapsed) .filter-status { display:none; }
body .filters:not(.collapsed) #hide-filters { display:flex; position:absolute; top:0; right:-32px; border-radius:0 16px 16px 0; }
body .filters.collapsed { overflow:visible; }
body .filters.collapsed .filters-heading { height:20px; }
body .filters.collapsed .filters-heading .icon-button { display:none; }
body .filters.collapsed .filters-heading .eyebrow { display:block; margin:0; color:var(--navy); font-size:14px; font-weight:500; letter-spacing:.15px; }
body .filters.collapsed .date-fields { margin:8px 0 0; }
body .filters.collapsed .collapsed-summary { margin:20px 0 0; color:var(--navy); font-size:14px; line-height:20px; }
body .filters.collapsed #hide-filters { display:flex; position:absolute; bottom:-16px; left:50%; width:121px; height:32px; transform:translateX(-50%); border-radius:0; color:var(--navy); background:#ebeef0; font-size:14px; white-space:nowrap; }
body .advanced-filter { top:0; left:20px; padding:22px 30px; border-radius:0; box-shadow:none; }
body .advanced-filter .filters-heading { align-items:center; min-height:37px; padding-bottom:15px; border-bottom:2px solid var(--pale); }
body .advanced-filter h2 { margin:0; font-size:20px; line-height:20px; letter-spacing:.15px; }
body .advanced-type-heading { display:flex; align-items:center; gap:20px; margin:12px 0 8px; }
body .advanced-type-heading p { width:59px; margin:0; color:var(--navy); font-size:14px; font-weight:500; line-height:20px; letter-spacing:.15px; }
/* Поиск секции — наезжающий: приклеен к верху скролл-области, пункты уходят под него (DTP-24) */
body .advanced-filter .advanced-collapse .advanced-search { display:block; position:sticky; top:0; z-index:2; width:100%; height:33px; margin:10px 0 4px; padding:3px 32px 3px 12px; border:0; border-radius:4px; color:var(--navy); background:var(--pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318334a' stroke-width='1.8'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='m15 15 4 4'/%3E%3C/svg%3E") right 9px center/16px no-repeat; font-size:14px; line-height:20px; box-shadow:0 8px 10px -8px #18334a55; }
body .advanced-filter .advanced-tabs { display:none; }
/* Словари про-панели: две НЕЗАВИСИМЫЕ колонки (заполнение сверху вниз, разная высота) */
body .advanced-filter .advanced-options { display:block; columns:2; column-gap:30px; }
body .advanced-filter .advanced-options label { display:flex; align-items:center; min-height:38px; padding:7px 0; gap:8px; border:0; font-size:16px; line-height:24px; break-inside:avoid; }
body .advanced-filter .advanced-options input { appearance:none; width:18px; height:18px; margin:0; flex:none; border:0; border-radius:3px; background:#e3e9ed; }
body .advanced-filter .advanced-options input:checked { background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.5 3 3 5.5-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
body .filters:not(.collapsed) .statistics { position:static; display:flex; flex:none; flex-direction:column; align-items:stretch; width:auto; min-width:0; height:auto; margin:14px 0 0; padding:16px; gap:14px; border:0; border-radius:16px; box-shadow:none; background:var(--pale); }
body .statistics .place { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-width:0; }
body .statistics .place strong { font-size:24px; line-height:30px; }
body .statistics .place span { display:block; color:#18334a80; font-size:15px; line-height:22px; }
/* Замок — по центру строки заголовка; padding:0 перебивает .statistics button (8px 12px),
   из-за которого глиф съезжал вправо внутри кружка */
body .statistics .lock-button { margin-top:-1px; padding:0; }
body .statistics .counts { display:flex; justify-content:space-between; gap:12px; }
body .statistics .counts > div { display:grid; align-content:start; gap:2px; }
body .statistics .counts strong { font-size:26px; line-height:34px; }
body .statistics span { color:#18334a80; font-size:15px; line-height:22px; }
body .statistics .card-actions { display:flex; gap:8px; }
body .statistics .download-button { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; height:44px; border:0; border-radius:10px; color:var(--navy); background:#dee7ed; font-size:16px; font-weight:500; text-decoration:none; font-family:inherit; cursor:pointer; }
body .statistics .download-button svg { flex:none; width:20px; height:20px; }
body .statistics .download-button:hover { background:#d1dde5; }
body .statistics #chart-button { display:grid; place-items:center; flex:none; width:44px; height:44px; margin-left:0; padding:0; border-radius:10px; background:#dee7ed; }
body .statistics #chart-button svg { width:20px; height:20px; }
.lock-button { display:grid; flex:none; width:32px; height:32px; place-items:center; border:0; border-radius:50%; color:var(--navy); background:var(--pale); }
.lock-button svg { width:18px; height:20px; }
.lock-button .lock-closed { display:none; }
/* Оба новых замка рассчитаны на светлый круг: состояние показывает сама иконка (открытая #4E6E87 / закрытая #18334A) */
.lock-button.locked .lock-open { display:none; }
.lock-button.locked .lock-closed { display:block; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; color:var(--navy); background:var(--pale); } button, input { font:inherit; } button { cursor:pointer; }
.topbar { height:65px; display:flex; align-items:center; gap:20px; padding:0 20px; background:#fff; box-shadow:0 5px 15px #d4dadd; position:relative; z-index:3; }.brand { display:flex; width:176px; height:28px; align-items:center; text-decoration:none; }.brand img { display:block; width:170px; height:24px; }.topbar nav { display:flex; align-items:center; gap:20px; margin-left:auto; }.topbar a, .topbar nav button { color:var(--navy); text-decoration:none; background:none; border:0; padding:0; }.topbar nav #language { display:none; }.topbar .support { position:relative; width:195px; height:40px; padding:8px 20px; border:0; background:var(--navy); color:#fff !important; border-radius:10px; text-align:center; }.support::after { position:absolute; right:15px; bottom:-2px; left:15px; height:4px; border-radius:3px; background:linear-gradient(90deg,#65c0ee 0 77%,#d1dee4 77%); content:""; }
.map-page { min-height:100vh; position:relative; overflow:hidden; background:#e9eff1; }.leaflet-map, .yandex-map { position:absolute; inset:0; z-index:0; }.leaflet-container { font:inherit; }.leaflet-container svg:focus, .leaflet-interactive:focus { outline:0; }.leaflet-popup-content { color:var(--navy); line-height:1.45; }.hex-injured { color:#c75f14; }.hex-dead { color:var(--red); font-weight:600; }.leaflet-control-attribution { font-size:10px !important; }/* Канвы живут внутри хоста панелей Яндекса (рут карты — стековый контекст z0, снаружи
   канва легла бы поверх балуна): тепло 1500 — над тайлами (ground 501, при открытом
   балуне 601), под балуном (4204); маска 3000 — над точками (areas 1004/1205), под балуном */
.yandex-heat { position:absolute; z-index:1500; pointer-events:none; }.yandex-place-mask { position:absolute; inset:0; z-index:3000; pointer-events:none; }
.place-mask-canvas { position:absolute; inset:0; pointer-events:none; display:none; }
.filters, .statistics, .chart { position:absolute; z-index:1; background:#fff; box-shadow:0 4px 18px #18334a2b; border-radius:8px; }.filters { left:20px; top:15px; width:400px; padding:20px; max-height:calc(100vh - 100px); overflow:auto; }.filters section { border-top:1px solid var(--line); margin-top:20px; padding-top:16px; }.filters-heading { display:flex; justify-content:space-between; gap:10px; }.filters h1 { font-size:24px; margin:3px 0 0; }.eyebrow { margin:0 0 10px; color:var(--muted); font-size:14px; font-weight:600; }.icon-button { width:32px; height:32px; border:0; border-radius:50%; color:var(--navy); background:var(--pale); font-size:22px; line-height:1; }
.advanced-filter { position:absolute; z-index:2; top:20px; left:20px; width:min(400px, calc(100% - 40px)); max-height:calc(100vh - 104px); overflow:auto; padding:20px; border-radius:8px; background:#fff; box-shadow:0 4px 18px #18334a2b; }.advanced-filter h2 { margin:3px 0 0; font-size:22px; }.advanced-search { width:100%; margin:20px 0 12px; padding:11px; border:0; border-radius:5px; color:var(--navy); background:var(--pale); }.advanced-options { display:grid; gap:4px; }.advanced-options label { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--pale); }.advanced-options input { accent-color:var(--navy); }.advanced-filter .advanced-hint { padding:12px 0 2px; color:var(--muted); font-size:13px; }.tags button.active { color:#fff; background:var(--navy); }
.date-fields { margin:20px 0; }.date-range { display:flex; align-items:center; min-height:40px; border-radius:4px; color:var(--navy); background:var(--pale); }.date-range:hover, .date-range:focus-within { background:#e2f0f8; }.date-segments { display:flex; flex:1; min-width:0; align-items:center; padding-left:10px; }.date-seg { width:21px; padding:8px 0; border:0; color:inherit; background:transparent; font:inherit; font-size:14px; line-height:20px; text-align:center; font-variant-numeric:tabular-nums; }.date-seg:focus { outline:none; }.date-seg::placeholder { color:#18334a66; opacity:1; }.date-seg-year { width:36px; }.date-sep { flex:none; font-size:14px; line-height:20px; }.date-sep-dash { margin:0 4px; }.date-range-chevron { flex:none; display:flex; align-items:center; padding:8px 8px 8px 4px; border:0; color:inherit; background:transparent; cursor:pointer; }.date-range-chevron svg { width:24px; height:24px; transition:transform .15s ease; }.date-range-chevron:hover { color:var(--muted); }.date-range-chevron[aria-expanded="true"] svg { transform:rotate(180deg); }.date-menu { position:fixed; z-index:4; min-width:200px; max-width:calc(100vw - 24px); padding:6px 0; border-radius:8px; background:#fff; box-shadow:0 5px 15px var(--line); }.date-value { padding:10px 14px; color:var(--navy); background:#fff; font-size:16px; line-height:22px; cursor:pointer; }.date-value:hover { background:#e2f0f8; }.region-field { display:block; margin-bottom:20px; color:var(--muted); font-size:12px; }.region-field select { display:block; width:100%; margin-top:5px; padding:9px; border:1px solid var(--line); border-radius:5px; color:var(--navy); background:var(--pale); text-align:left; }
.participant-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }.participant-list button { display:grid; place-items:center; gap:3px; min-height:60px; padding:7px 4px; color:var(--navy); border:0; border-radius:8px; background:var(--pale); font-size:12px; transition:background .12s, color .12s; }.participant-list button:hover:not(.active) { background:#cfe3f2; }.participant-list img { width:24px; height:20px; object-fit:contain; }.participant-list button.active { color:#fff; background:var(--navy); }.participant-list button.active:hover { background:var(--navy); }.severity-list { display:grid; gap:9px; }.severity-list label { display:flex; align-items:center; gap:8px; border-radius:4px; font-size:15px; }.severity-list label:hover:not(:has(input:disabled)) { background:var(--pale); }.severity-list input { accent-color:var(--navy); }.dot { width:11px; height:11px; border-radius:50%; display:inline-block; }.light { background:var(--yellow); }.serious { background:var(--orange); }.fatal { background:var(--red); }.tags { display:flex; flex-wrap:wrap; gap:7px; }.tags button { border:0; border-radius:4px; padding:7px 9px; background:var(--pale); color:var(--navy); font-size:13px; }.filter-status { margin:16px 0 0; color:var(--muted); font-size:12px; }
.participant-list img[src$="/pedestrian.svg"], .participant-list img[src$="/cyclist.svg"], .participant-list img[src$="/motorcycle.svg"] { filter:brightness(0) saturate(100%) invert(16%) sepia(10%) saturate(2985%) hue-rotate(162deg) brightness(91%) contrast(88%); }.participant-list button.active img, .participant-list button.active img[src$="/pedestrian.svg"], .participant-list button.active img[src$="/cyclist.svg"], .participant-list button.active img[src$="/motorcycle.svg"] { filter:brightness(0) invert(1); }
.show-filters { position:absolute; left:20px; top:15px; z-index:2; border:0; border-radius:18px; padding:10px 16px; color:#fff; background:var(--navy); box-shadow:0 4px 12px #18334a55; }.leaflet-control-zoom { border:0 !important; box-shadow:0 3px 10px #18334a30 !important; }.leaflet-control-zoom a { width:40px !important; height:40px !important; border:0 !important; color:var(--navy) !important; line-height:38px !important; }

.mobile-menu-button { display:none; border:0; background:none; color:var(--navy); font-size:23px; }.mobile-menu { border:0; width:min(330px, 88vw); min-height:100svh; margin:0 0 0 auto; padding:28px; color:var(--navy); box-shadow:-8px 0 24px #18334a33; }.mobile-menu::backdrop { background:#18334a66; }.mobile-menu .icon-button { float:right; }.mobile-menu a { display:block; padding:16px 0; border-bottom:1px solid var(--line); color:var(--navy); font-size:20px; font-weight:600; text-decoration:none; }
.statistics { left:440px; top:15px; display:flex; align-items:stretch; min-width:600px; padding:12px 16px; gap:28px; }.statistics > div { display:grid; align-content:center; gap:4px; }.statistics span { color:var(--muted); font-size:13px; }.statistics strong { font-size:22px; }.yellow { color:#e9b32a; }.red { color:var(--red); }.statistics button { margin-left:auto; border:0; border-radius:18px; padding:8px 12px; color:var(--navy); background:var(--pale); }
.region-search { position:relative; margin:14px 0 0; }.region-search input { width:100%; height:40px; padding:10px 40px 10px 12px; border:0; border-radius:4px; color:var(--navy); background:var(--pale); font-size:14px; }.region-search input::placeholder { color:#18334a80; opacity:1; }.region-search input::-webkit-search-cancel-button { display:none; }.region-search > svg { position:absolute; top:8px; right:10px; width:24px; height:24px; color:var(--navy); pointer-events:none; }.region-suggest { position:absolute; z-index:4; top:44px; left:0; right:0; display:grid; padding:6px; overflow:hidden; border-radius:8px; background:#fff; box-shadow:0 4px 18px #18334a2b; }.region-suggest button { padding:9px 10px; border:0; color:var(--navy); background:none; font-size:14px; text-align:left; }.region-suggest button:hover { background:var(--pale); }.region-suggest-empty { margin:6px; color:var(--muted); font-size:13px; }
/* Дэшборд статистики (DTP-20): шапка с регионами/счётчиками, график слева, разрезы справа */
/* Прижат вправо: слева панели фильтров и статистики — когда места хватает, дэшборд их не накрывает */
.chart { position:absolute; z-index:3; right:20px; top:20px; bottom:auto; max-height:calc(100% - 40px); width:min(1360px, calc(100% - 40px)); padding:24px 28px; display:flex; flex-direction:column; overflow:auto; color:var(--navy); background:#fff; border-radius:16px; box-shadow:0 10px 40px #18334a26; }.chart-head { display:flex; flex-wrap:wrap; align-items:center; gap:36px; }.chart-place { display:grid; gap:2px; }.chart-place strong { font-size:26px; }.chart-place span { color:var(--muted); font-size:14px; }/* min-width:0 — иначе грид-элемент раздаётся под широкий svg и ломает горизонтальный скролл .bars-combo */
.chart-main { display:grid; grid-template-columns:1fr 230px; gap:44px; margin-top:14px; align-items:start; }.chart-body { min-width:0; }.chart h2 { margin:0; font-size:22px; }.chart-meta { margin:7px 0 0; color:var(--muted); font-size:15px; }.chart-legend { display:flex; justify-content:space-between; gap:16px; margin-top:16px; color:var(--navy); font-size:14px; }.chart-legend span { display:flex; align-items:center; gap:8px; }.chart-legend i { width:13px; height:13px; border-radius:3px; }.legend-crashes { background:var(--navy); }.legend-dead { background:var(--red); }.bars { margin-top:14px; }.bars-horizontal { display:grid; gap:8px; }.hrow { display:grid; grid-template-columns:minmax(120px, 220px) 52px 1fr 52px 1fr; align-items:center; gap:12px 14px; color:var(--navy); font-size:14px; }.hlabel { overflow:hidden; min-width:0; text-align:left; text-overflow:ellipsis; white-space:nowrap; }.hcount { font-variant-numeric:tabular-nums; font-weight:700; text-align:right; }.htrack { position:relative; height:18px; border-radius:2px; background:#f3f6f8; }.htrack i { position:absolute; inset:0 auto 0 0; border-radius:2px; font-style:normal; }.htrack.crash i { background:var(--navy); }.htrack.dead i { background:var(--red); }.bars-combo { overflow-x:auto; padding:4px 0; }.bars-combo svg { display:block; }.chart-empty { display:flex; align-items:center; justify-content:center; min-height:240px; margin-top:14px; padding:20px; border-radius:8px; background:var(--pale); color:var(--muted); font-size:14px; text-align:center; }.chart-note { margin:12px 0 0; color:var(--muted); font-size:13px; }.chart-side { display:grid; gap:2px; align-content:start; }.chart-side-title { margin:16px 0 8px; font-size:16px; font-weight:600; }.chart-side-title:first-child { margin-top:0; }.chart-side button { border:0; border-radius:8px; padding:9px 14px; color:var(--navy); background:none; font-size:15px; text-align:left; }.chart-side button:hover:not(:disabled) { background:var(--pale); }.chart-side button.active { color:#fff; background:var(--navy); }.chart-side button:disabled { color:var(--muted); opacity:.6; cursor:not-allowed; }
.filters { top:30px; width:300px; padding:15px; border-radius:0; }.filters h1 { font-size:18px; }.filters-heading { align-items:start; }.filters .eyebrow { margin-bottom:4px; font-size:12px; }.filters .date-fields { margin:14px 0; }.filters .region-field { margin-bottom:14px; }.filters section { margin-top:14px; padding-top:12px; }.participant-list { gap:3px; }.participant-list button { min-height:60px; border-radius:4px; }.professional-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:14px; padding:10px 0; border:0; border-top:2px solid var(--pale); color:var(--navy); background:#fff; text-align:left; }.professional-toggle::after { content:"›"; color:var(--muted); font-size:22px; }.collapsed-summary { display:none; margin:14px 0 0; color:var(--navy); font-size:14px; }.filters.collapsed { top:15px; width:400px; min-height:204px; padding:20px; }.filters.collapsed h1, .filters.collapsed .region-field, .filters.collapsed > section, .filters.collapsed .professional-toggle, .filters.collapsed .filter-status, .filters.collapsed .filters-body > :not(.region-search):not(.date-fields):not(.collapsed-summary):not(.filter-status) { display:none; }.filters.collapsed .date-fields { margin:12px 0; }.filters.collapsed .collapsed-summary { display:block; }.advanced-filter { top:0; left:20px; width:540px; max-height:calc(100vh - 65px); min-height:calc(100vh - 65px); padding:22px 30px; border-radius:0; }.advanced-filter h2 { font-size:20px; }.advanced-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 8px; }.advanced-tabs button { border:0; border-radius:4px; padding:8px 10px; color:var(--navy); background:var(--pale); font-size:13px; }.advanced-tabs button.active { color:#fff; background:var(--muted); }.advanced-search { margin:10px 0 12px; }.advanced-options { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:24px; }.advanced-options label { min-width:0; padding:8px 0; font-size:14px; }
@media (max-width:800px) { .topbar { padding:0 20px; gap:12px; }.topbar nav { gap:14px; margin-left:auto; }.topbar nav a { display:none; }.support { display:none; }.mobile-menu-button { display:block; }.map-page { min-height:calc(100svh - 65px); }.filters:not(.collapsed) { inset:20px 20px auto; width:400px; max-width:calc(100% - 40px); }.filters.collapsed { top:20px; left:20px; width:212px; min-height:40px; height:40px; padding:0; overflow:visible; background:var(--pale); box-shadow:none; }.filters.collapsed > :not(#hide-filters) { display:none; }.filters.collapsed #hide-filters { inset:0; display:flex; align-items:center; justify-content:space-between; width:212px; height:40px; transform:none; border-radius:0; color:var(--navy); background:var(--pale); font-size:14px; }.filters.collapsed #hide-filters::after { color:var(--navy); content:"⌃"; font-size:18px; }.advanced-filter { inset:0; width:100%; min-height:100%; max-height:100%; padding:20px; }.advanced-options { grid-template-columns:1fr; }body .statistics { left:20px; right:20px; top:auto; bottom:20px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto 44px; width:auto; min-width:0; height:auto; padding:15px 20px; gap:10px 0; border-radius:12px; }.statistics .place { display:flex; grid-column:1 / -1; min-width:0; }.statistics .counts { display:grid; grid-column:1 / -1; grid-template-columns:repeat(3,1fr); }.statistics .card-actions { display:flex; grid-column:1 / -1; }.statistics strong { font-size:20px; }.statistics span { font-size:14px; }.statistics .download-button { width:100%; height:40px; font-size:14px; }.statistics #chart-button { width:40px; height:40px; }.chart { inset:12px 12px auto; width:auto; max-height:calc(100% - 24px); transform:none; padding:16px; border-radius:8px; }.chart-head { gap:14px; }.chart-place strong { font-size:20px; }.chart-main { grid-template-columns:1fr; gap:18px; }.hrow { grid-template-columns:96px 40px 1fr 40px 1fr; gap:6px; font-size:12px; }.participant-list { grid-template-columns:repeat(2,1fr); }.heat-controls,.leaflet-control-zoom { display:none; } }
.heat-controls { position:absolute; z-index:2; right:20px; bottom:80px; display:grid; gap:8px; width:220px; padding:12px; color:var(--navy); background:#fff; box-shadow:0 3px 10px #18334a30; font-size:12px; }/* группы строк (тепло/затемнение): грид перебивает UA-стиль [hidden] — скрывается явным правилом */.heat-controls > div { display:grid; gap:8px; }.heat-controls [hidden] { display:none; }
/* Плашка «где мы на карте»: территория под центром (getRegionUnderPoint), как инфобокс старого сайта */
body .statistics .place .region-plate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; line-height:18px; }body .statistics .place .region-resolving { display:flex; align-items:center; gap:7px; color:var(--muted); }body .statistics .place .region-resolving::before { content:""; width:11px; height:11px; flex:none; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:place-resolve .8s linear infinite; }@keyframes place-resolve { to { transform:rotate(360deg) } }.heat-controls label { display:grid; grid-template-columns:1fr auto; gap:3px 8px; align-items:center; }.heat-controls input { grid-column:1 / -1; width:100%; accent-color:var(--navy); }.heat-controls output { color:var(--muted); font-variant-numeric:tabular-nums; }
/* Панель ползунков: строки тепла видны при включённом тепле, строки затемнения — при живой маске */



.yandex-map [class*="ground-pane"] ymaps:first-child { filter:grayscale(.8); }
/* Гамма OSM ближе к светлой серо-бежевой палитре Яндекса (DTP-26): убираем зелень,
   добавляем лёгкий тёплый тон и чуть поднимаем светлоту */
.leaflet-map .leaflet-tile-pane { filter:grayscale(.72) sepia(.12) saturate(.85) brightness(1.03); }
/* Единая карточка попапа (DTP-27): белый фон, r8, тень — у всех трёх провайдеров */
/* Попап ДТП один на всех трёх картах: белая карточка r12 с общей тенью, дата/адрес серым,
   пострадавшие янтарным, серая пилюля «Подробнее о ДТП», серый крестик сверху справа */
.leaflet-popup-content-wrapper { border-radius:12px; box-shadow:0 6px 24px #18334a33; }.leaflet-popup-content { width:auto !important; margin:14px 16px; }.leaflet-popup-close-button { color:#8d99a5 !important; font-size:22px !important; padding:6px 8px 0 0 !important; }
.marker-popup { display:grid; min-width:230px; max-width:290px; gap:5px; color:var(--navy); font:15px/22px Roboto,Arial,sans-serif; }.marker-popup strong { font-size:20px; line-height:26px; }.marker-popup span { color:#8d99a5; }.marker-popup .popup-injured { margin:4px 0 0; color:#ffb81f; font-weight:700; }.marker-popup .popup-dead { margin:0; color:var(--red); font-weight:700; }.marker-popup a { justify-self:stretch; margin-top:8px; padding:8px 20px; border:0; border-radius:20px; color:var(--navy); background:#ebeef0; font-size:16px; font-weight:500; line-height:24px; text-align:center; text-decoration:none; }.marker-popup a:hover { background:#ccd2d7; }.marker-popup a:focus-visible { outline:2px solid var(--navy); outline-offset:2px; } /* mapbox сам фокусирует кнопку при открытии — UA-рамка по круглой пилюле выглядит рвано */
.yandex-map [class*="balloon__layout"] { border-radius:12px; background:#fff; box-shadow:0 6px 24px #18334a33; overflow:hidden; }.yandex-map [class*="balloon__content"] { padding:14px 16px; }.yandex-map [class*="balloon__close-button"] { width:26px; height:26px; background:none; color:#8d99a5; font:400 22px/26px Roboto,Arial,sans-serif; text-align:center; }.yandex-map [class*="balloon__close-button"]::before { content:"×"; }
.mapboxgl-popup { max-width:none !important; } /* дефолт 240px ставится инлайном, а .marker-popup и так 230-290 + паддинги — пилюля выпирала за карточку */.mapboxgl-popup-content { padding:14px 16px; border-radius:12px; box-shadow:0 6px 24px #18334a33; }.mapboxgl-popup-close-button { top:4px; right:8px; color:#8d99a5; font-size:22px; font-weight:400; padding:0; }
/* На время зум-жеста тепло скрывается (DTP-30), точки остаются видимыми */
.yandex-heat { transition:opacity .15s linear; }
.leaflet-map .leaflet-heatmap-layer { transition:opacity .15s linear; }
.leaflet-map.heat-hold .leaflet-heatmap-layer { opacity:0; }
@media (max-width:800px) { .heat-controls { display:none; } }

/* The three desktop map states from the design use one uninterrupted composition. */
@media (min-width:801px) { body .filters:not(.collapsed) { top:0; left:0; width:340px; height:100vh; min-height:100vh; padding:30px 20px 0; overflow:visible; background:#fff; box-shadow:none; display:flex; flex-direction:column; } body .filters:not(.collapsed) .filters-body { flex:1 1 auto; min-height:0; overflow-y:auto; margin-right:-20px; padding-right:20px; padding-bottom:16px; } /* скролл у правой границы сайдбара */ body .filters:not(.collapsed) .statistics { margin:15px -5px 15px; padding:16px 20px 18px; } /* DTP-38: отступы 15px вокруг контейнера статистики (родитель даёт 20px по бокам → -5px) */ body .filters:not(.collapsed) #hide-filters { top:24px; right:-42px; } }
body .professional-toggle { height:36px; margin-top:14px; padding:16px 0 0; border-top:2px solid var(--pale); background:transparent; font-size:16px; }
body .professional-toggle::after { flex:none; width:12px; height:7px; content:""; background:var(--navy); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%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 12 7' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat; transform:rotate(-90deg); } /* DTP-41: та же галочка, повёрнута вправо */
body .filters:not(.collapsed) .quick-filters { margin-top:16px; padding:14px 0 0; border-top:2px solid var(--pale); }
body .filters:not(.collapsed) .quick-filters .eyebrow { margin:0; color:var(--navy); font-size:14px; font-weight:500; }
body .filters:not(.collapsed) .quick-filter-list { display:grid; grid-template-columns:repeat(3, 98px); gap:3px; margin-top:14px; }.quick-filter-list button { display:flex; align-items:center; justify-content:center; min-height:60px; padding:6px; overflow:hidden; border:0; border-radius:4px; color:#fff; background-color:#42657d; background-position:center; background-size:cover; box-shadow:inset 0 0 0 999px rgb(20 47 68 / .38); font-size:10px; line-height:16px; text-align:center; text-shadow:0 1px 2px rgb(0 0 0 / .65); } /* DTP-39: подпись по центру кнопки (Roboto Medium 10/16) */.quick-filter-list button[data-quick-map="mapbox"] { background-image:url("assets/map-preview-mapbox.svg"); }.quick-filter-list button[data-quick-map="leaflet"] { background-image:url("assets/map-preview-leaflet.svg"); }.quick-filter-list button[data-quick-map="yandex"] { background-image:url("assets/map-preview-yandex.svg"); }.quick-filter-list button.active { box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 999px rgb(20 47 68 / .28); }
/* Про-панель — flex-колонка: контент скроллится внутри, «Назад к стандартным фильтрам» закреплена внизу (DTP-21) */
body .advanced-filter { top:0; left:0; width:540px; height:100vh; min-height:100vh; max-height:none; padding:20px; overflow:hidden; display:flex; flex-direction:column; }
body .advanced-filter .advanced-body { flex:1 1 auto; min-height:0; overflow-y:auto; }
body .advanced-filter .back-to-basic { flex:none; }
body .advanced-filter #close-advanced { position:absolute; top:24px; right:-32px; border-radius:50%; color:var(--navy); background:#fff; font-size:20px; }
body .advanced-top-controls { display:grid; grid-template-columns:235px 235px; gap:20px; }
/* Регион в про-панели — то же поле поиска, что в стандартной панели (DTP-25) */
body .advanced-top-controls .region-search { margin:0; }
.advanced-top-controls .date-range { height:40px; border-radius:0; }
body .advanced-dynamic { display:grid; grid-template-columns:minmax(0,1fr); margin-top:0; }.advanced-options.advanced-intervals { display:grid; columns:auto; grid-template-columns:1fr; gap:0; }.advanced-interval { display:flex; align-items:center; gap:8px; min-height:33px; font-size:14px; line-height:20px; }.advanced-interval span { flex:1; color:var(--navy); }.advanced-interval input { width:64px; height:29px; margin:0; padding:3px 8px; border:0; border-radius:4px; color:var(--navy); background:var(--pale); font-size:14px; }.advanced-collapse { margin:0; padding:10px 0; border:0; border-bottom:2px solid var(--pale); }.advanced-collapse:first-of-type { padding-top:20px; }.advanced-collapse summary { display:flex; align-items:center; justify-content:space-between; min-height:20px; color:var(--navy); cursor:pointer; font-size:16px; font-weight:600; line-height:24px; list-style:none; }.advanced-collapse summary::-webkit-details-marker { display:none; }
/* Стрелка секций — тонкий штрих 7×14 по макету: свёрнуто — вправо, раскрыто — вниз */
.advanced-collapse summary::after { flex:none; width:12px; height:7px; margin-left:12px; background:var(--navy); content:""; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%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 12 7' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat; transform:rotate(0); transition:transform .15s ease; }.advanced-collapse[open] summary::after { transform:rotate(180deg); } /* DTP-41: только галочка без кнопки, открыт = вверх */
.advanced-checkboxes { display:block; columns:2; column-gap:30px; margin-top:11px; }.advanced-checkboxes label { display:flex; align-items:center; gap:8px; min-height:38px; padding:7px 0; font-size:16px; line-height:24px; break-inside:avoid; }.advanced-checkboxes input { appearance:none; width:18px; height:18px; margin:0; flex:none; border:0; border-radius:3px; background:#e3e9ed; }.advanced-checkboxes input:checked { background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.5 3 3 5.5-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }.advanced-checkboxes .dot { width:11px; height:11px; margin:4px -2px 0 0; flex:none; }
body .advanced-category { margin:10px 0 0; padding:0; border:0; }.advanced-category .advanced-type-heading { margin:0; padding:0 0 8px; border-bottom:2px solid var(--pale); }.advanced-category .advanced-search { height:26px; margin:0; }.advanced-category .advanced-options { margin-top:10px; }
.heat-controls[hidden] { display:none; }
body .severity-tone, body .advanced-filter .advanced-options .filter-tone { color:var(--navy); background:transparent; } body .severity-tone.light input { accent-color:var(--yellow); } body .severity-tone.serious input { accent-color:var(--orange); } body .severity-tone.fatal input { accent-color:var(--red); }
/* Про-панель нейтральная (DTP-22): тон-классы (тяжесть и др.) НЕ красят чекбоксы —
   невыбранный светло-серый, выбранный navy; цветные остаются только в стандартной панели */
body .advanced-filter .advanced-options .filter-tone input { appearance:none; width:18px; height:18px; margin:0; flex:none; border:0; border-radius:3px; background:#e3e9ed; }
body .advanced-filter .advanced-options .filter-tone input:checked, body .advanced-checkboxes .severity-tone input:checked { background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.5 3 3 5.5-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
/* «Вред здоровью» в про-панели: цветные как в стандартной (тон = цвет точки на карте) */
body .advanced-checkboxes .severity-tone input { appearance:none; width:18px; height:18px; margin:0; flex:none; border:0; border-radius:3px; background:#e3e9ed; }
body .advanced-checkboxes .severity-tone.light input { background-color:var(--yellow); }
body .advanced-checkboxes .severity-tone.serious input { background-color:var(--orange); }
body .advanced-checkboxes .severity-tone.fatal input { background-color:var(--red); }
body .advanced-checkboxes .severity-tone input:checked { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.5 3 3 5.5-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position:center; background-size:18px; background-repeat:no-repeat; }
@media (max-width:800px) { body .filters:not(.collapsed) { height:auto; max-height:calc(100svh - 40px); overflow:auto; display:flex; flex-direction:column; } body .filters:not(.collapsed) .filters-body { flex:1 1 auto; min-height:0; overflow-y:auto; } body .advanced-filter { inset:0; width:100%; height:100%; min-height:100%; padding:20px; } body .advanced-filter #close-advanced { position:static; } body .advanced-top-controls { grid-template-columns:1fr; } body .advanced-top-controls .region-search input { width:100%; } }
body .advanced-filter .back-to-basic { display:flex; align-items:center; gap:6px; width:490px; height:48px; margin:8px 0 0; padding:0 8px; border:0; border-radius:0; color:var(--navy); background:transparent; font-size:14px; font-weight:500; letter-spacing:.15px; }
body .advanced-filter .back-to-basic::before { flex:none; width:12px; height:7px; content:""; background:var(--navy); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%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 12 7' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat; transform:rotate(90deg); } /* DTP-41: та же галочка, повёрнута влево */
body .advanced-filter .back-to-basic:hover { background:var(--pale); }
body.advanced-open .filters { overflow:visible; background:transparent; box-shadow:none; pointer-events:none; }
body.advanced-open .filters .filters-heading, body.advanced-open .filters .filters-body, body.advanced-open .filters #hide-filters { display:none; }
body.advanced-open .filters .statistics { position:fixed; left:auto; right:20px; top:auto; bottom:20px; z-index:2; width:344px; margin:0; padding:20px; gap:14px; border:0; border-radius:12px; box-shadow:0 4px 18px #18334a2b; pointer-events:auto; }
body.advanced-open .heat-controls { bottom:250px; }
@media (max-width:800px) { body.advanced-open .filters .statistics { display:none; } body .advanced-filter .back-to-basic { width:100%; } }
/* Кастомный скролл сайдбара: тонкий, с зарезервированным местом — горизонтальная прокрутка не появляется */
body .filters:not(.collapsed) .filters-body { overflow-x:hidden; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#b9c9d2 transparent; }
body .filters:not(.collapsed) .filters-body::-webkit-scrollbar { width:8px; }
body .filters:not(.collapsed) .filters-body::-webkit-scrollbar-track { background:transparent; }
body .filters:not(.collapsed) .filters-body::-webkit-scrollbar-thumb { border:2px solid #fff; border-radius:4px; background:#c3d2da; background-clip:padding-box; }
body .filters:not(.collapsed) .quick-filter-list { grid-template-columns:repeat(3, minmax(0, 1fr)); }
body .filters:not(.collapsed) #hide-filters { align-items:center; justify-content:center; top:16px; right:-42px; width:32px; height:32px; border-radius:50%; background:#fff; box-shadow:0 2px 8px #18334a30; font-size:20px; line-height:1; }
/* Свёрнутый сайдбар: пилюля «Фильтры (n активных)» слева сверху + статистика боксом в левом нижнем углу */
body.filters-collapsed .filters { background:transparent; box-shadow:none; pointer-events:none; overflow:visible; }
body.filters-collapsed .filters .filters-heading, body.filters-collapsed .filters .filters-body { display:none; }
body.filters-collapsed .filters #statistics { display:flex; flex-direction:column; align-items:stretch; position:fixed; left:20px; right:auto; top:auto; bottom:20px; z-index:2; width:344px; min-width:0; max-width:calc(100vw - 40px); margin:0; padding:20px; gap:14px; border:0; border-radius:12px; box-shadow:0 4px 18px #18334a2b; pointer-events:auto; }
body.filters-collapsed .filters #hide-filters { display:flex; align-items:center; justify-content:center; position:fixed; left:20px; right:auto; top:20px; bottom:auto; width:auto; height:40px; padding:0 20px; margin:0; transform:none; border:0; border-radius:20px; color:var(--navy); background:#fff; box-shadow:0 2px 10px #18334a2e; font-size:14px; white-space:nowrap; pointer-events:auto; }
body.filters-collapsed .filters #hide-filters::after { content:none; }
/* Плавающие панели двигаются за заголовок: дэшборд и карточка счётчиков в свёрнутом
   меню (внутри сайдбара карточка статична — захват не показываем). На мобильной
   раскладке панели на всю ширину — не двигаются */
@media (min-width:801px) { .chart .chart-head, body.filters-collapsed .statistics .place { cursor:grab; touch-action:none; } }.movable-dragging { cursor:grabbing !important; user-select:none; }
@media (max-width:800px) { body .filters:not(.collapsed) { overflow-x:hidden; } body .filters:not(.collapsed) #hide-filters { top:16px; right:-16px; } }
/* Про-панель: тот же кастомный скролл с резервом места, круглая кнопка закрытия как у базовых фильтров */
body .advanced-filter .advanced-body { overflow-x:hidden; margin-right:-20px; padding-right:20px; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#b9c9d2 transparent; } /* скролл у правой границы панели */
body .advanced-filter .advanced-body::-webkit-scrollbar { width:8px; }
body .advanced-filter .advanced-body::-webkit-scrollbar-track { background:transparent; }
body .advanced-filter .advanced-body::-webkit-scrollbar-thumb { border:2px solid #fff; border-radius:4px; background:#c3d2da; background-clip:padding-box; }
body .advanced-filter .back-to-basic { width:auto; max-width:100%; }
body .advanced-filter #close-advanced { display:flex; align-items:center; justify-content:center; position:fixed; left:550px; top:16px; right:auto; border-radius:50%; background:#fff; box-shadow:0 2px 8px #18334a30; font-size:20px; }
@media (max-width:800px) { body .advanced-filter #close-advanced { position:fixed; left:auto; right:16px; top:16px; } }
/* Шевроны секций: симметричная стрелка (равные плечи) вместо «галочки» */
/* Ховер строк с чекбоксами: базовые и про-фильтры (заблокированные — без подсветки) */
body .advanced-checkboxes label, body .advanced-options label { border-radius:4px; }
body .advanced-checkboxes label:hover:not(:has(input:disabled)), body .advanced-filter .advanced-options label:hover { background:var(--pale); }
/* Числовые поля «от–до» в секции «Количество»: префикс внутри поля, пустое — серое, заполненное/в фокусе — голубое */
.advanced-interval-field { display:flex; flex:none; align-items:center; gap:4px; width:118px; height:33px; padding:0 12px; border-radius:4px; background:var(--pale); cursor:text; }
.advanced-interval-field span { flex:none; color:var(--navy); font-size:14px; line-height:20px; }
.advanced-interval-field input { flex:1; width:0; min-width:0; height:auto; margin:0; padding:0; border:0; border-radius:0; outline:0; background:transparent; color:var(--navy); font-size:14px; line-height:20px; }
.advanced-interval-field input::placeholder { color:#18334a66; }
.advanced-interval-field input::-webkit-outer-spin-button, .advanced-interval-field input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.advanced-interval-field input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
.advanced-interval-field:focus-within, .advanced-interval-field:has(input:not(:placeholder-shown)) { background:#e2f0f8; }
/* Свёртка про-панели: #close-advanced не «назад», а скрывает сайдбар (статистика остаётся справа снизу, кнопка — пилюля слева сверху) */
body.advanced-collapsed .advanced-filter { background:transparent; box-shadow:none; pointer-events:none; overflow:visible; }
body.advanced-collapsed .advanced-filter .advanced-body, body.advanced-collapsed .advanced-filter .back-to-basic { display:none; }
body.advanced-collapsed .advanced-filter #close-advanced { align-items:center; justify-content:center; position:fixed; left:20px; right:auto; top:20px; bottom:auto; width:auto; height:40px; padding:0 20px; border-radius:20px; color:var(--navy); background:#fff; box-shadow:0 2px 10px #18334a2e; font-size:14px; white-space:nowrap; pointer-events:auto; }
/* Мобильный: развёрнутый сайдбар стандартных фильтров — плотная белая панель (как до v=18 прозрачной оболочки) */
@media (max-width:800px) { body .filters:not(.collapsed) { background:#fff; box-shadow:0 5px 15px #d4dadd; padding:20px; } }
/* Чипы карт по макету: превью на всю плашку, подпись чёрная жирная снизу-слева,
   активный — рамка navy (DTP-26) */
body .filters:not(.collapsed) .quick-filter-list button { position:relative; display:flex; align-items:center; min-height:64px; padding:6px 7px; border-radius:8px; overflow:hidden; color:#18334a; background-color:#dfe7ec; box-shadow:none; font-size:12px; font-weight:700; line-height:16px; letter-spacing:.15px; text-align:left; text-shadow:none; }
body .filters:not(.collapsed) .quick-filter-list button:hover:not(.active) { background-color:#d3dee5; }
body .filters:not(.collapsed) .quick-filter-list button.active { box-shadow:inset 0 0 0 2px var(--navy); }
/* Регион заблокирован замком территории: поле приглушено, ввод даёт подсказку (DTP-28) */
body .region-search input[data-locked] { opacity:.55; cursor:not-allowed; }
.region-lock-hint { margin:6px; color:var(--muted); font-size:13px; }
/* Диапазоны «от–до» в проф-фильтрах: одна колонка, поля как в макете — равные смежные (зазор 4px), ввод без вложенного бокса */
body .advanced-options.advanced-intervals { display:grid; columns:auto; grid-template-columns:1fr; gap:4px; }
body .advanced-interval { gap:8px; min-height:38px; }
body .advanced-interval > span:first-child { flex:none; }
body .advanced-options .advanced-interval .advanced-interval-field { flex:none; width:100px; height:38px; padding-left:12px; }
body .advanced-interval .advanced-interval-field.from { margin-left:auto; }
body .advanced-interval .advanced-interval-field.to { margin-left:-4px; }
body .advanced-options .advanced-interval-field input { flex:1 1 0; width:0; min-width:0; height:auto; margin:0; padding:0; border:0; border-radius:0; outline:0; background:transparent; color:var(--navy); font-size:14px; line-height:20px; }
body .advanced-interval-field:focus-within { background:#e2f0f8; }
body .advanced-interval-field:has(input:not(:placeholder-shown)) { background:var(--pale); }

/* Панель «Статистика» — под старую фигму (dtp-old.fig, «Главная 2021»: «2 stats_by_days» 431:0,
   «2 stats_by_types» 440:30; референс и спека — design/components/06-dashboard.html, §3 style-registry).
   Шрифт панели — Roboto (стек оставлен с 'PT Root UI' на будущее). Счётчики — в шапке
   (подпись над числом: navy / #fecc5c / #e31a1c), кнопка «Скрыть» — пилюля #ebeef0 */
.chart { padding:12px 20px 20px; border-radius:8px; font-family:'PT Root UI', Roboto, Arial, sans-serif; }
.chart-head { gap:14px 40px; align-items:flex-start; }
.chart-place { gap:0; }
.chart-place strong { font-size:20px; font-weight:700; line-height:28px; }
.chart-place span { margin-top:4px; color:var(--navy); opacity:.5; font-size:14px; line-height:20px; letter-spacing:.15px; }
/* Счётчики шапки по 431:0: подпись Medium 14/20 @.5 над числом Bold 20/28 */
.chart-cnt { display:grid; }
.chart-cnt span { font-size:14px; font-weight:500; line-height:20px; letter-spacing:.15px; opacity:.5; }
.chart-cnt b { margin-top:4px; font-size:20px; font-weight:700; line-height:28px; }
.chart-cnt.inj b { color:#fecc5c; }
.chart-cnt.dth b { color:#e31a1c; }
/* Чекбокс «С учётом фильтров»: в макете его нет (функциональный элемент v65) —
   перекрашен в палитру макета: 18×18 r3, бордер 2px #d1dee3, отмеченный — navy */
/* «Скрыть» — 36 высотой #ebeef0, Medium 16/24 + крестик 20×20 (431:0, x=846 y=20);
   в дампе r20 (= капсула), но капсула смотрится слишком пузато — берём r8 как у панели/строк */
.chart-hide { display:inline-flex; align-items:center; gap:8px; margin:8px 0 0 auto; height:36px; padding:0 12px 0 16px; border:0; border-radius:8px; color:#18334a; background:#ebeef0; font-size:16px; font-weight:500; line-height:24px; cursor:pointer; }
.chart-hide:hover { background:#dde3e7; }
.chart-hide svg { flex:none; }
/* Тело: колонка графика + меню 204 (в макете 708 + 28 + 204); заголовок разреза Bold 20/28,
   мета-строки Regular 14/20 @.5 */
.chart-main { grid-template-columns:1fr 204px; gap:28px; margin-top:20px; }
.chart h2 { font-size:20px; font-weight:700; line-height:28px; }
.chart-meta { margin:4px 0 0; color:var(--navy); opacity:.5; font-size:14px; line-height:20px; letter-spacing:.15px; }
.chart-note { color:var(--navy); opacity:.5; font-size:12px; }
/* Ошибка/нет данных — как «2 stats_by_days_error» 438:23: просто текст по центру, без подложки */
.chart-empty { display:flex; align-items:center; justify-content:center; min-height:240px; margin-top:14px; padding:0; background:none; color:var(--navy); font-size:14px; line-height:20px; text-align:center; }
/* Легенда 431:0: свотч 12×12 r6 = круг (navy @.22 / #e31a1c), Medium 12 #000 */
.chart-legend { margin-top:12px; color:#000; font-size:12px; font-weight:500; line-height:16px; }
.chart-legend i { width:12px; height:12px; border-radius:6px; }
.legend-crashes { background:rgba(24,51,74,.22); }
.legend-dead { background:#e31a1c; }
.bars-horizontal { gap:10px; }
.hrow { gap:12px 14px; }
.chart-legend.chart-legend-columns { color:#000; font-size:12px; }
/* Пилюли разреза по типам (440:30): ДТП — #18334a @.22 с navy-процентом внутри,
   погибшие — #e31a1c @.22 с красным; r6 (в файле Bar_1_x VECTOR 224×20 r=6) */
.htrack { height:24px; background:none; }
.htrack i { border-radius:6px; display:flex; align-items:center; justify-content:flex-end; }
.htrack.crash i { background:rgba(24,51,74,.22); }
.htrack.dead i { background:rgba(227,26,28,.22); }
.hpct { padding:0 10px; font-size:11px; font-weight:500; color:#18334a; white-space:nowrap; }
.htrack.dead .hpct { color:#e31a1c; }
.hpct-out { position:absolute; left:8px; top:50%; transform:translateY(-50%); }
/* Заголовки «Количество ДТП» / «Количество погибших» — по сетке строк над своими группами баров
   (базовая .chart-legend — flex, грида там не было, заголовки уезжали к краям) */
.chart-legend-columns { display:grid; align-items:center; grid-template-columns:minmax(120px,220px) 52px 1fr 52px 1fr; gap:12px 14px; }
.chart-legend-columns i { display:none; }
.chart-legend-columns span:nth-child(1) { grid-column:3; justify-self:center; }
.chart-legend-columns span:nth-child(2) { grid-column:5; justify-self:center; }
/* Правое меню по 431:0: группы Medium 14/20 @.5, строки 32px Regular 16/24 r8,
   активная — заливка #18334a @.1 + Medium (текст остаётся navy) */
.chart-side { gap:0; }
.chart-side-title { margin:20px 0 8px; padding-left:12px; color:var(--navy); opacity:.5; font-size:14px; font-weight:500; line-height:20px; letter-spacing:.15px; }
.chart-side button { min-height:32px; margin:0; padding:4px 12px; border:0; border-radius:8px; color:#18334a; background:none; font-size:16px; font-weight:400; line-height:24px; text-align:left; }
.chart-side button:hover:not(:disabled) { background:rgba(24,51,74,.06); }
.chart-side button.active { color:#18334a; background:rgba(24,51,74,.1); font-weight:500; }
.chart-side button:disabled { color:#18334a; background:none; opacity:.4; cursor:not-allowed; }
@media (max-width:800px) {
  .chart-head { gap:10px 18px; }
  .chart-place strong { font-size:17px; line-height:24px; }
  .chart-cnt b { font-size:17px; line-height:24px; }
  .chart-legend-columns { grid-template-columns:96px 40px 1fr 40px 1fr; gap:6px; }
  .hpct { padding:0 6px; font-size:11px; }
}
/* Мобильные: в интервальных рядах про-фильтров подпись может переноситься,
   поля «от–до» сжимаются (иначе на экранах ≤375px выезжают за границу панели).
   Специфичность как у базовых правил body .advanced-interval…, иначе они сильнее */
@media (max-width:800px) {
  body .advanced-interval > span:first-child { flex:1 1 auto; min-width:0; }
  body .advanced-options .advanced-interval .advanced-interval-field { flex:1 1 56px; width:auto; min-width:56px; max-width:118px; }
}

/* Полоска загрузки в верхней строке — как на dtp-stat.ru: пока идёт запрос к бэкенду,
   по краю ползут серые штрихи (класс visible вешает apiFetch в src/app.ts) */
.loader { position:fixed; top:0; left:0; right:0; z-index:5; height:4px; background-image:repeating-linear-gradient(90deg,transparent,transparent 20px,#8d99a5 0,#8d99a5 25px); background-size:200% 100%; animation:loader-slide 12s linear infinite; transition:opacity 1s; opacity:0; pointer-events:none; }
.loader.visible { opacity:1; }
@keyframes loader-slide { to { background-position:100%; } }

/* Аккордеон «Место ДТП»: подгруппы дорог/улиц/НП внутри секции места —
   заголовки мельче секционных, поиск и списки наследуют стили секций */
body .advanced-filter .advanced-subgroup .advanced-subhead { margin:14px 0 0; color:var(--navy); font-size:14px; font-weight:600; line-height:20px; }
body .advanced-filter .advanced-subgroup .advanced-subhead:first-child { margin-top:12px; }

/* Мини-скроллы длинных списков проф-фильтров: высота ограничена, скроллбар тонкий
   (короткие списки и интервалы не дорастают — остаются без скролла). Мультиколонки
   переезжают на внутреннюю обёртку: переполнение multicol уходит вбок, вертикально
   его не прокрутить — скроллится сам список, колонки считаются внутри */
body .advanced-filter .advanced-options { max-height:280px; overflow-y:auto; columns:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
body .advanced-filter .advanced-columns { columns:2; column-gap:30px; }
@media (max-width:800px) { body .advanced-filter .advanced-columns { columns:1; } }
body .advanced-filter .advanced-options::-webkit-scrollbar { width:6px; }
body .advanced-filter .advanced-options::-webkit-scrollbar-track { background:transparent; }
body .advanced-filter .advanced-options::-webkit-scrollbar-thumb { border-radius:3px; background:var(--line); }
body .advanced-filter .advanced-options::-webkit-scrollbar-thumb:hover { background:var(--muted); }
/* Мобильный: карта на весь экран — топбара в DOM нет, а старый min-height calc(100svh - 65px) оставлял мёртвую полосу снизу */
@media (max-width:800px) { .map-page { min-height:100svh; } }
/* Мобильный: открытые фильтры во весь экран; строка поиска региона — липкая, кнопка сворачивания живёт на ней */
@media (max-width:800px) { body .filters:not(.collapsed) { inset:0; width:100%; max-width:100%; max-height:none; overflow-y:auto; overflow-x:hidden; border-radius:0; padding:20px; } body .filters:not(.collapsed) #hide-filters { position:absolute; top:20px; right:20px; left:auto; bottom:auto; z-index:3; width:40px; height:40px; transform:none; align-items:center; justify-content:center; border-radius:50%; background:#fff; box-shadow:0 2px 10px #18334a2e; } body .filters:not(.collapsed) .region-search { position:sticky; top:0; z-index:2; margin-top:0; padding-right:52px; background:#fff; } body .filters:not(.collapsed) .region-search > svg { display:none; } body .filters:not(.collapsed) #statistics { display:none; } }
/* Мобильный: строка региона в про-фильтрах не на всю ширину */
@media (max-width:800px) { body .advanced-filter .region-search { max-width:300px; } }
/* Мобильный: про-фильтры — скроллится только тело, кнопка закрытия живёт на строке региона (как в базовых).
   z-index 850: слои leaflet (метки/контролы) пробивали верх панели со её z=2 — серые засечки сверху */
@media (max-width:800px) { body .advanced-filter { display:flex; flex-direction:column; overflow:hidden; z-index:850; } body .advanced-filter .advanced-body { flex:1 1 auto; min-height:0; overflow-y:auto; } body .advanced-filter .advanced-top-controls { display:contents; } body .advanced-filter .region-search { position:sticky; top:0; z-index:2; margin-top:0; padding-right:52px; background:#fff; } body .advanced-filter .region-search > svg { display:none; } body .advanced-filter .date-range { margin-top:14px; } body .advanced-filter #close-advanced { position:absolute; top:20px; right:20px; left:auto; bottom:auto; z-index:3; width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 2px 10px #18334a2e; } body .date-menu { z-index:900; } }
/* Мобильный: карточка статистики компактнее, без кнопки дэшборда (и не на всю ширину на планшетах) */
@media (max-width:800px) { body .statistics { left:20px; right:auto; width:min(400px, calc(100% - 40px)); padding:12px 16px; gap:8px 0; grid-template-rows:auto auto 40px; } body.filters-collapsed .filters #statistics { padding:12px 16px; gap:8px; } .statistics strong { font-size:18px; } .statistics span { font-size:13px; } body .statistics .download-button { height:36px; font-size:13px; } body .statistics #chart-button { width:36px; height:36px; flex:none; } }
/* Мобильный: при открытых про-фильтрах белая панель стандартных фильтров (плотный фон v18)
   просвечивает сквозь прозрачную про-панель, а после «‹» (свернуть) остаётся на весь экран —
   белое полотно вместо карты. В этом состоянии стандартная панель прозрачна, как на десктопе */
@media (max-width:800px) { body.advanced-open .filters:not(.collapsed) { background:transparent; box-shadow:none; } }

/* Мобильный: дэшборд на весь экран — как панели фильтров: шапка со счётчиками и «Скрыть»
   закреплена, разрезы — чипсы над диаграммой, скроллится только тело. .chart-main распущен
   display:contents (дети — прямые flex-дети панели; тело order:1 — после разрезов).
   z 850: слои leaflet пробивают панели с меньшим z (см. про-фильтры).
   На узких экранах экономим высоту: заголовки групп («Временные интервалы», «Свойства ДТП»)
   спрятаны — чипсы говорят сами за себя, а каждый заголовок — целая строка; чипсы — одна
   строка с горизонтальным скроллом (перенос давал 2–3 ряда), легенда компактнее, кнопка
   закрытия — только крестик (слово «Скрыть» на мобайле лишнее) */
@media (max-width:800px) { body #chart { inset:0; width:100%; max-width:100%; max-height:none; height:100svh; padding:20px; border-radius:0; overflow:hidden; z-index:850; } body #chart .chart-main { display:contents; } body #chart .chart-body { order:1; flex:1 1 auto; min-height:0; overflow-y:auto; margin-top:10px; } body #chart .chart-side { flex:none; display:flex; flex-wrap:nowrap; align-items:center; gap:4px; margin-top:10px; overflow-x:auto; scrollbar-width:none; } body #chart .chart-side::-webkit-scrollbar { display:none; } body #chart .chart-side-title { display:none; } body #chart .chart-side button { flex:none; min-height:32px; padding:0 10px; font-size:13px; white-space:nowrap; } body #chart .chart-legend { margin-top:8px; font-size:11px; line-height:14px; } body #chart .chart-legend i { width:10px; height:10px; } body #chart .chart-hide { width:36px; padding:0; justify-content:center; } body #chart .chart-hide span { display:none; } }

/* Комбо-графики («По часам/дням/месяцам/годам»): числа осей не уезжают при горизонтальном
   скролле. Сам svg остаётся полноразмерным, а подписи живут в узких липких плашках по краям
   скролла: отрицательные поля кладут их поверх пустых полей svg (размеры полей chart.ts
   передаёт через --pad-l/--pad-r, 46px — запасное), фон плашек = фон панели, иначе под ними
   просвечивал бы прокручиваемый график */
.bars-combo { display:flex; align-items:flex-start; }
.bars-combo > div { flex:none; }
.bars-combo .combo-axis { position:sticky; z-index:1; background:#fff; }
.bars-combo .combo-axis-l { left:0; margin-right:calc(-1 * var(--pad-l, 46px)); }
.bars-combo .combo-axis-r { right:0; margin-left:calc(-1 * var(--pad-r, 46px)); }