/* «Атлас сцен», фаза 3: блок «Карта», города на ленте и в шапке
   (atlas_map*.js, atlas_timeline.js, atlas_head.js; 14-atlas.md §3–§3.2, §16.10).
   Свой файл, тот же слой responsive, что у atlas.css. Три раскладки:
   • уже 600 px — блок свёрнут («Карта · N городов», .at-map-acc); раскрытый —
     карта 4:3 во всю ширину, под ней список городов. Ничего шире экрана;
   • 600–1023 px — блок раскрыт: карта 2:1 во всю ширину, список городов под ней;
   • от 1024 px — карта и список городов рядом (.at-map-grid в две колонки).
   Карта — рисунок SVG (aria-hidden): страны — заливкой, страна с артистами —
   светлее, страна родины — обводкой цветом ромба родины, отдельным слоем над
   странами (.at-map-rim: соседи её не закрашивают); город — закрашенная точка
   («сверено по базе», §3.1), выбранный — с обводкой; родина-город — ромб.
   Граница остаётся волосной при любом масштабе слоя (non-scaling-stroke).
   Цвета суши — свои переменные (--at-map-*): суша к морю не ниже 1,6 : 1,
   страна с артистами к остальной суше — 1,5 : 1, обводка родины и точка —
   не ниже 3 : 1 (ревью фазы 3, §16.11; проверяет тест).
   Окно карты не выше видимой области (телефон в альбомной ориентации) и не
   служит якорем прокрутки: WebKit брал якорем контур страны, и «+» или город
   из списка уводили страницу на сотни пикселей (overflow-anchor: none).
   Палец карту не двигает (своих жестов нет, touch-action не трогаем) — страница
   листается; «рука» и перетаскивание — только мышью (pointer: fine).
   Выбранный город в списке — рамкой и тенью, не только цветом; город без
   координат — штриховой рамкой. Зоны нажатия — 44 px; заголовок города на
   ленте и ссылка в шапке под мышью ниже, под пальцем — 44 px. */
@layer responsive {
.at-map { scroll-margin-top: calc(var(--topbar-h, 64px) + 12px); }
.at-map-cap { margin: 0 0 8px; }
.at-map-cap:empty, .at-map-note:empty, .at-map-nocity:empty, .at-map-msg:empty, .at-map-retry:empty,
.at-map-list:empty, .at-map-hint:empty, .at-map-panel:empty { display: none; }
.at-map-note { margin: 0 0 10px; color: var(--text-mid); font-size: 14px; overflow-wrap: anywhere; }
.at-map-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.at-map-view, .at-map-side { display: flex; flex-direction: column; gap: 8px; }

/* Окно карты: отношение сторон задано в разметке — место занято до загрузки файла. */
.at-map { --at-map-land: #323746; --at-map-on: #4c5368; --at-map-line: #70778e; }
.at-map-canvas { position: relative; width: 100%; border: 1px solid var(--border-soft); border-radius: var(--radius);
    background: var(--bg-app); overflow: hidden; overflow-anchor: none; user-select: none; -webkit-user-select: none;
    min-height: 160px; max-height: calc(100dvh - var(--topbar-h, 64px) - var(--bottom-stack, 0px) - 76px); }
.at-map-canvas[hidden], .at-map-bar[hidden] { display: none; }
.at-map-wait { animation: at-pulse 1.4s ease-in-out infinite; }
.at-map-svg { display: block; width: 100%; height: 100%; }
.at-map-c { fill: var(--at-map-land); stroke: var(--at-map-line); stroke-width: 0.7; stroke-linejoin: round;
    vector-effect: non-scaling-stroke; }
.at-map-c.on { fill: var(--at-map-on); }
.at-map-rim { fill: none; stroke: var(--warning); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke;
    pointer-events: none; }
.at-map-cn { fill: var(--text-mid); font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; paint-order: stroke; stroke: var(--bg-app); stroke-width: 2.5px; stroke-linejoin: round;
    pointer-events: none; }
.at-map-hit { fill: transparent; stroke: none; cursor: pointer; }
.at-map-dot { fill: var(--at-c, #cc9a95); stroke: var(--bg); stroke-width: 1.5; cursor: pointer; }
.at-map-dot.sel { stroke: var(--text-strong); stroke-width: 3; }
.at-map-home { fill: none; stroke: var(--warning); stroke-width: 1.5; pointer-events: none; }
.at-map-homept { fill: var(--warning); stroke: var(--bg); }
.at-map-lb { fill: var(--text); font-family: var(--font-ui); font-size: 11px; paint-order: stroke; stroke: var(--bg);
    stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.at-map-lb.sel { fill: var(--text-strong); font-weight: 700; }
/* Кнопки масштаба и — рядом, в той же строке — слова о дальних городах: строка не растёт. */
.at-map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.at-map-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.at-map-ctl .btn { min-width: 40px; justify-content: center; }
.at-map-ctl .btn[hidden], .at-selbar .btn[hidden] { display: none; }
.at-map-hint { flex: 1 1 220px; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.at-map-msg { margin: 0; color: var(--text-mid); font-size: 13px; overflow-wrap: anywhere; }

/* Список городов — тот же перечень, что на карте: кнопки с числом артистов. */
.at-map-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.at-city { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 4px 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-card); color: var(--text);
    font: inherit; font-size: 13px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.at-city:hover { border-color: var(--accent); }
.at-city-nm { color: var(--text-strong); font-weight: 600; }
.at-city-n { min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--bg-elev); color: var(--text-mid);
    font-family: var(--font-mono); font-size: 11px; line-height: 18px; text-align: center; }
.at-city.off { border-style: dashed; }
.at-city.cur { border-color: var(--accent-strong); }
.at-city[aria-pressed="true"] { border-color: var(--accent-strong); background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-strong); }
.at-map-nocity { margin: 0; overflow-wrap: anywhere; }
.at-map-panel { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
    overflow-wrap: anywhere; }
.at-map-panel > p { margin: 0; }
.at-map-panel .at-h4 { margin: 0 0 4px; }
.at-map-facts { margin: 0 0 8px; }
.at-map-arts { margin: 0 0 8px; padding: 0; list-style: none; }

/* Телефон: свёрнутый блок. Заголовок — внутри summary, размером как у соседних блоков. */
.at-map-acc > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
.at-map-acc > summary::-webkit-details-marker { display: none; }
.at-map-acc > summary::before { content: '▸'; margin-right: 8px; color: var(--text-dim); }
.at-map-acc[open] > summary::before { content: '▾'; }
.at-map-acc > summary > .at-h { margin: 0; }
.at-map-acc > .at-map-in { padding-top: 4px; }

/* Лента: заголовок города — кнопка выбора; под ним — сведённые районы или причины. */
.at-gbtn { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; margin-left: -6px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-card);
    color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
    overflow-wrap: anywhere; }
.at-gbtn:hover { border-color: var(--accent); }
/* «Город не указан» — не кнопка: обычным цветом заголовка, без рамки. */
.at-gname { color: var(--text-mid); }
.at-gbtn[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-strong); color: var(--text-strong); }
.at-gnote { flex: 1 1 100%; margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.at-acc > .at-gnote { padding: 0 12px 8px; }
.at-grp, .at-pg { scroll-margin-top: calc(var(--tc-stick, 64px) + 64px); }
.at-pg.sel > .at-acc { border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
/* Шапка: город-родина — ссылка на свой город атласа. */
.at-linkbtn { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: var(--accent-text);
    font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.at-lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--at-c); }
.at-lg-home { color: var(--warning); font-size: 14px; line-height: 1; }

.at-page .at-linkbtn:focus-visible, .at-page .at-gbtn:focus-visible, .at-page .at-city:focus-visible {
    outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* Полный вид: карта и список городов рядом. */
@media (min-width: 1024px) {
    .at-map-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px 28px; }
    .at-map-grid.at-map-solo { grid-template-columns: minmax(0, 1fr); }
}
/* Палец: всё, что нажимается, — не ниже 44 px. */
@media (pointer: coarse) {
    .at-map-ctl .btn { min-height: 44px; min-width: 44px; }
    .at-gbtn { min-height: 44px; }
    .at-linkbtn { min-height: 44px; }
    .at-map-panel .btn { min-height: 44px; }
}
/* Мышь: карту можно тащить. */
@media (pointer: fine) {
    .at-map-canvas.at-map-drawn { cursor: grab; }
    .at-map-canvas.at-map-drag { cursor: grabbing; }
}
@media (max-width: 599px) {
    .at-map-ctl .btn { flex: 1 1 auto; }
    .at-map-panel .actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .at-map-wait { animation: none; }
    .at-city, .at-gbtn { transition: none; }
}
} /* ── end @layer responsive ── */