/* ============================================================
   RecreMap — boho redesign (per design_handoff_recremap)
   Палітра: крем #F4EBDA · ліс #2F4A37 · шавлія #7E9466 ·
   теракота #C16D45 · охра #D79A3F
   ============================================================ */
:root {
    --bg: #F4EBDA;
    --bg-2: #EFE3CD;
    --surface: #FBF5E9;
    --surface-2: #FFFDF8;
    --green: #2F4A37;
    --green-hover: #26402E;
    --sage: #7E9466;
    --sage-light: #9DB37E;
    --terracotta: #C16D45;
    --ochre: #D79A3F;
    --ochre-light: #E7B65A;
    --ink: #2E2419;
    --ink-2: #3A3127;
    --muted: #6B5D49;
    --muted-2: #8A7A5C;
    --muted-3: #9A8A6E;
    --border: #E3D4B3;
    --border-2: #E8D9BB;
    --border-3: #ECE0C6;
    --dash: #D8C69F;
    /* Чип зручності (значення = _shared/tokens.css: --rm-chip-amenity-*) */
    --chip-amenity-bg: #E6ECD9;
    --chip-amenity-fg: #5E6B48;
    --header-h: 66px;
    /* RECRE-382 «boho-LUT» — колірний грейд базової підложки карт
       (.leaflet-tile-pane). Змінна, а не літерал у правилі: грейд
       міняється в одному місці і його можна послабити для окремого
       інстансу карти (Designer TOR-recre382 §4.2 п.2).
       Чому саме grayscale+sepia: saturate() лише приглушує насиченість,
       але ЗБЕРІГАЄ різницю відтінків — рожева автомагістраль OSM
       лишається рожевою, кислотний парк зеленим. grayscale() стягує все
       до однієї яскравісної осі, після чого sepia() перефарбовує в
       єдиний теплий тон: пара працює як м'який LUT і робить будь-який
       рендер OSM однорідною кремовою картою під нашими sage/терракота
       шарами (вони лежать ВИЩЕ і фільтром не зачіпаються).
       contrast(0.95) — свідомий компроміс: brightness() діє й на
       підписи топоніміки, і без нього текст тайлів втрачає контраст.
       Якщо доведеться підтягувати читабельність — знижувати brightness,
       НЕ contrast. */
    --rm-tile-grade: grayscale(0.45) sepia(0.34) saturate(0.85)
                     brightness(1.04) contrast(0.95) hue-rotate(-8deg);
    /* Кольори типів POI (README, таблиця POI; = _shared/tokens.css --poi-*) */
    --poi-entrance:   #4E6B41;
    --poi-cafe:       #C16D45;
    --poi-restaurant: #B0552F;
    --poi-toilet:     #5E9A95;
    --poi-bench:      #8A7A5C;
    --poi-playground: #D79A3F;
    --poi-sports:     #C98A3C;
    --poi-parking:    #6B5D49;
    /* Fallback невідомого/other типу — аліас наявного --muted-3, не новий HEX */
    --poi-other:      var(--muted-3);
    /* Маркер події на карті (RECRE-169, TOR-event-location-marker §6.2):
       приглушений сливовий поза палітрою --poi-*/LAYER_META. З RECRE-280
       (TOR-event-marker-colors) це ФОЛБЕК: заливку задає EventCategory.color
       через інлайн --event-cat-color (makeEventMarker); --event-marker
       лишається дефолтом моделі і кольором категорії «Концерт» */
    --event-marker:   #8A5A83;
    /* Шкала AQI 1..5 (park-environment-metrics): зібрана виключно з
       наявної палітри — нових hex-кольорів не введено (дизайн-ТЗ §5.1) */
    --env-aqi-1: var(--poi-entrance);    /* 1 Добре        #4E6B41 */
    --env-aqi-2: var(--sage-light);      /* 2 Задовільно   #9DB37E */
    --env-aqi-3: var(--ochre);           /* 3 Помірно      #D79A3F */
    --env-aqi-4: var(--terracotta);      /* 4 Погано       #C16D45 */
    --env-aqi-5: var(--poi-restaurant);  /* 5 Дуже погано  #B0552F */
}

[x-cloak] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ------------------------------------------------------------
   Глобальний фікс «мертвого центру» кнопок з іконками.
   Декоративні Lucide-іконки (<i data-lucide> до рендеру та <svg>
   після lucide.createIcons() — БЕЗ data-lucide, див. alpine-data.js)
   всередині клікабельних елементів перехоплювали клік на себе:
   click.target ставав <path>/<svg>, і обробник на кнопці не
   спрацьовував у центрі. pointer-events: none робить іконки
   «прозорими» для миші — клік завжди таргетить сам button/a.
   Правило навмисно широке: покриває і майбутні кнопки з іконками
   (замість точкових фіксів по класах, як було в 63fd24d).
   :hover/:active на батьках працюють як і раніше; жоден svg/i
   у проєкті не має власних обробників чи title усередині button/a.
   ------------------------------------------------------------ */
button svg, button i,
a svg, a i,
[role="button"] svg, [role="button"] i,
summary svg, summary i,
label svg, label i {
    pointer-events: none;
}

/* ------------------------------------------------------------
   Обгортка перемикних lucide-іконок (фікс дефекту D-1, QA-звіт
   Report-poi-legend-icon-duplication-bug 2026-07-25).
   Патерн `<template x-if>` + <i data-lucide> дублював іконки:
   createIcons() замінює <i> на <svg> через replaceChild, Alpine
   лишається з посиланням на ВІДІРВАНИЙ вузол — .remove() при
   x-if=false нічого не прибирав, +1 svg на кожен клік.
   Фікс: ОБИДВІ іконки завжди в DOM, x-show — на цій обгортці
   (її lucide не чіпає, тож біндінг живе). display: contents —
   svg лишається прямим flex-item'ом кнопки (margin-left:auto
   у .chev, flex:none тощо працюють як раніше); інлайновий
   display:none від x-show має вищий пріоритет за клас.
   ------------------------------------------------------------ */
.icon-swap { display: contents; }

body {
    font-family: 'Mulish', system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    background-image:
        radial-gradient(120% 90% at 0% 0%, rgba(157,179,126,0.16), transparent 55%),
        radial-gradient(120% 90% at 100% 0%, rgba(215,154,63,0.13), transparent 50%),
        radial-gradient(140% 120% at 100% 100%, rgba(193,109,69,0.10), transparent 55%);
    -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbb78f; border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.serif { font-family: 'Cormorant Garamond', Georgia, serif; }

@keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rmPop { from { opacity: 0; transform: scale(0.96) translateY(14px); } to { opacity: 1; transform: none; } }

button { font-family: inherit; }

/* ===== Header ===== */
.rm-header {
    /* RECRE-460: z-index 40 → 41. Хедер і .park-overlay (/map/, 5922)
       мали ОДНАКОВІ 40, а overlay стоїть пізніше в DOM — у кореневому
       stacking-контексті весь шар хедера (включно з випадними меню
       «⋮» .rm-header-tools і міста .rm-city-menu, їхні z-index 45
       живуть УСЕРЕДИНІ контексту хедера й назовні не діють) малювався
       ПІД overlay парку: нижня частина відкритого дропдауна «⋮»
       зрізалась контролами overlay («До огляду карти», «×») і не
       приймала кліки (мобільний скріншот ПО). Спатіально хедер і
       overlay не перетинаються (overlay всередині .map-wrap, нижче
       шапки) — 41 міняє лише шарування дропдаунів. Все, що має бути
       над шапкою, лишається вище: env-sheet(45/46), онбординг(60),
       nudge(70), модалки(75/80), lightbox(90). */
    position: sticky; top: 0; z-index: 41;
    display: flex; align-items: center; gap: 28px;
    padding: 0 30px; height: var(--header-h);
    background: rgba(244,235,218,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.rm-logo { display: flex; align-items: center; gap: 11px; background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; }
.rm-logo-orb {
    position: relative; width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, var(--ochre-light), var(--ochre) 70%);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 5px rgba(215,154,63,0.18);
}
.rm-logo-orb span { width: 13px; height: 13px; border-radius: 50%; background: var(--green); }
.rm-logo-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; font-weight: 700; letter-spacing: 0.3px; color: var(--green); }

.rm-nav { display: flex; gap: 6px; margin-left: 6px; }
.rm-tab {
    display: inline-block; background: transparent; color: #5e5037; border: none;
    padding: 8px 18px; border-radius: 30px; font-size: 14px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.rm-tab:hover { transform: translateY(-1px); box-shadow: 0 5px 13px -5px rgba(47,74,55,0.4); background: rgba(47,74,55,0.09); }
.rm-tab.active { background: var(--green); color: var(--bg); }
.rm-tab.active:hover { background: var(--green-hover); }

.rm-header-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.rm-kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-3); }

.rm-city { position: relative; }
.rm-city-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 700; color: var(--green);
    background: var(--bg-2); padding: 8px 14px; border-radius: 30px;
    border: 1px solid var(--border); cursor: pointer;
    transition: background .15s ease;
}
.rm-city-btn:hover { background: var(--border); }
.rm-city-btn svg { width: 15px; height: 15px; }
.rm-city-btn .chev { width: 14px; height: 14px; opacity: 0.7; }
/* RECRE-467: назва напрямку (activeCityName()) без обмежень розпирала
   .rm-header — довгі назви областей («Івано-Франківська область»,
   «Дніпропетровська область», «Кіровоградська область») або переносили
   ввесь .rm-city flex-елемент .rm-header-main на новий рядок (mobile/
   tablet flex-wrap), або (десктоп, .rm-header-main має фіксовану
   height: var(--header-h)) переносили текст усередині кнопки на 2 рядки
   й вилазили за межі хедера — у обох випадках фактична висота хедера
   змінювалась залежно від довжини поточної назви. Той самий прийом, що
   .rm-auth-name (нижче, ~5374): ellipsis + max-width замість переносу;
   повна назва лишається доступною через :title на кнопці (header.html).
   max-width звужується в медіа-блоках нижче (681–900px, ≤680px) — на
   вузьких ширинах бюджет ряду 1 менший. */
.rm-city-name {
    display: inline-block; max-width: 200px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
/* RECRE-461: поки показано картку парку (/park/{slug}/ або overlay
   /map/), перемикач напрямку неактивний — клік по ньому не вів нікуди,
   поки картка займала екран. Конвенція :disabled з опацією/курсором —
   та сама, що .pdc-btn--like:disabled/.pcat-nav__btn:disabled нижче. */
.rm-city-btn:disabled { opacity: 0.55; cursor: default; }
.rm-city-btn:disabled:hover { background: var(--bg-2); }
.rm-city-overlay { position: fixed; inset: 0; z-index: 44; }
.rm-city-menu {
    position: absolute; top: 48px; right: 0; z-index: 45;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 16px; padding: 7px; min-width: 196px;
    box-shadow: 0 22px 48px -22px rgba(47,74,55,0.5);
    animation: rmPop .18s ease;
    /* RECRE-455: без max-height/overflow список (24 області + міста-
       супутники кожної) виходив за нижню межу в'юпорта без жодного
       способу прокрутити решту — "залочений" список. 24px знизу —
       той самий відступ, що top: 48px відступ згори (симетрія). */
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.rm-city-menu-title { font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #b6a37e; padding: 6px 10px 8px; }
/* RECRE-488: заголовок + пункт «Уся Україна» — липка шапка списку.
   Меню прокручується з RECRE-455 (24 області + їхні міста-супутники),
   тож єдиний рядок повернення до загальнодержавного огляду інакше
   від'їжджав за верхній край рівно тоді, коли користувач шукав свою
   область. top: -7px — компенсація padding контейнера (.rm-city-menu),
   щоб шапка ставала врівень з його верхом; фон — той самий surface,
   інакше рядки просвічували б крізь неї під час прокрутки. */
.rm-city-menu-head {
    position: sticky; top: -7px; z-index: 1;
    background: var(--surface);
    margin: -7px -7px 0; padding: 7px 7px 0;
    border-radius: 16px 16px 0 0;
}
.rm-city-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 10px 12px; border-radius: 11px; border: none;
    cursor: pointer; font-size: 14px; font-weight: 700; text-align: left;
    transition: background .12s ease;
    background: transparent; color: var(--ink-2);
}
.rm-city-item:hover { box-shadow: inset 0 0 0 1.6px rgba(126,148,102,0.55); background: #f1e6cf; }
.rm-city-item.active { background: var(--green); color: var(--bg); }
.rm-city-item.active:hover { background: #365441; }
/* RECRE-114: пункт меню — «{Місто} та приміська територія»: назва +
   суфікс-підрядок меншим кеглем; іконка тримається першого рядка */
.rm-city-item .city-label { display: inline-flex; align-items: flex-start; gap: 9px; }
.rm-city-item .city-label svg { width: 15px; height: 15px; opacity: 0.85; margin-top: 2px; }
.rm-city-item .city-label__text { display: flex; flex-direction: column; gap: 1px; }
.rm-city-item .city-label__suburbs {
    font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
    color: var(--muted-2);
    white-space: nowrap;
}
.rm-city-item.active .city-label__suburbs { color: rgba(244,235,218,0.8); }
.rm-city-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.3px; color: #b6a37e; }
.rm-city-badge.avail { color: var(--terracotta); }
.rm-city-item.active .rm-city-badge { color: rgba(244,235,218,0.75); }
/* RECRE-491: статус тимчасово окупованої території замість «скоро».
   Рядок утричі довший за «скоро» і за «286 парків», тож без обмеження
   ширини він розсував меню на пів екрана; 92px тримають його у двох
   рядках по правому краю, не чіпаючи решту пунктів. Кегль на пів
   пункта менший і БЕЗ капслока/окличних знаків — це констатація
   факту, а не наліпка (той самий стриманий тон, що в банері
   підтримки ЗСУ). Колір лишається приглушеним: акцентна теракота
   зарезервована за «є дані». */
.rm-city-badge--occupied {
    max-width: 92px; text-align: right; line-height: 1.25;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
    color: var(--muted-2);
}
.rm-city-item.active .rm-city-badge--occupied { color: rgba(244,235,218,0.75); }
/* RECRE-114 (≤680px): пункт із суфіксом ширший за старі 196px, а кнопка
   міста стоїть лівіше блоку акаунта — right-анкер до кнопки виводив
   меню за лівий край екрана. На телефоні меню кріпиться до viewport:
   на всю ширину одразу під шапкою (реальна висота — --header-h-actual
   від ResizeObserver, alpine-data.js) */
@media (max-width: 680px) {
    .rm-city-menu {
        position: fixed;
        left: 12px; right: 12px; top: calc(var(--header-h-actual, var(--header-h)) + 8px);
        width: auto; min-width: 0;
    }
}

/* ===== Page fade ===== */
.page-fade { animation: rmFade .4s ease; }

/* ===== Hero (каталог) ===== */
.hero-section { position: relative; overflow: hidden; padding: 0 30px; }
.hero {
    position: relative; max-width: 1280px; margin: 26px auto 0;
    border-radius: 30px; overflow: hidden; min-height: 280px;
    display: flex; align-items: flex-end;
    box-shadow: 0 28px 60px -32px rgba(47,74,55,0.5);
}
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(36,52,38,0.82) 0%, rgba(36,52,38,0.45) 45%, rgba(36,52,38,0.12) 100%); }
.hero-content { position: relative; padding: 46px 50px; max-width: 640px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: var(--ochre-light);
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--ochre-light); }
.hero h1 {
    margin: 14px 0 10px; font-size: 54px; line-height: 1.02; font-weight: 700;
    color: var(--surface); text-wrap: balance;
    font-family: 'Cormorant Garamond', Georgia, serif;
}
.hero-sub { margin: 0; font-size: 16.5px; line-height: 1.55; color: rgba(251,245,233,0.85); max-width: 480px; }
.hero-stats { display: flex; gap: 26px; margin-top: 24px; }
.hero-stats .divider { width: 1px; background: rgba(251,245,233,0.25); }
.hero-stats .num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 38px; font-weight: 700; color: var(--surface); line-height: 1; }
.hero-stats .label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(231,182,90,0.95); margin-top: 3px; }

/* ===== Catalog layout ===== */
.catalog-grid {
    max-width: 1280px; margin: 30px auto 70px; padding: 0 30px;
    display: grid; grid-template-columns: 262px 1fr; gap: 30px; align-items: start;
}

/* ===== Sidebar filters ===== */
/* RECRE-137: sticky-сайдбар, вищий за viewport, раніше не мав власного
   скролу — його нижню частину неможливо було прогорнути, доки не
   прокрутиться ВСЯ сітка карток зон праворуч (класична пастка
   position:sticky без max-height). Обмеження висоти вікном
   (86px sticky-top + 16px нижній зазор) + внутрішній overflow-y
   роблять блок фільтрів прокручуваним незалежно від сторінки;
   overscroll-behavior: contain — скрол сайдбара не «прокидається»
   на сторінку (той самий патерн, що .panel-scroll на /map/). */
.filter-card {
    position: sticky; top: 86px;
    max-height: calc(100vh - 102px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 22px; padding: 22px;
    box-shadow: 0 18px 40px -30px rgba(47,74,55,0.4);
}
.search-box { position: relative; }
.search-box input {
    width: 100%; padding: 11px 14px 11px 38px; border-radius: 12px;
    border: 1px solid #e2d3b4; background: var(--surface-2);
    font-family: inherit; font-size: 14px; color: var(--ink); outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.search-box input:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(126,148,102,0.18); }
.search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #a39272; pointer-events: none; }

.side-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--muted-3); margin-bottom: 10px;
}
.cat-list { display: flex; flex-direction: column; gap: 4px; }
.cat-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 9px 12px; border-radius: 11px; border: none;
    cursor: pointer; font-size: 14px; font-weight: 600; text-align: left;
    background: transparent; color: var(--ink-2);
}
.cat-row:hover { box-shadow: inset 0 0 0 1.6px rgba(126,148,102,0.6); background: #f1e6cf; }
.cat-row.active { background: var(--green); color: var(--bg); }
.cat-row.active:hover { background: #365441; }
.cat-count { font-size: 12px; font-weight: 800; color: #b6a37e; }
.cat-row.active .cat-count { color: rgba(244,235,218,0.7); }

.chip-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
    background: var(--bg-2); color: #5e5037;
    border: 1px solid var(--border); padding: 7px 13px; border-radius: 30px;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 5px 12px -5px rgba(47,74,55,0.4); background: #e8dcc1; border-color: #cdb98f; }
.chip.active { background: var(--green); color: var(--bg); border-color: var(--green); }
.chip.active:hover { background: var(--green-hover); }

.am-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-2); color: #5e5037;
    border: 1px solid var(--border); padding: 7px 12px; border-radius: 30px;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.am-chip svg { width: 14px; height: 14px; }
.am-chip:hover { transform: translateY(-1px); box-shadow: 0 5px 12px -5px rgba(47,74,55,0.4); background: #e8dcc1; border-color: #cdb98f; }
.am-chip.active { background: var(--sage); color: #fff; border-color: var(--sage); }
.am-chip.active:hover { background: #6d8359; }

/* RECRE-136: правило .legend-block видалено разом з блоком «Легенда
   шарів» сайдбара каталогу (index.html); .legend-rows/.legend-row/.swatch
   лишаються — їх використовує легенда панелі /map/ (.panel-legend) */
.legend-rows { display: flex; flex-direction: column; gap: 8px; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #5e5037; font-weight: 600; }
.legend-row .swatch { width: 18px; height: 6px; border-radius: 4px; flex: none; }
/* Плашку .swatch--review («потребує перевірки») видалено (RECRE-238 §3) —
   рядок легенди і охристий review-стиль полігонів прибрано з UI */

.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }

/* ============================================================
   Comfort-attribute chips — фіча park-comfort-attributes.
   Перенесено з design_mockups/_shared/comfort-chips.css
   (значення без змін; токени --rm-* → наявні токени main.css).
   Споживачі: фільтри каталогу та лівої панелі карти (зараз),
   park-detail-card і search-and-filter-parks (наступні фічі).
   Довідники ParkCategory/SurfaceType рендеряться динамічно
   з GET /api/categories/ та /api/surfaces/ — без хардкоду.
   ============================================================ */

/* --- Display-чипи (read-only), блок "Зручності та покриття" картки --- */
.pdc__chips {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin-bottom: 18px;
}
.pdc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700;
    padding: 6px 12px; border-radius: 20px;
    white-space: nowrap;
}
.pdc-chip i, .pdc-chip svg { width: 13px; height: 13px; }
.pdc-chip--amenity { background: var(--chip-amenity-bg); color: var(--chip-amenity-fg); }
.pdc-chip--surface { background: var(--bg-2); color: var(--muted-2); }

/* --- Toggle-чипи фільтрів (.rm-fchip): <button aria-pressed>,
       активний стан = .is-active (синхронізується з aria-pressed) --- */
.rm-fchip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.rm-fchip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700;
    padding: 7px 13px;
    border-radius: 30px;
    background: var(--bg-2);
    color: var(--muted);
    border: 1px solid var(--border);
    cursor: pointer; white-space: nowrap;
    transition: transform .18s, box-shadow .18s,
                background .18s, color .18s, border-color .18s;
}
.rm-fchip i, .rm-fchip svg { width: 13px; height: 13px; }

.rm-fchip:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px -12px rgba(47,74,55,0.45);
}
.rm-fchip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}

/* Активний стан: БАЗОВИЙ (чип без модифікатора — чипи періоду афіші
   на головній, homepage-news-events) → зелений фон, кремовий текст,
   як у категорії/покриття. Модифікатори нижче (--amenity/--flag)
   перевизначають його за порядком каскаду (однакова специфічність). */
.rm-fchip.is-active {
    background: var(--green);
    border-color: var(--green);
    color: var(--bg);
}

/* Активний стан: ЗРУЧНОСТІ (has_*) → шавлієвий фон, світлий текст */
.rm-fchip--amenity.is-active {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--surface-2);
}
/* Активний стан: КАТЕГОРІЯ, ПОКРИТТЯ і ОБ'ЄКТИ В ПАРКУ (RECRE-272,
   .rm-fchip--poicat) → зелений фон, кремовий текст */
.rm-fchip--category.is-active,
.rm-fchip--surface.is-active,
.rm-fchip--poicat.is-active {
    background: var(--green);
    border-color: var(--green);
    color: var(--bg);
}
.rm-fchip--category.is-active i,
.rm-fchip--category.is-active svg,
.rm-fchip--poicat.is-active i,
.rm-fchip--poicat.is-active svg { color: var(--ochre-light); }

/* Чіп .rm-fchip--flag («Потребує перевірки») видалено (RECRE-238 §3) —
   групу «Статус даних» прибрано з фільтрів каталогу і карти */

/* Skeleton: довідник ще вантажиться з API */
.rm-fchip--skeleton {
    pointer-events: none;
    color: transparent;
    border-color: transparent;
    min-width: 76px;
    animation: rmChipPulse 1.2s ease-in-out infinite;
}
.rm-fchip--skeleton:hover { transform: none; box-shadow: none; }
@keyframes rmChipPulse { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }

/* --- Рядки категорій (.rm-catrow), ліва панель фільтрів каталогу --- */
.rm-catlist { display: flex; flex-direction: column; gap: 4px; }

.rm-catrow {
    display: flex; align-items: center; gap: 9px;
    width: 100%; text-align: left;
    font-size: 13.5px; font-weight: 600;
    color: var(--ink-2);
    background: transparent; border: none;
    border-radius: 11px;
    padding: 9px 12px;
    cursor: pointer;
    transition: box-shadow .18s, background .18s, color .18s;
}
.rm-catrow i, .rm-catrow svg { width: 15px; height: 15px; color: var(--muted-2); flex: none; }

.rm-catrow:hover { box-shadow: inset 0 0 0 1.6px rgba(126,148,102,0.55); }
.rm-catrow:focus-visible { outline: none; box-shadow: inset 0 0 0 1.6px rgba(126,148,102,0.55), 0 0 0 3px rgba(126,148,102,0.35); }

.rm-catrow.is-active { background: var(--green); color: var(--bg); }
.rm-catrow.is-active i, .rm-catrow.is-active svg { color: var(--ochre-light); }

.rm-catrow__count {
    margin-left: auto;
    font-size: 12px; font-weight: 800;
    color: var(--muted-3);
    background: var(--bg-2);
    border-radius: 9px;
    padding: 2px 8px;
}
.rm-catrow.is-active .rm-catrow__count {
    background: rgba(251,245,233,0.16);
    color: var(--bg);
}

/* --- Заголовок групи фільтрів --- */
.rm-filter-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--muted-3);
    margin: 0 0 9px;
}

/* --- Порожній довідник (адміністратор ще не наповнив) --- */
.rm-dict-empty {
    display: flex; align-items: center; gap: 9px;
    border: 1px dashed var(--dash);
    border-radius: 12px;
    padding: 11px 13px;
    color: var(--muted-3);
    font-size: 12.5px; font-weight: 600;
}
.rm-dict-empty i, .rm-dict-empty svg { width: 15px; height: 15px; flex: none; }

/* ===== Results head + segmented switch ===== */
.results-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.result-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 700; color: var(--green); line-height: 1; }
.result-sub { font-size: 12.5px; color: var(--muted-2); margin-top: 4px; font-weight: 600; }
.seg-group { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.seg-label { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-3); }
.seg-wrap { display: flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 30px; padding: 3px; }
.seg-btn {
    background: transparent; color: var(--muted-2); border: none;
    padding: 6px 14px; border-radius: 30px; font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: color .15s ease, background .15s ease;
}
.seg-btn:hover { color: var(--green); background: rgba(251,245,233,0.55); }
.seg-btn.active { background: var(--surface); color: var(--green); box-shadow: 0 2px 6px rgba(47,74,55,0.15); }

/* catalog-sort (дизайн-ТЗ 9.2): обгортка контролів gridhead —
   сортування + стиль картки, кожен з мікро-підписом. Перебирає
   margin-left:auto із .seg-group (той лишається для сумісності). */
.seg-controls {
    margin-left: auto;
    display: flex; align-items: flex-end; gap: 16px;
    flex-wrap: wrap;
}
.seg-ctrl { display: flex; flex-direction: column; gap: 5px; }
.seg-ctrl__label {
    font-size: 9.5px; font-weight: 800;
    letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--muted-3);
    padding-left: 8px;
}
/* Сегмент з іконкою (перемикач сортування); іконка активного —
   теракота (перегук з цифрою POI в бейджах/статистиці) */
.seg-btn--icon { display: inline-flex; align-items: center; gap: 6px; }
.seg-btn--icon i, .seg-btn--icon svg { width: 13px; height: 13px; flex: none; }
.seg-btn--icon.active i, .seg-btn--icon.active svg { color: var(--terracotta); }
.seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
/* Вузькі екрани: контроли переносяться під лічильник цілим рядком */
@media (max-width: 760px) {
    .seg-controls { width: 100%; margin-left: 0; }
    /* Довший підпис "За кількістю точок інтересу" (заміна "POI"):
       знімаємо min-width:auto по ланцюжку flex-елементів, щоб пілюля
       могла стиснутись і текст переносився, а група не вилазила
       за край на вузьких екранах (~360px) */
    .seg-ctrl { min-width: 0; max-width: 100%; }
    .seg-btn { min-width: 0; }
}

/* ===== Cards: арки ===== */
.grid-arch { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 22px; }
/* Картки каталогу тепер <a href="/park/{slug}/"> (park-detail-page,
   зміна вимоги 2026-07-05) — знімаємо дефолти якоря */
a.card-arch, a.card-editorial {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.card-editorial { display: flex; }

.card-arch {
    text-align: left; background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 22px 22px 18px 18px; padding: 0; cursor: pointer; overflow: hidden;
    box-shadow: 0 16px 34px -28px rgba(47,74,55,0.55);
    transition: transform .18s ease, box-shadow .18s ease;
    animation: rmFade .5s ease both;
}
.card-arch:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -26px rgba(47,74,55,0.6); }
.card-photo { position: relative; height: 172px; background: linear-gradient(135deg, var(--sage-light), var(--sage)); }
.card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 70px 70px; }
.card-body { padding: 16px 18px 18px; }
.card-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--terracotta); }
.card-name { margin: 5px 0 7px; font-size: 23px; font-weight: 700; color: var(--green); line-height: 1.05; font-family: 'Cormorant Garamond', Georgia, serif; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-2); font-weight: 600; }
.card-meta svg { width: 13px; height: 13px; flex: none; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bg-2); color: #5e6b48;
    font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 20px;
}
.tag-chip svg { width: 12px; height: 12px; }

/* ===== Cards: журнал ===== */
.grid-editorial { display: flex; flex-direction: column; gap: 16px; }
.card-editorial {
    display: flex; gap: 0; text-align: left;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 20px; padding: 0; cursor: pointer; overflow: hidden;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.55);
    transition: transform .18s ease, box-shadow .18s ease;
    animation: rmFade .5s ease both;
}
.card-editorial:hover { transform: translateX(4px); box-shadow: 0 22px 40px -24px rgba(47,74,55,0.6); }
.card-editorial .ed-photo { position: relative; width: 240px; min-height: 160px; flex: none; background: linear-gradient(135deg, var(--sage-light), var(--sage)); }
.card-editorial .ed-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-editorial .ed-body { padding: 20px 24px; flex: 1; display: flex; flex-direction: column; }
.card-editorial .card-name { margin: 5px 0 8px; font-size: 28px; line-height: 1.02; }
.card-editorial .ed-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 520px; }
.card-editorial .ed-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 14px; }
.card-editorial .tag-chip { font-size: 12px; padding: 5px 11px; }

/* ===== Empty state ===== */
.empty-block {
    text-align: center; padding: 80px 24px;
    background: var(--surface); border: 1px dashed var(--dash); border-radius: 22px;
}
.empty-block .empty-orb {
    width: 62px; height: 62px; border-radius: 50%; background: var(--bg-2);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.empty-block .empty-orb svg { width: 26px; height: 26px; color: #b6a37e; }
.empty-block .empty-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 700; color: var(--green); }
.empty-block p { font-size: 14.5px; color: var(--muted-2); max-width: 340px; margin: 8px auto 18px; }
.btn-reset {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green); color: var(--bg); border: none;
    padding: 11px 22px; border-radius: 30px; font-weight: 700; font-size: 14px; cursor: pointer;
    transition: transform .18s, box-shadow .18s, background .18s;
}
.btn-reset:hover {
    background: var(--green-hover);
    transform: translateY(-1px); box-shadow: 0 14px 24px -14px rgba(47,74,55,0.6);
}
.btn-reset:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.btn-reset svg { width: 15px; height: 15px; }

/* Лінк "Скинути фільтри" в підрядку-статусі сітки (search-and-filter-parks):
   видимий лише коли застосовано фільтри понад обов'язкове місто */
.result-reset {
    font-size: 12.5px; font-weight: 800; color: var(--terracotta);
    background: none; border: none; padding: 0; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.result-reset:hover { color: var(--green); }
.result-reset:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); border-radius: 4px;
}

/* ===== Модалка парку ===== */
.modal-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(36,52,38,0.55); backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    padding: 30px; animation: rmFade .25s ease;
}
/* ============================================================
   park-detail-card (.pdc) — уніфікована "повна картка" парку
   (UC-06; <<include>> з UC-01 та UC-07). Один компонент, контексти
   виводу:
     .pdc[data-variant="modal"] — модалка каталогу (park_modal.html);
     .pdc[data-variant="page"]  — /park/{slug}/ і overlay /map/.
   (Колишній .pdc[data-variant="panel"] — вузька права панель карти —
   видалений разом із панеллю, RECRE-115.)
   Перенесено з design_mockups/park-detail-card/park-detail-card.css
   (значення без змін; токени --rm-* → наявні токени main.css).
   Чипи .pdc__chips/.pdc-chip--* — вище (park-comfort-attributes);
   toggle-модифікатор .pdc-poi-group--toggle — нижче
   (park-amenities-and-poi).
   ============================================================ */
.pdc {
    color: var(--ink-2);
    background: var(--surface);
    display: flex;
    overflow: hidden;
}
.pdc[data-variant="modal"] {
    width: 100%; max-width: 920px; max-height: 88vh;
    border-radius: 26px;
    box-shadow: 0 40px 90px -30px rgba(36,52,38,0.7);
    flex-direction: row;
    animation: rmPop .3s ease;
}
/* --- Блоки 1–2. Медіа: головне фото + галерея / плейсхолдер --- */
.pdc__media { position: relative; background: var(--sage-light); flex: none; }
.pdc[data-variant="modal"] .pdc__media { width: 44%; }
.pdc__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdc__media-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(36,52,38,0.05), rgba(36,52,38,0.45));
    pointer-events: none;
}
/* Мініатюри галереї (рендеряться лише якщо photos.length > 1) */
.pdc__thumbs { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; gap: 8px; }
.pdc__thumb {
    width: 54px; height: 40px; padding: 0;
    border: 2px solid rgba(251,245,233,0.55);
    border-radius: 10px; overflow: hidden;
    cursor: pointer; background: var(--sage-light);
    transition: transform .18s, border-color .18s;
}
.pdc__thumb:hover { transform: translateY(-2px); }
.pdc__thumb.is-active { border-color: var(--ochre); }
.pdc__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Немає фото → явний плейсхолдер, не порожнеча (критерій №2).
   Вигляд задають класи .rm-ph* нижче (park-photo-placeholder). */
.pdc__media-placeholder {
    position: absolute; inset: 0;
}

/* Ілюстрована заглушка "модель парку" (park-photo-placeholder) */
.rm-ph {
    position: absolute; inset: 0;
    background:
        url("../img/park-placeholder-v2.4da83a69a919.svg") center / cover no-repeat,
        linear-gradient(160deg, #9DB37E, #7E9466 70%, #5E6B48); /* fallback поки SVG вантажиться */
}
.rm-ph__badge {
    position: absolute; top: 14px; left: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(251,245,233,.92); color: var(--green);
    font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 6px 11px; border-radius: 999px;
    box-shadow: 0 6px 16px rgba(36,52,38,.25);
}
.rm-ph__badge i, .rm-ph__badge svg { width: 12px; height: 12px; flex: none; }
/* RECRE-197: чип компактної заглушки — у НИЖНІЙ лівий кут, бо правий
   верх зайнятий бейджем "N точок інтересу" (.rm-poi-badge--on-media),
   а колонки .grid-arch штатно вужчають до 250–293px — верхні кути
   накладались. Той самий прийом, що в .rm-ph--event нижче. */
.rm-ph--compact .rm-ph__badge { top: auto; bottom: 10px; left: 10px; padding: 5px 9px; font-size: 10px; }
/* Заглушка ПОДІЇ (event-news-placeholders): власна ілюстрація
   "свято у парку"; чип — у НИЖНІЙ лівий кут, бо верхні кути
   .event-card__photo зайняті .event-date-badge і .event-price-chip */
.rm-ph--event {
    background-image:
        url("../img/event-placeholder.8d460665790c.svg"),
        linear-gradient(160deg, #9DB37E, #7E9466 70%, #5E6B48);
}
.rm-ph--event .rm-ph__badge { top: auto; bottom: 10px; left: 10px; }
/* Заглушка НОВИНИ: власна ілюстрація (news-placeholder.svg —
   обраний користувачем концепт); позиція чипа успадковується
   (top-left — кути .news-card__photo вільні) */
.rm-ph--news {
    background-image:
        url("../img/news-placeholder.8c68b3033451.svg"),
        linear-gradient(160deg, #9DB37E, #7E9466 70%, #5E6B48);
}
/* Заголовок поверх фото — усі варіанти (модалка/панель/сторінка).
   pointer-events:none: цей блок малюється ПІСЛЯ .pdc__thumbs у DOM
   (тобто поверх них), на всю ширину медіа-блоку — без цього порожній
   простір довкола заголовка перехоплював кліки по мініатюрах галереї,
   роблячи їх повністю нереагуючими (баг, знайдений користувачем). */
.pdc__media-heading { position: absolute; left: 20px; right: 20px; bottom: 16px; pointer-events: none; }
.pdc__media-heading .pdc__eyebrow { color: var(--ochre-light); }
.pdc__media-heading .pdc__title { color: var(--surface); font-size: 30px; line-height: 1.02; margin: 3px 0 0; }
.pdc__media-heading .pdc__address { color: rgba(251,245,233,0.85); }
/* --- Тіло картки --- */
.pdc__main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* Шапка (modal-варіант: eyebrow + назва + ×) */
.pdc__header {
    padding: 26px 30px 0;
    display: flex; justify-content: space-between; align-items: flex-start;
    flex: none;
}
.pdc__eyebrow {
    font-size: 11.5px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--terracotta);
}
.pdc__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    margin: 5px 0 0;
    font-size: 36px; font-weight: 700; line-height: 1;
    color: var(--green);
}
/* address — необов'язковий другий рядок muted (дизайн-ТЗ, блок 1) */
.pdc__address { margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
/* Години роботи парку (TOR-park-entry-fee-and-hours §4.2): рядок з
   іконкою clock-3 одразу під адресою — той самий патерн, що
   .rm-poi-popup__hours/.pdm-info__hours для POI; порожнє поле →
   рядок не рендериться (x-show). align-items: flex-start — довгі
   розклади переносяться на кілька рядків, іконка лишається зверху */
.pdc__hours {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 4px;
    font-size: 12.5px; font-weight: 600; line-height: 1.45;
    color: var(--muted-2);
}
.pdc__hours i, .pdc__hours svg {
    width: 13px; height: 13px; flex: none; margin-top: 2px;
}
/* На фото-скрімі (панель карти / сторінка) — світлий текст, як адреса */
.pdc__media-heading .pdc__hours { color: rgba(251,245,233,0.85); }
.pdc__close {
    width: 38px; height: 38px; flex: none;
    border-radius: 50%; border: none; cursor: pointer;
    background: var(--bg-2); color: var(--green);
    display: flex; align-items: center; justify-content: center;
    transition: background .18s;
}
.pdc__close:hover { background: var(--border); }
.pdc__close i, .pdc__close svg { width: 20px; height: 20px; }
/* Прокручувана зона контенту; overscroll-behavior: contain — скрол
   деталей парку/модалки не "прокидається" на сторінку позаду
   (map-page-footer: /map/ на десктопі тепер прокручується) */
.pdc__body { padding: 16px 30px 26px; overflow-y: auto; overscroll-behavior: contain; }

/* --- Блок 3. Опис --- */
.pdc__desc { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Атрибуція джерела опису/історії (TOR-park-history-wikipedia-sourcing
   розділ 6): дрібний метарядок одразу під текстом — підтягується до
   нього негативним top-margin (компенсує нижній відступ .pdc__desc);
   рендериться лише при непорожньому *_source_url */
.pdc__source {
    display: flex; align-items: center; gap: 6px;
    margin: -12px 0 18px;
    font-size: 12px; font-weight: 700; color: var(--muted-3);
}
.pdc__source i, .pdc__source svg {
    width: 12px; height: 12px; flex: none; color: var(--muted-3);
}
.pdc__source a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(126,148,102,0.55);
}
.pdc__source a:hover { color: var(--green); }
.pdc__source a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
    border-radius: 3px;
}
/* Сторінковий масштаб: .pdc__desc там має відступ 24px */
.pdc[data-variant="page"] .pdc__source { margin: -16px 0 24px; }
/* Атрибуція джерела даних про вхід/години (TOR-park-entry-fee-and-hours,
   критерій №9): стоїть одразу під сіткою .pdc__stats (там плитка «Вхід»),
   а не під текстом опису — компенсує її margin-bottom 20px в усіх
   варіантах картки однаково */
.pdc__source--visiting,
.pdc[data-variant="page"] .pdc__source--visiting { margin: -10px 0 18px; }

/* RECRE-505: примітка «показано не всю територію» під сіткою плиток.
   Родина та сама, що .pdc__source (дрібний рядок з іконкою під блоком,
   який він коментує), але це НЕ атрибуція джерела: тут немає посилання,
   а текст — попередження про повноту даних, тож він багаторядковий
   (align-items: flex-start, щоб іконка трималась першого рядка) і
   охристий, як решта «сигнальних» станів картки. Кегль і колір
   свідомо не робимо гучнішими за підпис плитки: примітка має
   уточнювати цифру, а не сперечатися з нею. */
.pdc__note {
    display: flex; align-items: flex-start; gap: 6px;
    margin: -10px 0 18px;
    font-size: 12px; line-height: 1.45; font-weight: 600;
    color: var(--muted-3);
}
.pdc__note i, .pdc__note svg {
    width: 12px; height: 12px; flex: none;
    margin-top: 2px;
    color: var(--ochre, #D79A3F);
}
.pdc[data-variant="page"] .pdc__note { margin: -10px 0 24px; }

/* --- Блок 4. Статистика: Площа / Засновано / Об'єктів.
       null-плитка НЕ рендериться (statTiles в alpine-data.js);
       auto-fit сам перерозподіляє ширину (критерій №2) --- */
.pdc__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 9px; margin-bottom: 20px;
}
/* min-width: 0 — грид-елемент не ширший за трек (TOR-park-aside-card-rework
   §1.1: без нього довге значення розтягує вміст за плитку, і фон наступної
   плитки-сиблінга малюється поверх хвоста слова — «мовчазне обрізання») */
.pdc__stat { background: var(--bg-2); border-radius: 13px; padding: 12px 14px; min-width: 0; }
.pdc__stat-label {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--muted-3);
}
/* Страховка (TOR-park-aside-card-rework §1.1): слово, що не вміщується,
   ПЕРЕНОСИТЬСЯ з дефісом на другий рядок (html lang="uk" у base.html —
   переноси українські), а не зникає під сусідньою плиткою */
.pdc__stat-value {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 700; line-height: 1.12;
    color: var(--green); margin-top: 2px;
    overflow-wrap: break-word;
    hyphens: auto;
}
.pdc__stat--accent .pdc__stat-value { color: var(--terracotta); }
/* Плитка «Вхід» з довгим тарифним текстом (TOR-park-entry-fee-and-hours
   §4.1, statTiles → t.long): менший кегль + перенесення рядків замість
   однорядкового 22px Cormorant; займає всю ширину рядка сітки, щоб
   довге речення не тиснуло сусідні плитки */
.pdc__stat--long { grid-column: 1 / -1; }
.pdc__stat--long .pdc__stat-value {
    font-size: 14px; line-height: 1.45; font-weight: 600;
    font-family: inherit;
    margin-top: 4px;
    overflow-wrap: anywhere;
    hyphens: none;                   /* у 14px-реченні дефіси не потрібні */
}

/* --- Блок 4а. Правила відвідування (TOR-park-visiting-rules §3.2) ---
   Акцент на заборонах: попереджувальна іконка octagon-alert + легкий
   тон-акцент контейнера в НАЯВНІЙ палітрі — приглушений var(--terracotta)
   (тонка ліва межа + злегка тонований фон), без нового кольорового
   токена --danger/--warn. Кожен рядок тексту — <li> з CSS-булітом
   (::before, критерій №8); рендериться лише при непорожньому
   visiting_rules (x-if, критерій №4) */
.pdc-rules {
    background: rgba(193, 109, 69, 0.07);
    border-left: 3px solid var(--terracotta);
    border-radius: 0 13px 13px 0;
    padding: 12px 14px 12px 15px;
    margin-bottom: 18px;
}
.pdc-rules__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.pdc-rules__head .pdc__section-title { margin: 0; }
.pdc-rules__head > i, .pdc-rules__head > svg {
    width: 14px; height: 14px; color: var(--terracotta); flex: none;
}
.pdc-rules__list {
    list-style: none;
    margin: 0; padding: 0;
    font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.pdc-rules__list li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 5px;
}
.pdc-rules__list li:last-child { margin-bottom: 0; }
.pdc-rules__list li::before {
    content: "";
    position: absolute; left: 0; top: 0.62em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--terracotta);
}
/* Атрибуція джерела правил: базовий .pdc__source має негативний
   top-margin (підтягування під .pdc__desc) — усередині контейнера
   правил він не потрібен, обидва варіанти картки однаково */
.pdc-rules__source,
.pdc[data-variant="page"] .pdc-rules__source { margin: 10px 0 0; }

/* --- Блок 4б. Пляжна територія (TOR-park-beach-layer) ---
   Той самий контейнерний рецепт, що .pdc-rules (тонка ліва межа +
   легкий тон-акцент у НАЯВНІЙ палітрі, без нового токена), але в
   піщаному тоні шару LAYER_META.beach #E7D6A8; іконка та акценти —
   темніший пісок/охра (#B99A55 ≈ затемнений #E7D6A8: сам піщаний
   надто світлий для тексту/іконки на --bg). Рендериться лише коли
   парк має beach-шар (x-if beachStats у партиалі) — на трьох
   поверхнях: /park/{slug}/, overlay і права панель /map/. */
.pdc-beach {
    background: rgba(231, 214, 168, 0.22);
    border-left: 3px solid #E7D6A8;
    border-radius: 0 13px 13px 0;
    padding: 12px 14px 12px 15px;
    margin-bottom: 18px;
}
.pdc-beach__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.pdc-beach__head .pdc__section-title { margin: 0; }
.pdc-beach__head > i, .pdc-beach__head > svg {
    width: 14px; height: 14px; color: #B99A55; flex: none;
}
.pdc-beach__stats {
    margin: 0;
    font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.pdc-beach__stats b { color: var(--ink); font-weight: 600; }
.pdc-beach__dot { margin: 0 4px; color: #B99A55; }
.pdc-beach__names {
    margin: 5px 0 0;
    font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.pdc-beach__names-label { color: #B99A55; font-weight: 600; margin-right: 4px; }

/* --- Згенерований тизер (TOR-park-generated-teaser, розділ 5,
   оновлено 2026-07-20 за живим тестуванням) ---
   Синтезований з ВЛАСНИХ структурованих даних парку — інший тип
   контенту, ніж джерельні description/history. Рендериться ВСЕРЕДИНІ
   секції «Про парк» (не окремим блоком в іншій колонці): світла/біла
   картка (той акцент, що користувач прямо попросив зберегти) + курсив,
   щоб візуально НЕ зливався з простим абзацом перевіреного тексту.
   Лейбл-kicker короткий і теплий (НЕ бюрократичний дисклеймер),
   підпорядкований заголовку секції, НЕ клікабельне «Джерело: …» —
   зовнішнього джерела немає принципово; повне пояснення живе в
   tooltip на hover/фокусі (критерій №7). Рендериться ЛИШЕ коли
   description І history порожні (критерій №1). */
.pdc-teaser {
    background: var(--surface-2);
    border: 1px solid var(--border-3);
    border-radius: 13px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.pdc-teaser__label {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--sage);
    cursor: help;
    outline: none;
}
.pdc-teaser__label > i, .pdc-teaser__label > svg {
    width: 13px; height: 13px; flex: none;
}
/* Tooltip без JS: ::after з data-tip — і на hover, і на клавіатурному
   фокусі (tabindex="0" у розмітці) */
.pdc-teaser__label::after {
    content: attr(data-tip);
    position: absolute;
    left: 0; bottom: calc(100% + 7px);
    z-index: 20;
    width: 230px;
    background: var(--ink);
    color: #fff;
    font-size: 12px; font-weight: 400; letter-spacing: 0;
    text-transform: none;
    line-height: 1.45;
    border-radius: 9px;
    padding: 8px 10px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.15s ease;
}
.pdc-teaser__label:hover::after,
.pdc-teaser__label:focus-visible::after { opacity: 1; visibility: visible; }
.pdc-teaser__text {
    font-style: italic;
    font-size: 13.5px; line-height: 1.55;
    color: var(--muted);
    margin: 7px 0 0;
}

/* --- Заголовок секції та пунктирний роздільник --- */
.pdc__section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--muted-3);
    margin: 0 0 9px;
}
.pdc__divider { border: none; border-top: 1px dashed var(--dash); margin: 20px 0 14px; }

/* --- Блок 6. Групи POI (дані — groupPois, park-amenities-and-poi) --- */
.pdc__poi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdc-poi-group {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-3);
    border-radius: 12px; padding: 9px 12px;
}
.pdc-poi-group__icon {
    width: 28px; height: 28px; flex: none;
    border-radius: 8px; color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.pdc-poi-group__icon i, .pdc-poi-group__icon svg { width: 14px; height: 14px; }
.pdc-poi-group__label { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pdc-poi-group__count { font-size: 13px; font-weight: 800; color: var(--muted-2); }
/* pois_count == 0 → явний порожній стан замість пустої сітки */
.pdc__poi-empty {
    display: flex; align-items: center; gap: 10px;
    border: 1px dashed var(--dash);
    border-radius: 12px; padding: 12px 14px;
    color: var(--muted-3);
    font-size: 13px; font-weight: 600;
}
.pdc__poi-empty i, .pdc__poi-empty svg { width: 16px; height: 16px; flex: none; }

/* --- Блок 7. Футер дій (modal-варіант; у panel CTA не потрібна —
       користувач уже на карті) --- */
.pdc__footer {
    flex: none;
    padding: 16px 30px;
    border-top: 1px solid var(--border-3);
    display: flex; gap: 12px;
}
.pdc-btn {
    font-family: inherit; font-weight: 700; font-size: 14.5px;
    border: none; border-radius: 30px; cursor: pointer;
    padding: 13px 22px; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    transition: background .18s, transform .18s, box-shadow .18s;
}
.pdc-btn i, .pdc-btn svg { width: 17px; height: 17px; }
.pdc-btn--primary { flex: 1; background: var(--green); color: var(--bg); }
.pdc-btn--primary:hover { background: var(--green-hover); }
.pdc-btn--secondary { background: var(--bg-2); color: var(--green); }
.pdc-btn--secondary:hover { background: var(--border); }

/* --- Маршрут до парку (TOR-route-to-park-redirect, уточнено
       2026-07-20 §2): блок з ВИДИМИМ підписом «Побудувати маршрут до
       парку» (__title) над рядом із двох зовнішніх навігаційних дій
       Google Maps / Waze (__buttons); рендериться лише при
       непорожньому centroid (x-if у шаблонах) --- */
.pdc-route { margin-top: 10px; }
/* Підпис-kicker блоку: видимий текст, легший за .pdc__section-title
   (рівень дрібних підзаголовків аside-картки, ТЗ §2.1) */
.pdc-route__title {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--muted-3);
    margin-bottom: 7px;
}
.pdc-route__buttons { display: flex; gap: 10px; }
.pdc-route__buttons .pdc-btn { flex: 1; padding-left: 14px; padding-right: 14px; }
/* Панельний варіант правої панелі /map/ (TOR-map-media-header-fix):
   неоверлейна картка маршруту ПЕРШИМ елементом .pdc__body — те саме
   сімейство світлих вкладених карток, що .pdc-teaser / .pdc-poi-group
   (surface-2 + border-3 + radius 13px). Оверлейний .pdc-route--media
   на фото шапки видалено цим фіксом. */
.pdc-route--panel {
    margin: 0 0 18px;                /* перший у body: без верхнього відступу */
    background: var(--surface-2);
    border: 1px solid var(--border-3);
    border-radius: 13px;
    padding: 12px 14px 14px;
}
.pdc-route--panel .pdc-route__title {
    display: flex; align-items: center; gap: 6px;
}
.pdc-route--panel .pdc-route__title i,
.pdc-route--panel .pdc-route__title svg {
    width: 13px; height: 13px; flex: none; color: var(--terracotta);
}
/* Кнопки трохи компактніші за модальні 13px/22px — щільна 400px-панель */
.pdc-route--panel .pdc-route__buttons .pdc-btn {
    padding-top: 10px; padding-bottom: 10px;
    font-size: 13.5px;
}

/* --- Адаптив modal-варіанта: < 760px — вертикальний стек --- */
@media (max-width: 760px) {
    .pdc[data-variant="modal"] { flex-direction: column; max-height: 92vh; }
    .pdc[data-variant="modal"] .pdc__media { width: 100%; height: 220px; }
    .pdc__header { padding: 20px 22px 0; }
    .pdc__body { padding: 14px 22px 20px; }
    .pdc__footer { padding: 14px 22px; }
    .pdc__title { font-size: 30px; }
}

/* ============================================================
   park-detail-page — третій контекст компонента:
   .pdc[data-variant="page"] — окрема сторінка /park/{slug}/
   (зміна вимоги 2026-07-05 до UC-06: замінює вхід "каталог →
   модалка"; modal/panel-варіанти вище — без змін).
   Перенесено з design_mockups/park-detail-page/park-detail-page.css
   (значення без змін; токени --rm-* → наявні токени main.css).
   ============================================================ */

/* --- Каркас сторінки --- */
.pdp-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px 30px 64px;
    box-sizing: border-box;
}

/* Топбар повернення (TOR-catalog-card-polish-and-back-nav §1):
   текстовий back «← До каталогу» зліва + компактний «×» справа,
   розведені по краях; ОБИДВА ведуть на backHref() — href зберігає
   query-string фільтрів каталогу (розділ 7 ТЗ) */
.pdp-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.pdp-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    padding: 7px 14px 7px 10px;
    border-radius: 30px;
    transition: color .18s, background .18s, transform .18s;
}
.pdp-back i, .pdp-back svg { width: 16px; height: 16px; transition: transform .18s; }
.pdp-back:hover { color: var(--green); background: var(--bg-2); }
.pdp-back:hover i, .pdp-back:hover svg { transform: translateX(-3px); }
.pdp-back:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
/* «×» праворуч — та сама дія, що .pdp-back (href = backHref());
   мова — сімейство .pdp-back: ті самі кольори/фокус-ринг; hover —
   зелений + поворот 90° (перегук з hover-стрілкою back).
   Використовується і як <a> (/park/{slug}/), і як <button>
   (топбар overlay /map/ → closePark(), follow-up
   TOR-catalog-card-polish-and-back-nav §1) — тому padding/cursor
   нормалізовані явно */
.pdp-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; padding: 0;
    border-radius: 50%;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border-2);
    box-shadow: 0 10px 22px -18px rgba(47,74,55,0.5);
    text-decoration: none;
    cursor: pointer;
    transition: color .18s, background .18s, transform .18s;
}
.pdp-close i, .pdp-close svg { width: 18px; height: 18px; }
.pdp-close:hover { color: var(--green); background: var(--bg-2); transform: rotate(90deg); }
.pdp-close:active { transform: rotate(90deg) scale(0.94); }
.pdp-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }

/* --- Варіант "page": overrides компонента .pdc --- */
.pdc[data-variant="page"] {
    display: block;          /* базовий .pdc — flex модалки/панелі */
    background: transparent; /* сторінка сама кремова (--bg) */
    overflow: visible;       /* потрібен sticky-сайдбар */
}

/* Блоки 1-2: медіа-hero на всю ширину контейнера.
   RECRE-133: раніше заголовок (absolute на всю ширину) і мініатюри
   (absolute у куті) не знали одне про одного — довгі назви парків
   («Національний комплекс "Експоцентр України" (ВДНГ)») накладались
   на мініатюри аж до повного перекриття (QA-звіт 1.0.2 §4.2). Тепер
   низ hero — flex-рядок із переносом: заголовок і стрічка мініатюр
   діляться місцем, а коли разом не вміщаються (довга назва) —
   мініатюри переносяться окремим рядком під заголовок; накладання
   неможливе за побудовою. position: relative (не static) на обох —
   inflow-вміст має малюватись НАД absolute-фоном (cover/scrim);
   pointer-events: none заголовка (база вище) зберігається — кліки
   летять у медіа (lightbox в overlay), мініатюри клікабельні як і були. */
.pdc[data-variant="page"] .pdc__media {
    /* min-height (не height): дуже довга назва + мініатюри окремим
       рядком можуть стати вищими за базові 420/320/250px — бокс росте
       під вміст замість зрізати верхній рядок overflow:hidden;
       cover/scrim absolute inset: 0 — розтягуються самі.
       RECRE-459: padding-top 20 → 52px — РЕЗЕРВ під бейдж «Галерея»
       (.ov-media-zoom: absolute top 14px + висота ~28px ≈ 42px). Вміст
       hero (eyebrow першим рядком) — bottom-anchored flex: коли
       довга категорія + район + багаторядкова назва + стрічка мініатюр
       переростали min-height, перший рядок (eyebrow) підіймався аж до
       верхнього краю бокса і фізично залазив під бейдж (скріншот ПО,
       375px, «Сколівські Бескиди»). Тепер inflow-вміст за побудовою
       не може зайти у верхню смугу 52px, де живе бейдж, — жодна
       довжина категорії/району/назви не дає перетину. При короткому
       вмісті (низ бокса) padding-top не змінює нічого. */
    min-height: 420px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 26px 46px -26px rgba(47,74,55,0.6);
    display: flex; flex-wrap: wrap;
    align-items: flex-end; align-content: flex-end;
    column-gap: 18px; row-gap: 12px;
    padding: 52px 22px 22px 30px;
}
/* Скрім темніший знизу — на ньому лежить заголовок (як у panel) */
.pdc[data-variant="page"] .pdc__media-scrim {
    background: linear-gradient(180deg, rgba(36,52,38,0.06) 35%, rgba(36,52,38,0.72));
}
.pdc[data-variant="page"] .pdc__media-heading {
    /* RECRE-133: у потоці flex-рядка (див. .pdc__media вище).
       УВАГА: заголовку НЕ можна давати order: -1 (хоч у DOM мініатюри
       стоять перед ним) — order у flex змінює і порядок МАЛЮВАННЯ:
       abspos-діти flex-контейнера (cover/scrim) малюються як order: 0,
       і заголовок з order: -1 опинявся ПІД фотографією. Тому заголовок
       лишається з order: 0 (малюється в tree-порядку — над cover/scrim),
       а вперед у розкладці його пускає order: 1 на мініатюрах нижче. */
    position: relative; left: auto; right: auto; bottom: auto;
    flex: 1 1 auto; min-width: 0;
}
.pdc[data-variant="page"] .pdc__media-heading .pdc__title {
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.02;
    margin: 5px 0 0;
}
/* Адреса другим рядком (null → рядок не рендериться) */
.pdc[data-variant="page"] .pdc__address {
    display: flex; align-items: center; gap: 6px;
    margin: 9px 0 0;
    font-size: 13px; font-weight: 600;
    color: rgba(251,245,233,0.82);
}
.pdc[data-variant="page"] .pdc__address i,
.pdc[data-variant="page"] .pdc__address svg { width: 14px; height: 14px; flex: none; }
/* Мініатюри галереї — праворуч знизу (ліворуч — заголовок).
   RECRE-133: теж у потоці; margin-left: auto тримає їх біля правого
   краю і коли вони діляться рядком із заголовком, і коли перенесені
   окремим рядком; власний flex-wrap — страховка від дуже великої
   кількості фото на вузькому екрані */
.pdc[data-variant="page"] .pdc__thumbs {
    position: relative; left: auto; right: auto; bottom: auto;
    order: 1;               /* після заголовка в розкладці (DOM-порядок зворотний) */
    flex: none; max-width: 100%; margin-left: auto;
    flex-wrap: wrap; justify-content: flex-end;
}
.pdc[data-variant="page"] .pdc__thumb { width: 64px; height: 46px; }
/* Hero без фото: плейсхолдер успадковується, висота менша */
.pdc[data-variant="page"] .pdc__media--noimg { min-height: 300px; }

/* Двоколонкова сітка під hero: контент | липкий сайдбар */
.pdp-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 38px;
    align-items: start;
    margin-top: 30px;
}
.pdp-aside__card {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 16px 34px -28px rgba(47,74,55,0.55);
}
/* Aside-масштаб статистики — рішення користувача 2026-07-24
   (TOR-map-overlay-glass-cards §14, обраний варіант A «Повітря»,
   але НЕ сіткою 2×2, а рядками): нуль фонів/заокруглень/padding-
   коробок на атрибутах (знята скарга «атрибути в окремих блоках»),
   кожен атрибут — повноширинний вертикальний рядок (лейбл над
   значенням, типографіка base :797-812 без змін), рядки один під
   одним, структуру тримає лише gap. Скоуп .pdp-aside__card —
   І /park/{slug}/, І overlay /map/ (один компонент, критерій §14
   №22). Modal каталогу і права панель ≤900px /map/ НЕ чіпаються —
   там лишаються плитки auto-fit */
.pdp-aside__card .pdc__stats {
    margin-bottom: 0;
    grid-template-columns: 1fr;   /* вертикальні рядки замість 2×2 */
    gap: 16px;                    /* повітря варіанта A (row-gap мокапа) */
}
.pdp-aside__card .pdc__stat {
    background: none;
    border-radius: 0;
    padding: 0;
}
/* Повнорядкові grid-оверрайди (остання непарна нижче, --long у base
   :817) в 1-колонковій розкладці — нешкідливі no-op; лишаються для
   коректної деградації, якщо колонковість колись повернеться */
.pdp-aside__card .pdc__stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pdp-aside__card .pdc__divider { margin: 16px 0 14px; }

/* Контентні блоки: сторінковий масштаб */
.pdc[data-variant="page"] .pdc__desc {
    font-size: 16px; line-height: 1.65;
    max-width: 64ch;
    margin: 0 0 24px;
}
.pdc[data-variant="page"] .pdc__section-title { font-size: 13px; }

/* Блок 7 (дія): CTA-посилання на /map/?park={slug} у сайдбарі */
.pdp-aside .pdc-btn--primary {
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}

/* --- Aside-масштаб рейтингу і зони дій (TOR-park-aside-card-rework §2.2).
       Рейтинг перенесено в картку: ритм задають дивайдери картки; kicker
       не конкурує з 13px section-title основної колонки (page-варіант вище
       піднімає до 13px — тут повертаємо базові 12px; правило МУСИТЬ стояти
       нижче .pdc[data-variant="page"] .pdc__section-title — специфічність
       однакова (0,3,0), вирішує порядок у файлі) --- */
.pdp-aside__card .pdc-rating { margin-bottom: 0; }
.pdp-aside__card .pdc-rating__head { margin-bottom: 7px; }
.pdp-aside__card .pdc-rating__head .pdc__section-title { font-size: 12px; }
.pdp-aside__card .pdc-rating__agg { margin-bottom: 6px; }

/* Зона дій — ЄДИНИЙ вертикальний стек з рівним ритмом 10px (замість
   «кожна кнопка сама тримає свій margin»); порядок: primary «Показати
   на карті» → «Зберегти парк» → картка маршруту --panel */
.pdp-aside__actions { display: grid; gap: 10px; }
.pdp-aside__actions .pdc-btn--like { margin-bottom: 0; }   /* ритм задає gap */
/* +2px повітря перед вкладеною карткою маршруту (вона важча за кнопки);
   перекриває margin: 0 0 18px базового .pdc-route--panel */
.pdp-aside__actions .pdc-route--panel { margin: 2px 0 0; }

/* Джерело «Вхід/години» в aside стоїть під сіткою з margin-bottom: 0 —
   негативний -10px хак сторінкового масштабу тут не потрібен.
   Специфічність (0,3,0), як у правил .pdc[data-variant="page"]
   .pdc__source(--visiting) вище — правило МУСИТЬ стояти нижче них.
   RECRE-435: те саме для рядка «Офіційний сайт» (--official, RECRE-387) —
   без цього оверрайду він успадковував базовий негативний top-margin
   (-12px, у page-варіанті -16px; розрахований на підтягування під
   .pdc__desc) і накладався на останню плитку статистики («Точок
   інтересу»), бо .pdp-aside__card .pdc__stats має margin-bottom: 0 */
.pdp-aside__card .pdc__source.pdc__source--visiting,
.pdp-aside__card .pdc__source.pdc__source--official { margin: 10px 0 0; }

/* Адаптив сторінки парку */
@media (max-width: 900px) {
    .pdp-columns { grid-template-columns: 1fr; gap: 22px; }
    /* сайдбар (статистика + CTA) стає першим — одразу під фото */
    .pdp-aside { order: -1; }
    .pdc[data-variant="page"] .pdc__media { min-height: 320px; }
}
@media (max-width: 600px) {
    .pdp-page { padding: 16px 18px 44px; }
    .pdc[data-variant="page"] .pdc__media { min-height: 250px; border-radius: 20px; }
    .pdc[data-variant="page"] .pdc__media--noimg { min-height: 220px; }
    /* RECRE-133: мініатюри більше НЕ тікають у верхній правий кут
       (там вони стикались і з бейджем «Галерея» overlay, і з довгими
       заголовками, що виростали на всю висоту hero) — низ hero тепер
       flex-flow (див. вище), накладання неможливе за побудовою;
       лишається тільки компактніший масштаб і щільніші відступи */
    .pdc[data-variant="page"] .pdc__thumb { width: 54px; height: 40px; }
    /* RECRE-459: padding-top НЕ звужується разом з рештою відступів —
       52px лишаються резервом під бейдж «Галерея» (див. базове правило
       .pdc[data-variant="page"] .pdc__media вище): саме на ≤600px
       (min-height 250px + вузький екран) eyebrow найчастіше виростав
       до верхнього краю і залазив під бейдж */
    .pdc[data-variant="page"] .pdc__media { column-gap: 12px; row-gap: 10px; padding: 52px 14px 16px 18px; }
}

/* ============================================================
   park-detail-page-enrichment — нові блоки сторінки /park/{slug}/:
     1. .pdm-* — "Схема парку": вбудована Leaflet-міні-карта;
     2. .pdh-* — "Історія парку": текст history + галерея
        historical-фото (сепія), текст-заглушка при порожніх даних.
   Перенесено з design_mockups/park-detail-map-block/park-detail-map.css
   (значення без змін; токени --rm-* → наявні токени main.css).
   ============================================================ */

/* Текст-заглушка порожніх опису/історії (блоки не ховаються) */
.pdc__desc--empty { font-style: italic; color: var(--muted-3); }

/* --- 1. Блок "Схема парку" (.pdm) --- */
.pdm { margin-top: 6px; }
.pdm-head {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pdm-head .pdc__section-title { margin: 0; }

/* ============================================================
   TOR-fullwidth-map-and-park-events (затв. 2026-07-13, «Атлас»):
   блок «Схема парку» — на всю ширину сторінки, під «Об'єктами
   інфраструктури». Спільна картка .pdm-frame з трьох зон:
   [вертикальна легенда | полотно | док обраного POI].
   Заміщує ревізію B «Стрічка під картою» (контейнер панелі та
   пілюлі шапки); вміст .pdm-info__*, чиста легенда «без чисел»
   і весь JS-функціонал POI — без змін.
   ≤900px: легенда — горизонтальна стрічка над полотном,
   док зникає (fallback до floating-попапа, як раніше).
   ============================================================ */
/* Базове правило (діє на ≤900px): спільна картка трьох зон — рамку/
   фон/тінь несе обгортка, як у ревізії B. RECRE-194/196
   (TOR-poi-card-carousel-build §3): на десктопі ≥901px сцена
   розкладається на ТРИ роз'єднані surface-картки з проміжком —
   media-переозначення нижче; --scene-h — єдина точка зміни висоти
   сцени. Адаптивна SCENE_H (RECRE-208, §13 концепту):
   clamp(568px, 100vh − 100px, 860px) — 568 = p100 реальної картки 516
   + хром панелі 48 + 4; 100 = шапка 66 + пінінг 16 + поле 18;
   860 = бюджет §11.1 як стеля. */
.pdm-frame {
    --scene-h: clamp(568px, calc(100vh - 100px), 860px);
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 18px;
    box-shadow: 0 16px 34px -28px rgba(47,74,55,0.55);
    overflow: hidden;
}
.pdm-frame .pdm-map { flex: 1 1 auto; min-width: 0; }

/* RECRE-194/196 (ТЗ §3.1): десктоп — .pdm-frame стає чистим
   layout-контейнером (gap 14px), кожна з трьох зон (легенда | полотно |
   панель) — ВЛАСНА surface-картка з рамкою/радіусом/тінню (формула
   .i5-side/.i5-panel мокапу poi-card-catalog-carousel). Мобільна
   ≤900px базових правил не втрачає — media нижче її не чіпає.
   Хром .pdm-info — для станів заглушки/кластера; у стані --card його
   скидає правило нижче (RECRE-228). */
@media (min-width: 901px) {
    .pdm-frame {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        gap: 14px;
    }
    /* RECRE-204 (F2): стеля бічних зон = SCENE_H. Без неї легенда,
       довша за 860px (парки з 15 категоріями POI), розтягувала
       flex-line сцени — .pdm-side/.pdm-info ставали 867+px і виступали
       нижче полотна (.pdm-map тримає явну height). З max-height довгий
       вміст скролить сам контейнер (overflow:auto уже стоїть на обох;
       у .pdm-info--card скрол-клапан — __cardhost.is-overflow, а
       overflow:visible max-height не кліпає — політ FLIP неушкоджений). */
    .pdm-side {
        border: 1px solid var(--border-2);
        border-radius: 20px;
        box-shadow: 0 16px 34px -28px rgba(47,74,55,0.55);
        max-height: var(--scene-h, 860px);
    }
    .pdm-map {
        border: 1px solid var(--border-2);
        border-radius: 20px;
    }
    .pdm-info {
        position: relative;             /* z-index на час польоту FLIP */
        border: 1px solid var(--border-2);
        border-radius: 20px;
        box-shadow: 0 16px 34px -28px rgba(47,74,55,0.55);
        max-height: var(--scene-h, 860px);
    }
}

/* --- Зона 1: вертикальна легенда --- */
.pdm-side {
    width: 208px; flex: none; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 7px;
    border-right: 1px solid var(--border-2);
    background: var(--surface);
    padding: 14px 10px 16px;       /* вужчий h-паддінг: ширші hover-пілюлі рядків
                                      (TOR-map-overlay-glass-cards §12.3.1) */
    overflow: auto;                /* висота = висота полотна */
    font-family: 'Mulish', system-ui, sans-serif;
    /* RECRE-230: єдина скрол-зона сцени Атласу, яку RECRE-208 пропустив —
       без власного оформлення падала на глобальний 10px
       ::-webkit-scrollbar (main.css вгорі). House-патерн тонкого
       скролбара (.pcat-track / .pdm-info__cardhost.is-overflow). Сам
       скрол — свідоме рішення RECRE-204 (max-height: --scene-h), його
       НЕ прибираємо. height: 8px — про запас: на ≤900px .pdm-side стає
       стрічкою з overflow:visible + flex-wrap, скролбара там немає */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.pdm-side::-webkit-scrollbar { width: 8px; height: 8px; }
.pdm-side::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.pdm-side::-webkit-scrollbar-track { background: transparent; }
.pdm-side__group { display: flex; flex-direction: column; gap: 2px; }
.pdm-side__label {
    font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted-3);
    padding: 0 9px;                /* вирівнювання по пілюлях рядків */
}
/* Тонкий пунктирний розділювач підгруп «шляхи» / «об'єкти»
   єдиного списку «Шари» (додаток 2026-07-13: замість другого
   заголовка «Об'єкти · N») */
.pdm-side__sep { border-top: 1px dashed var(--border-2); margin: 3px 9px; }

/* ============================================================
   RECRE-370 (TOR-1.0.9-regions-ui §18): панель «Шари» Атласу, що
   згортається у вертикальну рейку 44px. Оскільки .pdm-map —
   flex:1 1 auto; min-width:0 (правило .pdm-frame вище), звуження
   208px → 44px БУКВАЛЬНО додає 164px до clientWidth контейнера
   Leaflet, а не просто менше його перекриває. Уся механіка живе в
   @media (min-width: 901px): на ≤900px панель — горизонтальна
   стрічка/акордеон (.pdm-legend-toggle + miniLegendOpen), і там
   нічого не змінюється.
   ============================================================ */
/* Шапка панелі: чинний підпис «Шари» + кнопка згортання одним
   flex-рядком. padding-right 3px — оптична вісь кнопки; лівий відступ
   лишається на самому .pdm-side__label (0 9px, вирівнювання по
   пілюлях .pdm-srow) */
.pdm-side__head {
    display: flex; align-items: center; gap: 6px;
    min-height: 26px; padding-right: 3px;
}
/* Кнопка і вміст рейки не існують на ≤900px (§18.4: мобільна
   поверхня не чіпається) — вмикає їх лише медіа нижче */
.pdm-side__collapse,
.pdm-side__rail-count,
.pdm-side__rail-dots,
.pdm-side__rail-off { display: none; }

@media (min-width: 901px) {
    .pdm-side {
        transition: width .26s cubic-bezier(.4,0,.2,1),
                    padding .26s cubic-bezier(.4,0,.2,1);
    }
    .pdm-side__collapse {
        display: flex; align-items: center; justify-content: center;
        position: relative; margin-left: auto;
        width: 26px; height: 26px; flex: none;
        border-radius: 8px;
        border: 1px solid var(--border-2);
        background: var(--surface-2);
        color: var(--muted);
        cursor: pointer;
        transition: background .15s, color .15s, width .15s, height .15s;
    }
    .pdm-side__collapse:hover { background: var(--bg-2); color: var(--green); }
    /* Те саме фокус-кільце, що в .pdm-srow */
    .pdm-side__collapse:focus-visible {
        outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
    }
    .pdm-side__collapse i, .pdm-side__collapse svg { width: 15px; height: 15px; }
    /* Хіт-таргет ≥44×44 без зміни візуального розміру — той самий
       патерн, що хіт-подушка .rm-poi-marker::after */
    .pdm-side__collapse::after { content: ""; position: absolute; inset: -9px; }

    /* --- Згорнутий стан: та сама <aside>, ширина 44px --- */
    .pdm-side.is-rail {
        width: 44px; padding: 10px 4px 12px;
        align-items: center; overflow: hidden;
    }
    .pdm-side.is-rail .pdm-side__group,
    .pdm-side.is-rail .pdm-side__sep { display: none; }
    .pdm-side.is-rail .pdm-side__head {
        flex-direction: column; gap: 9px; padding: 0; width: 100%;
    }
    .pdm-side.is-rail .pdm-side__label {
        writing-mode: vertical-rl; letter-spacing: 1.5px;
        padding: 0; order: 2;
    }
    .pdm-side.is-rail .pdm-side__collapse {
        margin: 0; width: 32px; height: 32px; order: 1; color: var(--green);
    }
    /* Вміст рейки (§18.2): згорнута панель не приховує від користувача
       факт, що на схемі показано не все */
    .pdm-side.is-rail .pdm-side__rail-count {
        display: block; order: 3;
        font-size: 11px; font-weight: 800; color: var(--muted-2);
        background: var(--bg-2); border-radius: 20px; padding: 2px 7px;
    }
    .pdm-side.is-rail .pdm-side__rail-dots {
        display: flex; flex-direction: column; align-items: center;
        gap: 4px; order: 4;
    }
    .pdm-side.is-rail .pdm-side__rail-dots span {
        width: 7px; height: 7px; border-radius: 50%;
    }
    /* Теракотовий індикатор: бодай один шар/тип/події вимкнено */
    .pdm-side.is-rail .pdm-side__rail-off {
        display: block; order: 5;
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--terracotta);
        box-shadow: 0 0 0 2px var(--surface);
        margin-top: 2px;
    }
}
/* §18.6 п.9: стан міняється миттєво, invalidateSize — один виклик
   (гілка в JS: _atlasPumpResize / _miniPumpResize) */
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    .pdm-side { transition: none; }
    .pdm-side__collapse { transition: none; }
}
/* Рядок-перемикач шару/категорії POI: свотч (шар) або кольорова
   іконка типу (POI) через той самий канал --sw, що мали пілюлі.
   Полірування TOR-map-overlay-glass-cards §12.3.2: єдиний лід-слот
   18px (свотч 18px / іконка 15px + поля 1.5px) — лейбли обох
   підгруп на одній вертикальній осі; типографіка 12.5px/600 ink-2 */
.pdm-srow {
    display: flex; align-items: center; gap: 10px;
    width: 100%; box-sizing: border-box; text-align: left;
    font-family: inherit;
    font-size: 12.5px; font-weight: 600;
    color: var(--ink-2);
    background: none; border: none; border-radius: 11px;
    padding: 7px 9px; min-height: 32px; cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
}
.pdm-srow:hover { background: var(--bg-2); color: var(--ink); }
.pdm-srow:active { transform: translateY(1px); }   /* тактильний прес */
.pdm-srow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
/* RECRE-257: лейбл рядка — голий <span> (map.html / park_detail.html);
   flex-дитина з дефолтним min-width:auto не могла стиснутись вужче за
   найдовше слово («спортінвентарю») → +5px переповнення групи вмикало
   горизонтальну рейку скролу .pdm-side (overflow:auto — обидві осі).
   min-width:0 дозволяє стискання, overflow-wrap:anywhere — перенос
   надто довгого токена (.pdm-srow має min-height, не height — рядок
   спокійно росте на другий рядок). Назви категорій живуть у БД
   (PoiCategory.name) і можуть довшати будь-коли — фікс загальний,
   не підгін під одне слово; коротких лейблів не зачіпає. */
.pdm-srow > span:not([class]) {
    min-width: 0;
    overflow-wrap: anywhere;
}
.pdm-srow__swatch {
    width: 18px; height: 5px; border-radius: 3px; flex: none;
    background: var(--sw, #9CB37E);
}
/* RECRE-172: форма свотча = реальний символ шару на карті.
   path — пунктир dashArray "6 6" рендера */
.pdm-srow__swatch--dash {
    background: repeating-linear-gradient(90deg,
        var(--sw, #9CB37E) 0 5px, transparent 5px 9px);
}
/* Полігональні шари: плашка — заливка на реальній прозорості
   (layerFillOpacity 0.4 / beach 0.85) поверх кремового тла карти
   --bg + контур weight 1.5 повного кольору; той самий патерн, що
   .swatch--park-poly у легенді /map/. Перший
   background — fallback для браузерів без color-mix (як зараз). */
.pdm-srow__swatch--poly,
.pdm-srow__swatch--poly-dense {
    height: 12px;
    box-shadow: inset 0 0 0 1.5px var(--sw, #9CB37E);
    background: var(--sw, #9CB37E);
}
.pdm-srow__swatch--poly {
    background: color-mix(in srgb, var(--sw, #9CB37E) 40%, var(--bg));
}
.pdm-srow__swatch--poly-dense {
    background: color-mix(in srgb, var(--sw, #9CB37E) 85%, var(--bg));
}
.pdm-srow > i, .pdm-srow > svg {
    width: 15px; height: 15px; flex: none;
    margin: 0 1.5px;               /* 15 + 1.5×2 = 18 → вісь лейблів єдина */
    color: var(--sw, var(--muted-2));
}
/* Пігулка-лічильник категорії POI (§12.3.3; дані вже в
   miniPoiToggles[].count — рядки шарів лічильника не мають) */
.pdm-srow__count {
    margin-left: auto; flex: none;
    font-size: 10.5px; font-weight: 800; line-height: 1.6;
    color: var(--muted-2);
    background: var(--surface-2);       /* лишається видимою на hover-фоні bg-2 */
    border: 1px solid var(--border-3);
    border-radius: 20px; padding: 0 7px;
}
/* Око-афорданс: видиме на hover і в off-стані; слот постійний —
   auto-відступ переїздить на лічильник, якщо він є (§12.3.4) */
.pdm-srow__eye {
    margin-left: auto; display: inline-flex; flex: none;
    color: var(--muted-3); opacity: 0; transition: opacity .15s;
}
.pdm-srow__count + .pdm-srow__eye { margin-left: 0; }
.pdm-srow__eye i, .pdm-srow__eye svg { width: 13px; height: 13px; }
.pdm-srow:hover .pdm-srow__eye,
.pdm-srow[aria-pressed="false"] .pdm-srow__eye { opacity: .9; }
/* Вимкнений рядок (§12.3.5): пригашені кольори ЗАМІСТЬ opacity .45
   на всьому рядку — «вимкнено», але читабельно */
.pdm-srow[aria-pressed="false"] { color: var(--muted-3); }
.pdm-srow[aria-pressed="false"] .pdm-srow__swatch { background: var(--muted-3); opacity: .55; box-shadow: none; }
.pdm-srow[aria-pressed="false"] > i,
.pdm-srow[aria-pressed="false"] > svg { color: var(--muted-3); opacity: .75; }
.pdm-srow[aria-pressed="false"] .pdm-srow__count {
    color: var(--muted-3); background: transparent; border-color: transparent;
}

/* --- Зона 3: панель обраного об'єкта (RECRE-194/196: 252px → 320px,
       ТЗ §4 — хостить доковану картку каталогу; кластерний рендер
       poiPanelHtml лишається без змін) --- */
.pdm-info {
    width: 320px; flex: none; box-sizing: border-box;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--border-2);
    background: var(--surface);
    padding: 16px 18px 18px;
    overflow: auto;                /* довгий вміст скролить сам док */
    font-family: 'Mulish', system-ui, sans-serif;
    color: var(--ink-2);
    /* RECRE-229: перемикання станів панелі (--card ⇄ --empty/--cluster)
       раніше було миттєвим — зняття .pdm-info--card повертало
       фон/рамку/тінь за один кадр одразу після плавного FLIP-польоту
       картки. Анімуємо лише paint-властивості (жодна не впливає на
       layout — виміри getBoundingClientRect() у cardOpen/cardClose
       неушкоджені). Працює симетрично і на відкриття. Занулення для
       prefers-reduced-motion — у медіа-блоці нижче (біля .poi-sheet) */
    transition: background-color .28s ease, border-color .28s ease,
                box-shadow .28s ease;
}
/* Режим докованої картки: щільніший хром (формула .i5-panel мокапу) і
   overflow:visible — політ FLIP виходить за межі панелі; RECRE-228 §14:
   видимий хром зони (фон/рамку/тінь) несе САМА докована картка —
   панель прозора, інакше «рамка в рамці» + смуга порожнього surface
   під top-анкерною карткою. border-color (не border:none!) — 1px-width
   лишається в box-sizing: нуль зсуву геометрії/FLIP-вимірів */
.pdm-info--card {
    padding: 10px 10px 12px;      /* як є */
    overflow: visible;            /* як є */
    background: transparent;
    border-color: transparent;    /* саме color, НЕ border: none */
    box-shadow: none;
}
/* RECRE-228 §14.2 п.4: на фоні сторінки (--bg) muted-3 падає ~2.85:1 —
   крок до muted-2 (~3.5:1, рівень eyebrow-патернів проєкту) */
.pdm-info--card .pdm-info__kicker { color: var(--muted-2); }
/* На час польоту панель піднімається над рештою сцени, щоб трансформ
   картки не пірнав під сусідні блоки (мокап .i5-panel.is-flying) */
.pdm-info.is-flying { z-index: 30; }
.pdm-info__kicker {
    font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted-3);
}
/* Каркас докованого стану: шапка-кікер + хост картки на всю висоту */
.pdm-info__dock { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pdm-info--card .pdm-info__head { padding: 2px 2px 8px 8px; margin-bottom: 0; }
.pdm-info__cardhost { position: relative; flex: 1; min-height: 0; }
/* Штатний клапан для карток, вищих за хост панелі (насичені POI:
   опис+години+website+services, картки до ~760px — §13.8 концепту);
   вмикається класом з JS ПІСЛЯ польоту, щоб не обрізати анімацію.
   Тонкий скролбар — house-патерн .pcat-track (§13.8.2), а не
   глобальний 10px */
.pdm-info__cardhost.is-overflow {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.pdm-info__cardhost.is-overflow::-webkit-scrollbar { width: 8px; }
.pdm-info__cardhost.is-overflow::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.pdm-info__cardhost.is-overflow::-webkit-scrollbar-track { background: transparent; }
.pdm-info__head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
/* Колір типу — інлайн --poi-type-color (канал .rm-poi-popup) */
.pdm-info__eyebrow {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--poi-type-color, var(--poi-other));
}
.pdm-info__eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: none;
}
.pdm-info__close {
    margin-left: auto;
    width: 26px; height: 26px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted-2);
    cursor: pointer;
    transition: background .18s, color .18s;
}
.pdm-info__close:hover { background: var(--bg-2); color: var(--green); }
.pdm-info__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}
.pdm-info__close i, .pdm-info__close svg { width: 13px; height: 13px; }

/* Тіло дока — вертикальний потік (grid ревізії B знято) */
.pdm-info__body { margin-top: 2px; }
/* RECRE-167 (Tier 2): одне cover-фото над назвою (poiPanelHtml,
   рендер лише коли API віддасть cover_photo — модель POIPhoto окремим
   релізом §8.1). Немає фото → блок ПОВНІСТЮ відсутній, без
   плейсхолдера «ще без фото» (Designer §2 п.2). */
.pdm-info__photo {
    margin-top: 8px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.pdm-info__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdm-info__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 700; line-height: 1.12;
    color: var(--green);
    margin: 8px 0 0;   /* RECRE-167: було 4px — повітря під фото/шапкою */
}

/* RECRE-167 (Tier 3): агрегат оцінок відвідувачів «★4,2 (17)» під
   назвою (TOR-poi-reviews, окреме ТЗ) — CSS готовий наперед,
   вмикається появою даних; ніколи не змішується з рейтингом парку. */
.pdm-info__rating {
    display: flex; align-items: center; gap: 5px;
    margin-top: 6px;
    font-size: 12px; font-weight: 800; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.pdm-info__rating i, .pdm-info__rating svg {
    width: 13px; height: 13px; flex: none;
    color: var(--ochre); fill: var(--ochre);
}
.pdm-info__rating small { font-size: 11px; font-weight: 700; color: var(--muted-3); }
.pdm-info__hours {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
    font-size: 12px; font-weight: 700; color: var(--muted);
}
.pdm-info__hours i, .pdm-info__hours svg {
    width: 13px; height: 13px; flex: none; color: var(--muted-2);
}
/* RECRE-167 §6: опис у доку/sheet — ПОВНИЙ, без line-clamp (було
   clamp 4): довгий текст скролить сам контейнер (.pdm-info /
   .poi-sheet__body мають overflow: auto). Кластерний floating-попап
   (.rm-poi-popup__desc, clamp 2) — свідомо без змін. */
.pdm-info__desc {
    margin: 7px 0 0;
    font-size: 12.5px; line-height: 1.55; color: var(--muted);
}

/* ============================================================
   RECRE-167: generic-блок фактів категорії (.pdm-facts) — рендер
   attribute_schema × attributes (poiFactsHtml, alpine-data.js).
   highlight-атрибут (типово ціна) — акцентна картка ПЕРШОЮ;
   boolean «Ні» — притишений .is-no. CSS 1:1 з мокапа
   design_mockups/poi-info-panel-redesign/styles.css (прод-кандидат).
   ============================================================ */
.pdm-facts { margin-top: 10px; }
.pdm-facts__hl {
    background: rgba(193,109,69,0.10);
    border: 1px dashed rgba(193,109,69,0.4);
    border-radius: 10px;
    padding: 7px 10px 8px;
    margin: 0 0 8px;
}
.pdm-facts__hl dt {
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .9px; text-transform: uppercase;
    color: var(--terracotta);
}
.pdm-facts__hl dd {
    margin: 3px 0 0;
    font-size: 13.5px; font-weight: 800; line-height: 1.3;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.pdm-facts__rows { margin: 0; }
.pdm-facts__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 4.5px 0;
    border-bottom: 1px dashed var(--border-3);
    font-size: 12px; line-height: 1.4;
}
.pdm-facts__row:last-child { border-bottom: none; }
.pdm-facts__row dt { font-weight: 600; color: var(--muted-2); flex: none; max-width: 55%; }
.pdm-facts__row dd { margin: 0; font-weight: 700; color: var(--ink-2); text-align: right; }
.pdm-facts__row dd.is-no { color: var(--muted-3); font-weight: 600; }

/* Компактне дзеркало для floating-попапа (Designer §3: той самий CSS
   з меншими відступами; до 3 фактів + «ще N характеристик») */
.rm-poi-popup__facts { margin-top: 8px; }
.rm-poi-popup__facts__hl {
    background: rgba(193,109,69,0.10);
    border: 1px dashed rgba(193,109,69,0.4);
    border-radius: 8px;
    padding: 5px 8px 6px;
    margin: 0 0 6px;
}
.rm-poi-popup__facts__hl dt {
    font-size: 9px; font-weight: 800;
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--terracotta);
}
.rm-poi-popup__facts__hl dd {
    margin: 2px 0 0;
    font-size: 12.5px; font-weight: 800; line-height: 1.3;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.rm-poi-popup__facts__rows { margin: 0; }
.rm-poi-popup__facts__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 3.5px 0;
    border-bottom: 1px dashed var(--border-3);
    font-size: 11.5px; line-height: 1.4;
}
.rm-poi-popup__facts__row:last-child { border-bottom: none; }
.rm-poi-popup__facts__row dt { font-weight: 600; color: var(--muted-2); flex: none; max-width: 55%; }
.rm-poi-popup__facts__row dd { margin: 0; font-weight: 700; color: var(--ink-2); text-align: right; }
.rm-poi-popup__facts__row dd.is-no { color: var(--muted-3); font-weight: 600; }

/* RECRE-167 §8.3 (Tier 1): рядок-посилання на меню (menu_url,
   лише venue-категорії, лише коли поле заповнене) */
.pdm-info__menu { margin-top: 10px; }
.pdm-info__menu a {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px; font-weight: 800;
    color: var(--green); text-decoration: none;
    transition: background .15s, border-color .15s;
}
.pdm-info__menu a:hover { background: var(--bg-2); border-color: var(--dash); }
.pdm-info__menu i, .pdm-info__menu svg { width: 13px; height: 13px; flex: none; color: var(--sage); }
.pdm-info__menu .ext { margin-left: auto; color: var(--muted-3); }
.pdm-info__menu .ext svg, .pdm-info__menu .ext i { width: 11px; height: 11px; }
/* Збагачення кафе/ресторанів (TOR-cafe-restaurant-enrichment):
   кухня і сайт у доку/панелі — дзеркало .rm-poi-popup__cuisine/__site */
.pdm-info__cuisine,
.pdm-info__site {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 8px;
    font-size: 12px; font-weight: 700; color: var(--muted);
}
.pdm-info__cuisine i, .pdm-info__cuisine svg,
.pdm-info__site i, .pdm-info__site svg {
    width: 13px; height: 13px; flex: none; margin-top: 1px;
    color: var(--muted-2);
}
.pdm-info__site a {
    color: var(--green); text-decoration: none; word-break: break-all;
}
.pdm-info__site a:hover { text-decoration: underline; }
/* Кластер: список назв одною колонкою */
.pdm-info__list {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 5px;
}
.pdm-info__list li {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.pdm-info__list li::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--poi-type-color, var(--poi-other)); flex: none;
}
.pdm-info__more {
    margin: 6px 0 0; font-size: 11.5px; font-weight: 700; color: var(--muted-3);
}
/* Дзеркала попапних QA D1/D2 (дедуп ×N, тип у змішаному списку) */
.pdm-info__count {
    font-size: 11px; font-weight: 800; color: var(--muted-3);
    /* tabular-nums — групове правило Ч-2 (unified-number-typography, кінець файлу) */
}
.pdm-info__itype { font-size: 11px; font-weight: 800; color: var(--muted-3); letter-spacing: .3px; }

/* Стан-заглушка (об'єкт не обрано): стовпчик по центру дока */
.pdm-info--empty { align-items: center; justify-content: center; }
/* RECRE-229 (крок 2): заглушка монтується через x-if у той самий кадр,
   коли панель повертає хром — transition на щойно змонтованому вузлі
   неможливий, тож м'яка поява — keyframes-фейдом (таймінг .22s ease —
   сімейство acct-row-in RECRE-219). Спрацьовує і при першому рендері
   сцени — ледь помітний фейд, прийнятно */
.pdm-info--empty .pdm-info__hint { animation: pdmHintIn .22s ease both; }
@keyframes pdmHintIn { from { opacity: 0; } to { opacity: 1; } }
.pdm-info__hint {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center;
    padding: 12px 4px;
    font-size: 12px; font-weight: 700; line-height: 1.5;
    color: var(--muted-3);
}
.pdm-info__hint p { margin: 0; }
.pdm-info__hint i, .pdm-info__hint svg { width: 20px; height: 20px; color: var(--muted-3); flex: none; }

/* ≤900px (RECRE-167 §4): док зникає — одиночний POI відкриває
   bottom-sheet (.poi-sheet нижче, той самий вміст poiPanelHtml),
   кластерний пін лишається floating-попапом; легенда стає
   горизонтальною стрічкою НАД полотном у тій самій картці
   (перемикачі категорій лишаються доступними) */
@media (max-width: 900px) {
    .pdm-frame { display: block; }
    .pdm-side {
        width: auto;
        flex-direction: row; flex-wrap: wrap;
        gap: 4px 18px;
        border-right: none;
        border-bottom: 1px solid var(--border-2);
        padding: 12px 14px;
        overflow: visible;
    }
    .pdm-side__group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
    /* RECRE-370: підпис «Шари» переїхав у обгортку .pdm-side__head —
       власним рядком у wrap-флексі стрічки стає саме вона (кнопка
       згортання тут не рендериться, тож рядок візуально той самий) */
    .pdm-side__head { width: 100%; min-height: 0; padding-right: 0; }
    .pdm-side__label { width: 100%; margin-bottom: 2px; }
    .pdm-side__sep { display: none; }
    .pdm-srow { width: auto; padding: 5px 8px; }
    .pdm-info { display: none; }
}

/* ============================================================
   RECRE-167 §4 / Designer §7: мобільний bottom-sheet одиночного POI —
   той самий патерн, що bottom-sheet фільтрів /map/ (грип, скрім,
   закриття тапом поза карткою / × / Esc / пілюлею категорії).
   Вміст — ІДЕНТИЧНІ класи .pdm-info__* (той самий poiPanelHtml, що
   десктопний док): паритет блоків з десктопом за конструкцією (§4.1).
   Живе на корені компонента (position: fixed до в'юпорта — всередині
   overlay .ov-anim transform зламав би fixed). Показ лише ≤900px —
   на десктопі той самий стан рендерить бічний док.
   Z: понад .park-overlay (40) і хедер (40), під lightbox (90).
   ============================================================ */
.poi-scrim, .poi-sheet { display: none; }
@media (max-width: 900px) {
    .poi-scrim {
        display: block;
        position: fixed; inset: 0; z-index: 45;
        background: rgba(46,36,25,0.28);
    }
    .poi-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
        display: flex; flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--border-2); border-bottom: none;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -18px 40px -20px rgba(47,74,55,0.5);
        max-height: min(72dvh, 640px);
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.33, 1, .4, 1);
        font-family: 'Mulish', system-ui, sans-serif;
        color: var(--ink-2);
    }
    .poi-sheet.is-open { transform: translateY(0); }
    /* RECRE-484: стулена «звичайна» шторка (картка РОІ / події /
       список-вибір кластера) — та сама геометрія «ручки», що вже має
       режим «Панорама» (.is-vs-collapsed, viewshed.css): видно грип і
       шапку, решта з'їжджає за край. Саме «сховати», а не «зменшити»:
       вимога ПО — звільнити карту, лишивши картку відкритою.
       Стоїть ПІСЛЯ .is-open — специфічність та сама (0,2,0), тож
       вирішує порядок. */
    .poi-sheet.is-collapsed { transform: translateY(calc(100% - 96px)); }
    .poi-sheet.is-collapsed .poi-sheet__body { visibility: hidden; }
    /* Виняток для шторки ПОДІЇ: у неї немає власного .poi-sheet__head —
       шапку (категорія + «×») несе сама картка всередині __body
       (includes/event_sheet.html). Сховавши тіло, ми лишили б у смузі
       96px порожню плашку, з якої нічого не зрозуміло і яку нічим
       закрити. */
    .poi-sheet--event.is-collapsed .poi-sheet__body { visibility: visible; }
    .poi-sheet__grip {
        width: 44px; height: 4px; border-radius: 4px;
        background: var(--dash); margin: 10px auto 2px; flex: none;
    }
    .poi-sheet__head {
        display: flex; align-items: center; gap: 10px;
        padding: 6px 18px 0; flex: none;
    }
    .poi-sheet__body { overflow: auto; padding: 0 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .poi-sheet { transition: none; }
    /* RECRE-229: без анімацій стану панелі дока */
    .pdm-info { transition: none; }
    .pdm-info--empty .pdm-info__hint { animation: none; }
}

/* ============================================================
   RECRE-298: мобільна панель довкілля — той самий примітив, що
   .poi-sheet вище (RECRE-167 §4): грип (візуальний, drag-to-close
   свідомо немає), скрім, ×, Esc. Показ лише ≤680px: там немає ані
   floating-віджета .env-widget, ані згорнутої .env-pill. z 45/46 —
   як у .poi-sheet; одночасно вони не існують (env-шит закривається
   при виборі парку, а .poi-sheet живе лише всередині overlay парку).
   Вміст — той самий includes/env_widget.html, що в десктопному
   віджеті (див. includes/env_sheet.html).
   ============================================================ */
.env-scrim, .env-sheet { display: none; }
@media (max-width: 680px) {
    .env-scrim {
        display: block;
        position: fixed; inset: 0; z-index: 45;
        background: rgba(46,36,25,0.28);
        animation: rmFade .25s ease;
    }
    .env-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
        display: flex; flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--border-2); border-bottom: none;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -18px 40px -20px rgba(47,74,55,0.5);
        max-height: min(72dvh, 560px);
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.33, 1, .4, 1);
        font-family: 'Mulish', system-ui, sans-serif;
        color: var(--ink-2);
    }
    .env-sheet.is-open { transform: translateY(0); }
    .env-sheet__grip {
        width: 44px; height: 4px; border-radius: 4px;
        background: var(--dash); margin: 10px auto 2px; flex: none;
        /* RECRE-497: тепер <button> — скидання дефолтів + жестовий
           курсор; хіт-зона 44px через ::after (пілюля лише 4px) */
        border: none; padding: 0; position: relative;
        cursor: grab; touch-action: none;
    }
    .env-sheet__grip::after {
        content: ""; position: absolute;
        left: -20px; right: -20px; top: -20px; bottom: -20px;
    }
    .env-sheet__grip:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35);
    }
    .env-sheet__close {
        position: absolute; top: 12px; right: 14px;
        width: 26px; height: 26px; padding: 0;
        display: flex; align-items: center; justify-content: center;
        border: none; border-radius: 50%;
        background: var(--bg-2); cursor: pointer;
    }
    /* хіт-зона 44×44 (UX-guideline 22) при візуальних 26px */
    .env-sheet__close::after { content: ""; position: absolute; inset: -9px; }
    .env-sheet__close i, .env-sheet__close svg {
        width: 14px; height: 14px; color: var(--muted); pointer-events: none;
    }
    .env-sheet__close:focus-visible {
        outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
    }
    /* Вміст: поля 18px, safe-area під home-indicator iOS.
       Селектори навмисно двокласові (.env-sheet .env-…): тіло шита
       несе клас .env-widget, чиї базові правила (position:absolute,
       width:264px, padding картки) оголошені НИЖЧЕ за файлом — при
       однаковій специфічності вони б перемогли за порядком. */
    .env-sheet .env-sheet__body {
        overflow: auto; overscroll-behavior: contain;
        padding: 2px 18px calc(20px + env(safe-area-inset-bottom));
    }
    /* Скидання рамок картки — шит уже сам є поверхнею.
       z-index: auto обов'язковий (QA RECRE-298, D-1): тіло шита є
       flex-елементом .env-sheet, а для flex-елемента z-index != auto
       створює стековий контекст навіть при position: static — базовий
       .env-widget { z-index: 20 } малював тіло поверх .env-sheet__close
       і хрестик переставав ловити тапи в центрі. */
    .env-sheet .env-widget--sheet {
        position: static; width: auto; z-index: auto;
        background: none; border: none; border-radius: 0;
        box-shadow: none; transition: none;
    }
    /* Шапка інклюду в шиті: місце під × праворуч */
    .env-widget--sheet .env-widget__head { padding-right: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .env-sheet { transition: none; }
    .env-scrim { animation: none; }
    /* .env-trigger — у власному блоці ПІСЛЯ @media (max-width: 680px)
       наприкінці файлу: його transition/:active оголошені там, і при
       однаковій специфічності перемагає останнє правило за порядком */
}

/* Контейнер карти (НЕ 100vh — вбудований блок). Десктоп >900px:
   RECRE-194/196 (TOR-poi-card-carousel-build §3) — висота сцени
   SCENE_H = var(--scene-h, 860px). RECRE-208 (§13 концепту) зробив її
   адаптивною: clamp(568px, 100vh − 100px, 860px) — 568 = p100 реальної
   картки 516 + хром панелі 48 + 4; 100 = шапка 66 + пінінг 16 + поле
   18; 860 = бюджет §11.1 як стеля (на високих екранах — без змін).
   Сцена не змінює висоту незалежно від
   того, докована картка чи ні. .pdm-side/.pdm-info стретчаться до цієї
   висоти наявним align-items:stretch «безкоштовно». Адаптивна --pdm-h
   від park-mini-map.js (miniFitContainerHeight) на десктопі no-op —
   очікувано (fitBounds сам кадрує парк у фіксований контейнер, свідома
   втрата індивідуальної висоти — designer's tradeoff §11.1); вона далі
   працює у брейкпоінтах ≤900px нижче. */
.pdm-map {
    position: relative;
    height: var(--scene-h, 860px);
    overflow: hidden;
    background: #E9E2CF;   /* тон тайлів до завантаження */
}
/* Власний stacking-context Leaflet (як #map на /map/): оверлеї
   .pdm-zoom/.pdm-fullmap лежать поверх пейнів */
.pdm-canvas { position: absolute; inset: 0; z-index: 0; }

/* Кнопки масштабу (дублюють зум колесом/drag/pinch) */
.pdm-zoom {
    position: absolute; top: 12px; left: 12px; z-index: 10;
    display: flex; flex-direction: column; gap: 4px;
}
.pdm-zoom button {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: rgba(251,245,233,0.95);
    border: 1px solid var(--border);
    color: var(--green);
    font-size: 16px; font-weight: 800; line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px -12px rgba(47,74,55,0.5);
    transition: background .18s;
}
.pdm-zoom button:hover { background: #FFFDF8; }
.pdm-zoom button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }

/* Пілюля-посилання "Відкрити на карті" → /map/?highlight={slug} */
.pdm-fullmap {
    position: absolute; right: 12px; bottom: 12px; z-index: 10;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 11.5px; font-weight: 800;
    color: var(--green);
    background: rgba(251,245,233,0.94);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 8px 14px;
    text-decoration: none;
    box-shadow: 0 12px 26px -16px rgba(47,74,55,0.55);
    transition: background .18s, transform .18s;
}
.pdm-fullmap:hover { background: #FFFDF8; transform: translateY(-1px); }
.pdm-fullmap:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.pdm-fullmap i, .pdm-fullmap svg { width: 13px; height: 13px; color: var(--terracotta); }

/* Skeleton завантаження (geometry/layers/pois ще не прийшли) */
.pdm-map--skeleton::before {
    content: "";
    position: absolute; inset: 0; z-index: 5;
    background: linear-gradient(100deg, #EFE8D4 40%, #F7F1E1 50%, #EFE8D4 60%);
    background-size: 200% 100%;
    animation: rmShimmer 1.4s linear infinite;
}
.pdm-skeleton-note {
    position: absolute; left: 50%; top: 50%; z-index: 6;
    transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 12px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted-3);
    white-space: nowrap;
}
.pdm-skeleton-note i, .pdm-skeleton-note svg { width: 16px; height: 16px; }

@keyframes rmShimmer {
    from { background-position: 120% 0; }
    to   { background-position: -80% 0; }
}

/* Адаптив висоти карти — синхронно з hero сторінки: нижча стеля
   для --pdm-h і менший fallback на вужчих екранах */
@media (max-width: 900px) { .pdm-map { height: min(var(--pdm-h, 360px), 480px); } }
@media (max-width: 600px) {
    .pdm-map { height: min(var(--pdm-h, 300px), 400px); }
}

/* RECRE-214: скрім-підказка тач-замка Атласа (створює
   miniSetupTouchLock у park-mini-map.js лише на ≤900px +
   any-pointer:coarse; спільна для /park/{slug}/ і overlay /map/).
   У замкненому стані свайп по карті гортає сторінку — скрім
   з'являється на свайп і навчає: тап вмикає взаємодію з картою.
   pointer-events:none — дотики проходять карті/сторінці. */
.pdm-touch-hint {
    position: absolute; inset: 0; z-index: 20;   /* над .pdm-zoom (10) */
    display: flex; align-items: center; justify-content: center;
    background: rgba(36,52,38,0.30);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.pdm-touch-hint.is-visible { opacity: 1; }
.pdm-touch-hint__pill {
    display: inline-flex; align-items: center; gap: 8px;
    max-width: calc(100% - 32px);
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 12px; font-weight: 800;
    color: var(--green);
    background: rgba(251,245,233,0.95);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 9px 15px;
    text-align: center;
    box-shadow: 0 12px 26px -16px rgba(47,74,55,0.55);
}
.pdm-touch-hint__pill i, .pdm-touch-hint__pill svg {
    width: 15px; height: 15px; color: var(--terracotta); flex: 0 0 auto;
}

/* --- 2. Блок "Історія парку" (.pdh) --- */
.pdh { margin-top: 6px; }
/* Історія стоїть під широким блоком схеми — обмежуємо ширину
   тексту для читабельності (TOR-fullwidth-map-and-park-events) */
.pdh--after-wide { max-width: 72ch; }
.pdh-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.pdh-head .pdc__section-title { margin: 0; }
.pdh-head > i, .pdh-head > svg {
    width: 14px; height: 14px; color: var(--muted-3); flex: none;
}
/* Абзаци history з TextField — зберігаємо розриви рядків */
.pdh-text { white-space: pre-line; }

/* Галерея historical-фото — ОКРЕМА від hero-мініатюр; сепія
   відділяє епоху від сучасних фото */
.pdh-gallery {
    display: flex; gap: 14px; flex-wrap: wrap;
    margin-top: 16px;
}
.pdh-photo { width: 208px; margin: 0; }
.pdh-photo__img {
    width: 100%; height: 144px;
    object-fit: cover; display: block;
    border-radius: 12px;
    border: 1px solid var(--border-2);
    background: var(--bg-2);
    filter: sepia(.28) contrast(.95) saturate(.85);
}
/* Підпис = ParkPhoto.caption (атрибуція — текстом усередині) */
.pdh-photo__caption {
    margin: 6px 2px 0;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 11.5px; font-weight: 600; line-height: 1.45;
    color: var(--muted-3);
}

/* ============================================================
   TOR-fullwidth-map-and-park-events (затв. 2026-07-13):
   афіша подій парку — банер найближчої події + чипи наступних,
   на всю ширину між hero і колонками /park/{slug}/.
   Дата-квадрат — той самий патерн, що .event-date-badge головної
   (день + місяць), інверсна колірна схема (зелений фон).
   Немає подій → блок не рендериться (x-if у шаблоні).
   ============================================================ */
.pde { font-family: 'Mulish', system-ui, sans-serif; margin: 26px 0 0; }
.pde-banner {
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(135deg, var(--surface) 55%, #F3E8CF);
    border: 1px solid var(--border-2);
    border-radius: 20px;
    padding: 18px 24px;
    box-shadow: 0 16px 34px -28px rgba(47,74,55,0.55);
}
.pde-date {
    flex: none; width: 58px; height: 64px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--green);
    border-radius: 12px;
}
.pde-date__day {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px; font-weight: 700; line-height: 1;
    color: #F4EBDA;
}
.pde-date__month {
    font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ochre-light);
    margin-top: 2px;
}
.pde-banner__main { min-width: 0; flex: 1; }
.pde-cat {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--terracotta);
}
.pde-cat i, .pde-cat svg { width: 12px; height: 12px; }
.pde-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px; font-weight: 700; line-height: 1.15;
    color: var(--green);
    margin: 3px 0 0;
}
.pde-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
    font-size: 11.5px; font-weight: 600; color: var(--muted);
    margin-top: 6px;
}
.pde-meta > i, .pde-meta > svg { width: 12px; height: 12px; flex: none; color: var(--muted-3); }
/* Чип вартості: зелений «Безкоштовно» / нейтральний платний
   (те саме сімейство, що .tag-chip--free головної) */
.pde-free {
    display: block; align-items: center;
    font-size: 10px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--chip-amenity-fg); background: var(--chip-amenity-bg);
    border-radius: 20px; padding: 3px 9px;
    /* RECRE-343: той самий клас бага, що .event-price-chip - довгий
       price_note без обмеження вилазив за межу банера на вузьких
       екранах. display:block потрібен для text-overflow (як вище). */
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pde-free--paid { color: var(--muted); background: var(--bg-2); }
/* RECRE-237: дії банера афіші («Реєстрація», «На карті») — бордерні
   міні-пілюлі house-формули .pde-chip: раніше терракотовий текст у
   мета-рядку відрізнявся від некликабельних сусідів ЛИШЕ кольором —
   користувач не розпізнавав контрол (WCAG 1.4.1) */
.pde-reg {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 800;
    color: var(--terracotta); text-decoration: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 11px;
    transition: color .15s, background .15s, border-color .15s;
}
.pde-reg:hover { color: var(--green); background: var(--bg-2); border-color: var(--dash); }
.pde-reg:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.5); }
.pde-reg i, .pde-reg svg { width: 13px; height: 13px; }
.pde-banner__next {
    flex: none; max-width: 320px;
    display: flex; flex-direction: column; gap: 7px; align-items: flex-end;
}
.pde-chip {
    display: inline-flex; align-items: center; gap: 7px;
    max-width: 100%; box-sizing: border-box;
    font-size: 11.5px; font-weight: 700; color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 5px 12px;
    text-decoration: none;
    transition: box-shadow .15s;
}
.pde-chip:hover { box-shadow: inset 0 0 0 1.6px rgba(126,148,102,0.55); }
.pde-chip b { color: var(--terracotta); font-weight: 800; white-space: nowrap; }
.pde-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pde-chip i, .pde-chip svg { width: 12px; height: 12px; flex: none; color: var(--muted-3); }
/* RECRE-169: у секції афіші overlay карти подія клікабельна КНОПКОЮ
   (перецентрування живої карти на маркер події, map.html) — той самий
   вигляд, що <a>-варіанти .pde-reg/.pde-chip сторінки парку */
button.pde-reg, button.pde-chip {
    cursor: pointer;
    font-family: inherit; text-align: left;
}
.pde-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 800;
    color: var(--terracotta); text-decoration: none;
    transition: color .15s;
}
.pde-link:hover { color: var(--green); }
.pde-link i, .pde-link svg { width: 13px; height: 13px; }

@media (max-width: 900px) {
    .pde-banner { flex-wrap: wrap; }
    .pde-title { font-size: 21px; }
    /* чипи наступних подій — рядком під головною подією */
    .pde-banner__next {
        width: 100%; max-width: none;
        flex-direction: row; flex-wrap: wrap;
        align-items: center; justify-content: flex-start;
    }
    .pde-chip span { max-width: 180px; }
}
@media (max-width: 600px) {
    .pde-banner { padding: 14px 16px; gap: 14px; }
    .pde-date { width: 50px; height: 56px; }
    .pde-date__day { font-size: 22px; }
}

/* ============================================================
   RECRE-281 (TOR-event-marker-card-flyout): докована картка ПОДІЇ
   з кліку на event-маркер Атласу (.pdm-evcard, event-card.js) —
   окремий компонент у тому самому правому доку .pdm-info, що POI-
   картка (спільні лишаються кікер .pdm-info__kicker, × .pdm-info__close
   і хост .pdm-info__cardhost.is-overflow). Хром зони (surface/рамка/
   тінь) — на самій картці, панель у стані --card прозора (прецедент
   RECRE-228 §14). Контент — house-формули банера афіші: дата-квадрат
   .pde-date (зменшений 50×56), чипи .pde-free/.pde-free--paid, дії
   .pde-reg/.pde-link (класи перевикористовуються 1:1 у eventCardHtml).
   Поява — простий fade ≤220мс БЕЗ FLIP (ТЗ §4 п.5).
   ============================================================ */
.pdm-evcard {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 16px;
    box-shadow: 0 16px 34px -28px rgba(47,74,55,0.55);
    padding: 14px 16px 16px;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 13px;
    color: var(--ink-2);
    animation: pdmEvcardIn .22s ease backwards;
}
@keyframes pdmEvcardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pdm-evcard { animation: none; }
}
.pdm-evcard__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
/* Eyebrow категорії: крапка 8px currentColor + назва uppercase; колір —
   канал --event-cat-color маркера (RECRE-280), фолбек --event-marker */
.pdm-evcard__eyebrow {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--event-cat-color, var(--event-marker));
}
.pdm-evcard__eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: none;
}
/* Cover-фото — формула .pdm-info__photo (3:2); немає фото → блока немає */
.pdm-evcard__photo {
    margin: 0 0 10px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, var(--sage-light), var(--sage));
}
.pdm-evcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdm-evcard__top { display: flex; gap: 12px; align-items: flex-start; }
/* Дата-квадрат — формула .pde-date банера, зменшена (ТЗ §2: 50×56) */
.pdm-evcard__date {
    flex: none; width: 50px; height: 56px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--green);
    border-radius: 12px;
}
.pdm-evcard__date b {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 700; line-height: 1;
    color: #F4EBDA;
}
.pdm-evcard__date span {
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ochre-light);
    margin-top: 2px;
}
/* Назва — формула .pdm-info__name (Cormorant 20/700 green) */
.pdm-evcard__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 700; line-height: 1.12;
    color: var(--green);
    margin: 2px 0 0;
}
.pdm-evcard__when {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px;
    font-size: 12px; font-weight: 700; color: var(--muted);
}
.pdm-evcard__when i, .pdm-evcard__when svg {
    width: 13px; height: 13px; flex: none; color: var(--muted-2);
}
.pdm-evcard__chips {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 8px;
}
/* Чип «Орієнтовне місце» (has_precise_location=false) — пунктирна
   пілюля, дзеркало пунктиру is-approx маркера */
.pdm-evcard__approx {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--muted-2); background: var(--bg-2);
    border: 1px dashed var(--dash);
    border-radius: 20px; padding: 2px 8px;
}
.pdm-evcard__org {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 8px;
    font-size: 12px; font-weight: 700; color: var(--muted);
}
.pdm-evcard__org i, .pdm-evcard__org svg {
    width: 13px; height: 13px; flex: none; margin-top: 1px;
    color: var(--muted-2);
}
/* Опис — повний, без clamp (норма дока RECRE-167 §6); довгий вміст
   скролить хост .pdm-info__cardhost.is-overflow */
.pdm-evcard__desc {
    margin: 8px 0 0;
    font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.pdm-evcard__actions {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
    margin-top: 12px;
}
/* «Уся афіша» (RECRE-321: без «міста») — праворуч, коли поруч є
   «Реєстрація»; без неї (нема registration_url) лишається ліворуч (мокап §2) */
.pdm-evcard__actions .pde-link { margin-left: auto; }
.pdm-evcard__actions .pde-link:only-child { margin-left: 0; }
/* Мобільна шторка (event_sheet.html, ≤900px): хром несе .poi-sheet —
   картка всередині «гола»; fade теж зайвий (шторка сама виїжджає) */
.pdm-evcard--sheet {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 6px;
    animation: none;
}

/* ============================================================
   Найближчі події в правій панелі /map/ (TOR-park-events-in-popup):
   компактні рядки-прев'ю тією ж мовою, що .pde-chip/.pde-free/
   .pde-link сторінки парку, припасовані під 400px-панель
   (двоповерховий вміст: назва + «коли», тому окремий клас, а не
   однорядковий .pde-chip). Немає подій → секція не рендериться.
   ============================================================ */
.pdc-events { display: flex; flex-direction: column; gap: 8px; }
.pdc-event {
    display: flex; align-items: center; gap: 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px 12px;
    text-decoration: none;
    transition: box-shadow .15s;
}
.pdc-event:hover { box-shadow: inset 0 0 0 1.6px rgba(126,148,102,0.55); }
.pdc-event > i, .pdc-event > svg { width: 15px; height: 15px; flex: none; color: var(--muted-3); }
.pdc-event__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pdc-event__title {
    font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdc-event__when { font-size: 11px; font-weight: 600; color: var(--muted); }
.pdc-event .pde-free { flex: none; }
.pdc-events .pde-link { align-self: flex-end; margin-top: 2px; }

/* ===== Map page ===== */
.map-shell {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    /* --header-h-actual — фактична висота .rm-header (ResizeObserver в
       alpine-data.js): на ≤680px шапка може стати вищою за константу
       92px (flex-wrap: довга назва міста → додатковий рядок), і все,
       що рахує від --header-h, з'їжджало під/над шапку. Fallback —
       константа (до відпрацювання скрипта / без JS). */
    height: calc(100vh - var(--header-h-actual, var(--header-h)));
    height: calc(100dvh - var(--header-h-actual, var(--header-h)));  /* мобільні браузери: мінлива висота viewport */
}
/* overflow: clip ОБОВ'ЯЗКОВО (fix page-scroll на /map/): закриті
   панелі "виїжджають" за межі трансформом (bottom-sheet ≤680px
   translateY(100%+24px)), а
   transformed-бокси РОЗШИРЮЮТЬ scrollable overflow документа —
   сторінка ставала прокручуваною, і всі absolute-оверлеї (FAB,
   env-widget, закритий шит фільтрів) їхали разом зі скролом.
   clip (на відміну від hidden) не робить .map-wrap програмно
   прокручуваним (focus/scrollIntoView не зсуне полотно); hidden —
   fallback для старих браузерів без clip. */
.map-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; overflow: clip; }
/* z-index:0 ОБОВ'ЯЗКОВО: ізолює stacking-context Leaflet-пейнів від панелей */
#map { position: absolute; inset: 0; z-index: 0; }

/* Шимер-лоадер картки карти /map/ (TOR-progressive-map-geometry-loading
   6.2, критерій №8) — за зразком .pdm-map--skeleton міні-карти сторінки
   парку (той самий градієнт/rmShimmer). Клас статичний у розмітці
   (видимий ще до монтування Alpine — скрипти тепер defer), знімає його
   loadGeoJSON один раз після першої відповіді geojson. z-index 800/801 —
   поверх Leaflet-пейнів (tile 200 … popup 700) всередині stacking-context
   #map; ::before/::after не перехоплюють кліки окремо від #map, а після
   зняття класу зникають разом. */
#map.map-skeleton::before {
    content: "";
    position: absolute; inset: 0; z-index: 800;
    background: linear-gradient(100deg, #EFE8D4 40%, #F7F1E1 50%, #EFE8D4 60%);
    background-size: 200% 100%;
    animation: rmShimmer 1.4s linear infinite;
}
#map.map-skeleton::after {
    content: "Завантажуємо карту…";
    position: absolute; left: 50%; top: 50%; z-index: 801;
    transform: translate(-50%, -50%);
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 12px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted-3);
    white-space: nowrap;
}

/* background — колір «дірки» під тайлами при швидкому панорамуванні:
   має збігатися з ГРАДУЙОВАНОЮ підложкою, а не з сирими тайлами
   (RECRE-382 §4.2 п.3 — перевірено, стику з boho-LUT не дає) */
.leaflet-container { background: #e8e2d0; font-family: 'Mulish', sans-serif; }
.leaflet-tile-pane { filter: var(--rm-tile-grade); }
/* RECRE-382, фаза B (Designer TOR-recre382 §8.5 п.4, п.6): грейд НЕ
   можна ні лишити глобальним, ні зняти глобально. Власний стиль Mapbox
   Studio «RecreMap Boho» несе цю саму палітру ВЖЕ в тайлі — фільтр над
   ним дав би подвійне спотворення кольору; безключові рендери OSM з
   фолбек-ланцюга (CyclOSM/HOT/OSM) без фільтра лишаються сирими.
   Тому режим перемикає JS у рантаймі: rmBasemapApplyGrade() у
   static/js/basemap.js ставить .rm-basemap--native на панель тайлів,
   коли активне джерело з запеченою палітрою, і знімає його при
   автофолбеку. Дефолт правил (без класу) — З грейдом: якщо скрипт
   упаде, карта деградує до градуйованої, а не до кислотної. */
.leaflet-tile-pane.rm-basemap--native { --rm-tile-grade: none; }
/* «Дірка» під тайлами при швидкому панорамуванні має збігатися з тим,
   що зараз показано: для стилю Mapbox це колір землі --bg #F4EBDA, для
   градуйованих фолбек-джерел лишається #e8e2d0 вище. */
.leaflet-container:has(.leaflet-tile-pane.rm-basemap--native) {
    background: #F4EBDA;
}
/* RECRE-382 + RECRE-220: boho-LUT робить теплішими САМЕ картографічні
   тайли. Аерофото Esri в геопікері власних локацій під тим самим
   грейдом втрачає близько половини насиченості (зелень і вода сіріють),
   а фото місцевості має читатись «як є». CSS-фільтр батька з дитини не
   скасовується, тому грейд гаситься на самій панелі тайлів — і лише
   тоді, коли в ній лежить контейнер супутникового шару (клас
   .mloc-sat-tiles, опція className у L.tileLayer,
   custom-location-form.js). Наслідки, свідомо закладені в селектор:
   • прив'язки до .mloc-pick немає — у fullscreen-режимі (RECRE-311)
     полотно карти переїжджає з .mloc-pick у .mloc-fs в <body>, і
     селектор через .mloc-pick там би просто перестав діяти;
   • базова підложка грейд отримує як і раніше: у режимі «Карта»
     тумблер знімає супутниковий шар з карти, .mloc-sat-tiles зникає
     з DOM разом із ним. */
.leaflet-tile-pane:has(.mloc-sat-tiles) { --rm-tile-grade: none; }
.leaflet-bar a { background: var(--surface); color: var(--ink-2); border-bottom-color: #e6d8bb; }
.leaflet-bar a:hover { background: #fff; }
.leaflet-interactive { cursor: pointer; }
/* Скидання дефолтного фокус-контуру браузера на SVG-полігонах парків:
   Firefox після кліку малює на .leaflet-interactive чорний пунктирний
   прямокутник по bounding box (читається як "чорний периметр" навколо
   вибраного парку). Той самий патерн, що для решти інтерактивних
   елементів (.mpp-mark, .rm-cluster тощо); власна індикація вибору —
   теракотова пунктирна обводка PARK_SEL_STYLE (map.js) */
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible { outline: none; }

.rm-tip {
    background: var(--green); color: var(--bg); border: none; border-radius: 9px;
    padding: 5px 11px; font-weight: 700; font-size: 12.5px;
    box-shadow: 0 6px 18px rgba(47,74,55,0.3);
}
.rm-tip::before { border-top-color: var(--green); }

/* ============================================================
   POI — фіча park-amenities-and-poi.
   Перенесено з design_mockups/_shared/poi-markers.css (значення
   без змін; токени --rm-* → наявні токени main.css):
     1. .rm-poi-badge — бейдж "N POI" на фото картки каталогу;
     2. .rm-poi-marker — краплеподібний пін POI (Leaflet divIcon);
     3. .rm-poi-popup — міні-попап маркера;
     4. .pdc-poi-group--toggle — toggle-рядок групи POI в панелі
        карти (модифікатор базового .pdc-poi-group, який живе
        в секції park-detail-card вище).
   ============================================================ */

/* --- 1. Бейдж "N POI" на фото картки (UC-04); pois_count == 0 →
       бейдж не рендериться взагалі --- */
.rm-poi-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 30px;
    background: rgba(36,52,38,0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--surface);
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
    white-space: nowrap;
}
.rm-poi-badge i, .rm-poi-badge svg {
    width: 12px; height: 12px; flex: none;
    color: var(--ochre-light);
}
/* Позиція на фото: контейнер фото — position:relative; однакова
   для всіх трьох стилів карток (Арки/Полароїд/Журнал) */
.rm-poi-badge--on-media {
    position: absolute; top: 12px; right: 12px; z-index: 2;
}

/* --- 2. POI-пін (Leaflet divIcon [32,38], вістря [16,36]) ---
   Маркери — DOM-елементи, НЕ canvas-рендерер (gotcha №3);
   видаляються поіменно (gotcha №4) */
.rm-poi-divicon { background: none; border: none; }

.rm-poi-marker {
    position: relative;
    width: 32px; height: 38px;
    cursor: pointer;
    filter: drop-shadow(0 6px 8px rgba(36,52,38,0.35));
    /* поява: фейд + "виростання"; каскад через --i — індекс маркера,
       КАПНУТИЙ у JS на 12 кроках (QA D4: без капу глобальний індекс по
       100+ POI тримав пізні піни невидимими секундами через fill-mode).
       fill-mode backwards (НЕ both) — за зразком .mpp-mark: to-стан
       анімації не "прибивається" назавжди після завершення */
    animation: rmPoiIn .28s ease backwards;
    animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes rmPoiIn {
    from { opacity: 0; transform: translateY(-6px) scale(.55); }
    to   { opacity: 1; transform: none; }
}
/* Хіт-подушка (fix-hit-target 2026-07-13): повернута на 45° крапля
   .rm-poi-pin рендериться 39.6×39.6 (28×√2) і виходить за межі
   32×38 leaflet-interactive-контейнера — псевдоелемент розширює
   клікабельну зону на весь фактичний рендер піна (скарга «кнопка
   спрацьовує лише по краю»); клік по ::after бублить у контейнер
   маркера так само, як по самому піну */
.rm-poi-marker::after {
    content: ""; position: absolute; inset: -4px;
}

/* Тіло піна: 28px, три кути скруглені, четвертий — вістря вниз */
.rm-poi-pin {
    position: absolute; left: 2px; top: 2px;
    width: 28px; height: 28px; box-sizing: border-box;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    /* RECRE-368 §17.2 (фікс A): колір категорії приходить інлайн-змінною
       --poi-type-color з group.color (довідник PoiCategory, /api/poi-
       categories/) — раніше пін фарбували правила .rm-poi--<slug>, що
       існували лише для 9 базових слагів, тож решта 17 категорій
       довідника малювались дефолтним --poi-other. Фолбек-ланцюг:
       категорія без color → POI_FALLBACK_META.color → var(--poi-other) */
    background: var(--poi-type-color, var(--poi-other));
    border: 2px solid rgba(251,245,233,0.92);
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s, box-shadow .18s;
}
.rm-poi-pin i, .rm-poi-pin svg {
    width: 13px; height: 13px; flex: none;
    transform: rotate(45deg);               /* компенсація повороту */
    color: var(--surface);
    /* Іконка декоративна: клік по ЦЕНТРУ піна таргетить сам пін,
       а не lucide-svg/path — усуває «мертвий центр» (скарга
       2026-07-13: центр не працює, край працює; системно — той
       самий патерн на .mpp-mark і контролах попапа-прев'ю) */
    pointer-events: none;
}

/* Кольори типів: RECRE-368 §17.2 — 10 хардкод-правил
   .rm-poi--<slug> .rm-poi-pin (9 базових слагів + --mixed) ВИДАЛЕНО.
   Значення --poi-* побайтово збігалися з color у reference_data.py, а
   POI_MIXED_GROUP.color = "#2F4A37" (alpine-data.js) їде тим самим
   полем group.color — тож єдиний канал --poi-type-color покриває всі
   26 категорій довідника без втрати базової дев'ятки. Токени --poi-*
   у :root лишаються: їх споживають легенда AQI (--env-aqi-*) і
   фолбек --poi-other. Клас .rm-poi--<slug> лишається на маркері —
   він потрібен toggle-логіці/тестам, але кольору більше не несе. */

/* Hover: збільшення (z-порядок — riseOnHover у L.marker) */
.rm-poi-marker:hover .rm-poi-pin,
.rm-poi-marker.is-active .rm-poi-pin {
    transform: rotate(-45deg) scale(1.14);
}
/* Активний (відкрито попап): кремове кільце */
.rm-poi-marker.is-active .rm-poi-pin {
    box-shadow: 0 0 0 3px rgba(251,245,233,0.95),
                0 0 0 4.5px rgba(47,74,55,0.3);
}

/* Лічильник групового піна (однотипні POI у щільній зоні);
   pointer-events: none — бейдж не перехоплює клік по куту піна.
   TOR-poi-cluster-fix §4.2 (2026-07-18): підсилено проти оригінальної
   18px кремової пілюлі — інверсія на темно-зелений (лісовий бейдж
   однаково контрастний до БУДЬ-ЯКОГО з 8 кольорів типів POI і крем-фону
   карти; крем-текст на --green ≈9:1), розмір 21px / шрифт 11.5px
   (читабельні 2-значні числа), товстіша кремова обвідка відсікає бейдж
   від тіла піна */
.rm-poi-pin__count {
    pointer-events: none;
    position: absolute; top: -8px; right: -8px; z-index: 2;
    min-width: 21px; height: 21px; box-sizing: border-box;
    padding: 0 6px;
    border-radius: 30px;
    background: var(--green);
    border: 2px solid rgba(251,245,233,0.95);
    color: var(--surface);
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 11.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 10px -3px rgba(36,52,38,0.45);
}

/* Стек-ефект групового піна (TOR-poi-cluster-fix §4.2): напівпрозорий
   силует-«дублікат» позаду основного піна — патерн "pin stack"
   картографічних сервісів; сигнал «тут кілька об'єктів» зчитується
   навіть без розглядання числа. ::before НЕ конфліктує з ::after
   (хіт-подушка fix-hit-target) і малюється до дочірнього .rm-poi-pin —
   тобто завжди позаду тіла піна; pointer-events успадковано не
   блокує клік (клік ловить контейнер маркера, як і досі). */
.rm-poi-marker.is-group::before {
    content: ""; position: absolute; left: -3px; top: -2px;
    width: 28px; height: 28px; box-sizing: border-box;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: rgba(58,49,39,0.30);            /* --ink-2, силует */
    border: 2px solid rgba(251,245,233,0.55);
}

/* --- 2б. Маркер ПОДІЇ (RECRE-169, TOR-event-location-marker §6.2) ---
   Свідомо інша форма, ніж крапля POI (подія — тимчасова активність, не
   стабільний заклад): КОЛО на короткій ніжці. Заливка (RECRE-280,
   TOR-event-marker-colors §4-5) — категорійний колір EventCategory.color
   через інлайн --event-cat-color (makeEventMarker), фолбек --event-marker
   #8A5A83; обвідка — непрозорий кремовий ореол + зовнішня «волосинка»
   --ink, що відсікають маркер від фону карти і темного POI-кластера.
   Іконка — lucide категорії події (EventCategory.icon, фолбек
   calendar-days). Той самий каскад появи/тінь, що .rm-poi-marker.
   is-approx — фолбек-центроїд парку (has_precise_location=false):
   пунктирна обвідка + менша непрозорість, title "орієнтовне місце" —
   центр парку не видається за точну адресу (критерій №5). */
.rm-event-divicon { background: none; border: none; }

.rm-event-marker {
    position: relative;
    width: 34px; height: 40px;
    cursor: pointer;
    filter: drop-shadow(0 6px 8px rgba(36,52,38,0.35));
    animation: rmPoiIn .28s ease backwards;   /* та сама поява, що POI */
}
/* Хіт-подушка — той самий фікс, що .rm-poi-marker::after */
.rm-event-marker::after {
    content: ""; position: absolute; inset: -4px;
}
/* Ніжка до точки прив'язки (iconAnchor [17,38]) */
.rm-event-marker::before {
    content: ""; position: absolute; left: 15px; bottom: 2px;
    width: 4px; height: 10px;
    border-radius: 2px;
    background: var(--event-cat-color, var(--event-marker));
}
.rm-event-pin {
    position: absolute; left: 2px; top: 0;
    width: 30px; height: 30px; box-sizing: border-box;
    border-radius: 50%;
    background: var(--event-cat-color, var(--event-marker));
    /* RECRE-280: непрозорий кремовий ореол (був 2px rgba .92) + темна
       «волосинка» --ink назовні — контраст до фону карти і сусіднього
       POI-кластера (той самий прийом, що подвійне кільце is-active) */
    border: 2.5px solid var(--surface);
    box-shadow: 0 0 0 1.5px rgba(46,36,25,0.20);
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s, box-shadow .18s;
}
.rm-event-pin i, .rm-event-pin svg {
    width: 14px; height: 14px; flex: none;
    color: var(--surface);
    pointer-events: none;   /* без «мертвого центру» — патерн .rm-poi-pin */
}
.rm-event-marker:hover .rm-event-pin { transform: scale(1.12); }
/* Підсвічений маркер (deep-link ?event= / клік у секції афіші overlay):
   кремове кільце — та сама мова, що .rm-poi-marker.is-active. Зовнішнє
   кільце — у тоні КАТЕГОРІЇ (RECRE-280): color-mix 45% ≈ колишній
   rgba(138,90,131,0.45) для сливи. box-shadow тут свідомо ЗАМІЩУЄ
   базову «волосинку» піна — кільця is-active мають пріоритет */
.rm-event-marker.is-active .rm-event-pin {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(251,245,233,0.95),
                0 0 0 4.5px color-mix(in srgb,
                    var(--event-cat-color, var(--event-marker)) 45%,
                    transparent);
}
/* Фолбек-центроїд ("орієнтовне місце"): пунктир + прозорість маркера;
   заливка успадковує категорійний колір (RECRE-280 — прибрано
   захардкоджений сливовий rgba) */
.rm-event-marker.is-approx { opacity: .82; }
.rm-event-marker.is-approx .rm-event-pin {
    border-style: dashed;
}

/* --- 3. Міні-попап маркера (хвостик — власний ::after) --- */
.rm-poi-popup {
    position: relative;
    width: 236px; box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    box-shadow: 0 22px 48px -22px rgba(47,74,55,0.5);
    padding: 12px 15px 13px;
    font-family: 'Mulish', system-ui, sans-serif;
    color: var(--ink-2);
}
.rm-poi-popup::after {
    content: "";
    position: absolute; left: 50%; bottom: -6.5px;
    width: 12px; height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--surface);
    border-right: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
}
/* Колір типу — інлайн custom property --poi-type-color на .rm-poi-popup */
.rm-poi-popup__eyebrow {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--poi-type-color, var(--poi-other));
}
.rm-poi-popup__eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: none;
}
.rm-poi-popup__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 19px; font-weight: 700; line-height: 1.12;
    color: var(--green);
    margin: 4px 0 0;
}
.rm-poi-popup__hours {
    display: flex; align-items: center; gap: 6px;
    margin-top: 7px;
    font-size: 12px; font-weight: 700; color: var(--muted);
}
.rm-poi-popup__hours i, .rm-poi-popup__hours svg {
    width: 13px; height: 13px; flex: none; color: var(--muted-2);
}
.rm-poi-popup__desc {
    margin: 6px 0 0;
    font-size: 12.5px; line-height: 1.5; color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;                  /* максимум 2 рядки */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Збагачення кафе/ресторанів (TOR-cafe-restaurant-enrichment):
   кухня і сайт — той самий патерн "іконка+рядок", що __hours;
   порожнє поле → рядок не рендериться (умова в poiPopupHtml) */
.rm-poi-popup__cuisine,
.rm-poi-popup__site {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 7px;
    font-size: 12px; font-weight: 700; color: var(--muted);
}
.rm-poi-popup__cuisine i, .rm-poi-popup__cuisine svg,
.rm-poi-popup__site i, .rm-poi-popup__site svg {
    width: 13px; height: 13px; flex: none; margin-top: 1px;
    color: var(--muted-2);
}
.rm-poi-popup__site a {
    color: var(--green); text-decoration: none; word-break: break-all;
}
.rm-poi-popup__site a:hover { text-decoration: underline; }
/* Груповий пін: список назв (до 5) замість опису */
.rm-poi-popup__list {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.rm-poi-popup__list li {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.rm-poi-popup__list li::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--poi-type-color, var(--poi-other)); flex: none;
}
.rm-poi-popup__more {
    margin: 5px 0 0;
    font-size: 11.5px; font-weight: 700; color: var(--muted-3);
}
/* QA D2: лічильник дедуплікованих однакових назв ("Вхід ×3") */
.rm-poi-popup__count {
    font-size: 11px; font-weight: 800; color: var(--muted-3);
    /* tabular-nums — групове правило Ч-2 (unified-number-typography, кінець файлу) */
}
/* QA D1: тип елемента в списку змішаного піна ("Кафе · Назва") */
.rm-poi-popup__itype {
    font-size: 11px; font-weight: 800; color: var(--muted-3);
    letter-spacing: .3px;
}

/* --- 3а. Профіль закладу кафе/ресторану (TOR-poi-cafe-restaurant-popup,
   MVP 2026-07-24). Нові класи навмисно з префіксами "v-" та "venue-"
   (примітка ТЗ §5) і СПІЛЬНІ для floating-попапа (.rm-poi-popup)
   та дока Атласу (.pdm-info) — рендер обох дає alpine-data.js. */

/* Чіп джерела даних в eyebrow (рівень 1) / meta-рядку дока (рівень 2).
   Поки бізнес-профілів немає — завжди сірий варіант --open («Відкриті
   дані»: OSM + веб-ресерч); зелений базовий вигляд («Власник»,
   badge-check) чекає BusinessPOIProfile. */
.v-chip {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(126,148,102,0.18);
    border: 1px solid rgba(126,148,102,0.4);
    border-radius: 30px;
    padding: 2.5px 8px 2.5px 6px;
}
.v-chip i, .v-chip svg { width: 11px; height: 11px; flex: none; }
.v-chip--open {
    color: var(--muted-3);
    background: var(--bg-2);
    border-color: var(--border);
}
/* Meta-рядок дока під назвою (мокап .venue-panel__meta): чіп не
   притискається праворуч, згодом поруч стане рейтинг закладу */
.pdm-info__meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    margin-top: 8px;
}
.pdm-info__meta .v-chip { margin-left: 0; }

/* Рядок статусу «Відкрито до 21:00» / «Закрито · відкриється о 09:00» —
   рендериться ЛИШЕ коли working_hours впевнено розібрано
   (parseOsmOpeningHours); з неструктурованого тексту статус не
   вигадується (ТЗ §2 рівень 2 п.2) */
.venue-status {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 8px;
    font-size: 12px; font-weight: 700; color: var(--muted);
}
.venue-status__pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800;
    padding: 2.5px 9px; border-radius: 30px;
}
.venue-status__pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.venue-status__pill--open {
    color: var(--green);
    background: rgba(126,148,102,0.18);
}
.venue-status__pill--closed {
    color: var(--poi-restaurant);
    background: rgba(176,85,47,0.12);
}

/* Підвал походження даних (мокап пін 2/10): «Дані з відкритих джерел» */
.venue-src {
    margin: 9px 0 0;
    font-size: 10.5px; font-weight: 700; color: var(--muted-3);
    display: flex; align-items: center; gap: 5px;
}
.venue-src i, .venue-src svg { width: 11px; height: 11px; flex: none; }

/* Прибирання дефолтної обгортки Leaflet-попапа */
.leaflet-popup.rm-poi-popup-wrap .leaflet-popup-content-wrapper {
    background: transparent; box-shadow: none;
    padding: 0; border-radius: 0;
}
.leaflet-popup.rm-poi-popup-wrap .leaflet-popup-content {
    margin: 0; line-height: inherit; width: auto !important;
}
.leaflet-popup.rm-poi-popup-wrap .leaflet-popup-tip-container {
    display: none;                          /* хвостик — наш ::after */
}

/* --- 4. Toggle-рядок групи POI (права панель карти) ---
   Базовий вигляд рядка — .pdc-poi-group (park-detail-card); колір
   плашки __icon — через custom property --g, щоб .is-off перекривав
   без !important */
.pdc-poi-group--toggle {
    width: 100%; text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: box-shadow .18s, opacity .18s;
}
.pdc-poi-group--toggle .pdc-poi-group__icon {
    background: var(--g, var(--poi-other));
}
.pdc-poi-group--toggle:hover {
    box-shadow: inset 0 0 0 1.6px rgba(126,148,102,0.55);
}
.pdc-poi-group--toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1.6px rgba(126,148,102,0.55),
                0 0 0 3px rgba(126,148,102,0.35);
}
/* Іконка видимості (lucide eye / eye-off) справа від лічильника */
.pdc-poi-group__vis {
    width: 15px; height: 15px; flex: none;
    margin-left: 4px; color: var(--muted-3);
    display: inline-flex;
}
.pdc-poi-group__vis i, .pdc-poi-group__vis svg {
    width: 15px; height: 15px;
}
/* Вимкнений тип: маркери зняті з карти, рядок пригашений */
.pdc-poi-group--toggle.is-off { opacity: .5; }
.pdc-poi-group--toggle.is-off .pdc-poi-group__icon {
    background: var(--muted-3);
}

/* ============================================================
   map-popup-preview (UC-07): маркер парку + попап-прев'ю.
   Перенесено з design_mockups/map-popup-preview/map-popup.css
   (значення без змін; токени --rm-* → наявні токени main.css;
   mockup-хелпери --float НЕ переносяться):
     1. .mpp-mark  — круглий маркер парку (Leaflet divIcon) на
        центроїді полігона; існує ЛИШЕ в оглядовому режимі карти;
     2. .mpp-popup — попап-прев'ю: рендериться з properties уже
        завантаженого GET /api/parks/geojson/ (жодного HTTP-запиту);
        GET /api/parks/{slug}/ — лише по CTA «Детальніше».
   ============================================================ */

/* --- 1. Маркер парку .mpp-mark (divIcon [34,34], якір [17,17]) ---
   Свідомо кругла форма — ІНША, ніж краплеподібні POI-піни
   .rm-poi-marker (ієрархія «парк» vs «об'єкт у парку»).
   Іконка = ParkCategory.icon з /api/categories/ (динамічно).
   pointer-events: none на обгортці (RECRE-106): прозорий 34×34
   контейнер divIcon — НЕ хіт-таргет; події (mouseover тултіпа,
   клік попапа) ловить лише видима кнопка .mpp-mark і бублять у
   Leaflet-слухачі обгортки. Інакше під час entry-анімації (нижче)
   невидимий контейнер уже ловив ховер — тултіп з назвою зони
   відкривався «в повітрі», зміщений відносно кластерів.
   Подвійний селектор для pointer-events — специфічність: leaflet.css
   задає auto через .leaflet-marker-icon.leaflet-interactive (0,2,0),
   один клас .mpp-mark-divicon його не перебив би. */
.mpp-mark-divicon { background: none; border: none; }
.leaflet-marker-icon.mpp-mark-divicon { pointer-events: none; }

.mpp-mark {
    width: 34px; height: 34px; box-sizing: border-box;
    padding: 0;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid rgba(251,245,233,0.92);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    /* auto явно: pointer-events успадковується, і none з обгортки
       (RECRE-106) інакше вимкнув би і саму кнопку */
    pointer-events: auto;
    filter: drop-shadow(0 7px 10px rgba(36,52,38,0.38));
    /* поява: фейд + «виростання», каскад через --i — той самий
       патерн, що .rm-poi-marker. fill-mode СВІДОМО backwards (НЕ both):
       при both фінальний keyframe transform:none назавжди перекривав
       hover-transform (латентний баг, ТЗ map-marker-clustering §5.2/§6).
       Друга анімація rmSpawnGuard (RECRE-106): step-end тримає
       pointer-events:none від вставки в DOM (fill backwards покриває
       і каскадну затримку) до самого КІНЦЯ появи — поки маркер
       невидимий/долітає з точки кластера після спліта, він не ловить
       ховер/клік, тултіп не відкривається зміщеним у порожнечі.
       Після завершення анімаційні стилі спадають — діє базовий
       pointer-events: auto вище (без forwards-локауту). */
    animation: mppMarkIn .28s ease backwards,
               rmSpawnGuard .28s step-end backwards;
    animation-delay: calc(var(--i, 0) * 24ms);
    transition: transform .18s, box-shadow .18s;
}
.mpp-mark i, .mpp-mark svg {
    width: 16px; height: 16px; flex: none;
    color: var(--ochre-light);          /* охра на зеленому — як активна іконка категорії */
    /* Іконка декоративна: клік по центру маркера таргетить кнопку,
       а не lucide-svg/path (fix-hit-target 2026-07-13 — системно
       з .rm-poi-pin і контролами попапа-прев'ю) */
    pointer-events: none;
}
@keyframes mppMarkIn {
    from { opacity: 0; transform: translateY(-6px) scale(.55); }
    to   { opacity: 1; transform: none; }
}
/* Guard появи (RECRE-106, спільний для .mpp-mark і .rm-cluster):
   окрема анімація лише для pointer-events, бо step-end у самому
   mppMarkIn зламав би плавність фейду. step-end = from-значення
   (none) діє УСЮ тривалість, перемикання рівно в кінці; далі
   анімація спадає і повертається базовий auto елемента. */
@keyframes rmSpawnGuard {
    from { pointer-events: none; }
    to   { pointer-events: auto; }
}

.mpp-mark:hover { transform: scale(1.12); }
.mpp-mark:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}
/* Активний (попап цього парку відкритий): кремове кільце +
   теракотовий обвід — перегук зі станом «вибраний полігон» */
.mpp-mark.is-active {
    box-shadow: 0 0 0 3px rgba(251,245,233,0.95),
                0 0 0 4.5px rgba(193,109,69,0.45);
}

/* --- Бейдж "є пляж" (TOR-park-beach-layer, оглядова карта) ---
   Піщаний тон = колірний токен шару "Пляжі" LAYER_META.beach #E7D6A8
   (легенда Атласу, .pdc-beach). Іконка — темний пісок #8A6D3B:
   охра #B99A55 блоку .pdc-beach читається на кремовому --bg, але на
   самій піщаній заливці контрасту бракує. has_beach і name_is_generated
   незалежні — бейдж співіснує з охристим review-стилем полігона. */
.mpp-mark { position: relative; }   /* якір для міні-бейджа в куті */
.mpp-mark__beach {
    position: absolute;
    top: -4px; right: -4px;
    width: 15px; height: 15px; box-sizing: border-box;
    border-radius: 50%;
    background: #E7D6A8;
    border: 1.5px solid rgba(251,245,233,0.95);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;     /* клік по бейджу = клік по кнопці маркера */
}
.mpp-mark__beach i, .mpp-mark__beach svg {
    width: 9px; height: 9px; flex: none;
    color: #8A6D3B;
}

/* Полігон-режим (зум ≥ POLYGON_MIN_ZOOM): окремий divIcon-бейдж на
   центрі полігона (makeBeachBadge, map.js). pointer-events: none —
   суто візуальний, кліки/hover ідуть до полігона під ним. */
.rm-beach-divicon { background: none; border: none; pointer-events: none; }
.rm-beach-badge {
    width: 22px; height: 22px; box-sizing: border-box;
    border-radius: 50%;
    background: #E7D6A8;
    border: 1.5px solid rgba(251,245,233,0.95);
    box-shadow: 0 2px 6px rgba(36,52,38,0.28);
    display: flex; align-items: center; justify-content: center;
}
.rm-beach-badge i, .rm-beach-badge svg {
    width: 12px; height: 12px; flex: none;
    color: #8A6D3B;
}

/* --- Режим /map/?highlight={slug} — п'ятий стан "підсвічений"
   (park-detail-page-enrichment ТЗ 4; дизайн-ТЗ 8.5). Полігон:
   className "rm-park-highlight" з PARK_HIGHLIGHT_STYLE (map.js)
   вмикає м'яку пульсацію stroke-opacity (2.4с). Маркер (оглядовий
   зум): статичне зелене подвійне кільце + пульс-хвиля ::after —
   відмінний від .is-active (кремово-теракотове), стани співіснують. --- */
.rm-park-highlight {
    animation: rmParkHl 2.4s ease-in-out infinite;
}
@keyframes rmParkHl {
    0%, 100% { stroke-opacity: 1; }
    50%      { stroke-opacity: .4; }
}
.mpp-mark--highlight {
    position: relative;
    box-shadow: 0 0 0 3px rgba(251,245,233,0.95),
                0 0 0 5.5px rgba(47,74,55,0.55);
}
.mpp-mark--highlight::after {
    content: "";
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(47,74,55,0.55);
    animation: rmMarkHl 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes rmMarkHl {
    from { transform: scale(1);    opacity: .9; }
    to   { transform: scale(1.85); opacity: 0; }
}
/* Доступність: пульс — суто декоративний; лишається статичне
   товсте зелене обведення/кільце */
@media (prefers-reduced-motion: reduce) {
    .rm-park-highlight,
    .mpp-mark--highlight::after { animation: none; }
}

/* --- 2. Попап-прев'ю .mpp-popup ---
   L.popup({ className:'mpp-popup-wrap', closeButton:false,
             autoClose:true, maxWidth:272 });
   autoClose:true → одночасно максимум ОДИН попап (критерій №4).
   Хвостик — власний ::after (дефолтний tip вимкнено нижче). */
.mpp-popup {
    position: relative;
    width: 272px; box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 18px;
    box-shadow: 0 26px 54px -24px rgba(47,74,55,0.55);
    font-family: 'Mulish', system-ui, sans-serif;
    color: var(--ink-2);
    animation: mppPopIn .22s ease both;
}
@keyframes mppPopIn {
    from { opacity: 0; transform: translateY(4px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.mpp-popup::after {                     /* хвостик до маркера */
    content: "";
    position: absolute; left: 50%; bottom: -6.5px;
    width: 13px; height: 13px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--surface);
    border-right: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
}

/* 2.1 Фото-шапка (опційна): 96px — свідомо менше за 178px шапки
   .pdc__media («легший» рівень ієрархії). Немає cover_photo →
   блок НЕ рендериться взагалі (варіант --no-media). */
.mpp-popup__media {
    position: relative; height: 96px;
    border-radius: 17px 17px 0 0;
    overflow: hidden;
    background: var(--sage-light);      /* заглушка, поки img вантажиться */
}
.mpp-popup__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Бейдж «N POI» — .rm-poi-badge (секція POI вище); тут лише позиція
   (верхній ЛІВИЙ кут: правий зайнятий ×). pois_count == 0 /
   поле відсутнє → бейдж не рендериться. */
.mpp-popup__badge { position: absolute; top: 9px; left: 9px; z-index: 2; }

/* 2.2 Кнопка закриття ×: позиція top/right 9px працює і на фото
   (батько .mpp-popup__media), і без фото (батько .mpp-popup) */
.mpp-popup__close {
    position: absolute; top: 9px; right: 9px; z-index: 2;
    width: 26px; height: 26px; box-sizing: border-box;
    padding: 0;
    border: none; border-radius: 50%;
    background: rgba(251,245,233,0.92);
    color: var(--green);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .18s, background .18s;
}
/* pointer-events: none — клік по іконці «x» таргетить саму кнопку
   (fix-hit-target 2026-07-13: скарга «хрестик не закриває попап») */
.mpp-popup__close i, .mpp-popup__close svg {
    width: 14px; height: 14px; pointer-events: none;
}
.mpp-popup__close:hover { background: var(--surface-2); transform: scale(1.08); }
.mpp-popup__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}

/* 2.3 Тіло */
.mpp-popup__body { padding: 12px 15px 15px; }

/* eyebrow «Категорія · Район» — патерн eyebrow картки каталогу */
.mpp-popup__eyebrow {
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--terracotta);
    margin: 0 0 3px;
}
.mpp-popup__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px; font-weight: 700; line-height: 1.12;
    color: var(--green);
    margin: 0 0 9px;
    display: -webkit-box;               /* довгі назви: максимум 2 рядки */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Рядок фактів: міні-іконки зручностей (лише has_* == true);
   всі false → рядок тримає висоту (min-height) */
.mpp-popup__facts {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 12px;
    min-height: 24px;
}
.mpp-popup__amen {
    width: 24px; height: 24px; flex: none;
    border-radius: 50%;
    background: var(--chip-amenity-bg);
    color: var(--chip-amenity-fg);
    display: flex; align-items: center; justify-content: center;
}
.mpp-popup__amen i, .mpp-popup__amen svg { width: 12px; height: 12px; }
/* Лічильник POI текстом — ЛИШЕ у варіанті без фото (--no-media),
   бо з фото він уже є бейджем на фото (не дублюємо) */
.mpp-popup__pois {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 800;
    color: var(--terracotta);
    white-space: nowrap;
}
.mpp-popup__pois i, .mpp-popup__pois svg { width: 12px; height: 12px; }

/* 2.4 CTA «Детальніше»: зелена primary-пілюля; клік — єдина точка
   GET /api/parks/{slug}/ (критерій №2) */
.mpp-popup__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 13px; font-weight: 800;
    color: var(--bg);
    background: var(--green);
    border: none; border-radius: 30px;
    padding: 10px 16px;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, background .18s;
}
/* pointer-events: none — клік по іконці-стрілці таргетить кнопку CTA
   (fix-hit-target 2026-07-13, системно з .mpp-popup__close) */
.mpp-popup__cta i, .mpp-popup__cta svg {
    width: 15px; height: 15px; pointer-events: none;
}
.mpp-popup__cta:hover {
    background: var(--green-hover);
    transform: translateY(-1px);
    box-shadow: 0 14px 24px -14px rgba(47,74,55,0.6);
}
.mpp-popup__cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}

/* 2.5 Крайовий стан: парк БЕЗ фото (--no-media) — × переходить
   у тіло (кремовий чип), eyebrow/назва не залазять під × */
.mpp-popup--no-media .mpp-popup__close { background: var(--bg-2); }
.mpp-popup--no-media .mpp-popup__close:hover { background: var(--border); }
.mpp-popup--no-media .mpp-popup__eyebrow,
.mpp-popup--no-media .mpp-popup__name { padding-right: 26px; }

/* 2.6 Прибирання дефолтної обгортки Leaflet-попапа */
.leaflet-popup.mpp-popup-wrap .leaflet-popup-content-wrapper {
    background: transparent; box-shadow: none;
    padding: 0; border-radius: 0;
}
.leaflet-popup.mpp-popup-wrap .leaflet-popup-content {
    margin: 0; line-height: inherit; width: auto !important;
}
.leaflet-popup.mpp-popup-wrap .leaflet-popup-tip-container {
    display: none;                      /* хвостик — наш ::after */
}

/* ============================================================
   map-marker-clustering: кластерні «бульбашки» маркерів парків
   (Leaflet.markercluster, iconCreateFunction — дефолтні класи
   .marker-cluster-* плагіна НЕ використовуються).
   Перенесено з design_mockups/map-marker-clustering/marker-cluster.css
   (токени --rm-* → наявні токени main.css; mockup-хелпер --float
   НЕ переноситься). Градація за кількістю — розмір + колір гало:
     .rm-cluster--s   2–9    40px  гало-шавлія
     .rm-cluster--m   10–99  48px  гало-охра
     .rm-cluster--l   100+   58px  гало-теракота
   ============================================================ */

/* Обгортка divIcon: скидання дефолтів Leaflet (як .mpp-mark-divicon).
   Позиційні transform-анімації markercluster живуть на ЦЬОМУ
   елементі — наші transition-и на внутрішньому .rm-cluster,
   тому конфлікту немає. */
/* pointer-events: none на обгортці (RECRE-106, як .mpp-mark-divicon):
   кути прозорого квадрата divIcon і невидима під час entry-анімації
   бульбашка не ловлять ховер/клік — хіт-таргет лише видиме коло.
   Подвійний селектор — перебити auto від
   .leaflet-marker-icon.leaflet-interactive у leaflet.css. */
.rm-cluster-divicon { background: none; border: none; }
.leaflet-marker-icon.rm-cluster-divicon { pointer-events: none; }
.rm-cluster-divicon:focus-visible { outline: none; }

.rm-cluster {
    /* --d (діаметр) і --halo перевизначаються модифікаторами --s/--m/--l */
    --d: 40px;
    --halo: 0 0 0 4px rgba(126,148,102,0.30);       /* шавлія #7E9466 */

    width: var(--d); height: var(--d); box-sizing: border-box;
    padding: 0;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid rgba(251,245,233,0.92);        /* кремовий обвід .mpp-mark */
    box-shadow: var(--halo);                         /* гало-кільце щільності */
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    /* auto явно — успадкований none обгортки вимкнув би бульбашку
       (RECRE-106) */
    pointer-events: auto;

    font-family: 'Mulish', system-ui, sans-serif;    /* Mulish: цифри 13–16px */
    font-weight: 800;
    font-size: 13px;
    color: var(--surface);                           /* кремове число на зеленому */
    /* tabular-nums — групове правило Ч-2 (unified-number-typography, кінець файлу) */

    filter: drop-shadow(0 7px 10px rgba(36,52,38,0.38));  /* як .mpp-mark */

    /* Поява: фейд + «виростання» — той самий патерн, що .mpp-mark.
       fill-mode СВІДОМО backwards (НЕ both): при both фінальний
       keyframe transform:none назавжди перекривав би hover-transform.
       rmSpawnGuard (RECRE-106, спільні keyframes з .mpp-mark):
       невидима бульбашка не інтерактивна до кінця появи. */
    animation: rmClusterIn .28s ease backwards,
               rmSpawnGuard .28s step-end backwards;
    animation-delay: calc(var(--i, 0) * 24ms);
    transition: transform .18s, filter .18s, box-shadow .18s;
}
.rm-cluster span { line-height: 1; letter-spacing: .3px; }

@keyframes rmClusterIn {
    from { opacity: 0; transform: translateY(-6px) scale(.55); }
    to   { opacity: 1; transform: none; }
}

/* Пороги кількості (розмір + колір гало).
   2–9 — база: 40px, гало-шавлія 4px (значення в .rm-cluster) */
.rm-cluster--s { --d: 40px; font-size: 13px; }

/* 10–99: 48px, гало-охра 5px (#D79A3F) */
.rm-cluster--m {
    --d: 48px; font-size: 14.5px;
    --halo: 0 0 0 5px rgba(215,154,63,0.32);
    filter: drop-shadow(0 8px 12px rgba(36,52,38,0.40));
}

/* 100+: 58px, гало-теракота 6px (#C16D45); вміщує 4-значні числа */
.rm-cluster--l {
    --d: 58px; font-size: 16px;
    --halo: 0 0 0 6px rgba(193,109,69,0.35);
    filter: drop-shadow(0 10px 16px rgba(36,52,38,0.42));
}

/* Hover: легкий підйом + глибша тінь. Другий селектор — бо Leaflet
   вішає hover/focus на обгортку divIcon, а не на внутрішній div. */
.rm-cluster:hover,
.rm-cluster-divicon:hover .rm-cluster {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 12px 18px rgba(36,52,38,0.46));
}

/* Focus-visible: шавлієве кільце ПОВЕРХ гало (той самий ring, що
   .mpp-mark). Leaflet-маркери фокусабельні (keyboard:true) — фокус
   лягає на обгортку divIcon. */
.rm-cluster:focus-visible,
.rm-cluster-divicon:focus-visible .rm-cluster {
    outline: none;
    box-shadow: var(--halo), 0 0 0 3.5px rgba(126,148,102,0.35);
}

/* Ліва плаваюча панель */
/* RECRE-211: will-change: transform — панель у ВЛАСНОМУ композитному
   шарі, інакше кожен кадр скролу .panel-scroll перерастеризовує
   Leaflet-карту (тайли + canvas + маркери) під панеллю (~10 fps у
   замірах QA; з шаром — вдвічі краще). Постійний шар тут дешевий
   (один бокс 300px) і однаково потрібен транзішенам transform
   (.is-hidden / bottom-sheet .is-open на ≤680px). Fixed-нащадків
   панель не має (.map-fab/.map-scrim — сибліни), тож новий
   containing block нічого не переякорює. */
.left-panel {
    position: absolute; top: 16px; left: 16px; bottom: 16px; width: 300px; z-index: 20;
    transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
    will-change: transform;
}
.left-panel.is-hidden { transform: translateX(-360px); opacity: 0; pointer-events: none; }
.panel-card {
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 22px; box-shadow: 0 24px 50px -28px rgba(47,74,55,0.55);
    overflow: hidden; display: flex; flex-direction: column; max-height: 100%;
    position: relative;   /* якір для .rm-loadbar (catalog-loading-states §4) */
}
.panel-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--border-3); }
.panel-head-row { display: flex; align-items: baseline; justify-content: space-between; }
.panel-city { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 700; color: var(--green); }
.panel-count { font-size: 12.5px; font-weight: 700; color: var(--terracotta); }
/* Підрядок панелі: "N зон за фільтрами · з M у місті" (search-and-filter-parks) */
.panel-sub { font-size: 12px; color: var(--muted-3); margin-top: 2px; }
.panel-head .search-box { margin-top: 13px; }
.panel-head .search-box input { padding: 10px 13px 10px 36px; border-radius: 11px; font-size: 13.5px; }
.panel-head .search-box svg { width: 15px; height: 15px; }
/* overscroll-behavior: contain — внутрішній скрол панелі не
   "прокидається" на сторінку (map-page-footer: /map/ тепер
   прокручується до футера на десктопі; фантомний скрол сторінки
   з-під панелі — небажаний) */
/* flex: 1 1 auto + min-height: 0 (фікс 2026-07-23): скрол-дитина
   flex-колонки .panel-card зобов'язана стискатись до висоти картки —
   без min-height:0 flex-элемент не стискається нижче за контент
   (default min-height:auto), і внутрішній overflow-y:auto може не
   активуватись (панель "не скролиться" на малих viewport) */
/* RECRE-211: власний непрозорий background (той самий токен, що в
   .panel-card — візуально нуль змін) дає Chromium швидкий шлях
   composited-скролу непрозорого контейнера замість блендингу з тим,
   що під панеллю. contain: paint СВІДОМО не додано: у замірах QA
   результат нестабільний, а перевірити на реальному GPU-браузері
   звідси неможливо — лишено QA як окремий кандидат. */
.panel-scroll {
    padding: 16px 20px; overflow-y: auto; overscroll-behavior: contain;
    flex: 1 1 auto; min-height: 0;
    background: var(--surface);
}
.panel-scroll .side-title { font-size: 12px; margin-bottom: 9px; }
.panel-scroll .chip-wrap { gap: 6px; }
.panel-scroll .am-chip svg { width: 13px; height: 13px; }
.panel-legend { border-top: 1px dashed var(--dash); padding-top: 14px; margin-bottom: 16px; }
.panel-legend .legend-rows { gap: 7px; }
.panel-legend .legend-row { font-size: 12.5px; gap: 9px; }
.panel-legend .swatch { width: 16px; }

/* Символи легенди оглядової карти (фікс 2026-07-23): статичні мініатюри
   того, що реально видно ДО вибору парку. НЕ живі Leaflet divIcon —
   лише клон ключових властивостей .rm-cluster / .mpp-mark у 16px.
   Внутрішні ParkLayer-типи описує окрема легенда Атласу в overlay. */
.legend-symbol {
    width: 16px; height: 16px; flex: none; box-sizing: border-box;
    border-radius: 50%;
    background: var(--green);                       /* як .rm-cluster / .mpp-mark */
    border: 1.5px solid rgba(251,245,233,0.92);     /* кремовий обвід */
    display: inline-flex; align-items: center; justify-content: center;
}
.legend-symbol--cluster {
    box-shadow: 0 0 0 3px rgba(126,148,102,0.30);   /* гало-шавлія .rm-cluster (--s) */
    color: var(--surface);                          /* кремове число на зеленому */
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 8px; font-weight: 800; line-height: 1;
    /* tabular-nums — групове правило Ч-2 (unified-number-typography, кінець файлу) */
}
/* Маркер окремого парку: те саме коло, вирізняється охристою «іконкою
   категорії» всередині (мініатюра .mpp-mark i { color: var(--ochre-light) }) */
.legend-symbol--park::after {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--ochre-light);
}
/* Мініатюра полігону парку PARK_BASE_STYLE (map.js: fill #9DB37E @ .42,
   контур #3F5A3C) — плашка полігона: заливка + внутрішнє обведення */
.legend-row .swatch--park-poly {
    background: rgba(157,179,126,0.42);
    box-shadow: inset 0 0 0 1.5px #3F5A3C;
}
/* Мініатюра піщаного бейджа "є пляж" (.rm-beach-badge /
   .mpp-mark__beach, TOR-park-beach-layer) */
.legend-symbol--beach { background: #E7D6A8; }
.legend-symbol--beach i, .legend-symbol--beach svg {
    width: 9px; height: 9px; flex: none;
    color: #8A6D3B;
}
.mb-18 { margin-bottom: 18px; }

/* Порожній стан у лівій панелі карти: той самий блок, що .empty-block,
   але компактні відступи і без пунктирної рамки (дизайн-ТЗ 4.5) */
.panel-empty { text-align: center; padding: 10px 4px 22px; }
.panel-empty .empty-orb {
    width: 46px; height: 46px; border-radius: 50%; background: var(--bg-2);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.panel-empty .empty-orb svg { width: 20px; height: 20px; color: #b6a37e; }
.panel-empty .empty-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 700; color: var(--green); line-height: 1.15;
}
.panel-empty p { font-size: 12.5px; color: var(--muted-2); margin: 6px auto 14px; max-width: 220px; }
.panel-empty .btn-reset { padding: 9px 18px; font-size: 13px; }

.stat-minis { display: flex; gap: 10px; }
.stat-mini { flex: 1; background: var(--bg-2); border-radius: 14px; padding: 12px 14px; }
.stat-mini .num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 700; color: var(--green); line-height: 1; }
.stat-mini .num.accent { color: var(--terracotta); }
.stat-mini .label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted-3); margin-top: 3px; }

/* Підказка-пілюля */
.hint-pill {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 15;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(47,74,55,0.92); color: var(--bg);
    padding: 10px 18px; border-radius: 30px; font-size: 13px; font-weight: 700;
    box-shadow: 0 10px 26px -8px rgba(47,74,55,0.6);
}
.hint-pill svg { width: 15px; height: 15px; }

/* --- TOR-mobile-responsive-redesign: нові елементи /map/ ---
   На ≥681px усі чотири приховані (display: none) — поведінка
   десктопа не змінюється взагалі. */
.panel-grip {
    display: none;
    width: 44px; height: 4px; border-radius: 4px;
    background: var(--dash);
    margin: 10px auto -4px; flex: none;
    /* RECRE-497: тепер <button> — скидання дефолтів + жестовий курсор;
       хіт-зона 44px через ::after (сама пілюля лише 4px заввишки) */
    border: none; padding: 0; position: relative;
    cursor: grab; touch-action: none;
}
.panel-grip::after {
    content: ""; position: absolute;
    left: -20px; right: -20px; top: -20px; bottom: -20px;
}
.panel-grip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35);
}
.panel-close {
    display: none; align-items: center; justify-content: center;
    margin-left: 10px; align-self: center; flex: none; position: relative;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--bg-2); border: none; cursor: pointer;
    transition: background .18s;
}
.panel-close::after { content: ""; position: absolute; inset: -8px; }  /* хіт-зона 42px */
.panel-close:hover { background: var(--border); }
.panel-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.panel-close i, .panel-close svg { width: 14px; height: 14px; color: var(--muted); }
.map-fab {
    display: none;
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 15;
    align-items: center; gap: 8px;
    background: rgba(47,74,55,0.94); color: var(--bg);
    border: none; border-radius: 30px;
    padding: 12px 20px;
    font-family: inherit; font-size: 13.5px; font-weight: 800;
    box-shadow: 0 10px 26px -8px rgba(47,74,55,0.6);
    cursor: pointer; white-space: nowrap;
}
.map-fab i, .map-fab svg { width: 16px; height: 16px; }
.map-fab__count {
    font-size: 11px; font-weight: 800; color: var(--ink);
    background: var(--ochre-light);
    border-radius: 20px; padding: 2px 8px;
}
.map-scrim {
    display: none;
    position: absolute; inset: 0; z-index: 25;
    background: rgba(46,36,25,0.28);
    animation: rmFade .25s ease;
}

/* Стару вузьку праву панель деталей (.right-panel) видалено (RECRE-115):
   деталі парку на всіх в'юпортах показує повноекранний .park-overlay */

.layer-rows { display: flex; flex-direction: column; gap: 3px; margin-bottom: 20px; }
.layer-row {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 11px; border-radius: 11px; border: none;
    background: none; cursor: pointer; text-align: left;
}
.layer-row:hover { background: #f3ead6; }
.layer-row .swatch { width: 18px; height: 7px; border-radius: 4px; flex: none; }
.layer-row .l-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.switch {
    width: 34px; height: 20px; border-radius: 20px; flex: none;
    display: flex; align-items: center; padding: 2px;
    background: #d8c8a8; transition: background .15s ease;
}
.switch.on { background: var(--sage); }
.switch .knob {
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transform: translateX(0); transition: transform .15s ease;
}
.switch.on .knob { transform: translateX(14px); }

/* ============================================================
   Шар довкілля (park-environment-metrics): група перемикачів
   у лівій панелі + плаваючий віджет/пілюля верх-право карти.
   Дані — GET /api/cities/{slug}/environment/ (кешований бекенд).
   ============================================================ */

/* --- Група "Довкілля" в лівій панелі (між легендою і плитками) --- */
.env-group { border-top: 1px dashed var(--dash); padding-top: 14px; margin-bottom: 16px; }

.env-toggle {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    font-size: 13px; font-weight: 700; color: var(--ink-2);
    background: transparent; border: none;
    border-radius: 11px; padding: 7px 8px;
    cursor: pointer; text-align: left;
    transition: background .18s;
}
.env-toggle:hover { background: var(--bg-2); }
.env-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.env-toggle i, .env-toggle svg { width: 15px; height: 15px; color: var(--muted-2); flex: none; }
.env-toggle.is-on i, .env-toggle.is-on svg { color: var(--green); }

/* Стан F: провайдер не віддає метрику → toggle заблоковано */
.env-toggle.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.env-toggle__na {
    margin-left: 6px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--muted-3);
    background: var(--bg-2);
    border-radius: 9px; padding: 2px 7px;
}

/* Декоративний свіч (стан несе aria-pressed кнопки) */
.env-switch {
    margin-left: auto; flex: none;
    width: 34px; height: 20px;
    border-radius: 30px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    position: relative;
    transition: background .18s, border-color .18s;
}
.env-switch::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface-2);
    box-shadow: 0 1px 3px rgba(46,36,25,0.28);
    transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.env-toggle.is-on .env-switch { background: var(--green); border-color: var(--green); }
.env-toggle.is-on .env-switch::after { transform: translateX(14px); }

/* Легенда шкали AQI (видима лише при увімкненому AQI-toggle) */
.env-legend { margin-top: 10px; }
.env-legend__row {
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 600; color: var(--muted);
    padding: 3px 8px;
}
.env-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.env-legend__dot--1 { background: var(--env-aqi-1); }
.env-legend__dot--2 { background: var(--env-aqi-2); }
.env-legend__dot--3 { background: var(--env-aqi-3); }
.env-legend__dot--4 { background: var(--env-aqi-4); }
.env-legend__dot--5 { background: var(--env-aqi-5); }
.env-legend__idx { margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--muted-3); }

.env-source {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 600; color: var(--muted-3);
    margin: 10px 0 0; padding: 0 8px;
}
.env-source i, .env-source svg { width: 11px; height: 11px; flex: none; color: var(--muted-3); }

/* --- Віджет довкілля (верх-право; дзеркально лівій панелі) --- */
.env-widget {
    position: absolute; top: 16px; right: 16px; z-index: 20;
    width: 264px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 18px;
    padding: 15px 17px 14px;
    box-shadow: 0 24px 50px -28px rgba(47,74,55,0.55);
    /* width — RECRE-414: плавний перехід 296 → 264px, коли зникає
       блок пояснення першого показу (.env-widget--intro) */
    transition: transform .45s cubic-bezier(.4,0,.2,1),
                opacity   .45s cubic-bezier(.4,0,.2,1),
                width     .22s cubic-bezier(.4,0,.2,1);
}
/* Режим деталей парку: віджет поступається правій панелі
   (slide вправо + fade — дзеркально .left-panel.is-hidden) */
.env-widget.is-hidden { transform: translateX(320px); opacity: 0; pointer-events: none; }

/* RECRE-298: мобільний екземпляр віджета на /map/ живе всередині
   bottom-sheet (.env-sheet__body.env-widget--sheet, блок біля
   .poi-sheet вище). Колишній інлайн-варіант .env-widget--map-inline
   і його CSS-peek (карта −64px) видалені. Власний клас --sheet,
   НЕ --inline: .env-widget--inline зайнятий карткою «Довкілля зараз»
   на головній (news_home.html, стилі в блоці .home-env-row нижче). */

.env-widget__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.env-widget__eyebrow {
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--terracotta);
    margin: 0;
}
.env-widget__collapse {
    margin-left: auto; flex: none;
    position: relative;   /* якір для розширеної хіт-зони ::after */
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-2); border: none; cursor: pointer;
    transition: transform .18s, background .18s;
}
/* Візуальний розмір лишається 24px, але клікабельна зона — фактично
   40x40: 24px-кружечок легко промазати повз, надто маленька мішень */
.env-widget__collapse::after { content: ""; position: absolute; inset: -8px; }
.env-widget__collapse:hover { background: var(--border); transform: scale(1.08); }
.env-widget__collapse:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.env-widget__collapse i, .env-widget__collapse svg { width: 13px; height: 13px; color: var(--muted); }

/* × — повне вимкнення віджета (TOR-cycling-color-and-env-widget-close
   §2.3): клон візуальної мови шеврона; теракотовий hover маркує
   «вимкнути» проти нейтрального «згорнути». margin-left: 16px додатково
   до gap: 8px контейнера — 40×40 хіт-зони (::after) сусідніх кнопок
   гарантовано не перекриваються */
.env-widget__close {
    margin-left: 16px; flex: none;
    position: relative;   /* якір для розширеної хіт-зони ::after */
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-2); border: none; cursor: pointer;
    transition: transform .18s, background .18s;
}
/* Хіт-зона 40x40 — патерн шеврона вище */
.env-widget__close::after { content: ""; position: absolute; inset: -8px; }
.env-widget__close:hover { background: rgba(193,109,69,0.14); transform: scale(1.08); }
.env-widget__close:hover i, .env-widget__close:hover svg { color: var(--terracotta); }
.env-widget__close:active { transform: scale(0.94); }
.env-widget__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.env-widget__close i, .env-widget__close svg {
    width: 13px; height: 13px; color: var(--muted);
    transition: color .18s;
}

/* Блок погоди */
.env-weather { display: flex; align-items: center; gap: 12px; }
.env-weather__icon {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    background: var(--chip-amenity-bg);
    display: flex; align-items: center; justify-content: center;
}
.env-weather__icon i, .env-weather__icon svg { width: 21px; height: 21px; color: var(--chip-amenity-fg); }
.env-weather__temp {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 38px; font-weight: 700; line-height: 1;
    color: var(--green);
    margin: 0;
}
.env-weather__cond { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--muted); margin: 2px 0 0; }
.env-weather__facts { display: flex; gap: 14px; margin-top: 9px; }
.env-fact {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 700; color: var(--muted-2);
}
.env-fact i, .env-fact svg { width: 12px; height: 12px; color: var(--muted-3); flex: none; }

/* Блок якості повітря */
.env-air { border-top: 1px dashed var(--dash); margin-top: 12px; padding-top: 11px; }
/* Toggle "Погода" off → блок AQI перший після шапки: без роздільника */
.env-air--first { border-top: none; margin-top: 0; padding-top: 0; }
.env-air__label {
    font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted-3);
    margin: 0 0 7px;
}
.env-air__row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.env-air__chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 800;
    border-radius: 30px; padding: 4px 11px;
}
.env-air__chip .env-legend__dot { width: 8px; height: 8px; }
.env-air__chip--1 { color: var(--env-aqi-1); background: rgba(78,107,65,0.12); }
/* Рівні 2 і 3: текст затемнено відносно кольору рівня заради
   контрасту на світлому тоні (дизайн-ТЗ §5.3) */
.env-air__chip--2 { color: #708557; background: rgba(157,179,126,0.22); }
.env-air__chip--3 { color: #A87526; background: rgba(215,154,63,0.16); }
.env-air__chip--4 { color: var(--env-aqi-4); background: rgba(193,109,69,0.14); }
.env-air__chip--5 { color: var(--env-aqi-5); background: rgba(176,85,47,0.14); }
.env-air__idx { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--muted-3); }

/* Шкала 1..5: сегменти + каретка (left = (AQI − 0.5) × 20%, інлайн) */
.env-scale { position: relative; padding-top: 6px; }
.env-scale__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.env-scale__seg { height: 6px; border-radius: 3px; opacity: .38; }
.env-scale__seg--1 { background: var(--env-aqi-1); }
.env-scale__seg--2 { background: var(--env-aqi-2); }
.env-scale__seg--3 { background: var(--env-aqi-3); }
.env-scale__seg--4 { background: var(--env-aqi-4); }
.env-scale__seg--5 { background: var(--env-aqi-5); }
.env-scale__seg.is-current { opacity: 1; }
.env-scale__pin {
    position: absolute; top: -1px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--ink-2);
}
.env-scale__ends {
    display: flex; justify-content: space-between;
    margin-top: 5px;
    font-size: 9.5px; font-weight: 800;
    letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--muted-3);
}

/* Футер: час оновлення + джерело */
.env-widget__foot {
    display: flex; align-items: center; gap: 6px;
    /* wrap: у stale-стані довгий підпис часу + лінк-атрибуція не вміщаються
       в один рядок 264px-віджета — атрибуція переноситься окремим рядком
       праворуч замість потрійного переносу тексту зліва */
    flex-wrap: wrap; row-gap: 3px;
    border-top: 1px dashed var(--dash);
    margin-top: 12px; padding-top: 9px;
    font-size: 10.5px; font-weight: 600; color: var(--muted-3);
}
.env-widget__foot i, .env-widget__foot svg { width: 11px; height: 11px; flex: none; color: var(--muted-3); }
.env-widget__src { margin-left: auto; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
/* Атрибуція постачальника (OpenWeather) — тепер посилання: та сама
   приглушена типографіка, що span-джерело, + underline-патерн
   посилань-джерел (.pdc__source a / .rm-footer__src a); color: inherit —
   у stale-стані успадковує охру разом з рештою футера */
a.env-widget__src {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(126,148,102,0.55);
    white-space: nowrap;
}
a.env-widget__src:hover { color: var(--green); }
a.env-widget__src:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
    border-radius: 3px;
}
.env-source a {
    color: inherit; font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(126,148,102,0.55);
}
.env-source a:hover { color: var(--green); }
.env-source a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
    border-radius: 3px;
}

/* Стан D: кеш застарів — дані ЛИШАЮТЬСЯ, лише футер охрою
   (недоступність зовнішнього API ≠ помилка, критерій №4) */
.env-widget.is-stale .env-widget__foot,
.env-widget.is-stale .env-widget__foot i,
.env-widget.is-stale .env-widget__foot svg { color: var(--ochre); }

/* ============================================================
   RECRE-414: помітна активація панелі «Довкілля»
   ============================================================ */

/* --- Блок пояснення першого показу ---
   Ширший віджет ЛИШЕ поки видно пояснення; після «Зрозуміло» (та
   будь-якої іншої змістовної взаємодії) повертається чинні 264px.
   У мобільному шиті ширину не чіпає: .env-sheet .env-widget--sheet
   (два класи) специфічніший за .env-widget--intro (один). */
.env-widget--intro { width: 296px; }
.env-widget__intro {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 0 12px; padding: 10px 11px;
    background: var(--chip-amenity-bg);
    border: 1px solid var(--border-3);
    border-radius: 13px;
}
.env-widget__intro-icon {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.env-widget__intro-icon i, .env-widget__intro-icon svg {
    width: 12px; height: 12px; color: var(--chip-amenity-fg);
}
/* колір тексту — --green (#2F4A37) на #E6ECD9 ≈ 8.9:1; свідомо НЕ
   --chip-amenity-fg: він дає 4.7:1, межа AA для 11.5px */
.env-widget__intro-text {
    font-size: 11.5px; line-height: 1.5; font-weight: 600;
    color: var(--green); margin: 0;
}
.env-widget__intro-text b { font-weight: 800; }
.env-widget__intro-dismiss {
    position: relative; display: inline-block;
    margin-top: 7px; padding: 0;
    font-family: inherit;
    font-size: 11px; font-weight: 800;
    letter-spacing: .7px; text-transform: uppercase;
    color: var(--green); background: none; border: none; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(126,148,102,.55);
}
/* хіт-зона ~40×30 при візуальних 11px — патерн .env-widget__collapse */
.env-widget__intro-dismiss::after { content: ""; position: absolute; inset: -11px -14px; }
.env-widget__intro-dismiss:hover { color: var(--green-hover); }
.env-widget__intro-dismiss:focus-visible {
    outline: none; border-radius: 4px;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}

/* --- Одноразова підсвітка появи ---
   Клас .is-revealing ставить/знімає envPlayReveal() (map.js) і ЛИШЕ у
   відповідь на дію користувача — на завантаження сторінки анімації немає. */
@keyframes envReveal {
    from { opacity: 0; transform: translate(12px, -10px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes envHalo {
    0%   { box-shadow: 0 24px 50px -28px rgba(47,74,55,.55), 0 0 0 0    rgba(126,148,102,.50); }
    70%  { box-shadow: 0 24px 50px -28px rgba(47,74,55,.55), 0 0 0 15px rgba(126,148,102,0); }
    100% { box-shadow: 0 24px 50px -28px rgba(47,74,55,.55), 0 0 0 0    rgba(126,148,102,0); }
}
.env-widget.is-revealing {
    transform-origin: top right;
    animation: envReveal .26s cubic-bezier(.4,0,.2,1) both,
               envHalo  1.1s ease-out .26s 2;
}
@keyframes envTriggerRing {
    0%   { box-shadow: 0 16px 34px -24px rgba(47,74,55,.55), 0 0 0 0    rgba(126,148,102,.55); }
    70%  { box-shadow: 0 16px 34px -24px rgba(47,74,55,.55), 0 0 0 13px rgba(126,148,102,0); }
    100% { box-shadow: 0 16px 34px -24px rgba(47,74,55,.55), 0 0 0 0    rgba(126,148,102,0); }
}
.env-trigger.is-revealing { animation: envTriggerRing 1.1s ease-out 2; }

/* --- Підпис у згорнутих станах (R6) --- */
.env-pill__label, .env-trigger__label {
    font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
    color: var(--muted-2);
}
.env-pill__label--sep::before, .env-trigger__label--sep::before {
    content: ""; display: inline-block;
    width: 1px; height: 11px; margin-right: 8px;
    background: var(--dash); vertical-align: -1px;
}

/* --- Підтвердження в групі фільтрів (лише ≤680px; розкривається
   в медіа-блоці наприкінці файлу) --- */
.env-group__hint { display: none; }
@keyframes envHintIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* --- Пілюля (згорнутий стан) — патерн підказки-пілюлі --- */
.env-pill {
    position: absolute; top: 16px; right: 16px; z-index: 20;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800; color: var(--ink-2);
    background: rgba(251,245,233,0.94);
    border: 1px solid var(--border);
    border-radius: 30px; padding: 9px 15px;
    box-shadow: 0 16px 34px -24px rgba(47,74,55,0.55);
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, opacity .3s;
}
.env-pill:hover { transform: translateY(-1px); box-shadow: 0 20px 38px -22px rgba(47,74,55,0.6); }
.env-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.env-pill.is-hidden { opacity: 0; pointer-events: none; }
.env-pill i, .env-pill svg { width: 15px; height: 15px; color: var(--chip-amenity-fg); flex: none; }
.env-pill .env-legend__dot { width: 9px; height: 9px; }
.env-pill .env-pill__chevron { width: 13px; height: 13px; color: var(--muted-2); }

/* --- RECRE-298: мобільний тригер панелі довкілля ---
   Видимий ЛИШЕ ≤680px (розкривається в медіа-блоці наприкінці файлу) —
   на десктопі там floating-віджет / .env-pill. Верх-право: єдиний
   вільний кут карти (низ зайнятий .map-fab «Фільтри», Leaflet zoom
   bottomright і attribution bottomleft). position: fixed — той самий
   захист від page-scroll, що в .map-fab/.left-panel на ≤680px. */
.env-trigger { display: none; }

/* --- Стан C: skeleton (лише перший запит / зміна міста) --- */
@keyframes envPulse { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
.env-skel {
    border-radius: 9px;
    background: var(--bg-2);
    animation: envPulse 1.2s ease-in-out infinite;
}
.env-skel--icon { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.env-skel--temp { width: 74px; height: 30px; }
.env-skel--line { width: 100%; height: 11px; margin-top: 7px; }
.env-skel--chip { width: 118px; height: 24px; border-radius: 30px; }

/* --- Стан E: кешу немає взагалі — тихий порожній стан --- */
.env-widget--empty { text-align: center; padding-bottom: 17px; }
.env-widget--empty .env-empty__icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-2);
    display: flex; align-items: center; justify-content: center;
    margin: 4px auto 9px;
}
.env-widget--empty .env-empty__icon i,
.env-widget--empty .env-empty__icon svg { width: 19px; height: 19px; color: var(--muted-2); }
.env-empty__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px; font-weight: 700; color: var(--green);
    margin: 0 0 3px;
}
.env-empty__text { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 0; }

/* ===== Loading-стани: skeleton-сітка каталогу, hero-цифри, /map/
   (catalog-loading-states-and-perf, дизайн-ТЗ §4) ===== */

/* Контейнер skeleton-сітки: додається до наявних .grid-arch/
   .grid-editorial. Fade із затримкою .15s (fill both) = anti-мигання:
   швидкі відповіді (<150мс) skeleton не показують, висота тримається */
.grid--skel { pointer-events: none; animation: rmFade .2s ease .15s both; }

/* Каркас skeleton-картки: реальна оболонка (.card-arch/.card-editorial)
   + цей модифікатор — геометрія/тіні/радіуси 1-в-1 */
.rm-cardskel { cursor: default; }
.rm-cardskel:hover { transform: none !important; }

/* Кістки: текст — пульс як .rm-fchip--skeleton; фото — shimmer як
   .pdm-map--skeleton (той самий градієнт) */
.rm-bone {
    background: var(--bg-2);
    border-radius: 8px;
    animation: rmChipPulse 1.2s ease-in-out infinite;
}
.rm-bone--media {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, #EFE8D4 40%, #F7F1E1 50%, #EFE8D4 60%);
    background-size: 200% 100%;
    animation: rmShimmer 1.4s linear infinite;
}
.card-photo .rm-bone--media { border-radius: 0 0 70px 70px; } /* арка як у img */

.rm-bone--eyebrow { width: 42%; height: 10px; }
.rm-bone--title   { width: 78%; height: 21px; margin: 8px 0 10px; }
.rm-bone--meta    { width: 58%; height: 12px; }
.rm-bone--text    { width: 92%; height: 12px; margin-top: 8px; }
.rm-bone--chip    { height: 24px; border-radius: 20px; }

/* Пропорції для "Журнал" (широкий рядок) */
.card-editorial .rm-bone--eyebrow { width: 30%; }
.card-editorial .rm-bone--title   { width: 46%; height: 24px; }

/* Фазовий зсув пульсу сусідніх карток (від'ємні затримки = старт одразу) */
.grid--skel > :nth-child(3n+2) .rm-bone { animation-delay: -.4s; }
.grid--skel > :nth-child(3n)   .rm-bone { animation-delay: -.8s; }

/* Hero-цифри: висота 38px = .num (line-height 1) — без стрибка плитки */
.hero-stats .rm-numskel {
    width: 64px; height: 38px; border-radius: 10px;
    background: rgba(251,245,233,0.30);
    animation: rmChipPulse 1.2s ease-in-out infinite;
}
.hero-stats .rm-numskel--wide { width: 92px; }

/* /map/: тонка load-смужка панелі + пульс лічильника зон */
.rm-loadbar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    z-index: 30; overflow: hidden; pointer-events: none;
    animation: rmFade .2s ease .15s both;
}
.rm-loadbar::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent, var(--sage-light) 35%, var(--ochre-light) 50%,
        var(--sage-light) 65%, transparent);
    background-size: 200% 100%;
    animation: rmShimmer 1.4s linear infinite;
}
.panel-count--loading { animation: rmChipPulse 1.2s ease-in-out infinite; }

/* Доступність: reduced motion → статичні кістки */
@media (prefers-reduced-motion: reduce) {
    .rm-bone, .rm-bone--media, .rm-numskel, .panel-count--loading,
    .rm-loadbar, .rm-loadbar::before, .grid--skel { animation: none; }
    .rm-bone, .rm-numskel { opacity: .7; }
    .rm-loadbar::before { background: var(--sage-light); opacity: .55; }
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .catalog-grid { grid-template-columns: 1fr; }
    /* RECRE-137: у static-режимі обмеження висоти/внутрішній скрол
       не потрібні — блок звичайно тече в потоці сторінки */
    .filter-card { position: static; max-height: none; overflow-y: visible; }
    .hero h1 { font-size: 40px; }
    .rm-kicker { display: none; }
    .left-panel { width: min(300px, 84vw); }
}

/* ============================================================
   Головна "Новини та афіша подій" (homepage-news-events).
   Виключно наявні дизайн-токени/патерни boho-системи: hero, картки
   на var(--surface) з border-2/радіусами/тінями каталогу, чипи
   rm-fchip, порожні стани empty-block, env-* віджет — нових HEX
   не введено (лише прозорі похідні наявних кольорів).
   ============================================================ */

/* Hero CTA (ТЗ 6.2): дві кнопки на фото поверх градієнта */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 30px;
    font-size: 14px; font-weight: 800; text-decoration: none;
    color: var(--surface);
    border: 1.5px solid rgba(251,245,233,0.55);
    background: rgba(36,52,38,0.25);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.hero-btn:hover { transform: translateY(-1px); background: rgba(36,52,38,0.45); }
.hero-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(231,182,90,0.5); }
.hero-btn i, .hero-btn svg { width: 16px; height: 16px; }
.hero-btn--primary {
    background: var(--ochre); border-color: var(--ochre);
    color: var(--ink);
}
.hero-btn--primary:hover { background: var(--ochre-light); }

/* Контейнер і секції головної */
.home-main { max-width: 1280px; margin: 0 auto 70px; padding: 0 30px; }
.home-section { margin-top: 46px; }
.home-sec-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.home-sec-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 32px; font-weight: 700; color: var(--green);
    line-height: 1.05; margin: 0;
}
.home-sec-sub { font-size: 12.5px; color: var(--muted-2); margin: 5px 0 0; font-weight: 600; }

/* Ряди чипів фільтрів афіші (періоди + категорії) */
.home-chips { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

/* "Показати ще" під сітками афіші та новин. Лінк-кнопка "Переглянути всі
   парки" (RECRE-113) звідси переїхала: тепер це CTA-плитка всередині сітки
   .grid-arch (RECRE-198, див. .grid-arch__cta нижче) */
.home-more { display: flex; justify-content: center; margin-top: 20px; }

/* RECRE-198: CTA-плитка "Переглянути всі парки" — останній елемент сітки
   .grid-arch рекомендованих: auto-placement ставить її в порожню комірку
   останнього ряду (10 карток при 4 колонках → ряд 4+4+2, при 3 → 3+3+3+1;
   max-width .home-main = 1280px, тож більше 4 колонок не буває). Свідомо
   НЕ .card-arch — це не картка парку, а CTA-плакетка іншого вигляду */
.grid-arch__cta {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 11px; padding: 24px 20px; text-align: center; text-decoration: none;
    background: var(--bg-2); border: 1.5px dashed var(--sage);
    border-radius: 22px 22px 18px 18px; min-height: 236px;
    transition: transform .18s ease, box-shadow .18s ease,
                background .18s ease, border-color .18s ease;
    animation: rmFade .5s ease both;
}
.grid-arch__cta:hover {
    background: var(--surface); border-color: var(--green);
    transform: translateY(-5px); box-shadow: 0 26px 46px -26px rgba(47,74,55,0.45);
}
.grid-arch__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.grid-arch__cta-orb {
    width: 52px; height: 52px; border-radius: 50%; flex: none;
    background: var(--green); color: var(--bg);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .18s ease;
}
.grid-arch__cta-orb svg { width: 22px; height: 22px; }
.grid-arch__cta:hover .grid-arch__cta-orb { transform: translateX(4px); }
.grid-arch__cta-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 23px; font-weight: 700; color: var(--green); line-height: 1.1;
}
.grid-arch__cta-sub { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
/* ≤859px сітка стискається до 2/1 колонок: 10 карток закривають останній
   ряд без залишку (10 % 2 = 0), порожньої комірки праворуч НЕМАЄ — тому
   плитка розтягується на весь ряд і стає горизонтальною CTA-смугою
   (еквівалент старої поведінки "кнопка під сіткою", але в потоці сітки) */
@media (max-width: 859px) {
    .grid-arch__cta {
        grid-column: 1 / -1; flex-direction: row; justify-content: center;
        min-height: 0; padding: 16px 22px; gap: 14px; text-align: left;
    }
    .grid-arch__cta-orb { width: 40px; height: 40px; }
    .grid-arch__cta-orb svg { width: 18px; height: 18px; }
    .grid-arch__cta-label { font-size: 21px; }
    .grid-arch__cta-sub { display: none; }
}

/* Компактний варіант btn-reset для дій у картках/шапках секцій */
.btn-reset--sm { padding: 7px 14px; font-size: 12.5px; text-decoration: none; }
.btn-reset--cta {
    background: var(--green); color: var(--bg); border-color: var(--green);
}
.btn-reset--cta:hover { background: var(--green-hover); color: var(--bg); }

/* ===== Картка події (блок 3) ===== */
.grid-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.event-card {
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 18px 40px -30px rgba(47,74,55,0.4);
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.event-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -26px rgba(47,74,55,0.55); }
.event-card__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.event-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.event-card__cat { display: inline-flex; align-items: center; gap: 6px; }
.event-card__cat i, .event-card__cat svg { width: 13px; height: 13px; }
.event-card .card-name { margin: 0; }

/* Бейдж дати: день + місяць (ТЗ 6.3, візуально виразний) */
.event-date-badge {
    position: absolute; top: 12px; left: 12px;
    display: flex; flex-direction: column; align-items: center;
    min-width: 46px; padding: 6px 8px 7px;
    background: rgba(251,245,233,0.95);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 22px -14px rgba(47,74,55,0.6);
}
.event-date-badge__day {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px; font-weight: 700; line-height: 1; color: var(--green);
}
.event-date-badge__month {
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--terracotta); margin-top: 2px;
}

/* Чип вартості на фото: "Безкоштовно" (amenity-зелений) або price_note.
   RECRE-343: довгий price_note без max-width розтягував shrink-to-fit
   ширину абсолютного блока аж до країв .event-card__photo і накривав
   сусідній .event-date-badge у лівому куті. 100px = 46px мінімальна
   ширина бейджа дати + 12px його left + 12px власний right — чіп
   гарантовано лишає бейджу місце незалежно від довжини тексту.
   display:block потрібен явно: базовий .tag-chip — inline-flex,
   text-overflow на ньому мовчки не спрацював би. */
.event-price-chip {
    position: absolute; top: 12px; right: 12px;
    background: rgba(251,245,233,0.95); color: var(--muted);
    border: 1px solid var(--border);
    display: block; max-width: calc(100% - 100px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tag-chip--free { background: var(--chip-amenity-bg); color: var(--chip-amenity-fg); border-color: var(--chip-amenity-bg); }

/* Рядки мета-інформації картки події */
.event-meta {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--muted);
}
.event-meta i, .event-meta svg { width: 14px; height: 14px; color: var(--muted-3); flex: none; }
/* RECRE-237: лінк парку-локації має читатись клікабельним ДО ховера —
   не лише кольором: підкреслення + хвостова стрілка + hover-рух.
   Сусідні мета-рядки (час, організатор) — та сама формула, але
   некликабельні, тому іконка map-pin сама клікабельності не сигналить */
.event-meta--link {
    color: var(--terracotta);
    text-decoration: underline;
    text-decoration-color: rgba(193,109,69,0.45);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    border-radius: 6px;
    /* ширша hit-area без зсуву верстки */
    padding-block: 4px; margin-block: -4px;
    transition: color .15s;
}
.event-meta--link i, .event-meta--link svg { color: var(--terracotta); }
.event-meta--link .event-meta__go { width: 12px; height: 12px; color: var(--muted-3); transition: transform .15s, color .15s; }
.event-meta--link:hover { color: var(--green); text-decoration-color: currentColor; }
.event-meta--link:hover i, .event-meta--link:hover svg { color: var(--green); }
.event-meta--link:hover .event-meta__go { transform: translateX(2px); }
.event-meta--link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.5); }

/* Розкритий опис ("Детальніше") */
.event-desc { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 4px 0 0; }
.event-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }

/* ===== Картка новини (блок 4) ===== */
.grid-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.news-card {
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 18px 40px -30px rgba(47,74,55,0.4);
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.news-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -26px rgba(47,74,55,0.55); }
.news-card__photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.news-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-card__body { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.news-card .card-name { margin: 0; font-size: 21px; }
.news-card__excerpt { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }
/* RECRE-191: margin-top:auto переїхав з тегу парку на ряд дій нижче —
   кнопка "Детальніше" завжди притиснута до низу картки (як .event-actions) */
.news-card__park { align-self: flex-start; text-decoration: none; }
.news-card__park:hover { color: var(--green); }
.news-card__actions { display: flex; gap: 10px; margin-top: auto; padding-top: 10px; }

/* ===== Модалка повної новини (RECRE-191): оверлей — той самий рецепт,
   що .obm-overlay (scrim + blur, keyframes obmFade/obmRise перевикористано);
   z-index 80 — понад .modal-overlay (60) і .survey-popup (70) ===== */
.nwm-overlay {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(36, 52, 38, 0.55);
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: obmFade .25s ease;
}
.nwm {
    position: relative;
    width: min(680px, 100%);
    max-height: min(86vh, 860px);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 22px;
    box-shadow: 0 40px 90px -30px rgba(36,52,38,0.7);
    overflow: hidden;
    display: flex;
    animation: obmRise .3s cubic-bezier(.2,.9,.3,1.1);
}
.nwm__scroll { overflow-y: auto; width: 100%; }
/* Кнопка × — рецепт .obm__close; напівпрозорий фон читається і на обкладинці */
.nwm__close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 30px; height: 30px; box-sizing: border-box; padding: 0;
    border-radius: 50%;
    background: rgba(251,245,233,0.92); border: 1px solid var(--border);
    color: var(--muted); cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s ease, transform .15s ease;
}
.nwm__close i, .nwm__close svg { width: 15px; height: 15px; pointer-events: none; }
.nwm__close:hover { background: var(--border); transform: scale(1.08); }
.nwm__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.nwm__cover { position: relative; aspect-ratio: 16 / 7; background: var(--bg-2); }
.nwm__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nwm__body { padding: 22px 28px 28px; }
.nwm__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 30px; font-weight: 700; line-height: 1.12;
    color: var(--green); margin: 6px 0 12px;
}
.nwm__park { display: inline-flex; margin: 0 0 14px; text-decoration: none; }
.nwm__park:hover { color: var(--green); }
/* Абзаци повного тексту: pre-line зберігає одинарні переноси
   всередині абзацу (body — plain text з адмінки) */
.nwm__text p {
    font-size: 15px; line-height: 1.7; color: var(--muted);
    margin: 0 0 12px; white-space: pre-line;
}
.nwm__text p:last-child { margin-bottom: 0; }
/* Стан помилки: перевикористовує .empty-block, але без штрих-рамки
   всередині модалки та з компактнішим падингом */
.nwm__state { border: none; border-radius: 0; padding: 44px 28px 40px; }
@media (max-width: 680px) {
    .nwm-overlay { padding: 14px; }
    .nwm__body { padding: 18px 18px 22px; }
    .nwm__title { font-size: 25px; }
}

/* ===== Довкілля зараз (блок 5): наявний env-widget, але в потоці
   сторінки замість absolute-позиції карти ===== */
.home-env-row { display: flex; }
.env-widget--inline { position: static; top: auto; right: auto; width: 300px; }

/* Responsive головної */
@media (max-width: 980px) {
    .home-sec-title { font-size: 27px; }
    .env-widget--inline { width: 100%; }
}

/* ============================================================
   Футер сайту (TOR-site-footer): атрибутика джерел, про сайт,
   гарячі посилання. Виключно наявні токени палітри — нових HEX
   не введено. Показується на /, /parks/, /park/{slug}/; на /map/ —
   лише десктоп, під першим екраном (див. .map-footer нижче;
   запит 2026-07-14, оновлення ТЗ 3.4).
   ============================================================ */
.rm-footer {
    margin-top: 70px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
}
.rm-footer__inner {
    max-width: 1280px; margin: 0 auto; padding: 42px 30px 34px;
    display: grid;
    grid-template-columns: 1.1fr 0.7fr 1.2fr;
    gap: 40px;
}
.rm-footer__brand { display: flex; align-items: center; gap: 11px; }
.rm-footer__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px; font-weight: 700; letter-spacing: 0.3px; color: var(--green);
}
.rm-footer__desc {
    font-size: 13.5px; line-height: 1.6; color: var(--muted);
    margin: 14px 0 0; max-width: 40ch;
}
.rm-footer__copy { font-size: 13px; font-weight: 700; color: var(--muted-2); margin: 14px 0 0; }

.rm-footer__title {
    font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--muted-3); margin-bottom: 14px;
}
.rm-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rm-footer__links a {
    font-size: 14px; font-weight: 700; color: var(--ink-2); text-decoration: none;
    transition: color .15s ease;
}
.rm-footer__links a:hover { color: var(--terracotta); }

.rm-footer__src { font-size: 12.5px; line-height: 1.6; color: var(--muted-2); margin: 0 0 9px; }
.rm-footer__src:last-child { margin-bottom: 0; }
.rm-footer__src a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.rm-footer__src a:hover { color: var(--terracotta); }

.rm-footer__bottom { border-top: 1px dashed var(--dash); }
.rm-footer__bottom p {
    max-width: 1280px; margin: 0 auto; padding: 14px 30px;
    font-size: 12px; color: var(--muted-3); text-align: center;
}

/* Мобільний стек колонок (ТЗ 3.2; брейкпоінти — наявна конвенція 980/600) */
@media (max-width: 980px) {
    .rm-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    .rm-footer__col--sources { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .rm-footer { margin-top: 50px; }
    .rm-footer__inner { grid-template-columns: 1fr; padding: 34px 22px 28px; gap: 28px; }
    .rm-footer__col--sources { grid-column: auto; }
    .rm-footer__bottom p { padding: 13px 22px; }
}

/* ============================================================
   Футер на /map/ (запит 2026-07-14, доповнення TOR-site-footer 3.4):
   ЛИШЕ десктоп (≥681px). Карта лишається на повний перший екран
   (.map-shell: 100dvh - header, без змін) — футер НЕ стискає карту,
   а лежить ПІД першим екраном: сторінка стає прокручуваною рівно
   на висоту футера, і він з'являється при прокрутці вниз.
   margin-top: 0 — без "порожньої" смуги між картою і футером
   (дефолтні 70px .rm-footer тут дали б голий фон при скролі).
   На ≤680px футера на /map/ немає: там app-shell — сторінка
   не прокручується взагалі (fix page-scroll вище).
   ============================================================ */
.map-footer .rm-footer { margin-top: 0; }
@media (max-width: 680px) {
    .map-footer { display: none; }
}

/* ============================================================
   TOR-mobile-responsive-redesign (2026-07-13): адаптація під
   телефони ≤680px. Єдиний новий брейкпоінт фічі — 680px
   (наявні 600/760/900/980 не зачіпаються). Підблоки:
   P0-2 header · P0-1 /map/ · P1-1 «Журнал» · P1-3 hero ·
   P1-2 Атлас (варіант B — акордеон «Шари», рішення користувача).
   Базові (не-media) стилі нових елементів /map/ — біля стилів
   /map/ (після .hint-pill).
   ============================================================ */

/* Кнопка-акордеон легенди Атласу: існує лише на телефоні */
.pdm-legend-toggle {
    display: none; align-items: center; gap: 8px;
    width: 100%; box-sizing: border-box; text-align: left;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted-3);
    background: var(--surface); border: none;
    border-bottom: 1px solid var(--border-2);
    padding: 11px 14px; cursor: pointer;
    transition: background .15s;
}
.pdm-legend-toggle:hover { background: var(--bg-2); }
.pdm-legend-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(126,148,102,0.35); }
.pdm-legend-toggle i, .pdm-legend-toggle svg { width: 14px; height: 14px; color: var(--muted-2); flex: none; }
.pdm-legend-toggle .pdm-legend-toggle__count { color: var(--terracotta); }
.pdm-legend-toggle__dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.pdm-legend-toggle__dots span { width: 7px; height: 7px; border-radius: 50%; }
.pdm-legend-toggle .chev { margin-left: auto; }
.pdm-legend-toggle[aria-expanded="true"] { border-bottom: none; }

/* RECRE-132: планшетна смуга 681–900px. Десктопний однорядковий хедер
   фактично потребує ~860px (правий край .rm-header-right стояв на
   859px незалежно від viewport — QA-звіт 1.0.2 §4.1), а мобільні
   правила вмикаються лише з 680px — у проміжку сторінка отримувала
   горизонтальний overflow до 159px на /, /parks/ і /map/. Рішення —
   той самий двохрядковий патерн, що вже затверджений для ≤680px
   (P0-2 нижче): ряд 1 [логотип · header-right], ряд 2 — таби на всю
   ширину. --header-h = 104px — fallback-константа для консюмерів без
   JS; реальну висоту, як і на мобільному, міряє ResizeObserver
   (--header-h-actual, alpine-data.js). */
@media (min-width: 681px) and (max-width: 900px) {
    :root { --header-h: 104px; }
    .rm-header {
        flex-wrap: wrap; align-content: flex-start;
        gap: 7px 14px;
        padding: 10px 20px;
        height: auto; min-height: var(--header-h);
    }
    .rm-nav { order: 3; width: 100%; margin-left: 0; gap: 6px; }
    .rm-tab { flex: 1 1 0; text-align: center; padding: 7px 10px; }
    .rm-header-right { gap: 12px; }
    /* довгий username не має знову розпирати ряд 1 (базове обмеження
       .rm-auth-name існує лише на ≤680px) */
    .rm-auth-name { max-width: 140px; }
    /* RECRE-467: на нижній межі цієї смуги (виміряно на 681px) ряд 1
       [логотип·kicker(прихований)·соцмережі·«?»·місто·акаунт] вже стоїть
       впритул до правого краю — базові 200px .rm-city-name (main.css
       вище) знову переносили б .rm-city на новий рядок при довгій назві
       області. 110px — емпірично підібраний запас, що вміщує кнопку на
       всіх ширинах 681–900px разом з рештою ряду 1. */
    .rm-city-name { max-width: 110px; }
}

@media (max-width: 680px) {
    /* P0-2 + RECRE-251 #4 (TOR-mobile-header-composition): header у два
       ряди [логотип · місто · «⋮»] / [3 таби на всю ширину]; перенос через
       order/flex-wrap. --header-h тут = 112px (9 + 44 + 6 + 44 + 9):
       .map-shell і все, що рахує від змінної, перераховується само. */
    :root { --header-h: 112px; }
    .rm-header {
        flex-wrap: wrap; align-content: flex-start;
        gap: 6px 10px;
        padding: 9px 14px;
        /* Фікс накладання fixed-оверлеїв на шапку: замість жорстких 92px
           шапка росте під вміст (довга назва міста → ще один рядок
           flex-wrap; з фіксованою height вміст переповнював бокс, а
           env-віджет із top: calc(92px + 12px) опинявся всередині шапки).
           Реальну висоту міряє ResizeObserver (alpine-data.js) →
           --header-h-actual, її споживають .map-shell / .map-scrim /
           .env-widget / .env-pill. */
        height: auto; min-height: var(--header-h);
    }
    .rm-logo { gap: 9px; min-height: 44px; }     /* мішень усього лінка ≥44px */
    .rm-logo-orb { width: 26px; height: 26px; box-shadow: 0 0 0 4px rgba(215,154,63,0.18); }
    .rm-logo-orb span { width: 11px; height: 11px; }
    .rm-logo-name { font-size: 21px; }
    /* RECRE-251 #4: було gap: 0 (усе впритул, мішені під WCAG 2.5.5) —
       тепер у ряді 1 лише три мішені ≥44px з гепами ≥8px */
    /* RECRE-460 (порожні/нерівномірні відступи хедера): «виміряний
       бюджет» RECRE-467 (90px нижче) на 375px схибив рівно на 1px —
       ряд 1 потребував 348px (лого 123 + gap 10 + city 163 + gap 8 +
       «⋮» 44) проти доступних 347px (375 − padding 14×2), тож
       flex-wrap переносив УВЕСЬ .rm-header-right на другий рядок:
       логотип сам у ряді 1, [місто · «⋮»] окремим рядом, хедер 162px
       замість 112px і великі порожні зони (скріншот ПО). Замість
       підгонки константи перенос виключено ЗА ПОБУДОВОЮ: flex-basis 0
       виймає .rm-header-right з wrap-рішення (гіпотетичний розмір 0
       ряд не переповнює), grow 1 віддає йому залишок ряду 1,
       justify-content: flex-end тримає [місто · «⋮»] біля правого
       краю (те, що досі робив margin-left: auto), а min-width: 0 +
       max-width: 100% дозволяють кнопці міста стиснутись на
       дефіцитні пікселі (назва й так під ellipsis). */
    .rm-header-right { gap: 8px; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
    .rm-city { min-width: 0; }
    .rm-city-btn { min-height: 44px; padding: 8px 14px; font-size: 13px; max-width: 100%; }
    /* іконка/шеврон не стискаються — дефіцит забирає лише назва */
    .rm-city-btn svg, .rm-city-btn i { flex: none; }
    /* RECRE-467: ряд 1 тут — рівно три мішені [логотип·місто·«⋮»]
       (RECRE-251 #4). 90px — виміряний на 375px бюджет, що лишає
       .rm-city на одному рядку з логотипом і кнопкою «⋮» навіть для
       найдовших назв областей («Івано-Франківська область» тощо) —
       без цього .rm-city цілком переносився на новий рядок
       .rm-header-main (flex-wrap), додаючи хедеру зайвий рядок висоти.
       RECRE-460: 90px тепер ВЕРХНЯ межа, а не точний бюджет — реальний
       дефіцит ряду добирає flex-стискання кнопки (див. вище). */
    .rm-city-name { max-width: 90px; }
    .rm-nav { order: 3; width: 100%; margin-left: 0; gap: 4px; }
    .rm-tab {
        flex: 1 1 0; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 8px 6px; font-size: 13px;
    }

    /* --- RECRE-251 #4: кнопка «⋮» — третя й остання мішень ряду 1 --- */
    .rm-more { position: relative; display: flex; }
    .rm-more-btn {
        display: grid; place-items: center;
        width: 44px; height: 44px; box-sizing: border-box; padding: 0;
        border-radius: 50%;
        background: var(--surface); border: 1px solid var(--border);
        color: var(--green); cursor: pointer; flex: none;
        transition: background .15s ease;
    }
    .rm-more-btn svg, .rm-more-btn i { width: 20px; height: 20px; }
    .rm-more-btn[aria-expanded="true"] { background: var(--bg-2); }
    .rm-more-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }

    /* --- Випадне меню «⋮»: контейнер = патерн .rm-city-menu --- */
    .rm-header-tools { display: none; }
    .rm-more.is-open .rm-header-tools {
        display: flex; flex-direction: column; gap: 2px;
        position: absolute; top: calc(100% + 8px); right: 0; z-index: 45;
        min-width: 232px; padding: 8px; box-sizing: border-box;
        background: var(--surface); border: 1px solid var(--border-2);
        border-radius: 16px;
        box-shadow: 0 22px 48px -22px rgba(47,74,55,0.5);
    }
    .rm-header-tools .rm-auth { display: contents; }      /* лінки = рядки меню */
    .rm-header-tools .rm-auth-link   { order: 1; }
    .rm-header-tools .rm-help-btn    { order: 2; }
    .rm-header-tools .rm-social-links{ order: 3; }

    /* Рядок меню (пропорції .rm-city-item, мішень 48px) */
    .rm-header-tools .rm-auth-link,
    .rm-header-tools .rm-help-btn,
    .rm-header-tools .rm-social-link {
        width: 100%; height: auto; min-height: 48px; box-sizing: border-box;
        display: flex; align-items: center; justify-content: flex-start; gap: 10px;
        padding: 0 12px; border-radius: 11px; border: none;
        background: transparent; color: var(--ink-2);
        font-size: 14px; font-weight: 700; text-align: left;
        /* .rm-social-link — <a> без text-decoration у базових стилях
           (був icon-only): без цього підпис «Instagram» підкреслюється */
        text-decoration: none;
    }
    .rm-header-tools .rm-auth-link:hover,
    .rm-header-tools .rm-help-btn:hover,
    .rm-header-tools .rm-social-link:hover { background: var(--bg-2); transform: none; box-shadow: none; }
    .rm-header-tools .rm-auth-link svg,  .rm-header-tools .rm-auth-link i,
    .rm-header-tools .rm-help-btn svg,   .rm-header-tools .rm-help-btn i,
    .rm-header-tools .rm-social-link svg,.rm-header-tools .rm-social-link i {
        width: 18px; height: 18px; color: var(--green); opacity: .9; flex: none;
    }
    .rm-header-tools .rm-social-links { width: 100%; gap: 2px; flex-direction: column; }
    .rm-header-tools .rm-auth-name { max-width: none; }
    .rm-header-tools .rm-help-btn__label,
    .rm-header-tools .rm-social-link__label { display: inline; }
    .rm-header-tools .rm-auth-link--primary {
        background: var(--green); color: var(--bg); justify-content: center;
    }
    .rm-header-tools .rm-auth-link--primary:hover { background: var(--green-hover); }
    /* Пунктирний роздільник між групою акаунта і допоміжними діями */
    .rm-header-tools .rm-help-btn { margin-top: 10px; position: relative; }
    .rm-header-tools .rm-help-btn::before {
        content: ""; position: absolute; top: -6px; left: 10px; right: 10px;
        border-top: 1px dashed var(--dash);
    }

    /* P0-1: панель фільтрів → bottom-sheet, закритий за замовчуванням.
       position: fixed (fix page-scroll, захист у глибину до overflow:clip
       на .map-wrap): шит/FAB/скрім прив'язані до viewport і не їдуть,
       навіть якщо сторінка з якоїсь причини прокрутиться; fixed-бокси
       не розширюють scrollable overflow документа (на відміну від
       absolute+transform). Координати ті самі: низ .map-wrap == низ
       viewport (.map-shell: 100dvh - header). Жоден предок не має
       transform/filter — fixed рахується від viewport. */
    .left-panel {
        position: fixed;
        top: auto; left: 8px; right: 8px; bottom: 8px;
        width: auto; z-index: 30;                     /* над скрімом (25) */
        transform: translateY(calc(100% + 24px));     /* закрито */
    }
    .left-panel.is-open { transform: translateY(0); }
    .left-panel.is-hidden {                            /* парк обрано: як і було */
        transform: translateY(calc(100% + 24px));
        opacity: 0; pointer-events: none;
    }
    .panel-card { max-height: min(62dvh, 480px); border-radius: 20px; }
    .panel-grip { display: block; }
    .panel-close { display: flex; }
    .map-fab { display: inline-flex; position: fixed; } /* видимість станів — x-show */
    /* рендер скріму — лише при filtersOpen; fixed від viewport →
       top зсувається під sticky-header (як absolute-варіант раніше) */
    .map-scrim { display: block; position: fixed; top: var(--header-h-actual, var(--header-h)); }
    .hint-pill { display: none; }
    /* Віджет довкілля (RECRE-298): floating-екземпляр і згорнута пігулка
       на телефоні зникають повністю; замість них — пілюля-тригер
       .env-trigger у верхньому-правому куті карти + bottom-sheet
       .env-sheet (блок біля .poi-sheet вище). Обидва модифікатори
       у :not(): --inline — картка «Довкілля зараз» головної, вона на
       мобільному лишається видимою в потоці (static + width:100% з блоку
       .home-env-row вище); --sheet — тіло мобільного шита /map/. */
    .env-widget:not(.env-widget--inline):not(.env-widget--sheet) { display: none; }
    .env-pill { display: none; }
    .env-trigger {
        display: inline-flex; align-items: center; gap: 7px;
        position: fixed;
        top: calc(var(--header-h-actual, var(--header-h)) + 10px);
        right: 10px;
        z-index: 22;                       /* > .map-fab(15), < .map-scrim(25) */
        box-sizing: border-box;
        min-height: 44px; min-width: 44px; /* touch target (UX-guideline 22) */
        padding: 0 14px;
        font-family: 'Mulish', system-ui, sans-serif;
        font-size: 13.5px; font-weight: 800; color: var(--ink-2);
        background: rgba(251,245,233,0.94);
        border: 1px solid var(--border);
        border-radius: 30px;
        box-shadow: 0 16px 34px -24px rgba(47,74,55,0.55);
        cursor: pointer;
        transition: transform .18s, box-shadow .18s;
    }
    .env-trigger:active { transform: scale(.97); }
    .env-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
    .env-trigger i, .env-trigger svg {
        width: 16px; height: 16px; flex: none; color: var(--chip-amenity-fg);
    }
    /* Обгортка іконки (QA RECRE-298, D-2) — дзеркально .env-weather__icon:
       flex прибирає baseline-щілину під інлайновим <svg>, щоб геометрія
       пілюлі лишилась такою ж, як із голим <i>. */
    .env-trigger__icon { display: flex; align-items: center; flex: none; }
    .env-trigger .env-legend__dot { width: 9px; height: 9px; flex: none; }
    /* RECRE-414: типографіка підпису — у спільному блоці
       .env-pill__label/.env-trigger__label вище (letter-spacing .3px);
       тут лишається тільки те, що специфічне для мобільного тригера */

    /* RECRE-414: рядок-підтвердження під тумблерами довкілля.
       Тільки ≤680px — на десктопі зворотний зв'язок дає сама поява
       віджета з підсвіткою (ТЗ §4, «Що НЕ входить»). */
    .env-group__hint {
        display: flex; align-items: flex-start; gap: 8px;
        margin: 9px 8px 0; padding: 9px 11px;
        background: var(--chip-amenity-bg);
        border-radius: 12px;
        font-size: 11.5px; line-height: 1.5; font-weight: 600;
        color: var(--green);
        animation: envHintIn .2s ease-out both;
    }
    .env-group__hint i, .env-group__hint svg {
        width: 13px; height: 13px; flex: none; margin-top: 2px;
        color: var(--chip-amenity-fg);
    }
    /* P1-1: «Журнал» — фото зверху, текст під ним */
    a.card-editorial, .card-editorial { flex-direction: column; }
    .card-editorial .ed-photo { width: 100%; min-height: 0; height: 150px; }
    .card-editorial .ed-body { padding: 14px 16px 16px; }
    .card-editorial .card-name { font-size: 24px; }

    /* P1-3: hero — компактні відступи/типографіка; поля контейнерів 30→16px */
    .hero-section { padding: 0 16px; }
    .hero { min-height: 240px; border-radius: 22px; margin-top: 18px; }
    .hero-grad { background: linear-gradient(90deg, rgba(36,52,38,0.86) 0%, rgba(36,52,38,0.55) 55%, rgba(36,52,38,0.22) 100%); }
    .hero-content { padding: 24px 20px 26px; }
    .hero h1 { font-size: 32px; margin: 10px 0 8px; }
    .hero-sub { font-size: 14.5px; }
    .hero-stats { gap: 18px; margin-top: 18px; }
    .hero-stats .num { font-size: 30px; }
    .catalog-grid { padding: 0 16px; margin-top: 22px; }
    .home-main { padding: 0 16px; }

    /* P1-2 (варіант B): акордеон легенди Атласу */
    .pdm-legend-toggle { display: flex; }
    /* Згорнуто (дефолт): стрічку легенди прибрано; розгорнуто — чинна стрічка ≤900px */
    .pdm-side:not(.is-open) { display: none; }
    .pdm-side { padding-top: 2px; }
}

/* RECRE-298: тригер панелі довкілля без анімацій. Блок стоїть САМЕ
   тут — одразу після @media (max-width: 680px), де оголошені його
   transition/:active: специфічність однакова, вирішує порядок. */
@media (prefers-reduced-motion: reduce) {
    .env-trigger { transition: none; }
    .env-trigger:active { transform: none; }
    /* RECRE-414: підсвітка появи, перехід ширини та поява підказки —
       вимкнені; лишається лише факт зміни стану. .env-trigger.is-revealing
       має стояти саме тут (після @media max-width: 680px) — специфічність
       однакова, вирішує порядок, той самий нюанс, що вище. */
    .env-widget.is-revealing, .env-trigger.is-revealing { animation: none; }
    .env-widget { transition: none; }
    .env-group__hint { animation: none; }
}

/* ============================================================
   Попап-запрошення пройти опитування альфа-тестувальників
   (TOR-survey-popup-and-footer-link). Компактна fixed-картка
   низ-право, НЕ повноекранна модалка з оверлеєм (вимога ТЗ 2.6
   для мобільного; на десктопі той самий ненав'язливий патерн).
   z-index 70 — понад .modal-overlay (60, максимум контентних
   оверлеїв, ТЗ 2.6). Показ/закриття — static/js/survey-popup.js
   + includes/survey_popup.html.
   ============================================================ */
.survey-popup {
    position: fixed; right: 18px; bottom: 18px; z-index: 70;
    width: min(342px, calc(100vw - 24px));
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 20px;
    box-shadow: 0 34px 70px -28px rgba(36,52,38,0.6);
    padding: 18px 18px 15px;
    animation: rmPop .3s ease;
}
.survey-popup__close {
    position: absolute; top: 10px; right: 10px;
    width: 26px; height: 26px; box-sizing: border-box; padding: 0;
    border: none; border-radius: 50%;
    background: var(--bg-2);
    color: var(--green);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
/* pointer-events: none — клік по іконці таргетить кнопку
   (системно з .mpp-popup__close, fix-hit-target 2026-07-13) */
.survey-popup__close i, .survey-popup__close svg { width: 14px; height: 14px; pointer-events: none; }
.survey-popup__close:hover { background: var(--border); transform: scale(1.08); }
.survey-popup__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.survey-popup__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 21px; font-weight: 700; color: var(--green);
    margin: 0 30px 6px 0; /* правий відступ — під кнопку × */
}
.survey-popup__text {
    font-size: 13.5px; line-height: 1.55; color: var(--muted);
    margin: 0 0 12px;
}
/* CTA — патерн .mpp-popup__cta (зелена primary-пілюля), тут <a> */
.survey-popup__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 13px; font-weight: 800;
    color: var(--bg);
    background: var(--green);
    border: none; border-radius: 30px;
    padding: 10px 16px;
    cursor: pointer; text-decoration: none;
    transition: transform .18s, box-shadow .18s, background .18s;
}
.survey-popup__cta i, .survey-popup__cta svg { width: 15px; height: 15px; pointer-events: none; }
.survey-popup__cta:hover {
    background: var(--green-hover);
    transform: translateY(-1px);
    box-shadow: 0 14px 24px -14px rgba(47,74,55,0.6);
}
.survey-popup__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }
/* Підказка про сталу наявність посилання у футері — всередині попапу,
   видима ДО закриття (обраний варіант ТЗ 2.4, без нового toast-примітиву) */
.survey-popup__hint {
    font-size: 11.5px; line-height: 1.5; color: var(--muted-3);
    margin: 10px 2px 0;
}

@media (max-width: 680px) {
    /* Компактний банер унизу екрана, легко закривний одним тапом (ТЗ 2.6) */
    .survey-popup {
        left: 12px; right: 12px; bottom: 12px;
        width: auto;
        padding: 14px 14px 12px;
        border-radius: 16px;
    }
    .survey-popup__title { font-size: 19px; }
    .survey-popup__text { font-size: 13px; margin-bottom: 10px; }
    /* Варіант /map/ (include with variant='map'): піднятий над FAB
       «Фільтри + N зон» (.map-fab: bottom 22px по центру, висота ~40px) —
       попап не перекриває FAB (ТЗ 2.6); env-віджет на ≤680px тепер
       інлайновий у потоці сторінки (TOR-env-widget-mobile-inline) і з
       fixed-попапом не конфліктує */
    .survey-popup--map { bottom: 78px; }
}

/* ============================================================
   Онбординг-модалки (TOR-onboarding-modals): навчальна карусель
   для / , /parks/ , /map/ + кнопка "?" у хедері для повторного
   відкриття (на /park/{slug}/ — вміст каталогу, без автопоказу).
   Перенесено з design_mockups/onboarding-modals/onboarding-modals.css
   (значення без змін; токени --rm-* → наявні токени main.css;
   демо-класи demo-*, .hdr*, .phone*, .state-* свідомо не переносились;
   ВАЖЛИВО: не перелічувати wildcard-класи тут через слеш — зірочка
   перед слешем читається браузером як закриття цього коментаря, хвіст
   тексту зливається з наступним селектором, і правило .obm-overlay
   мовчки викидається — саме так була зламана кнопка "?" хедера).
   Розмітка — includes/onboarding_modal.html, логіка —
   static/js/onboarding-modal.js.
   ============================================================ */

/* Оверлей — 1:1 патерн .modal-overlay (той самий scrim + blur).
   z-index 80: понад .modal-overlay (60) і .survey-popup (70) — попап
   опитування свій показ відкладає, поки онбординг відкритий (ТЗ 1.4),
   а відкритий вручну через "?" онбординг має перекривати вже видимий
   попап опитування, не навпаки */
.obm-overlay {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(36, 52, 38, 0.55);
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: obmFade .25s ease;
}
@keyframes obmFade { from { opacity: 0; } to { opacity: 1; } }

/* Контейнер модалки */
.obm {
    position: relative;
    width: min(560px, 100%);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 22px;
    box-shadow: 0 40px 90px -30px rgba(36,52,38,0.7);
    padding: 28px 30px 22px;
    font-family: 'Mulish', system-ui, sans-serif;
    color: var(--ink);
    animation: obmRise .3s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes obmRise {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Кнопка × — той самий рецепт, що .survey-popup__close / .pdc__close */
.obm__close {
    position: absolute; top: 14px; right: 14px;
    width: 30px; height: 30px; box-sizing: border-box; padding: 0;
    border-radius: 50%;
    background: var(--bg-2); border: 1px solid var(--border);
    color: var(--muted); cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s ease, transform .15s ease;
}
/* pointer-events: none — клік по іконці таргетить кнопку
   (системно з .mpp-popup__close, fix-hit-target 2026-07-13) */
.obm__close i, .obm__close svg { width: 15px; height: 15px; pointer-events: none; }
.obm__close:hover { background: var(--border); transform: scale(1.08); }
.obm__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }

/* Крок каруселі */
.obm__step { display: none; }
.obm__step.is-active { display: block; animation: obmStep .25s ease; }
@keyframes obmStep { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* Іконка кроку — кругла плашка в кольорах чипа зручностей */
.obm__icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--chip-amenity-bg); color: var(--chip-amenity-fg);
    display: grid; place-items: center;
    margin-bottom: 12px;
}
.obm__icon i, .obm__icon svg { width: 22px; height: 22px; }

/* Eyebrow "Крок N з M · <сторінка>" — terra, як .pdc__eyebrow */
.obm__eyebrow {
    display: block;
    color: var(--terracotta);
    font-size: 11px; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase;
    margin-bottom: 4px;
}

.obm__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 27px; font-weight: 600; line-height: 1.15;
    color: var(--green);
    margin: 0 0 10px;
}

.obm__text {
    font-size: 14.5px; line-height: 1.6;
    color: var(--muted);
    margin: 0 0 6px;
}
.obm__text strong { color: var(--ink-2); font-weight: 700; }

/* ----- Ілюстративні вставки всередині кроків ----- */

/* Ряд "псевдо-табів" хедера (крок про навігацію на головній) */
.obm-tabs-demo {
    display: flex; gap: 8px; margin: 12px 0 4px;
}
.obm-tabs-demo span {
    font-size: 12.5px; font-weight: 700;
    padding: 6px 14px; border-radius: 30px;
    background: var(--bg-2); color: var(--muted);
    border: 1px solid var(--border-3);
}
.obm-tabs-demo span.is-active {
    background: var(--green); color: var(--bg); border-color: var(--green);
}

/* Смуга POI-пінів (крок "Що таке POI" на карті) — кольори --poi-* */
.obm-poi-strip {
    display: flex; flex-wrap: wrap; gap: 10px 14px;
    margin: 12px 0 4px;
}
.obm-poi { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.obm-poi__pin {
    width: 26px; height: 26px; border-radius: 50% 50% 50% 4px;   /* форма "піна", як маркери Leaflet */
    transform: rotate(-8deg);
    background: var(--pc, var(--sage));
    color: var(--surface-2);
    display: grid; place-items: center;
    box-shadow: 0 3px 8px -3px rgba(46,36,25,.45);
}
.obm-poi__pin i, .obm-poi__pin svg { width: 13px; height: 13px; transform: rotate(8deg); }

/* Міні-схема карти з підсвіткою місця панелі "Довкілля" (правий верхній кут) */
.obm-map-hint {
    position: relative;
    height: 130px; border-radius: 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    overflow: hidden;
    margin: 12px 0 4px;
}
.obm-map-hint__blob {                       /* умовний полігон парку на схемі */
    position: absolute; left: 12%; bottom: -18%;
    width: 46%; height: 78%;
    background: var(--sage-light); opacity: .55;
    border-radius: 46% 54% 58% 42% / 55% 48% 52% 45%;
    border: 2px dashed var(--sage);
}
.obm-map-hint__widget {                     /* сама "вкладочка" Довкілля */
    position: absolute; top: 10px; right: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 11px; font-weight: 700; color: var(--green);
    display: flex; align-items: center; gap: 6px;
    box-shadow: 0 6px 16px -8px rgba(47,74,55,.5);
}
.obm-map-hint__widget i, .obm-map-hint__widget svg { width: 13px; height: 13px; color: var(--sage); }
.obm-map-hint__ring {                       /* пульсуюче кільце-підсвітка охрою */
    position: absolute; top: 2px; right: 2px;
    width: 132px; height: 46px; border-radius: 14px;
    border: 2px solid var(--ochre);
    animation: obmPulse 1.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes obmPulse {
    0%, 100% { opacity: .35; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}
.obm-map-hint__label {                      /* підпис зі стрілкою до кута */
    position: absolute; top: 58px; right: 14px;
    font-size: 11.5px; font-weight: 800; color: var(--terracotta);
    letter-spacing: .4px;
}
.obm-map-hint__label::before { content: "↗ "; }

/* Рядок-приклад прапорця «Потребує перевірки» (.obm-flag-demo) видалено
   разом із кроком онбордингу каталогу (RECRE-238 §3) */

/* ----- Футер: Пропустити · крапки · Далі/Зрозуміло ----- */
.obm__footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px dashed var(--dash);
}
.obm__skip {
    background: none; border: none; cursor: pointer; padding: 6px 4px;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 13px; font-weight: 600; color: var(--muted-2);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.obm__skip:hover { color: var(--muted); }
.obm__skip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); border-radius: 6px; }

.obm__dots { display: flex; gap: 6px; }
.obm__dot {
    width: 8px; height: 8px; border-radius: 30px;
    background: var(--border);
    transition: width .25s ease, background .25s ease;
}
.obm__dot.is-active { width: 22px; background: var(--green); }

/* Primary-кнопка — рецепт .survey-popup__cta */
.obm__next {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green); color: var(--bg);
    border: none; border-radius: 30px; cursor: pointer;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 14px; font-weight: 700;
    padding: 10px 20px;
    transition: background .15s ease, transform .15s ease;
}
/* Вміст кнопки рендериться через template x-if (span-обгортка «Далі» /
   «Зрозуміло») — обгортка успадковує flex-розкладку кнопки */
.obm__next > span { display: inline-flex; align-items: center; gap: 8px; pointer-events: none; }
.obm__next i, .obm__next svg { width: 15px; height: 15px; pointer-events: none; }
.obm__next:hover { background: var(--green-hover); transform: translateY(-1px); }
.obm__next:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }

/* ----- Кнопка "?" у хедері (ТЗ Аналітика, розділ 2) -----
   Ghost-коло у пропорціях .rm-city-btn; стоїть у .rm-header-right
   ПЕРЕД .rm-city, присутня на всіх 4 сторінках через спільний хедер */
.rm-help-btn {
    width: 36px; height: 36px; box-sizing: border-box; padding: 0;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--green);
    cursor: pointer;
    display: grid; place-items: center;
    flex: none;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rm-help-btn i, .rm-help-btn svg { width: 18px; height: 18px; pointer-events: none; }
.rm-help-btn:hover {
    background: var(--bg-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(47,74,55,.55);
}
.rm-help-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }

/* ----- RECRE-183: соцмережі проєкту в хедері (зараз лише Instagram) -----
   Ті самі пропорції/кольори ghost-кола, що .rm-help-btn вище — візуально
   єдиний ряд круглих іконок у .rm-header-right. Обгортка .rm-social-links
   розрахована на кілька <a> (майбутні Facebook/Telegram): gap між
   іконками вже заданий, нові посилання нових стилів не потребують. */
.rm-social-links { display: flex; align-items: center; gap: 8px; flex: none; }
.rm-social-link {
    width: 36px; height: 36px; box-sizing: border-box;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--green);
    display: grid; place-items: center;
    flex: none;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rm-social-link i, .rm-social-link svg { width: 18px; height: 18px; pointer-events: none; }
.rm-social-link:hover {
    background: var(--bg-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(47,74,55,.55);
}
.rm-social-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }

/* ----- RECRE-251 #4 (TOR-mobile-header-composition): overflow-меню шапки.
   Кнопка «⋮» і текстові підписи «?»/Instagram існують лише на ≤680px
   (правила в мобільному медіа-блоці вище); на ≥681px обгортки
   .rm-more/.rm-header-tools прозорі (display: contents) — десктоп і
   планшетна смуга 681–900 без візуальних змін.
   Приховування «⋮»/підписів — всередині media (min-width: 681px), НЕ
   базовими правилами (відхилення від ТЗ 4.1): цей блок стоїть у файлі
   ПІСЛЯ мобільного медіа-блоку, і безумовний .rm-more-btn{display:none}
   за рівної специфічності перебивав би мобільний display:grid. На ≤680px
   підписи поза відкритим меню й так невидимі — .rm-header-tools там
   display:none до відкриття. ----- */
@media (min-width: 681px) {
    .rm-more, .rm-header-tools { display: contents; }
    .rm-more-btn { display: none; }
    .rm-help-btn__label, .rm-social-link__label { display: none; }
    /* .rm-city у DOM тепер ПЕРЕД tools-групою (header.html) — flex-order
       відновлює точний дотеперішній візуальний порядок header-right */
    .rm-kicker       { order: 1; }
    .rm-social-links { order: 2; }
    .rm-help-btn     { order: 3; }
    .rm-city         { order: 4; }
    .rm-auth         { order: 5; }
}

/* ----- RECRE-126: варіативні фрагменти інструкції -----
   .obm-only-d — видимий лише на ≥681px (десктоп/планшет),
   .obm-only-m — лише на телефоні ≤680px: той самий поріг, що
   мобільна поведінка /map/ (bottom-sheet фільтрів, інлайн-блок
   «Довкілля» під картою). display: revert повертає UA-дефолт
   (span → inline, p/div → block) без перелічування тегів. */
.obm-only-m { display: none; }

/* ----- Мобільна ширина (критерій приймання №10) ----- */
@media (max-width: 680px) {
    /* Модалка притискається донизу (ближче до пальця); FAB «Фільтри»
       /map/ лишається ПІД оверлеєм до закриття — не перекритий назавжди,
       закриття доступне 4 способами (×/Пропустити/оверлей/Escape) */
    .obm-overlay { padding: 14px; align-items: flex-end; padding-bottom: 20px; }
    .obm { padding: 24px 20px 18px; border-radius: 20px; }
    .obm__title { font-size: 23px; }
    .obm__text { font-size: 14px; }
    .obm__footer { flex-wrap: wrap; }
    .obm__next { padding: 10px 16px; }
    /* RECRE-126: перемикання фрагментів інструкції під мобільний UI */
    .obm-only-d { display: none; }
    .obm-only-m { display: revert; }
}

/* ============================================================
   user-accounts-mvp: акаунти (хедер, сторінки /login/ /register/
   /password-reset/ /profile/, кнопка «Зберегти парк»)
   ============================================================ */

/* ----- Хедер: блок акаунта праворуч від селектора міста (§9.6) ----- */
.rm-auth { display: flex; align-items: center; gap: 8px; flex: none; }
.rm-auth-form { display: contents; }
.rm-auth-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 30px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--green);
    font-size: 13px; font-weight: 700;
    font-family: inherit;
    text-decoration: none; cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}
.rm-auth-link:hover { background: var(--bg-2); }
.rm-auth-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }
.rm-auth-link i, .rm-auth-link svg { width: 15px; height: 15px; }
.rm-auth-link--primary {
    background: var(--green); color: var(--bg); border-color: var(--green);
}
.rm-auth-link--primary:hover { background: var(--green-hover); }
/* Ім'я користувача: не роздувати шапку довгими логінами */
.rm-auth-name {
    max-width: 120px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
/* RECRE-251 #4: колишнє мобільне перевизначення .rm-auth-link/.rm-auth-name
   (padding 7px 11px / max-width 76px) видалено — на ≤680px auth-лінки більше
   не живуть у ряді шапки, їхню мобільну форму повністю задає .rm-header-tools
   (overflow-меню «⋮» у медіа-блоці 680px вище). Планшетне перевизначення
   681–900px (.rm-auth-name 140px) — чинне, auth там усе ще в ряді. */

/* ----- Сторінки акаунтів: центрована картка (боходизайн, §9.1) ----- */
.acct-page {
    max-width: 1180px; margin: 0 auto;
    padding: 40px 30px 70px;
    min-height: calc(100vh - var(--header-h) - 220px);
}
.acct-card {
    max-width: 440px; margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 22px;
    padding: 30px 30px 26px;
    box-shadow: 0 18px 40px -30px rgba(47,74,55,0.4);
}
.acct-head { text-align: center; margin-bottom: 20px; }
.acct-orb {
    width: 52px; height: 52px; margin: 0 auto 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--ochre-light), var(--ochre) 75%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 7px rgba(215,154,63,0.16);
}
.acct-orb i, .acct-orb svg { width: 24px; height: 24px; color: var(--green); }
.acct-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 30px; font-weight: 700; color: var(--green);
    margin: 0 0 6px;
}
.acct-sub { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }

.acct-form { display: flex; flex-direction: column; gap: 14px; }
.acct-field { display: flex; flex-direction: column; gap: 6px; }
.acct-field label {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--muted-2);
}
/* Віджети Django-форм без класів — стилі за тегом усередині .acct-form
   (той самий вигляд, що .search-box input) */
.acct-form input[type="text"],
.acct-form input[type="email"],
.acct-form input[type="password"] {
    width: 100%; box-sizing: border-box;
    padding: 11px 14px; border-radius: 12px;
    border: 1px solid #e2d3b4; background: var(--surface-2);
    font-family: inherit; font-size: 14px; color: var(--ink); outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.acct-form input:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(126,148,102,0.18); }
/* RECRE-125: + textarea — доти правило фарбувало лише input (Design
   TOR 3.4, помилка валідації повідомлення на /feedback/) */
.acct-field--invalid input,
.acct-field--invalid textarea { border-color: var(--terracotta); }
.acct-error { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--terracotta); }
.acct-alert {
    background: rgba(193,109,69,0.1);
    border: 1px solid rgba(193,109,69,0.35);
    border-radius: 12px; padding: 10px 14px;
}
.acct-alert p { margin: 0; font-size: 13px; font-weight: 600; color: var(--terracotta); }
/* RECRE-168: flash-повідомлення (Django messages) на acct-сторінках —
   success/info-варіанти базового .acct-alert; ширина контейнера — як у
   .bcab (760px), бо основний споживач — редирект на /business/ */
.acct-flash {
    max-width: 760px; margin: 0 auto 20px;
    display: grid; gap: 10px;
}
.acct-alert--success {
    background: rgba(126,148,102,0.14);
    border-color: rgba(126,148,102,0.4);
}
.acct-alert--success p { color: var(--green); }
.acct-alert--info {
    background: rgba(47,74,55,0.07);
    border-color: rgba(47,74,55,0.25);
}
.acct-alert--info p { color: var(--green); }
.acct-help { font-size: 12px; color: var(--muted-3); line-height: 1.5; }
.acct-help ul { margin: 4px 0 0; padding-left: 18px; }
.acct-help li { margin-bottom: 2px; }
.acct-submit { width: 100%; box-sizing: border-box; margin-top: 4px; }
/* RECRE-101 (TOR-google-oauth-login, розділ 5): кнопка «Увійти через
   Google» — офіційні брендинг-гайдлайни Google (світла кнопка, кольорове
   G-лого, темний текст) у наявній системі .pdc-btn/.acct-* */
.pdc-btn--google {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-2);
    box-shadow: 0 2px 8px -4px rgba(47,74,55,0.25);
}
.pdc-btn--google:hover { background: var(--surface-2); }
.pdc-btn--google svg { width: 18px; height: 18px; flex: none; }
.acct-google { margin: 0; }
.acct-google__note {
    margin: 8px 0 0; text-align: center;
    font-size: 12.5px; color: var(--muted-3); line-height: 1.5;
}
/* Розділювач «або» між формою пароля і кнопкою Google */
.acct-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 0 12px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--muted-3);
}
.acct-divider::before,
.acct-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border-2);
}
.acct-links {
    margin-top: 18px; text-align: center;
    display: flex; flex-direction: column; gap: 8px;
    font-size: 13.5px; color: var(--muted);
}
.acct-links a { color: var(--green); font-weight: 700; }

/* Чекбокс згоди з політикою (privacy-policy-and-consent, ТЗ 5.2):
   інпут ліворуч, текст праворуч — не капс-лейбл текстових полів
   (_form_fields.html, гілка input_type == "checkbox") */
.acct-check {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer;
}
.acct-check input[type="checkbox"] {
    flex: none; width: 17px; height: 17px; margin: 2px 0 0;
    accent-color: var(--green); cursor: pointer;
}
.acct-check__text {
    font-size: 13px; line-height: 1.5; color: var(--muted);
    font-weight: 500; letter-spacing: normal; text-transform: none;
}
.acct-check__text a { color: var(--green); font-weight: 700; }

/* ----- Політика конфіденційності (/privacy/,
   privacy-policy-and-consent, розділ 4.2) ----- */
.privacy-doc {
    max-width: 760px; margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 22px;
    padding: 38px 40px 44px;
    box-shadow: 0 18px 40px -30px rgba(47,74,55,0.4);
}
.privacy-head { margin-bottom: 26px; }
.privacy-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 34px; font-weight: 700; color: var(--green);
    margin: 0 0 6px;
}
.privacy-updated {
    margin: 0 0 12px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--muted-2);
}
.privacy-lead { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.65; }
.privacy-sec { margin-top: 26px; }
.privacy-sec h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 23px; font-weight: 700; color: var(--green);
    margin: 0 0 10px;
}
.privacy-sec h3 {
    font-size: 14px; font-weight: 800; color: var(--ink);
    margin: 16px 0 6px;
}
.privacy-sec p { margin: 0 0 10px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.privacy-sec ul { margin: 0 0 10px; padding-left: 22px; }
.privacy-sec li { margin-bottom: 6px; font-size: 14px; color: var(--muted); line-height: 1.65; }
.privacy-sec a { color: var(--green); font-weight: 700; }
.privacy-sec code {
    font-size: 12.5px; background: var(--surface-2);
    border: 1px solid var(--border-2); border-radius: 6px;
    padding: 1px 6px;
}
@media (max-width: 680px) {
    .privacy-doc { padding: 26px 20px 32px; border-radius: 18px; }
    .privacy-title { font-size: 28px; }
}

/* ----- «Мої парки» (/profile/, §9.5) ----- */
.acct-profile { max-width: 640px; margin: 0 auto; }
.acct-profile__head { margin-bottom: 22px; }
.acct-likes { display: flex; flex-direction: column; gap: 12px; }
.acct-like {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 18px; padding: 12px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
}
.acct-like__media {
    flex: none; width: 92px; height: 68px;
    border-radius: 12px; overflow: hidden; display: block;
    /* КРИТИЧНО: containing block для .rm-ph (position:absolute; inset:0).
       Без relative плейсхолдер «Ще без фото» позиціонувався від вьюпорта
       і непрозорим фоном (.acct-like__ph → var(--bg-2)) накривав УВЕСЬ
       контент /profile/ — сторінка виглядала порожньою (баг «кабінет
       невидимий»). Той самий патерн, що .pdc__media на інших сторінках. */
    position: relative;
}
.acct-like__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Плейсхолдер мініатюри без фото: ілюстрацію повністю задає .rm-ph
   (park-placeholder-v2.svg, park-photo-placeholder — та сама заглушка,
   що на картках каталогу). ВАЖЛИВО: НЕ задавати тут background —
   це правило оголошене ПІЗНІШЕ за .rm-ph і при однаковій специфічності
   перекривало ілюстрацію суцільним var(--bg-2) (генерик-іконка
   «паросток» замість заглушки каталогу). */
.acct-like__ph { width: 100%; height: 100%; }
.acct-like__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-like__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 700; color: var(--green);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-like__name:hover { color: var(--green-hover); text-decoration: underline; }
.acct-like__meta { font-size: 13px; font-weight: 600; color: var(--muted-2); }
.acct-like__date { font-size: 12px; color: var(--muted-3); }
.acct-like__remove {
    flex: none; margin-left: auto;
    width: 38px; height: 38px; padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2); color: var(--terracotta);
    cursor: pointer; display: grid; place-items: center;
    transition: background .15s ease, box-shadow .15s ease;
}
.acct-like__remove:hover { background: rgba(193,109,69,0.12); }
.acct-like__remove:disabled { opacity: 0.5; cursor: default; }
.acct-like__remove:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(193,109,69,0.35); }
.acct-like__remove i, .acct-like__remove svg { width: 17px; height: 17px; }

/* Порожній стан профілю — «тихий», з CTA на каталог */
.acct-empty {
    text-align: center; padding: 46px 20px;
    border: 1.5px dashed var(--dash); border-radius: 20px;
    color: var(--muted);
}
.acct-empty .empty-orb {
    width: 54px; height: 54px; margin: 0 auto 12px;
    border-radius: 50%; background: var(--bg-2);
    display: flex; align-items: center; justify-content: center;
}
.acct-empty .empty-orb svg { width: 24px; height: 24px; color: #b6a37e; }
.acct-empty .empty-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px; font-weight: 700; color: var(--green);
}
.acct-empty p { font-size: 14px; margin: 8px 0 16px; }

/* ----- Секція «Мій чекліст» на /profile/ (RECRE-284, корекція К.3) -----
   Незалежна від «Збережених парків» секція (ParkVisitStatus): усередині
   дві групи «Хочу відвідати»/«Відвідано» на одній сторінці без вкладок;
   заголовок-лічильник «N парків» — той самий тихий стиль, що
   .sevt-section__count. */
.acct-checklist { margin-top: 28px; }
.acct-group { margin-top: 20px; }
.acct-group:first-of-type { margin-top: 12px; }
/* Підзаголовок групи всередині «Мого чекліста» — щабель нижче за
   заголовок секції */
.acct-group__title--sub { font-size: 19px; }
.acct-group__head {
    display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
}
.acct-group__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 23px; font-weight: 700; color: var(--green); margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
}
.acct-group__title i, .acct-group__title svg {
    width: 17px; height: 17px; color: #b6a37e; flex: none;
    align-self: center;
}
.acct-group__count {
    font-size: 12.5px; font-weight: 700; color: var(--muted-3);
    font-variant-numeric: tabular-nums;
}
/* «Тихий» порожній стан групи — рядок-заглушка, НЕ великий .acct-empty
   (той лишається для стану «не збережено взагалі нічого») */
.acct-group__empty {
    font-size: 13.5px; color: var(--muted);
    border: 1.5px dashed var(--dash); border-radius: 14px;
    padding: 14px 16px; margin: 0;
}

/* ----- Кнопка «Зберегти парк» (обидві поверхні, §9.2-9.4) ----- */
.pdc-btn--like {
    width: 100%; box-sizing: border-box;
    margin-bottom: 10px;
    background: var(--bg-2); color: var(--terracotta);
    border: 1px solid var(--border);
    text-decoration: none;
}
.pdc-btn--like:hover { background: rgba(193,109,69,0.12); }
.pdc-btn--like:disabled { opacity: 0.6; cursor: default; }
.pdc-btn--like.is-liked {
    background: var(--terracotta); color: var(--surface-2);
    border-color: var(--terracotta);
}
.pdc-btn--like.is-liked:hover { background: #b0603a; }
/* Заповнене серце у стані «Збережено» */
.pdc-btn--like.is-liked svg { fill: currentColor; }

/* RECRE-326 (Р3.1): родина .pdc-visit-toggle* (перемикач «Хочу
   відвідати ⇄ Відвідано» RECRE-284 і guest-мод RECRE-319) видалена
   разом із розміткою — контрол стану живе лише на сторінці чекліста
   (.chkp-row-toggle нижче). */

/* ----- RECRE-319 (К.4, Дизайнер §2): guest-стан кнопок аноніма -----
   Кнопка збереження для НЕавторизованого — приглушена «наче
   неактивна», але повністю клікабельна (клік відкриває нюдж). Пунктир
   --dash — усталена мова «тут поки нічого немає / потрібна дія»
   (.acct-empty, .mloc-share). Свідомо ВІДМІННО від :disabled (той — ті
   самі кольори + opacity .6 + cursor default; guest — інші кольори,
   повна непрозорість, cursor pointer, живий hover як доказ
   клікабельності). aria/disabled НЕ чіпати — стан «потребує входу»,
   не «недоступно». Модифікатор підставляється ЛИШЕ в {% else %}-гілці
   аноніма обох поверхонь (pdc_like_button.html + інлайн map.html); той
   самий рецепт у guest-кнопки «У чекліст» — .chka-btn--guest нижче. */
.pdc-btn--like.pdc-btn--guest {
    background: var(--surface-2);          /* було --bg-2 */
    color: var(--muted);                   /* було --terracotta */
    border: 1px dashed var(--dash);        /* було solid --border */
}
.pdc-btn--like.pdc-btn--guest:hover { background: var(--bg-2); color: var(--ink-2); }
.pdc-btn--like.pdc-btn--guest svg { fill: none; }

/* ----- Блок 6а. Рейтинг парку (user-accounts-phase2, ТЗ 6.1/6.2) -----
   Обидві поверхні: /park/{slug}/ (includes/pdc_rating.html, modal.park)
   і overlay /map/ (інлайн-дублікат, park). Агрегат або нейтральний
   стан «Ще недостатньо оцінок» (anti-brigading поріг, ТЗ 4.5) + ряд
   інтерактивних зірок; охра --ochre для активних зірок — той самий
   теплий акцент, що бейдж дат подій */
.pdc-rating { margin-bottom: 18px; }
.pdc-rating__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.pdc-rating__head .pdc__section-title { margin: 0; }
.pdc-rating__head > i, .pdc-rating__head > svg {
    width: 14px; height: 14px; color: var(--ochre, #D79A3F); flex: none;
}
.pdc-rating__agg {
    display: flex; align-items: baseline; gap: 7px;
    margin-bottom: 8px;
}
.pdc-rating__avg {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px; font-weight: 700; line-height: 1;
    color: var(--green);
}
.pdc-rating__count { font-size: 13px; color: var(--muted); }
.pdc-rating__empty {
    font-size: 13.5px; font-style: italic; color: var(--muted);
    margin: 0 0 8px;
}
.pdc-rating__stars {
    display: flex; align-items: center; gap: 2px;
    text-decoration: none;
}
.pdc-rating__star {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: none; border: none; padding: 0;
    color: var(--muted-3, #9A8A6E);
    cursor: pointer;
    border-radius: 8px;
}
.pdc-rating__star svg { width: 20px; height: 20px; }
.pdc-rating__star:hover { background: var(--bg-2); color: var(--ochre, #D79A3F); }
.pdc-rating__star:disabled { opacity: 0.6; cursor: default; }
.pdc-rating__star.is-active { color: var(--ochre, #D79A3F); }
.pdc-rating__star.is-active svg { fill: currentColor; }
.pdc-rating__own {
    margin-left: 8px;
    font-size: 12.5px; color: var(--muted);
}
.pdc-rating__stars--anon { cursor: pointer; }
.pdc-rating__stars--anon .pdc-rating__star { pointer-events: none; }
.pdc-rating__login {
    margin-left: 8px;
    font-size: 12.5px; color: var(--terracotta);
    text-decoration: underline;
}
/* CTA-нагадування «Були тут? Залиште оцінку…» (RECRE-268): приглушений
   допоміжний підпис під зірками — та сама візуальна мова, що
   .pdc-comments__empty/.pdc__source; іконка sparkles — охра, як зірки */
.pdc-rating__nudge {
    font-size: 12.5px; line-height: 1.5; color: var(--muted);
    margin: 8px 0 0;
}
.pdc-rating__nudge > i, .pdc-rating__nudge > svg {
    width: 12px; height: 12px; flex: none;
    color: var(--ochre, #D79A3F);
    vertical-align: -1px; margin-right: 3px;
}
.pdc-rating__nudge-link {
    color: var(--terracotta);
    text-decoration: underline;
}

/* ----- Блок 6б. Коментарі (user-accounts-phase2, ТЗ 6.1) -----
   ЛИШЕ /park/{slug}/ (на /map/ свідомо не дублюється, ТЗ 6.2).
   Текст коментаря рендериться через x-text — стилі не роблять
   жодних припущень про розмітку всередині (its plain text) */
.pdc-comments { margin-bottom: 18px; }
/* Секція у самому низу сторінки, під широкими блоками схеми/історії
   (TOR-park-aside-card-rework §3.2) — дзеркало .pdh--after-wide */
.pdc-comments--after-wide { max-width: 72ch; margin-top: 6px; }
.pdc-comments__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.pdc-comments__head .pdc__section-title { margin: 0; }
.pdc-comments__head > i, .pdc-comments__head > svg {
    width: 14px; height: 14px; color: var(--sage); flex: none;
}
.pdc-comments__empty {
    font-size: 13.5px; font-style: italic; color: var(--muted);
    margin: 0 0 12px;
}
.pdc-comments__list { margin-bottom: 14px; }
.pdc-comment {
    background: var(--surface-2);
    border: 1px solid var(--border-3);
    border-radius: 13px;
    padding: 11px 14px;
    margin-bottom: 10px;
}
.pdc-comment:last-child { margin-bottom: 0; }
.pdc-comment__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 5px;
}
.pdc-comment__author {
    font-size: 13px; font-weight: 700; color: var(--green);
}
.pdc-comment__date { font-size: 12px; color: var(--muted-3, #9A8A6E); }
.pdc-comment__delete {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    background: none; border: none; padding: 0;
    color: var(--muted-3, #9A8A6E);
    border-radius: 7px; cursor: pointer;
}
.pdc-comment__delete:hover { background: rgba(193,109,69,0.12); color: var(--terracotta); }
.pdc-comment__delete svg { width: 14px; height: 14px; }
.pdc-comment__text {
    font-size: 13.5px; line-height: 1.55; color: var(--muted);
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.pdc-comments__form { display: block; }
.pdc-comments__input {
    width: 100%; box-sizing: border-box;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 10px 12px;
    font: inherit; font-size: 13.5px; line-height: 1.5;
    color: var(--ink);
    resize: vertical;
}
.pdc-comments__input:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.pdc-comments__form-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px;
}
.pdc-comments__counter { font-size: 12px; color: var(--muted-3, #9A8A6E); }
.pdc-comments__submit { margin-left: auto; }
.pdc-comments__notice {
    font-size: 13px; margin: 8px 0 0;
}
.pdc-comments__notice.is-ok { color: var(--green); }
.pdc-comments__notice.is-error { color: var(--terracotta); }
.pdc-comments__login {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: var(--terracotta);
    text-decoration: underline;
    cursor: pointer;
}
.pdc-comments__login svg { width: 14px; height: 14px; }

/* ============================================================
   TOR-map-park-overlay-implementation: повноекранний
   напівпрозорий+розмитий overlay деталей парку на /map/ ЗАМІСТЬ
   вузької 400px правої панелі. Жива карта міста #map лишається на
   місці (зумована fitBounds-ом selectPark) і видима крізь
   backdrop-filter; ліва панель фільтрів більше НЕ ховається — лежить
   під overlay за z-index (розділ 1 ТЗ: без pointer-events:none на
   самій панелі). Рецепти блоків — концепт
   design_mockups/map-unified-layout-concept (структура/блюр),
   значення каркаса — .pdp-page (park_detail).
   RECRE-115: overlay тепер ЄДИНА поверхня деталей на ВСІХ в'юпортах —
   стару .right-panel (≤900px) видалено, мобільна версія показує той
   самий overlay; вміст адаптується наявними глобальними правилами
   .pdc[data-variant="page"]/.pdp-columns/.pdm (ті самі, що на
   /park/{slug}/) + мобільні дельти overlay наприкінці цього блоку.
   ============================================================ */

/* --- Контейнер overlay (розділ 5.1 ТЗ) --- */
.park-overlay {
    position: absolute; inset: 0;
    /* Вище за .left-panel(20; ≤680px — 30)/.env-widget(20)/
       .hint-pill(15)/.map-fab(15)/.map-scrim(25); нижче за
       lightbox (fixed, 90) */
    z-index: 40;
    visibility: hidden;
    /* САМ контейнер більше НЕ несе ані opacity, ані backdrop-filter
       (баг-репорт 2026-07-21 №7 «сторінка лагає при скролі»): коли
       blur висів на цьому елементі, скрольований вміст дочірнього
       .park-overlay__scroll жив УСЕРЕДИНІ blur-шару — Chromium
       перемальовував розмиття щокадру скролу поверх живої Leaflet-
       карти. Тепер блюр — на окремому статичному порожньому сиблінгу
       .park-overlay__backdrop (нижче), а контейнер лише вмикає/
       вимикає сцену через visibility (дискретно, із затримкою .5s
       на закритті — поки фейдяться backdrop і scroll).
       Додатковий бонус: opacity-перехід на предку обрізав би
       backdrop root — блюр «не бачив» би карту позаду під час
       анімації (той самий клас багів, що v7c/v7d концепту). */
    transition: visibility 0s .5s;
}
.park-overlay.is-open {
    visibility: visible;
    transition: visibility 0s;
}
/* Статичний шар блюру: порожній, без вмісту, ніколи не скролиться і
   не змінюється після відкриття — браузер кешує його як окремий
   композит-шар і НЕ перераховує розмиття при скролі контенту, що
   лежить ПОВЕРХ нього (сиблінг .park-overlay__scroll нижче в DOM →
   вище в z-порядку). Блюр 9px — незмінний; кремовий тінт
   рекалібровано 0.22 → 0.75 (TOR-map-overlay-glass-cards §11:
   текст лежить просто на тінтованому блюрі, без карток);
   значення так само анімуються класом .is-open. На самому шарі НЕМАЄ
   opacity-переходу — лише background/blur (урок v7c концепту:
   одночасні opacity + backdrop-filter на одному елементі дають
   білі проміжні кадри в Chromium). */
.park-overlay__backdrop {
    position: absolute; inset: 0;
    pointer-events: none;
    background: rgba(251,245,233,0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background .5s ease,
                backdrop-filter .5s ease,
                -webkit-backdrop-filter .5s ease;
}
.park-overlay.is-open .park-overlay__backdrop {
    background: rgba(251,245,233,0.75);   /* було 0.22 — TOR-map-overlay-glass-cards §11 */
    backdrop-filter: blur(9px);           /* без змін */
    -webkit-backdrop-filter: blur(9px);   /* без змін */
}
/* Скрольований вміст: звичайний прозорий контент БЕЗ власного
   backdrop-filter — крізь проміжки між картками видно статичний
   заблюрений шар позаду. Fade появи/зникнення всієї сторінки
   деталей (раніше його давав opacity контейнера) тепер тут:
   opacity після завершення переходу = 1 → жодного stacking/
   compositing-податку в усталеному стані скролу. */
.park-overlay__scroll {
    position: absolute; inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transition: opacity .5s ease;
}
.park-overlay.is-open .park-overlay__scroll { opacity: 1; }
/* Каркас — значення .pdp-page (max-width 1120 / padding 22 30 64),
   щоб розкладка збігалась зі сторінкою /park/{slug}/ 1:1 */
.park-overlay__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px 30px 64px;
    box-sizing: border-box;
}
/* Суцільних карток для «голих» текстових секцій БІЛЬШЕ НЕМАЄ
   (TOR-map-overlay-glass-cards §11): текстові секції — звичайний
   потік без фонів/бордерів/тіней, текст читається просто на
   тінтованому блюрі бекдропу (rgba 0.75 вище). Суцільними «від
   природи» лишаються глобальні блоки: .pdc__media, .pde-banner,
   .pdp-aside__card, .pdm-frame, картки коментарів .pdc-comment. */

/* --- Sticky topbar: закриваюча дія (наявний closePark) --- */
.park-overlay__topbar {
    position: sticky; top: 0; z-index: 8;
    display: flex; align-items: center; justify-content: space-between;
    margin: -8px -8px 10px; padding: 8px;
    pointer-events: none;              /* прозорий для кліків між кнопками */
}
.park-overlay__topbar > * { pointer-events: auto; }
/* RECRE-227: бюджет висоти сцени Атласу ПІД overlay. Формула
   .pdm-frame (main.css, RECRE-208) «100vh − 100» порахована під
   /park/{slug}/ і не враховує sticky-топбар overlay (54px усередині
   скрол-порту): опущена автоскролом сцена вилазила б за низ порту
   (запас на 900/768 — лише 18px). 154 = шапка 66 (поза портом)
   + топбар 54 + пінінг 16 + нижнє поле 18. Скоуп ≥901px — мобільна
   гілка .pdm-map (≤900px) не чіпається. Формула /park/{slug}/
   лишається недоторканою. */
@media (min-width: 901px) {
    .park-overlay .pdm-frame { --scene-h: clamp(568px, calc(100vh - 154px), 860px); }
}
.ov-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-size: 13px; font-weight: 800;
    color: var(--green);
    background: rgba(251,245,233,0.95);
    border: 1px solid var(--border);
    border-radius: 30px; padding: 9px 16px 9px 12px;
    cursor: pointer;
    box-shadow: 0 10px 24px -16px rgba(47,74,55,0.55);
    transition: background .18s, transform .18s;
}
.ov-back:hover { background: #FFFDF8; transform: translateX(-2px); }
.ov-back:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.ov-back i, .ov-back svg { width: 15px; height: 15px; }

/* --- Стагерна поява контентних блоків (розділ 7 ТЗ, п.3) --- */
.park-overlay .ov-anim {
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
}
.park-overlay.is-open .ov-anim { opacity: 1; transform: translateY(0); }
.park-overlay.is-open .ov-anim[data-d="1"] { transition-delay: .15s; }
.park-overlay.is-open .ov-anim[data-d="2"] { transition-delay: .25s; }
.park-overlay.is-open .ov-anim[data-d="3"] { transition-delay: .35s; }
.park-overlay.is-open .ov-anim[data-d="4"] { transition-delay: .45s; }
.park-overlay.is-open .ov-anim[data-d="5"] { transition-delay: .55s; }
@media (prefers-reduced-motion: reduce) {
    .park-overlay, .park-overlay__backdrop, .park-overlay__scroll,
    .park-overlay .ov-anim { transition-duration: .01s; }
}

/* --- Медіа-hero: бейдж «Галерея» + курсор зуму (розділ 4.3) --- */
.pdc__media--zoomable { cursor: zoom-in; }
.ov-media-zoom {
    position: absolute; right: 14px; top: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--green); background: rgba(251,245,233,0.92);
    border-radius: 30px; padding: 7px 12px;
    box-shadow: 0 8px 18px -10px rgba(36,52,38,0.5);
    pointer-events: none;
}
.ov-media-zoom i, .ov-media-zoom svg { width: 13px; height: 13px; }

/* --- Атлас-полотно: проста fade/scale-поява після готовності
   (розділ 3.3 ТЗ: БЕЗ FLIP, без вимірювань rect) --- */
.park-overlay .pdm-map.is-ready .pdm-canvas {
    animation: ovAtlasIn .45s ease;
}
@keyframes ovAtlasIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* §13 (TOR-map-overlay-glass-cards): «прейскурант» §12.2 ВИДАЛЕНО
   після живого відхилення користувачем 2026-07-24 — aside-картка
   overlay повернулась до глобального карткового вигляду /park/{slug}/
   (картка main.css ~1147, плитки 2×2 ~796, рейтинг/дії ~1189) без
   жодних overlay-оверрайдів. Висота Атласа ~80vh — глобальне правило
   .pdm-map (main.css ~1478), спільне для /park/ і overlay. */

/* --- Lightbox-карусель (розділ 4.3, критерій №7) --- */
.ov-lightbox {
    position: fixed; inset: 0; z-index: 90;   /* вище overlay(40)/хедера(41, RECRE-460) */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(36,52,38,0.82);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    transition: opacity .3s;
}
.ov-lightbox.is-open { opacity: 1; }
.ov-lightbox__stage { position: relative; width: min(78vw, 1040px); }
.ov-lightbox__img {
    width: 100%; height: min(64vh, 620px);
    object-fit: contain; display: block;
    border-radius: 16px;
    animation: ovLbIn .25s ease;
}
@keyframes ovLbIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.ov-lightbox__caption {
    margin-top: 10px; text-align: center;
    font-size: 12.5px; font-weight: 600; color: rgba(251,245,233,0.8);
}
.ov-lightbox__close {
    position: fixed; top: 22px; right: 26px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(251,245,233,0.14); border: 1px solid rgba(251,245,233,0.3);
    color: var(--bg); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s;
}
.ov-lightbox__close:hover { background: rgba(251,245,233,0.28); }
.ov-lightbox__close i, .ov-lightbox__close svg { width: 20px; height: 20px; }
.ov-lightbox__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(251,245,233,0.92); border: none; color: var(--green);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px -12px rgba(0,0,0,0.5);
    transition: background .18s;
    z-index: 2;
}
.ov-lightbox__arrow:hover { background: #fff; }
.ov-lightbox__arrow--prev { left: -66px; }
.ov-lightbox__arrow--next { right: -66px; }
.ov-lightbox__arrow i, .ov-lightbox__arrow svg { width: 20px; height: 20px; }
.ov-lightbox__thumbs { display: flex; gap: 9px; margin-top: 16px; justify-content: center; }
.ov-lightbox__thumbs button {
    width: 66px; height: 46px; padding: 0; border-radius: 9px; overflow: hidden;
    border: 2px solid rgba(251,245,233,0.35); background: var(--sage-light);
    cursor: pointer; transition: border-color .18s, transform .18s; opacity: .75;
}
.ov-lightbox__thumbs button:hover { transform: translateY(-2px); opacity: 1; }
.ov-lightbox__thumbs button.is-active { border-color: var(--ochre); opacity: 1; }
.ov-lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Мобільні дельти overlay (RECRE-115) ---
   Розведення поверхонь за брейкпоінтом 901px ВИДАЛЕНО: overlay і
   lightbox тепер існують на всіх в'юпортах, стара .right-panel і
   :has-правила ховання лівої панелі під неї — прибрані. Ліва панель
   під overlay поводиться як на десктопі: лишається в сцені (розмита),
   недоступна для кліків за z-index; на ≤680px шит фільтрів і так
   закритий (selectPark → filtersOpen=false, transform за екран).
   Вміст overlay адаптують наявні глобальні правила ≤900px/≤680px/≤600px
   (.pdp-columns → одна колонка, aside першим; .pdm-side → стрічка;
   .pdm-info → floating-попап; акордеон «Шари» ≤680px). Нижче — лише
   дельти каркаса самого overlay. */
@media (max-width: 600px) {
    /* Каркас — дзеркало мобільного .pdp-page (16px 18px 44px):
       розкладка збігається зі сторінкою /park/{slug}/ 1:1 */
    .park-overlay__inner { padding: 16px 18px 44px; }
}
@media (max-width: 680px) {
    /* Lightbox: стрілки — всередину кадру (на десктопі вони стоять
       за межами stage і на вузькому екрані вилазили б за viewport);
       мініатюри переносяться рядками в межах екрана */
    .ov-lightbox__stage { width: 92vw; }
    .ov-lightbox__img { height: min(56vh, 460px); }
    .ov-lightbox__arrow { width: 40px; height: 40px; }
    .ov-lightbox__arrow--prev { left: 10px; }
    .ov-lightbox__arrow--next { right: 10px; }
    .ov-lightbox__close { top: 14px; right: 14px; }
    .ov-lightbox__thumbs { flex-wrap: wrap; padding: 0 12px; }
    /* Sticky topbar overlay: компактніша текстова кнопка */
    .ov-back { font-size: 12px; padding: 8px 13px 8px 10px; }
}

/* ============================================================
   Уніфікована типографіка чисел (unified-number-typography, 2026-07-27)
   ТЗ: Designer/TOR/TOR-unified-number-typography.md
   Мокап: design_mockups/unified-number-typography/

   ДВА РІВНІ ЧИСЕЛ (єдине правило проєкту):

   Ч-1 «Display» — великі акцентні числа, що стоять окремим рядком
       (плитки статистики, hero-лічильники, середній рейтинг,
       температура, день у бейджі дати):
       Cormorant Garamond 700, proportional lining figures.
       tabular-nums НЕ застосовується — це одиночні числа, колонок
       вирівнювання немає, а proportional у Cormorant красивіший.

   Ч-2 «Data» — дрібні лічильники/чипи/пігулки/цифри в рядку тексту
       (лічильники категорій, бейджі N POI, кластери, ціни в чипах,
       лічильник збережень у кнопці, лічильник символів):
       Mulish (успадкований або явний), вага 700–800,
       font-variant-numeric: tabular-nums — цифри однакової ширини,
       колонки лічильників рівні, значення не «дихає» при зміні.
   ============================================================ */

/* ---------- Утиліти для НОВИХ компонентів (щоб надалі не плодити
   точкові правила — вішати клас у розмітці) ---------- */
.num-display {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-variant-numeric: lining-nums proportional-nums;
}
.num-data {
    font-family: 'Mulish', system-ui, sans-serif;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---------- Ч-2: одне групове правило tabular-nums для ВСІХ
   наявних дрібних лічильників (замінило 4 точкові правила, що були
   в main.css: .pdm-info__count, .rm-poi-popup__count, .rm-cluster,
   .legend-symbol--cluster) ---------- */
.cat-count,
.rm-catrow__count,
.rm-city-badge,
.panel-count,
.map-fab__count,
.pdc-poi-group__count,
.pdm-srow__count,
.pdm-info__count,
.pdm-legend-toggle__count,
.rm-poi-popup__count,
.rm-poi-badge,
.rm-poi-pin__count,
.rm-cluster,
.legend-symbol--cluster,
.env-air__idx,
.pdc-rating__count,
.pdc-comments__counter,
.pde-free,
.event-price-chip,
.pdc-btn--like {
    font-variant-numeric: tabular-nums;
}

/* ---------- Точкові фікси ваги (випадкові 400 поруч із
   700–800-лічильниками того самого рівня) ---------- */
/* «· 12 оцінок» поруч із Cormorant-середнім 26px: був font-weight
   default (400) — єдиний «звичайний» лічильник у системі */
.pdc-rating__count { font-weight: 600; }
/* Лічильник символів «140/600» під полем коментаря: був 400
   proportional — цифри стрибали при наборі */
.pdc-comments__counter { font-weight: 600; }

/* ---------- Плитка «Вхід» з довгим тарифом (.pdc__stat--long):
   довге тарифне речення лишається Mulish 600 14px (рішення
   TOR-park-entry-fee-and-hours — НЕ скасовується), але цифри цін
   у ньому тепер табличні, як у решти data-чисел ---------- */
.pdc__stat--long .pdc__stat-value {
    font-variant-numeric: tabular-nums;
}

/* ---------- Ч-1: явна фіксація lining-figures для display-чисел.
   Функціонально Cormorant і так рендерить lining — правило захищає
   від регресії при заміні/self-host шрифту і слугує «якорем»
   переліку всіх display-чисел проєкту. .result-title («N парків»
   на /parks/) додано пізніше — випав із переліку (RECRE-239) ---------- */
.hero-stats .num,
.pdc__stat-value,
.stat-mini .num,
.pdc-rating__avg,
.env-weather__temp,
.event-date-badge__day,
.pde-date__day,
.result-title {
    font-variant-numeric: lining-nums proportional-nums;
}

/* ============================================================
   business-cabinet-core v2 (RECRE-116/117/118/119/121/160) —
   перенесено з design_mockups/business-cabinet-core/business-cabinet.css
   (розділ «ПРОД-СТИЛІ ФІЧІ»; --rm-* токени мокапа → прод-імена).
   ============================================================ */

/* Розширення контролів .acct-form під форму POI/бізнес-реєстрацію
   (main.css вище стилізує лише text/email/password) */
.acct-form input[type="tel"],
.acct-form input[type="url"],
.acct-form select,
.acct-form textarea {
    width: 100%; box-sizing: border-box;
    padding: 11px 14px; border-radius: 12px;
    border: 1px solid #e2d3b4; background: var(--surface-2);
    font-family: inherit; font-size: 14px; color: var(--ink); outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.acct-form select:focus, .acct-form textarea:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(126,148,102,0.18);
}

/* ----- RECRE-116: перемикач типу акаунта (/register/) ----- */
.acct-type { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-type__card {
    position: relative; display: flex; flex-direction: column;
    align-items: flex-start; gap: 6px;
    padding: 13px 14px 12px;
    border: 1.5px solid var(--border-2); border-radius: 14px;
    background: var(--surface-2); cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.acct-type__card input[type="radio"] {
    position: absolute; opacity: 0; width: 1px; height: 1px;
    pointer-events: none;
}
.acct-type__card:hover { border-color: var(--sage-light); }
.acct-type__card:has(input:checked) {
    border-color: var(--sage);
    background: rgba(126,148,102,0.12);
    box-shadow: 0 0 0 3px rgba(126,148,102,0.14);
}
.acct-type__card:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}
.acct-type__icon {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--bg-2);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.acct-type__icon i, .acct-type__icon svg { width: 17px; height: 17px; color: var(--muted-2); }
.acct-type__card:has(input:checked) .acct-type__icon { background: var(--green); }
.acct-type__card:has(input:checked) .acct-type__icon i,
.acct-type__card:has(input:checked) .acct-type__icon svg { color: var(--bg); }
.acct-type__name { font-size: 14px; font-weight: 800; color: var(--ink); }
.acct-type__hint { font-size: 11.5px; line-height: 1.45; color: var(--muted-3); font-weight: 500; }
.acct-type__tick {
    position: absolute; top: 10px; right: 10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--sage);
    display: none; align-items: center; justify-content: center;
}
.acct-type__tick i, .acct-type__tick svg { width: 12px; height: 12px; color: var(--surface-2); }
.acct-type__card:has(input:checked) .acct-type__tick { display: flex; }
@media (max-width: 460px) { .acct-type { grid-template-columns: 1fr; } }

/* ----- RECRE-160 (v2): умовний блок бізнес-реєстрації ----- */
.acct-biz-fields {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px 14px 15px;
    border: 1.5px dashed var(--dash); border-radius: 14px;
    background: rgba(215,154,63,0.07);
}
.acct-biz-fields__kicker {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.9px;
    text-transform: uppercase; color: var(--muted-2); margin: 0;
}
.acct-biz-fields__kicker i, .acct-biz-fields__kicker svg {
    width: 14px; height: 14px; color: var(--terracotta);
}
.acct-biz-fields__note {
    margin: 0; font-size: 12px; line-height: 1.55;
    color: var(--muted-3); display: flex; gap: 7px; align-items: flex-start;
}
.acct-biz-fields__note i, .acct-biz-fields__note svg {
    flex: none; width: 13px; height: 13px; margin-top: 1px; color: var(--ochre);
}

/* ----- RECRE-121/119: дашборд /business/ ----- */
.bcab { max-width: 760px; margin: 0 auto; }
.bcab--wide { max-width: 820px; }
.bcab--form { max-width: 560px; }
.bcab__head {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 22px;
}
.bcab__head .acct-orb { margin: 0; flex: none; }
.bcab__head-main { min-width: 0; }
.bcab__head-main .acct-title { margin-bottom: 2px; }
.bcab__head-cta { margin-left: auto; flex: none; }
@media (max-width: 620px) {
    .bcab__head { flex-wrap: wrap; }
    .bcab__head-cta { margin-left: 0; width: 100%; }
    .bcab__head-cta .pdc-btn { width: 100%; box-sizing: border-box; }
}

.bcab-section-title {
    font-size: 12px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted-3);
    margin: 26px 0 10px;
}

/* Картка акаунта (v2: БЕЗ рядка «Заклад») */
.bcab-company {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border-2); border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
    display: flex; flex-direction: column; gap: 9px;
}
.bcab-company__row { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.bcab-company__row dt {
    flex: none; width: 92px;
    font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--muted-3);
}
.bcab-company__row dd { margin: 0; color: var(--ink-2); font-weight: 600; min-width: 0; }
.bcab-company__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 700; color: var(--green);
}

.bcab-acc-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px;
}
.bcab-acc-status::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}
.bcab-acc-status--active { background: var(--chip-amenity-bg); color: var(--chip-amenity-fg); }
.bcab-acc-status--suspended { background: rgba(193,109,69,0.14); color: var(--terracotta); }

/* ----- RECRE-117 (v2): підписки за категоріями ----- */
.bcab-subs { display: flex; flex-direction: column; gap: 12px; }
.bcab-sub {
    background: var(--surface);
    border: 1px solid var(--border-2); border-radius: 18px;
    padding: 15px 18px 16px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
}
.bcab-sub--muted { opacity: .82; }
.bcab-sub__head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.bcab-sub__icon {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.bcab-sub__icon i, .bcab-sub__icon svg { width: 18px; height: 18px; }
.bcab-sub__icon--cafe       { background: rgba(193,109,69,0.14); color: var(--poi-cafe); }
.bcab-sub__icon--restaurant { background: rgba(176,85,47,0.14);  color: var(--poi-restaurant); }
.bcab-sub__icon--sports     { background: rgba(201,138,60,0.16); color: var(--poi-sports); }
.bcab-sub__icon--pools      { background: rgba(94,154,149,0.16); color: var(--poi-toilet); } /* RECRE-120: майбутній алiас --poi-pools */
.bcab-sub__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px; font-weight: 700; color: var(--green);
}
.bcab-sub__side { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bcab-sub__meta {
    margin: 8px 0 0; font-size: 12.5px; color: var(--muted-2);
    font-weight: 600; line-height: 1.5;
}
.bcab-sub__meta strong { color: var(--ink-2); font-weight: 800; }

.bcab-substat {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.bcab-substat i, .bcab-substat svg { width: 12px; height: 12px; }
.bcab-substat--active    { background: var(--chip-amenity-bg); color: var(--chip-amenity-fg); }
.bcab-substat--grace     { background: rgba(215,154,63,0.18); color: var(--poi-sports); }
.bcab-substat--expired   { background: rgba(193,109,69,0.14); color: var(--terracotta); }
.bcab-substat--cancelled { background: transparent; color: var(--muted-2); border: 1.5px dashed var(--dash); padding: 2.5px 9px; }

.bcab-quota { margin-top: 11px; }
.bcab-quota--tight { margin: 0 0 14px; }
.bcab-quota__label {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: 13px; font-weight: 700; color: var(--ink-2);
    margin-bottom: 8px;
}
.bcab-quota__label strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 700; color: var(--green);
}
.bcab-quota__left { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted-2); }
.bcab-quota__track { display: flex; gap: 5px; }
.bcab-quota__seg {
    flex: 1; height: 9px; border-radius: 20px;
    background: var(--bg-2); border: 1px dashed var(--dash);
    box-sizing: border-box;
}
.bcab-quota__seg--used  { background: var(--sage);  border: 1px solid var(--sage); }
.bcab-quota__seg--extra { background: var(--ochre); border: 1px solid var(--ochre); }
.bcab-quota--full .bcab-quota__seg--used { background: var(--ochre); border-color: var(--ochre); }
.bcab-quota__hint { margin: 8px 0 0; font-size: 12px; color: var(--muted-3); line-height: 1.5; }

.bcab-sub__actions {
    margin-top: 13px; display: flex; gap: 8px; flex-wrap: wrap;
}
.bcab-sub__actions .pdc-btn { padding: 9px 16px; font-size: 13px; }

.bcab-sub__warn {
    margin-top: 12px;
    display: flex; gap: 9px; align-items: flex-start;
    background: rgba(215,154,63,0.13);
    border: 1px solid rgba(215,154,63,0.5);
    border-radius: 12px; padding: 10px 13px;
    font-size: 12.5px; line-height: 1.55; color: var(--ink-2); font-weight: 600;
}
.bcab-sub__warn i, .bcab-sub__warn svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--ochre); }
.bcab-sub__warn--expired {
    background: rgba(193,109,69,0.09);
    border-color: rgba(193,109,69,0.35);
    color: var(--terracotta);
}
.bcab-sub__warn--expired i, .bcab-sub__warn--expired svg { color: var(--terracotta); }

/* --- Цінові картки категорій (RECRE-117) --- */
.bcab-catgrid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 700px) { .bcab-catgrid { grid-template-columns: 1fr; } }
.bcab-catcard {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border-2); border-radius: 18px;
    padding: 16px 16px 18px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bcab-catcard:hover { border-color: var(--sage-light); }
.bcab-catcard__head { display: flex; align-items: center; gap: 10px; }
.bcab-catcard__head .bcab-sub__icon { width: 38px; height: 38px; }
.bcab-catcard__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px; font-weight: 700; color: var(--green);
}
.bcab-catcard__price { margin-left: auto; text-align: right; line-height: 1.1; }
.bcab-catcard__price strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px; font-weight: 700; color: var(--terracotta);
    display: block;
}
.bcab-catcard__price span {
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: var(--muted-3);
}
.bcab-catcard__preview {
    position: relative; height: 96px;
    border: 1px solid var(--border-3); border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(90% 130% at 28% 22%, rgba(157,179,126,0.5), transparent 60%),
        radial-gradient(80% 120% at 85% 78%, rgba(126,148,102,0.35), transparent 55%),
        var(--bg-2);
}
.bcab-catcard__blob {
    position: absolute; left: 12%; top: 16%;
    width: 55%; height: 68%;
    border: 2px dashed rgba(126,148,102,0.55);
    border-radius: 46% 54% 58% 42% / 55% 45% 55% 45%;
}
.bcab-catcard__pin {
    position: absolute; left: 34%; top: 46%; transform: translate(-50%, -100%);
}
.bcab-catcard__pin i, .bcab-catcard__pin svg {
    width: 26px; height: 26px;
    filter: drop-shadow(0 3px 4px rgba(46,36,25,0.3));
}
.bcab-catcard--cafe .bcab-catcard__pin       { color: var(--poi-cafe); }
.bcab-catcard--restaurant .bcab-catcard__pin { color: var(--poi-restaurant); }
.bcab-catcard--sports .bcab-catcard__pin     { color: var(--poi-sports); }
.bcab-catcard--pools .bcab-catcard__pin      { color: var(--poi-toilet); }
.bcab-catcard__chip {
    position: absolute; left: 44%; top: 24%;
    background: rgba(251,245,233,0.94);
    border: 1px solid var(--border-2); border-radius: 20px;
    padding: 4px 10px 4px 7px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; color: var(--ink-2);
    box-shadow: 0 4px 10px -6px rgba(46,36,25,0.35);
    white-space: nowrap;
}
.bcab-catcard__chip i, .bcab-catcard__chip svg { width: 12px; height: 12px; }
.bcab-catcard--cafe .bcab-catcard__chip i, .bcab-catcard--cafe .bcab-catcard__chip svg { color: var(--poi-cafe); }
.bcab-catcard--restaurant .bcab-catcard__chip i, .bcab-catcard--restaurant .bcab-catcard__chip svg { color: var(--poi-restaurant); }
.bcab-catcard--sports .bcab-catcard__chip i, .bcab-catcard--sports .bcab-catcard__chip svg { color: var(--poi-sports); }
.bcab-catcard--pools .bcab-catcard__chip i, .bcab-catcard--pools .bcab-catcard__chip svg { color: var(--poi-toilet); }
.bcab-catcard__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bcab-catcard__list li {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 12.5px; line-height: 1.5; color: var(--muted); font-weight: 500;
}
.bcab-catcard__list li i, .bcab-catcard__list li svg {
    flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--sage);
}
.bcab-catcard__list li strong { color: var(--ink-2); font-weight: 800; }
.bcab-catcard__cta { margin-top: auto; }
.bcab-catcard__cta .pdc-btn { width: 100%; box-sizing: border-box; }
.bcab-catcard__cta--center { display: flex; justify-content: center; }
.bcab-catcard--soon { opacity: .72; }
.bcab-catcard--soon:hover { border-color: var(--border-2); }
.bcab-catcard__soon {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase; color: var(--muted-2);
    border: 1.5px dashed var(--dash); border-radius: 20px;
    padding: 3px 10px;
}
.bcab-catcard__soon i, .bcab-catcard__soon svg { width: 12px; height: 12px; }
.bcab-pricing-note { margin-top: 16px; text-align: center; }

/* Компактна плашка «підключити категорію» */
.bcab-connect {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--surface-2);
    border: 1.5px dashed var(--dash); border-radius: 16px;
    padding: 12px 15px;
}
.bcab-connect--soon { opacity: .72; }
.bcab-connect .bcab-sub__icon { width: 36px; height: 36px; }
.bcab-connect__main { flex: 1; min-width: 180px; }
.bcab-connect__name { font-size: 14px; font-weight: 800; color: var(--ink-2); }
.bcab-connect__meta { font-size: 12px; font-weight: 600; color: var(--muted-3); margin-top: 1px; }
.bcab-connect__meta strong { color: var(--terracotta); font-weight: 800; }
.bcab-connect .pdc-btn { flex: none; padding: 9px 16px; font-size: 13px; }

/* ----- RECRE-117 (v2): платіжний флоу LiqPay — вхід/вихід ----- */
.bcab-pay-card { max-width: 480px; }
.bcab-pay-summary {
    display: flex; flex-direction: column; gap: 0;
    background: var(--surface-2);
    border: 1px solid var(--border-3); border-radius: 14px;
    padding: 4px 16px; margin: 0 0 14px;
}
.bcab-pay-summary__row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 10px 0;
    font-size: 13.5px; color: var(--muted); font-weight: 600;
}
.bcab-pay-summary__row + .bcab-pay-summary__row { border-top: 1px dashed var(--dash); }
.bcab-pay-summary__row dt { flex: 1; margin: 0; }
.bcab-pay-summary__row dd { margin: 0; color: var(--ink-2); font-weight: 800; text-align: right; }
.bcab-pay-summary__row--total { font-size: 14.5px; }
.bcab-pay-summary__row--total dd {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; color: var(--green);
}
.bcab-pay-secure {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 12px; line-height: 1.55; color: var(--muted-3);
    margin-top: 12px;
}
.bcab-pay-secure i, .bcab-pay-secure svg {
    flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--sage);
}
.bcab-pay-result { text-align: center; }
.bcab-pay-result .acct-orb--ok {
    background: radial-gradient(circle at 50% 40%, var(--sage-light), var(--sage) 75%);
    box-shadow: 0 0 0 7px rgba(126,148,102,0.18);
}
.bcab-pay-result .acct-orb--wait {
    background: radial-gradient(circle at 50% 40%, var(--bg-2), var(--border) 80%);
    box-shadow: 0 0 0 7px rgba(138,122,92,0.14);
}
.bcab-pay-result .acct-orb--fail {
    background: radial-gradient(circle at 50% 40%, rgba(193,109,69,0.5), var(--terracotta) 80%);
    box-shadow: 0 0 0 7px rgba(193,109,69,0.16);
}
.bcab-pay-result__actions {
    margin-top: 18px; display: flex; flex-direction: column; gap: 9px;
}
.bcab-pay-result__actions .pdc-btn { width: 100%; box-sizing: border-box; }

/* ----- RECRE-117 (v2): доплата за 6-й+ POI ----- */
.bcab-extra {
    background: var(--surface);
    border: 1px solid var(--border-2); border-radius: 18px;
    padding: 16px 18px 18px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
}
.bcab-extra__title {
    margin: 0 0 4px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 700; color: var(--green);
}
.bcab-extra__text { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.bcab-extra__text strong { color: var(--ink-2); font-weight: 800; }
.bcab-extra__calc {
    display: flex; flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border-3); border-radius: 12px;
    padding: 2px 14px; margin-bottom: 14px;
}
.bcab-extra__calc-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 9px 0; font-size: 13px; font-weight: 600; color: var(--muted);
}
.bcab-extra__calc-row + .bcab-extra__calc-row { border-top: 1px dashed var(--dash); }
.bcab-extra__calc-row span:first-child { flex: 1; }
.bcab-extra__calc-row b { color: var(--ink-2); font-weight: 800; }
.bcab-extra__calc-row--total { font-size: 14px; }
.bcab-extra__calc-row--total b {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px; color: var(--green);
}
.bcab-extra__pct {
    font-size: 11px; font-weight: 800; color: var(--muted-3);
    background: var(--bg-2); border-radius: 20px; padding: 2px 8px;
}
.bcab-extra__actions { display: flex; gap: 9px; flex-wrap: wrap; }
.bcab-extra__actions form { display: inline-flex; margin: 0; }
.bcab-extra__hint { margin-top: 12px; }

/* ----- RECRE-119: список власних POI ----- */
.bcab-pois { display: flex; flex-direction: column; gap: 12px; }
.bcab-poi {
    background: var(--surface);
    border: 1px solid var(--border-2); border-radius: 18px;
    padding: 13px 14px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.bcab-poi__icon {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.bcab-poi__icon i, .bcab-poi__icon svg { width: 19px; height: 19px; }
.bcab-poi__icon--cafe       { background: rgba(193,109,69,0.14); color: var(--poi-cafe); }
.bcab-poi__icon--restaurant { background: rgba(176,85,47,0.14);  color: var(--poi-restaurant); }
.bcab-poi__icon--sports     { background: rgba(201,138,60,0.16); color: var(--poi-sports); }
.bcab-poi__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bcab-poi__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 700; color: var(--green);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcab-poi__meta { font-size: 13px; font-weight: 600; color: var(--muted-2); }
.bcab-poi__dates { font-size: 12px; color: var(--muted-3); }
.bcab-poi__side {
    flex: none; margin-left: auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.bcab-poi__actions { display: flex; gap: 6px; }
.bcab-poi__actions form { display: inline-flex; margin: 0; }
.bcab-poi__act {
    width: 34px; height: 34px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--muted-2); cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s ease, color .15s ease;
}
.bcab-poi__act:hover { background: var(--bg-2); color: var(--green); }
.bcab-poi__act--danger { color: var(--terracotta); }
.bcab-poi__act--danger:hover { background: rgba(193,109,69,0.12); color: var(--terracotta); }
.bcab-poi__act i, .bcab-poi__act svg { width: 15px; height: 15px; }
.bcab-poi__act:disabled { opacity: .45; cursor: default; }
.bcab-poi__note {
    flex-basis: 100%;
    background: rgba(193,109,69,0.09);
    border: 1px solid rgba(193,109,69,0.3);
    border-radius: 12px; padding: 9px 12px;
    font-size: 12.5px; line-height: 1.55; color: var(--terracotta);
    display: flex; gap: 8px; margin: 0;
}
.bcab-poi__note i, .bcab-poi__note svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.bcab-poi__note strong { font-weight: 800; }

/* Бейджі статусу модерації (RECRE-119, 5 станів) */
.bcab-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.bcab-badge i, .bcab-badge svg { width: 12px; height: 12px; }
.bcab-badge--pending   { background: rgba(215,154,63,0.16); color: var(--poi-sports); }
.bcab-badge--published { background: var(--chip-amenity-bg); color: var(--chip-amenity-fg); }
.bcab-badge--rejected  { background: rgba(193,109,69,0.14); color: var(--terracotta); }
.bcab-badge--edit-pending,
.bcab-badge--delete-pending {
    background: transparent; color: var(--poi-sports);
    border: 1.5px dashed var(--ochre);
    padding: 2.5px 9px;
}

/* Приглушена секція видалення акаунту — спільний блок з /profile/ */
.acct-danger-zone {
    margin-top: 36px;
    border: 1.5px dashed rgba(193,109,69,0.4);
    border-radius: 18px; padding: 16px 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.acct-danger-zone__main { flex: 1; min-width: 220px; }
.acct-danger-zone__title {
    margin: 0 0 3px; font-size: 13px; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase; color: var(--terracotta);
}
.acct-danger-zone__text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted-3); }
.acct-danger-zone .pdc-btn {
    flex: none; padding: 10px 18px; font-size: 13px;
    background: transparent; color: var(--terracotta);
    border: 1px solid rgba(193,109,69,0.5);
}
.acct-danger-zone .pdc-btn:hover { background: rgba(193,109,69,0.1); }

/* ----- RECRE-118: форма подачі/редагування POI (v2) ----- */
.bcab-form-card { max-width: 560px; }
.bcab-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bcab-cat {
    position: relative; display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 12px 8px 10px;
    border: 1.5px solid var(--border-2); border-radius: 13px;
    background: var(--surface-2); cursor: pointer; text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.bcab-cat input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bcab-cat i, .bcab-cat svg { width: 19px; height: 19px; color: var(--muted-2); }
.bcab-cat span { font-size: 12px; font-weight: 700; color: var(--muted); }
.bcab-cat:hover { border-color: var(--sage-light); }
.bcab-cat--cafe:has(input:checked)       { border-color: var(--poi-cafe); background: rgba(193,109,69,0.1); }
.bcab-cat--cafe:has(input:checked) i, .bcab-cat--cafe:has(input:checked) svg { color: var(--poi-cafe); }
.bcab-cat--restaurant:has(input:checked) { border-color: var(--poi-restaurant); background: rgba(176,85,47,0.1); }
.bcab-cat--restaurant:has(input:checked) i, .bcab-cat--restaurant:has(input:checked) svg { color: var(--poi-restaurant); }
.bcab-cat--sports:has(input:checked)     { border-color: var(--poi-sports); background: rgba(201,138,60,0.12); }
.bcab-cat--sports:has(input:checked) i, .bcab-cat--sports:has(input:checked) svg { color: var(--poi-sports); }
.bcab-cat:has(input:checked) span { color: var(--ink); font-weight: 800; }
.bcab-cat:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(126,148,102,0.3); }
.bcab-cat--locked { cursor: pointer; opacity: .78; border-style: dashed; }
.bcab-cat--locked:hover { border-color: var(--ochre); opacity: 1; }
.bcab-cat__lock {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 800; color: var(--terracotta);
}
.bcab-cat__lock i, .bcab-cat__lock svg { width: 11px; height: 11px; color: var(--terracotta); }

/* Пікер локації — живий Leaflet-інстанс */
.bcab-mappick {
    position: relative; height: 240px;
    /* RECRE-251 п.8: той самий структурний дефект, що .mloc-map /
       .mloc-pick — position: relative без stacking context пускав
       панелі Leaflet поверх .rm-header при скролі */
    isolation: isolate;
    border: 1px solid var(--border-2); border-radius: 14px;
    overflow: hidden;
    background: var(--bg-2);
}
.bcab-mappick__map { position: absolute; inset: 0; }

/* Compact-лічильник включених POI категорії в шапці форми */
.bcab-form-quota {
    display: flex; align-items: center; gap: 8px;
    justify-content: center; flex-wrap: wrap;
    font-size: 12.5px; font-weight: 700; color: var(--muted-2);
    margin-top: 10px;
}
.bcab-form-quota__dots { display: flex; gap: 4px; }
.bcab-form-quota__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bg-2); border: 1px solid var(--dash);
}
.bcab-form-quota__dot--used { background: var(--sage); border-color: var(--sage); }
.bcab-form-quota__dot--extra { background: var(--ochre); border-color: var(--ochre); }

/* SLA-підказка під сабмітом */
.bcab-sla {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 12px; line-height: 1.5; color: var(--muted-3);
}
.bcab-sla i, .bcab-sla svg { flex: none; width: 13px; height: 13px; margin-top: 1px; color: var(--muted-2); }

/* Заблокований стан форми: підписки категорії немає (охра-інфо, не помилка) */
.bcab-limit {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(215,154,63,0.13);
    border: 1px solid rgba(215,154,63,0.5);
    border-radius: 14px; padding: 13px 15px;
    margin-bottom: 14px;
}
.bcab-limit i, .bcab-limit svg { flex: none; width: 18px; height: 18px; color: var(--ochre); margin-top: 1px; }
.bcab-limit p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); font-weight: 600; }
.bcab-limit p small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--muted-2); }

/* Інформаційна плашка «редагування піде на модерацію» */
.bcab-editnote {
    display: flex; gap: 9px; align-items: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--border-3); border-radius: 12px;
    padding: 10px 13px; margin-bottom: 14px;
    font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.bcab-editnote i, .bcab-editnote svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--ochre); }

/* ============================================================
   RECRE-194/196: «Каталог точок інтересу» — картки-карусель
   (TOR-poi-card-carousel-build; переробка RECRE-170/194)

   Картки ПОВНІ (весь attribute_schema без ліміту «4», слот подій,
   venue-паритет з доком) і КЛІКАБЕЛЬНІ на десктопі ≥901px: клік
   докує картку в панель .pdm-info сцени Атласу (FLIP-переліт).
   Трек — flex зі слотами-обгортками (.pcat-track__slot): слот уміє
   анімовано стулятись (flex-basis→0), коли його картка докована;
   CSS Grid цього не вмів (ТЗ §2). Мобільна ≤900px — без змін:
   вужчі картки, НЕ клікабельні.

   Візуальна мова = картка Афіші подій (.event-card, main.css
   ~3650): фото 16/10 зверху, пілюля годин роботи на фото
   (RECRE-233 §15.2.2; чип вартості демонтовано — §15.2.1),
   eyebrow-категорія з іконкою, Cormorant-назва, рядки фактів. Колір категорії — через --pcat-c
   (та сама палітра, що легенда/піни Атласу). Жодних нових hex.
   ============================================================ */
/* «Блок карток» (ТЗ §3.2): явний верхній розділювач + відступ —
   секція читається окремим структурним блоком під сценою Атласу
   (замість колишнього <hr class="pdc__divider"> між ними) */
.pcat {
    scroll-margin-top: calc(var(--header-h) + 12px);
    border-top: 1px solid var(--border-2);
    padding-top: 14px;
    margin-top: 22px;
}
.pcat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pcat-head .pdc__section-title { margin: 0; }
.pcat-head > i, .pcat-head > svg { width: 21px; height: 21px; color: var(--sage); flex: none; }
/* Пілюля-лічильник «N об'єктів» (формула .i5-catalog__count мокапу) */
.pcat-head__count {
    font-size: 10.5px; font-weight: 800; line-height: 1.6;
    color: var(--muted-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px; padding: 0 8px; flex: none;
}

/* Стрілки прогортання каруселі — праворуч у шапці секції (десктоп:
   вертикальне колесо миші не крутить горизонтальний контейнер);
   ≤680px приховані — там природний свайп */
.pcat-nav { display: flex; gap: 6px; margin-left: auto; }
.pcat-nav__btn {
    display: grid; place-items: center; width: 32px; height: 32px;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 50%; cursor: pointer; color: var(--muted);
    transition: background .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.pcat-nav__btn i, .pcat-nav__btn svg { width: 16px; height: 16px; }
.pcat-nav__btn:hover { background: var(--surface-2); }
.pcat-nav__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }
.pcat-nav__btn:disabled { opacity: .35; cursor: default; }
.pcat-nav__btn:disabled:hover { background: var(--surface); }

/* Чип-фільтри категорій — ЛОКАЛЬНИЙ стан каталогу (RECRE-194:
   більше НЕ дзеркало тумблерів легенди Атласу — каталог і карта
   незалежні). Вигляд чипів без змін відносно RECRE-170. */
.pcat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pcat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 20px; padding: 6px 12px; cursor: pointer;
    transition: background .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.pcat-chip i, .pcat-chip svg { width: 14px; height: 14px; color: var(--pcat-c, var(--sage)); }
.pcat-chip__count {
    font-size: 11px; font-weight: 800; color: var(--muted-2);
    background: var(--bg-2); border-radius: 10px; padding: 1px 7px;
}
.pcat-chip:hover { background: var(--surface-2); }
.pcat-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }
.pcat-chip.is-off { opacity: .45; }
.pcat-chip.is-off i, .pcat-chip.is-off svg { color: var(--muted-3); }
/* RECRE-234 (§15.3 концепту): кнопка-дисклоужер «+M ще»/«Згорнути» —
   та сама формула чипа (висота/радіус/падінги — ряд рівний),
   відмінності: dashed-рамка, приглушений колір, без лічильника-пілюлі.
   Розгортання/згортання миттєве — БЕЗ анімації висоти (рішення
   Дизайнера: max-height-хак на flex-wrap контейнері не потрібен). */
.pcat-chip--more { border-style: dashed; color: var(--muted-2); }
.pcat-chip--more i, .pcat-chip--more svg { color: var(--muted-2); }

/* Карусель (RECRE-194/196, ТЗ §2): flex-трек зі слотами-обгортками
   замість CSS Grid — механіка «слот стуляється, коли картка докована»
   вимагає одиниці «місце в ряду» окремо від картки (flex-basis
   transition; референс .i5-track/.i5-slot мокапу). Патерн скролу —
   overflow-x + тонкий скролбар, як раніше.
   RECRE-452: align-items за замовчуванням для flex-контейнера — stretch,
   тож БЕЗ явного перевизначення всі слоти в рядку розтягувались до
   висоти НАЙВИЩОЇ картки (найдовший опис/факти сусіда) — «порожня
   картка» (generic POI з відкритих джерел: без опису/фактів/тегів,
   лише eyebrow+назва+чіп+підвал джерела, ТЗ §1 «правило порожнечі»)
   отримувала ту саму висоту, а .pcat-card__body (flex:1, без
   justify-content) залишав порожній простір знизу замість стиснення
   під фактичний вміст. flex-start — кожен слот/картка своєї природної
   висоти; фото однакові (aspect-ratio на однаковій ширині слота), лише
   нижній край картки в ряду тепер може відрізнятись — прийнятний
   компроміс проти «мертвого» простору. */
/* ------------------------------------------------------------------
   RECRE-514 — СПІЛЬНА ГЕОМЕТРІЯ ГОРИЗОНТАЛЬНИХ КАРУСЕЛЕЙ.

   Ширина слота і міжкартковий проміжок — ТОКЕНИ в :root, а не числа,
   продубльовані в кожному треку. Причина в тікеті буквальна: ПВ
   попросив «щоб картка маршруту була як для РОІ», а розійшлись вони
   саме тому, що .pcat-track__slot (main.css) і .rtc-slot
   (route-card.css) вели власні числа — 344px проти 316px на тій самій
   сцені 1060px. Тепер обидва читають ОДИН токен, і будь-яка майбутня
   карусель отримує ту саму сітку одним рядком.

   --rm-carousel-peek — ЩО САМЕ ЗАМІНИЛО КРАЙОВИЙ ФЕЙД RECRE-236
   (див. довгий коментар нижче): в ряду свідомо лишається смуга під
   «визирну» картку, і скрол видно тому, що наступна картка ФІЗИЧНО
   починається в кадрі, а не тому, що край рядка розчиняється.
   ------------------------------------------------------------------ */
:root {
    --rm-carousel-gap: 14px;
    /* Смуга «визирної» картки праворуч. 40px ≈ 12 % слота — вистачає
       на рамку, кольорову рейку маршруту й початок eyebrow, тобто
       сліду вже досить, щоб прочитати «там ще картка», і замало, щоб
       обрізок почав претендувати на читабельність. */
    --rm-carousel-peek: 40px;
    /* «3 повні картки + визирна» на десктопі. */
    --rm-carousel-slot: calc((100% - 2 * var(--rm-carousel-gap) - var(--rm-carousel-peek)) / 3);
}

.pcat-track {
    display: flex; align-items: flex-start; overflow-x: auto;
    padding: 2px 2px 12px;
    scroll-snap-type: x proximity; scroll-padding-left: 2px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    /* RECRE-514: КРАЙОВОГО ФЕЙДУ (mask-image, RECRE-236) ТУТ БІЛЬШЕ
       НЕМАЄ — і це свідоме рішення, а не втрата правила.

       Що було не так. Слот рахувався як «рівно 3 на екран»
       ((100% − 2×14px)/3), тобто на сцені 1060px три картки займали
       всі 1060px до пікселя, а четверта починалась ЗА краєм і не була
       видна взагалі. Гасити було НІЧОГО: 28px маски з'їдали правий
       край ТРЕТЬОЇ, повністю видимої картки. Саме це ПВ і назвав
       «затемненням, коли частина картки скрита» — фейд обіцяв
       прихований вміст там, де його не було, а справжня межа каталогу
       (514 об'єктів!) лишалась невидимою: ряд читався як «оце й усе».

       Що замість. Стандартний афорданс каруселі — ВИЗИРНА КАРТКА:
       --rm-carousel-peek вирізає в ряду смугу, у якій наступна картка
       фізично починається в кадрі. Зріз по краю треку тепер чесний
       (за ним справді є вміст) і рівно такий самий, як у стрічки
       «Скоро» на головній (.event-soon-track, RECRE-199) — там фейду
       ніколи й не було, і третій каруселі продукту нема причин
       говорити іншою мовою.

       Побічні наслідки зняття маски (усі — на користь): скролбар
       треку більше не гаситься на краях (ризик №3 тріажу RECRE-236),
       а hover-підйом картки (translate 0 -3px при padding-top 2px)
       не має чим підрізатись зверху.

       Прапорці catalogAtStart/catalogAtEnd і класи is-at-start /
       is-at-end ЛИШАЮТЬСЯ: вони й далі дизейблять стрілки .pcat-nav —
       це другий (і тепер єдиний) канал повідомлення про край. */
}
.pcat-track::-webkit-scrollbar { height: 8px; }
.pcat-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.pcat-track::-webkit-scrollbar-track { background: transparent; }

/* Слот: «3 повні + визирна» на десктопі (RECRE-514) — ширина прив'язана
   до контейнера спільним токеном --rm-carousel-slot, тим самим, що
   читає .rtc-slot маршрутів; до RECRE-514 тут стояло (100% − 2×14px)/3,
   тобто рівно 3 картки і НІЧОГО за краєм. gap ряду — margin-right
   (анімовано стуляється разом зі слотом) */
.pcat-track__slot {
    flex: 0 0 var(--rm-carousel-slot);
    min-width: 0; margin-right: var(--rm-carousel-gap);
    display: flex; align-items: stretch;
    scroll-snap-align: start;
    transition: flex-basis .38s cubic-bezier(.2,.8,.25,1),
                margin-right .38s cubic-bezier(.2,.8,.25,1);
}
.pcat-track__slot:last-child { margin-right: 0; }
/* Картка докована → слот стулений: сусіди з'їжджаються, в ряду
   фізично на одне місце менше */
.pcat-track__slot.is-empty { flex-basis: 0; margin-right: 0; overflow: hidden; }
/* Чип-фільтр категорії вимкнено: слот прихований, але ЖИВЕ в DOM
   (x-for ітерує повний список — ТЗ §5.3) */
.pcat-track__slot.is-off { display: none; }

.pcat-card {
    position: relative; width: 100%;
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.55);
}
/* Трек-екземпляр докованої картки: невидимий, але з layout — вузол
   лишається в DOM для тихих вимірів FLIP (linked-FLIP, ТЗ §5.2) */
.pcat-card.is-ghost { visibility: hidden; }
/* Афорданси клікабельності — ЛИШЕ десктоп (≥901px картка відкриває
   панель; мобільна лишається суто інформаційною, ТЗ §9) */
@media (min-width: 901px) {
    .pcat-track__slot .pcat-card {
        cursor: pointer; will-change: transform;
        transition: translate .18s ease, box-shadow .18s ease;
    }
    .pcat-track__slot .pcat-card:hover {
        translate: 0 -3px;
        box-shadow: 0 18px 34px -24px rgba(47,74,55,0.6);
    }
    .pcat-track__slot .pcat-card:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(126,148,102,0.45);
    }
}
/* Докований стан у панелі .pdm-info: top-анкер, природна висота —
   простір дає бюджет сцени (--scene-h); якщо картка вища за хост,
   внутрішній скрол дає штатний клапан .is-overflow на хості
   (§13.8 концепту) */
.pcat-card--docked {
    position: absolute; top: 0; left: 0; width: 100%;
    z-index: 20; cursor: auto;
}

/* Кнопки закриття — видимі ЛИШЕ в докованому стані (ТЗ §1 п.9-10):
   × поверх фото (32px, top-right — кут повністю за ×: чип ціни
   демонтовано, RECRE-233 §15.2.1) і full-width outline «Повернути в
   каталог» підвалом тіла картки */
.pcat-card__close {
    position: absolute; top: 10px; right: 10px; z-index: 6;
    width: 32px; height: 32px; border-radius: 50%; padding: 0;
    display: none; place-items: center; cursor: pointer;
    background: rgba(251,245,233,0.94);
    border: 1px solid var(--border);
    color: var(--ink-2);
    box-shadow: 0 4px 12px rgba(35,28,18,0.28);
}
.pcat-card__close:hover { background: var(--bg-2); }
.pcat-card__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.5); }
.pcat-card__close i, .pcat-card__close svg { width: 15px; height: 15px; }
.pcat-card--docked .pcat-card__close { display: grid; }

.pcat-card__return {
    display: none; margin-top: auto;
    align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 9px 14px; border-radius: 12px;
    background: transparent;
    border: 1.5px solid var(--green); color: var(--green);
    font-family: inherit; font-size: 13px; font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pcat-card--docked .pcat-card__return { display: inline-flex; }
.pcat-card__return:hover { background: var(--green); color: var(--surface-2); }
.pcat-card__return:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }
.pcat-card__return i, .pcat-card__return svg { width: 15px; height: 15px; }

/* Фото 16/10 (формула .event-card__photo) або плашка-фолбек кольору
   категорії з іконкою по центру — той самий патерн, що парки без фото */
.pcat-card__photo {
    position: relative; aspect-ratio: 16 / 10;
    background: var(--pcat-c, var(--sage)); overflow: hidden; flex: none;
}
.pcat-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcat-card__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,253,248,0.92); }
.pcat-card__glyph i, .pcat-card__glyph svg { width: 34px; height: 34px; }

/* Години роботи — пілюля bottom-left поверх фото (RECRE-233 §15.2.2;
   на місці демонтованого чипа ціни §15.2.1 — top-right лишається за ×
   докованого стану). Довгий розклад — ellipsis (повний текст — title);
   дата-контракт §15.4: working_hours ≤ ~30 знаків */
.pcat-card__hours {
    position: absolute; left: 10px; bottom: 10px; z-index: 5;
    display: inline-flex; align-items: center; gap: 5px;
    max-width: calc(100% - 20px);
    font-size: 11px; font-weight: 700; line-height: 1.4;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(251,245,233,0.94); color: var(--muted);
    border: 1px solid var(--border);
}
.pcat-card__hours i, .pcat-card__hours svg { width: 12px; height: 12px; flex: none; color: var(--muted-3); }
.pcat-card__hours > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pcat-card__body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

/* Eyebrow-категорія з іконкою (формула .card-eyebrow + .event-card__cat),
   колір — колір категорії */
.pcat-card__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px;
    text-transform: uppercase; color: var(--pcat-c, var(--terracotta));
}
.pcat-card__eyebrow i, .pcat-card__eyebrow svg { width: 13px; height: 13px; flex: none; }

.pcat-card__name {
    margin: 0; font-size: 20px; font-weight: 700; line-height: 1.08;
    color: var(--green); font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Рядки мета-фактів закладу (кухня, сирі години) — формула .event-meta
   Афіші: іконка + текст */
.pcat-meta {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--muted);
}
.pcat-meta i, .pcat-meta svg { width: 14px; height: 14px; color: var(--muted-3); flex: none; }

/* Рядки атрибутів attribute_schema (string/number) — label ліворуч,
   значення праворуч: та сама формула, що рядки фактів дока .pdm-facts__row */
.pcat-facts { display: flex; flex-direction: column; gap: 4px; margin: 1px 0 0; }
.pcat-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; }
.pcat-fact dt { color: var(--muted-2); font-weight: 600; }
.pcat-fact dd { margin: 0; color: var(--ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* RECRE-231 §16: highlight-атрибут (ціна) — акцентний блок ПЕРШИМ у
   фактовій зоні, дзеркало .pdm-facts__hl дока (той самий house-патерн
   для тих самих даних; всі 15 highlight-полів довідника — вільний
   текст *_note, у чипі на фото не живе — QA: 2 рядки поверх фото за
   8px від ×). Чип .pcat-price-chip демонтовано (§15.2.1/§16). */
.pcat-facts__hl {
    background: rgba(193,109,69,0.10);
    border: 1px dashed rgba(193,109,69,0.4);
    border-radius: 10px;
    padding: 6px 9px 7px;
    margin: 1px 0 0;
}
.pcat-facts__hl dt {
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .9px; text-transform: uppercase;
    color: var(--terracotta);
}
.pcat-facts__hl dd {
    margin: 2px 0 0;
    font-size: 12.5px; font-weight: 800; line-height: 1.35;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
/* Трек = прев'ю (§15.1): значення довше 3 рядків кліпається; докована
   картка (хост .pdm-info__cardhost) — повний текст автоматично */
.pcat-track__slot .pcat-facts__hl dd {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden;
}

/* Boolean-true атрибути — chip-ряд (глобальний .tag-chip) */
.pcat-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* Пілюля «відкрито/закрито» — той самий .venue-status, що в доку */
.pcat-card__status .venue-status { margin-top: 2px; }

/* RECRE-196/228: слот подій рендериться ЛИШЕ за наявності подій
   (§14.3 концепту); порожньо → блока немає (правило порожнечі).
   Терракотовий стиль «Найближча подія» (формула .vB-events мокапу);
   реальні дані — майбутній Event↔POI. */
.pcat-card__events {
    border-radius: 12px; padding: 9px 12px 10px;
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 2px;
}
.pcat-card__events--live {
    background: rgba(193,109,69,0.10);
    border: 1px solid rgba(193,109,69,0.25);
}
.pcat-card__events small {
    font-size: 9.5px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--terracotta);
}
.pcat-card__events b { font-size: 13.5px; color: var(--ink); }
.pcat-card__events span { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Чіп джерела даних закладу на картці (той самий .v-chip, що в доку;
   скидання його margin-left:auto — чіп стоїть зліва в потоці тіла) */
.pcat-card__srcchip .v-chip { margin-left: 0; }

/* Опис: повний без line-clamp — норма ДОКОВАНОГО представлення
   (правило RECRE-167 §6; хост .pdm-info__cardhost + клапан
   .is-overflow RECRE-208 §13.8 — без змін); у ТРЕКУ каруселі —
   clamp-прев'ю 4 рядки (§15.1 концепту: «карусель = прев'ю, докована
   картка = повний текст») — ellipsis видимий як афордансність «є ще»,
   повний текст за один клік (докована картка). Скоуп — ancestor-
   селектор слота: обидва екземпляри рендерить один білдер poiCardHtml,
   жодного розгалуження в JS/розмітці */
.pcat-card__desc {
    margin: 2px 0 0;
    font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.pcat-track__slot .pcat-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.pcat-empty { margin: 10px 0 0; font-size: 13px; color: var(--muted-2); font-style: italic; }
.pcat__divider { margin-top: 22px; }

/* Рядок «Точки інтересу (N)» як ярлик у каталог (ТЗ §1.3): <button>
   з ідентичним виглядом статичного рядка (.pdc-poi-group задає
   фон/рамку/відступи) — лише скидання UA-стилів + афорданс */
.pdc-poi-group--link {
    font-family: inherit; font-size: inherit; color: inherit;
    text-align: left; width: 100%; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.pdc-poi-group--link:hover { background: var(--surface); border-color: var(--border); transform: translateY(-1px); }
.pdc-poi-group--link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }

/* Мобільна: та сама карусель (повний паритет полів). 681–900px —
   236px (~3 картки на планшеті, четверта визирає); ≤680px (RECRE-251
   §17) — «домінантна картка + peek»: слот майже на весь трек, peek
   сусідки ≈ 34px — єдина афордансність скролу (стрілок немає), snap
   mandatory припасовує картку до лівого краю в кожному стані спокою;
   cap 400px — картка ніколи не ширша за десктопну.
   RECRE-514: обидві ширини — перевизначення СПІЛЬНОГО токена
   --rm-carousel-slot (його ж читає .rtc-slot маршрутів), а фейду
   маски RECRE-236 більше немає на жодній ширині — на вузьких екранах
   «домінантна картка + peek» і була справжнім афордансом, фейд лише
   гасив уже видимий край. Краєві прапорці is-at-start/is-at-end
   лишаються — вони дизейблять стрілки. */
@media (max-width: 900px) {
    /* 252px, а не колишні POI-шні 236px: обидві каруселі мусять жити на
       одному числі, і взяте БІЛЬШЕ з двох (маршрутний трек тримав саме
       252px) — щоб виконання прохання ПВ «ширше» не обернулось тихим
       звуженням картки маршруту на планшеті. Ряд плиток фактів у цій
       смузі переноситься 2+1 за будь-якого з цих чисел (поріг «три в
       ряд» ≈ 290px, заміряно), тож +16px тут — просто трохи більше
       повітря, а не зміна розкладки. «~3 картки на планшеті» лишається:
       3×252 + 2×14 вміщується аж до 900px, четверта визирає. */
    :root { --rm-carousel-slot: 252px; }
    /* RECRE-485: третя (і остання) інкарнація «порожньої ділянки під
       карткою РОІ». RECRE-452 прибрав розтягування САМИХ карток
       (align-items: flex-start), RECRE-473 обрізав найтовщий блок
       вмісту (.vs-block у прев'ю) — але висота флекс-РЯДА за
       побудовою дорівнює найвищому елементу, і ним лишалась картка
       десь за краєм екрана. Заміряно (НПП «Сколівські Бескиди», 375px):
       ряд 541px під карткою 245px — 296px порожнечі, тобто більше, ніж
       сама картка. Саме це і є «розтягнутий блок з РОІ ... можливо
       пов'язано з більшим вмістом для іншого РОІ» зі скріншота ПО.

       Правило живе тільки на ≤900px, бо саме тут у кадрі РІВНО ОДНА
       картка й діра дорівнює всій різниці висот; на десктопі в ряду
       три картки (розкид менший), а ще там працює hover-підйом
       .pcat-card (translate -3px), якому overflow-y: hidden обрізав би
       верхівку. --pcat-row-h пише catalogNavSync (poi-catalog.js) на
       кожен scroll/resize/ре-рендер треку; поки змінної немає (JS не
       відпрацював) — auto, тобто буквально дотеперішня поведінка.

       overflow-y: hidden обов'язковий: без нього високі картки ЗА межами
       кадру роблять scrollHeight більшим за фіксовану висоту, і трек
       отримує ще й вертикальну прокрутку.

       +14px — вертикальні падінги треку з базового правила
       (padding: 2px 2px 12px): height рахується по border-box, тож на
       голій висоті картки трек обрізав би її рівно на цей падінг.
       Поки --pcat-row-h не виставлено, calc() із невизначеною змінною
       невалідний на етапі обчислення → height бере своє початкове
       значення auto, тобто дотеперішню поведінку (свідомо покладаємось
       на це замість var(...,auto): fallback усередині calc() дав би
       calc(auto + 14px), що просто не рахується). */
    .pcat-track {
        height: calc(var(--pcat-row-h) + 14px);
        overflow-y: hidden;
    }
}
@media (max-width: 680px) {
    :root {
        --rm-carousel-gap: 10px;
        /* 44px = проміжок 10px + смуга визирної картки ~34px */
        --rm-carousel-slot: min(calc(100% - 44px), 400px);
    }
    .pcat-track { scroll-snap-type: x mandatory; }
    .pcat-nav { display: none; }
}
/* Без анімацій стуляння слотів (політ картки вимикає JS, ТЗ §5.5) */
@media (prefers-reduced-motion: reduce) {
    .pcat-track__slot { transition: none; }
}

/* ============================================================
   RECRE-125 — user-feedback-contact-form: /feedback/ + точки входу
   «Зв'язатися з підтримкою» (перенесено з design_mockups/
   user-feedback-contact-form/feedback.css, розділ «ПРОД-СТИЛІ ФІЧІ»;
   --rm-* токени мокапа → прод-імена). НЕ плутати з
   SiteSettings.feedback_form_url (опитування альфа-тестувальників).
   ============================================================ */

/* Ширший варіант acct-card під велике textarea «довільного листа» —
   той самий прийом, що .bcab-form-card (560px) у формі POI */
.fbk-card { max-width: 560px; }

/* Плашка «від кого»: контакт НЕ вводиться — береться з request.user
   (ТЗ 4.2). Користувач бачить, куди прийде відповідь, і не шукає
   поле для email. */
.fbk-from-wrap { display: flex; flex-direction: column; gap: 7px; }
.fbk-from {
    display: flex; align-items: center; gap: 11px;
    background: var(--surface-2);
    border: 1px solid var(--border-3); border-radius: 14px;
    padding: 10px 13px;
}
.fbk-from__icon {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    background: var(--chip-amenity-bg);
    display: flex; align-items: center; justify-content: center;
}
.fbk-from__icon i, .fbk-from__icon svg {
    width: 17px; height: 17px; color: var(--chip-amenity-fg);
}
.fbk-from__main { flex: 1; min-width: 0; }
.fbk-from__name { font-size: 14px; font-weight: 800; color: var(--ink-2); }
.fbk-from__email {
    font-size: 12.5px; font-weight: 600; color: var(--muted-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Велике поле вільного листа — головне поле форми (ТЗ 1.1) */
.fbk-card textarea {
    min-height: 172px; resize: vertical; line-height: 1.6;
}

/* Рядок під textarea: хелп ліворуч + лічильник символів праворуч.
   Ліміти 10–3000 (ТЗ 4.2/5.1); --warn — з ~2900 символів (охра,
   інформаційно: maxlength не дає перевищити, це не помилка) */
.fbk-count {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-top: 2px;
}
.fbk-count .acct-help { margin: 0; }
.fbk-count__num {
    flex: none; font-size: 12px; font-weight: 800;
    color: var(--muted-3); font-variant-numeric: tabular-nums;
}
.fbk-count__num--warn { color: var(--ochre); }

/* Стан sent=True — підтвердження ЗАМІСТЬ форми (ТЗ 5.7).
   Success-сімейство: шавлієвий орб — той самий візуальний код, що
   .acct-alert--success (flash auth_base) і success-стан оплати P2 */
.fbk-done .acct-orb {
    background: radial-gradient(circle at 50% 40%, var(--sage-light), var(--sage) 75%);
    box-shadow: 0 0 0 7px rgba(126,148,102,0.18);
}
.fbk-done .acct-sub strong { color: var(--ink-2); font-weight: 800; }
.fbk-done__actions {
    margin-top: 4px; display: flex; flex-direction: column; gap: 9px;
}
.fbk-done__actions .pdc-btn { width: 100%; box-sizing: border-box; }

/* ----- Секція «Зв'язатися з підтримкою» на /profile/ і /business/
   (ТЗ 6.1/6.2). Звичайна видима картка-секція, НЕ danger-zone:
   зв'язок з підтримкою — не «небезпечна» дія. Місце: після
   основного контенту кабінету, ПЕРЕД .acct-danger-zone. ----- */
.acct-support {
    margin-top: 26px;
    background: var(--surface);
    border: 1px solid var(--border-2); border-radius: 18px;
    padding: 15px 18px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
    display: flex; flex-wrap: wrap; align-items: center; gap: 13px;
}
.acct-support__icon {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    background: var(--chip-amenity-bg);
    display: flex; align-items: center; justify-content: center;
}
.acct-support__icon i, .acct-support__icon svg {
    width: 19px; height: 19px; color: var(--chip-amenity-fg);
}
.acct-support__main { flex: 1; min-width: 220px; }
.acct-support__title {
    margin: 0 0 3px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 700; color: var(--green);
}
.acct-support__text {
    margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.acct-support .pdc-btn { flex: none; padding: 10px 18px; font-size: 13px; }

/* ----- Посилання всередині alert-банерів (ТЗ 6.2/6.3):
   банер призупинення /business/ і payment_unavailable отримують
   КЛІКАБЕЛЬНЕ «зверніться до підтримки» замість статичного тексту.
   Успадковує колір банера (теракота), підкреслення — явна
   affordance посилання всередині кольорового блока. ----- */
.acct-alert p a {
    color: inherit; font-weight: 800;
    text-decoration: underline; text-underline-offset: 2px;
}
.acct-alert p a:hover { color: var(--ink-2); }


/* ============================================================
   RECRE-165 — власні локації користувача (user-custom-locations,
   Design TOR розділи 4-8; мокапи design_mockups/user-custom-locations).
   Приватна колекція геоточок у кабінеті: секція «Мої локації» на
   /profile/, форма з геопікером, міні-сторінка /profile/locations/<id>/,
   діалог підтвердження видалення. Нових hex-кольорів немає: заглушка
   .mloc-ph — fallback-градієнт .rm-ph; hover .pdc-btn--danger #b0603a =
   hover .pdc-btn--like.is-liked вище.
   ============================================================ */

/* ----- 1. Секція «Мої локації» на /profile/ (ТЗ розділ 3) -----
   Окремий блок ПІСЛЯ «Мої парки», ПЕРЕД .acct-support: власний
   серифний h2 + кнопка «Додати локацію» в одному рядку. НЕ
   вкладається в .acct-likes — інша сутність, інші дії. */
.mloc-section { margin-top: 40px; }
.mloc-section__head {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 6px;
}
.mloc-section__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px; font-weight: 700; color: var(--green);
    margin: 0;
}
/* Лічильник «N з 100» — тихий, muted; стає охрою при ≥90%
   (наближення до CUSTOM_LOCATION_MAX_PER_USER) */
.mloc-section__count {
    font-size: 12.5px; font-weight: 700; color: var(--muted-3);
    font-variant-numeric: tabular-nums;
}
.mloc-section__count--warn { color: var(--ochre); }
.mloc-section__add { margin-left: auto; padding: 9px 16px; font-size: 13px; }
.mloc-section__sub {
    margin: 0 0 16px; font-size: 13px; line-height: 1.55;
    color: var(--muted-2);
}
.mloc-section__sub i, .mloc-section__sub svg {
    width: 12px; height: 12px; vertical-align: -1.5px;
    margin-right: 3px; color: var(--muted-3);
}

/* Список локацій — той самий ритм, що .acct-likes (gap 12) */
.mloc-list { display: flex; flex-direction: column; gap: 12px; }

/* Картка локації — сімейство .acct-like (surface, border-2,
   radius 18, м'яка тінь), але з ДВОМА діями праворуч */
.mloc-item {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 18px; padding: 12px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
}
.mloc-item__media {
    flex: none; width: 92px; height: 68px;
    border-radius: 12px; overflow: hidden; display: block;
    position: relative;   /* containing block заглушки — той самий
                             урок, що .acct-like__media вище */
}
.mloc-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mloc-item__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mloc-item__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 700; color: var(--green);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mloc-item__name:hover { color: var(--green-hover); text-decoration: underline; }
.mloc-item__meta {
    font-size: 13px; font-weight: 600; color: var(--muted-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mloc-item__meta i, .mloc-item__meta svg {
    width: 12px; height: 12px; vertical-align: -1.5px;
    margin-right: 3px; color: var(--muted-3);
}
.mloc-item__date { font-size: 12px; color: var(--muted-3); }
.mloc-item__actions { flex: none; margin-left: auto; display: flex; gap: 8px; }
/* Круглі 38px icon-кнопки — розмір/форма .acct-like__remove;
   редагування — зелене сімейство, видалення — теракотове */
.mloc-item__btn {
    width: 38px; height: 38px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer; display: grid; place-items: center;
    text-decoration: none;
    transition: background .15s ease, box-shadow .15s ease;
}
.mloc-item__btn i, .mloc-item__btn svg { width: 17px; height: 17px; }
.mloc-item__btn--edit { color: var(--green); }
.mloc-item__btn--edit:hover { background: var(--bg-2); }
.mloc-item__btn--delete { color: var(--terracotta); }
.mloc-item__btn--delete:hover { background: rgba(193,109,69,0.12); }
.mloc-item__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }
.mloc-item__btn--delete:focus-visible { box-shadow: 0 0 0 3px rgba(193,109,69,0.35); }

/* Заглушка «локація без фото»: пін на шавлієвому градієнті.
   Свідомо НЕ .rm-ph (ілюстрація «модель парку») — власна локація
   не парк; градієнт = fallback-градієнт .rm-ph, нових hex немає. */
.mloc-ph {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #9DB37E, #7E9466 70%, #5E6B48);
    display: flex; align-items: center; justify-content: center;
    color: rgba(251,245,233,0.9);
}
.mloc-ph i, .mloc-ph svg {
    width: 26px; height: 26px;
    filter: drop-shadow(0 2px 3px rgba(46,36,25,0.3));
}
.mloc-ph--hero i, .mloc-ph--hero svg { width: 44px; height: 44px; }

/* ----- 2. Форма локації (ТЗ розділи 1/3; патерн BusinessPOIForm) ----- */

/* Ширша картка під геопікер — той самий прийом, що
   .bcab-form-card / .fbk-card */
.mloc-form-card { max-width: 560px; }

/* Позначка «(не обов'язково)» в label — скидає uppercase-стиль
   .acct-field > label (мокап робив це inline-стилем) */
.mloc-label-note {
    text-transform: none; letter-spacing: 0; font-weight: 600;
}

/* Геопікер: живий Leaflet (custom-location-form.js) поверх
   градієнтної підкладки (видима, поки тайли вантажаться) */
.mloc-pick {
    position: relative; height: 240px;
    /* RECRE-251 п.8: власний stacking context — панелі Leaflet
       (z-index 200–1000) замикаються всередині і не перебивають
       sticky-шапку .rm-header (z-index 41) у кореневому контексті.
       overflow: hidden обрізає лише бокс, контекст не створює. */
    isolation: isolate;
    border: 1px solid var(--border-2); border-radius: 14px;
    overflow: hidden; cursor: crosshair;
    background:
        radial-gradient(90% 130% at 30% 20%, rgba(157,179,126,0.5), transparent 60%),
        radial-gradient(80% 120% at 85% 75%, rgba(126,148,102,0.35), transparent 55%),
        var(--bg-2);
}
.acct-field--invalid .mloc-pick { border-color: var(--terracotta); }
.mloc-pick__map { position: absolute; inset: 0; }
/* Курсор «прицілу» і на полотні Leaflet (він ставить свій grab) */
.mloc-pick .leaflet-container { cursor: crosshair; }
.mloc-pick__hint {
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    z-index: 1200;               /* над панелями Leaflet */
    pointer-events: none;        /* клік крізь хінт = клік по карті */
    background: rgba(251,245,233,0.92); backdrop-filter: blur(4px);
    border: 1px solid var(--border-2); border-radius: 10px;
    padding: 7px 11px;
    font-size: 12px; font-weight: 600; color: var(--muted);
    display: flex; align-items: center; gap: 7px;
}
.mloc-pick__hint i, .mloc-pick__hint svg {
    flex: none; width: 13px; height: 13px; color: var(--sage);
}
/* RECRE-251 п.7: на мобільному хінт (bottom 10, z 1200) сідав на смугу
   атрибуції Leaflet (z 800, висота ~17px) і частково закривав
   © OpenStreetMap (вимога атрибуції OSM). Піднімаємо хінт над
   атрибуцією ЛИШЕ в мобільному діапазоні — десктопна геометрія
   пікера не змінюється (жорстка вимога координатора RECRE-251). */
@media (max-width: 900px) {
    .mloc-pick__hint { bottom: 30px; }
}
/* Чип координат — з'являється після вибору точки: підтвердження
   «точку зафіксовано» без потреби розуміти числа.
   RECRE-222: top 84px = 10 (margin зум-контрола) + 64 (висота
   .leaflet-control-zoom) + 10 (зазор) — чип сидить ПІД кнопками
   «+/−» (Leaflet ставить їх у top-left за замовчуванням, zoomControl
   не вимкнено на жодній з трьох поверхонь: форма створення/редагування
   і сторінка локації). Правий кут не варіант — там .mloc-pick__layer
   (RECRE-220); низ зайнятий .mloc-pick__hint. */
.mloc-pick__coords {
    position: absolute; top: 84px; left: 10px;
    z-index: 1200; pointer-events: none;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(251,245,233,0.92); backdrop-filter: blur(4px);
    border: 1px solid var(--border-2); border-radius: 999px;
    padding: 5px 11px;
    font-size: 11.5px; font-weight: 700; color: var(--green);
    font-variant-numeric: tabular-nums;
}
.mloc-pick__coords i, .mloc-pick__coords svg {
    width: 12px; height: 12px; flex: none; color: var(--terracotta);
}
/* Авторський display: inline-flex перебиває UA-правило [hidden] —
   явний override, щоб JS-тогл coordsChip.hidden працював (QA BUG-1
   RECRE-165: до постановки піна чип має бути невидимим) */
.mloc-pick__coords[hidden] { display: none !important; }

/* Терракотовий пін-маркер Leaflet (divIcon, custom-location-form.js).
   RECRE-309 (мокап custom-location-refinements.css): заливний
   inline-SVG-пін v2 замість тонкоконтурного lucide map-pin, який
   губився на світлій підкладці OSM: суцільне терракотове тіло +
   кремова обводка-гало (--surface-2 — відділяє пін і від світлого
   OSM, і від темного супутника Esri, RECRE-220) + кремова внутрішня
   точка (фіксує вістря). Розмір 30 → 36px, глибша тінь. Жодних нових
   hex — лише токени. */
.mloc-pin-divicon { background: none; border: none; }
.mloc-pin { display: block; color: var(--terracotta); pointer-events: none; }
.mloc-pin svg {
    width: 36px; height: 36px; display: block;
    filter: drop-shadow(0 3px 5px rgba(46,36,25,0.45));
}
.mloc-pin .mloc-pin__body { fill: var(--terracotta); }
.mloc-pin .mloc-pin__ring {
    stroke: var(--surface-2); stroke-width: 1.6; fill: none;
}
.mloc-pin .mloc-pin__dot { fill: var(--surface-2); }

/* Режим редагування: локація НЕ змінюється постфактум (ТЗ 2,
   PATCH без location) — полотно приглушене, без crosshair */
.mloc-pick--readonly { cursor: default; opacity: .8; }
.mloc-pick--readonly .leaflet-container { cursor: default; }
.mloc-pick--readonly .mloc-pick__hint i,
.mloc-pick--readonly .mloc-pick__hint svg { color: var(--muted-3); }

/* Контрол одного опційного фото (ТЗ 1: РІВНО одне, ≤5МБ,
   jpeg/png/webp/gif). Порожній стан — пунктирна зона (сімейство
   .acct-empty/danger-zone dashed), стан із фото — прев'ю + дії. */
.mloc-photo__drop {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 22px 14px;
    border: 1.5px dashed var(--dash); border-radius: 14px;
    background: var(--surface-2);
    font-size: 13px; font-weight: 700; color: var(--muted-2);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.mloc-photo__drop:hover { background: var(--bg-2); border-color: var(--sage); }
.mloc-photo__drop i, .mloc-photo__drop svg {
    width: 18px; height: 18px; color: var(--sage);
}
/* Той самий конфлікт display: flex vs [hidden], що в чипа координат
   (QA BUG-2 RECRE-165): drop.hidden = true у custom-location-form.js
   ховає зону після вибору фото / на edit-формі з наявним фото */
.mloc-photo__drop[hidden] { display: none !important; }
.mloc-photo__preview { position: relative; }
.mloc-photo__preview img {
    display: block; width: 100%; height: 150px; object-fit: cover;
    border-radius: 14px; border: 1px solid var(--border-2);
}
.mloc-photo__remove {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(251,245,233,0.92); color: var(--terracotta);
    cursor: pointer; display: grid; place-items: center;
}
.mloc-photo__remove:hover { background: var(--surface); }
.mloc-photo__remove i, .mloc-photo__remove svg { width: 15px; height: 15px; }

/* RECRE-312: галерея до 5 фото форми локації (прецедент POIPhoto).
   Сітка мініатюр + дроп-зона «Додати фото» останньою клітинкою;
   зірочка (.mloc-photos__cover) — вибір заглавного фото, підсвітка
   .is-cover — шавлієва рамка + заливна зірка. Хрестик — той самий
   .mloc-photo__remove, що в контролу одного фото до цього тікета. */
.mloc-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.mloc-photos__item {
    position: relative; border-radius: 14px; overflow: hidden;
    border: 2px solid var(--border-2);
    cursor: pointer;
}
.mloc-photos__item img {
    display: block; width: 100%; height: 110px; object-fit: cover;
}
.mloc-photos__item[hidden] { display: none !important; }
.mloc-photos__item.is-cover { border-color: var(--sage); }
.mloc-photos__cover {
    position: absolute; top: 6px; left: 6px;
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(251,245,233,0.92); color: var(--muted-2);
    cursor: pointer; display: grid; place-items: center;
}
.mloc-photos__cover:hover { background: var(--surface); }
.mloc-photos__cover i, .mloc-photos__cover svg { width: 15px; height: 15px; }
.mloc-photos__item.is-cover .mloc-photos__cover {
    color: var(--sage); border-color: var(--sage);
}
.mloc-photos__item.is-cover .mloc-photos__cover svg { fill: currentColor; }
.mloc-photos__item .mloc-photo__remove { top: 6px; right: 6px; }
/* Дроп-зона всередині сітки — компактніша за самостійну (клітинка
   тої самої висоти, що мініатюра) */
.mloc-photos__drop {
    min-height: 114px; padding: 12px;
    flex-direction: column; text-align: center;
}

/* RECRE-312: стрічка мініатюр під hero сторінки локації (приватної і
   /l/<token>/) — клік підміняє велике фото (initDetailGallery);
   активна мініатюра — та сама шавлієва рамка, що .is-cover форми */
.mloc-gallery {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: -8px 0 18px;
}
.mloc-gallery__thumb {
    padding: 0; border: 2px solid var(--border-2); border-radius: 10px;
    overflow: hidden; cursor: pointer; background: none;
    line-height: 0;
}
.mloc-gallery__thumb img {
    display: block; width: 84px; height: 60px; object-fit: cover;
}
.mloc-gallery__thumb:hover { border-color: var(--sage); }
.mloc-gallery__thumb.is-active { border-color: var(--sage); }

/* Лічильник символів опису (500) — той самий патерн, що .fbk-count */
.mloc-charcount {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-top: 2px;
}
.mloc-charcount .acct-help { margin: 0; }
.mloc-charcount__num {
    flex: none; font-size: 12px; font-weight: 800;
    color: var(--muted-3); font-variant-numeric: tabular-nums;
}
.mloc-charcount__num--warn { color: var(--ochre); }

/* ----- 3. Міні-сторінка локації /profile/locations/<id>/ (ТЗ 4) -----
   Спрощена сторінка деталей: НЕ каркас /park/{slug}/ (без aside,
   без атласу, без коментарів) — вузька колонка кабінетного
   сімейства, ширша за списковий /profile/ заради фото і карти. */
.mloc-page { max-width: 720px; margin: 0 auto; }
.mloc-back {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 16px;
    font-size: 13.5px; font-weight: 700; color: var(--green);
    text-decoration: none;
}
.mloc-back:hover { text-decoration: underline; }
.mloc-back i, .mloc-back svg { width: 15px; height: 15px; }

.mloc-page__head { margin-bottom: 16px; }
.mloc-page__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 34px; font-weight: 700; color: var(--green);
    margin: 0 0 8px; line-height: 1.15;
    /* Назва — довільний користувацький текст: довгий токен без
       пробілів має переноситись, а не розпирати сторінку (QA BUG-3) */
    word-break: break-word;         /* fallback для старіших браузерів */
    overflow-wrap: anywhere;
}
.mloc-page__meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
    font-size: 13px; font-weight: 600; color: var(--muted-2);
}
.mloc-page__meta i, .mloc-page__meta svg {
    width: 13px; height: 13px; vertical-align: -2px;
    margin-right: 4px; color: var(--muted-3);
}
/* Орієнтир (address_note) — теж користувацький текст у flex-item:
   overflow-wrap: anywhere зменшує min-content, інакше довгий токен
   розпирає flex-контейнер попри wrap (QA BUG-3) */
.mloc-page__meta > span {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* Чип приватності: постійне нагадування, що локація особиста —
   бачить лише власник (критерій 2 ТЗ; шерингу в 1.0.6 немає) */
.mloc-privacy {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--chip-amenity-bg); color: var(--chip-amenity-fg);
    border-radius: 999px; padding: 4px 11px;
    font-size: 11.5px; font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase;
}
.mloc-privacy i, .mloc-privacy svg { width: 11px; height: 11px; flex: none; }

/* Фото-шапка: ті самі радіуси/тінь картки кабінету.
   Без фото — .mloc-ph--hero всередині (великий пін), нижча висота
   220px — порожнеча не домінує (дошка B) */
.mloc-hero {
    position: relative; height: 320px;
    border-radius: 22px; overflow: hidden;
    border: 1px solid var(--border-2);
    box-shadow: 0 18px 40px -30px rgba(47,74,55,0.4);
    margin-bottom: 18px;
}
.mloc-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mloc-hero--empty { height: 220px; }

/* Секції сторінки — світлі вкладені картки (сімейство
   .pdc-route--panel: surface-2 + border-3 + radius 13) */
.mloc-block {
    background: var(--surface-2);
    border: 1px solid var(--border-3); border-radius: 13px;
    padding: 14px 16px; margin-bottom: 14px;
}
.mloc-block__title {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--muted-3); margin: 0 0 8px;
}
.mloc-block__title i, .mloc-block__title svg {
    width: 13px; height: 13px; flex: none; color: var(--terracotta);
}
.mloc-block__text {
    margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted);
    white-space: pre-line;   /* description — plain text з абзацами */
    /* Довгий токен без пробілів (вставлений URL) має переноситись,
       а не давати горизонтальний скрол усій сторінці (QA BUG-3) */
    word-break: break-word;         /* fallback для старіших браузерів */
    overflow-wrap: anywhere;
}
.mloc-block__text--empty { color: var(--muted-3); font-style: italic; }

/* Міні-карта: окремий Leaflet-інстанс з одним маркером
   (custom-location-form.js, initDetailMap) — та сама градієнтна
   підкладка на час завантаження тайлів, що пікер */
.mloc-map {
    position: relative; height: 260px;
    /* RECRE-251 п.8: без власного stacking context панелі Leaflet
       (z-index 200–1000) малювались ПОВЕРХ sticky-шапки .rm-header
       (z-index 41) при скролі сторінки локації (image7 тікета) */
    isolation: isolate;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border-2);
    background:
        radial-gradient(90% 130% at 30% 20%, rgba(157,179,126,0.5), transparent 60%),
        radial-gradient(80% 120% at 85% 75%, rgba(126,148,102,0.35), transparent 55%),
        var(--bg-2);
}
.mloc-map__canvas { position: absolute; inset: 0; }

/* Дії власника під контентом: редагувати (secondary) + видалити
   (ghost-теракота, сімейство кнопки danger-zone) */
.mloc-page__actions {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
}
.mloc-page__actions .pdc-btn { padding: 10px 18px; font-size: 13px; }
.pdc-btn--ghost-danger {
    background: transparent; color: var(--terracotta);
    border: 1px solid rgba(193,109,69,0.5);
}
.pdc-btn--ghost-danger:hover { background: rgba(193,109,69,0.1); }

/* ----- 4. Підтвердження видалення (ТЗ 3: незворотна дія) -----
   Легкий діалог поверх сторінки — БЕЗ нового патерна: картка
   .acct-card + затемнення (те саме сімейство, що onboarding-модалки).
   Alpine x-if (customLocationRow/customLocationPage, accounts.js). */
.mloc-confirm-scrim {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(46,36,25,0.45); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.mloc-confirm { max-width: 400px; text-align: center; }
.mloc-confirm .acct-head { margin-bottom: 0; }
.mloc-confirm .acct-title { font-size: 26px; }
.mloc-confirm .acct-orb {
    background: radial-gradient(circle at 50% 40%, rgba(193,109,69,0.5), var(--terracotta) 80%);
    box-shadow: 0 0 0 7px rgba(193,109,69,0.16);
}
.mloc-confirm .acct-orb i, .mloc-confirm .acct-orb svg { color: var(--bg); }
.mloc-confirm__actions {
    display: flex; gap: 10px; margin-top: 18px;
}
.mloc-confirm__actions .pdc-btn { flex: 1; padding: 11px 14px; font-size: 13.5px; }
.pdc-btn--danger { background: var(--terracotta); color: var(--bg); }
.pdc-btn--danger:hover { background: #b0603a; }  /* = hover .pdc-btn--like.is-liked */

/* ----- Адаптив ----- */
@media (max-width: 560px) {
    .mloc-item { flex-wrap: wrap; }
    .mloc-item__main { flex-basis: calc(100% - 106px); }
    .mloc-item__actions { margin-left: 106px; }
    .mloc-hero { height: 220px; }
    .mloc-page__title { font-size: 28px; }
    .mloc-section__add { margin-left: 0; width: 100%; box-sizing: border-box; }
}

/* ============================================================
   RECRE-219 — згортання довгих списків кабінету (/profile/)
   (TOR-profile-list-collapse; мокап custom-locations.css, розділ 1a)
   Обидва списки (.acct-likes і .mloc-list) уже ПОВНІ в DOM
   (views.py::profile без LIMIT) — згортання чисто клієнтське:
   .acct-collapsible ховає рядки з 6-го, поки accounts.js не поставить
   .is-expanded. display:none автоматично прибирає приховані рядки з
   tab-порядку (ТЗ 2.5). Дочірні елементи контейнера — ЛИШЕ рядки
   списку (:nth-child рахує все; порожній стан .acct-empty рендериться
   замість списку, не всередині).
   ============================================================ */
.acct-collapsible:not(.is-expanded) > :nth-child(n+6) { display: none; }
/* Плавна поява нових рядків при розгортанні — вони з'являються ПІД
   тригером, позиція перегляду не стрибає (ТЗ 2.3) */
.acct-collapsible.is-expanded > :nth-child(n+6) {
    animation: acct-row-in .22s ease both;
}
@keyframes acct-row-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .acct-collapsible.is-expanded > :nth-child(n+6) { animation: none; }
}
/* Тригер «Показати всі (N)» / «Згорнути» — приглушений вторинний
   елемент під списком (сімейство «Показати ще» головної, іконки
   chevrons-down/up), свідомо НЕ .pdc-btn--primary; рендериться
   сервером лише при N>5. Висота ≥38px — touch-мішень. */
.acct-list-more {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 12px auto 0; padding: 9px 18px;
    border: 1px solid var(--border); border-radius: 30px;
    background: var(--surface-2); color: var(--muted);
    font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.acct-list-more:hover { background: var(--bg-2); color: var(--green); }
.acct-list-more:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}
.acct-list-more i, .acct-list-more svg { width: 15px; height: 15px; flex: none; }

/* ============================================================
   RECRE-220 — перемикач супутникового шару геопікера локації
   (TOR-geopicker-satellite-toggle; мокап custom-locations.css,
   розділ 2a). ЛИШЕ .mloc-pick форми локації — НЕ /map/, НЕ Атлас,
   НЕ бізнес-POI-пікер (критерій 6). Кнопку створює
   custom-location-form.js оверлеєм у .mloc-pick (сусід
   леафлет-контейнера — клік не долітає до карти). Мокапні
   .mloc-pick--satellite і .mloc-pick__attrib СВІДОМО не перенесені:
   фон дає справжній L.tileLayer Esri, атрибуцію перемикає штатний
   attributionControl (Design TOR 2.3-2.4).
   ============================================================ */
.mloc-pick__layer {
    position: absolute; top: 10px; right: 10px;
    z-index: 1200;  /* над панелями Leaflet — як __coords/__hint вище */
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--border-2);
    background: rgba(251,245,233,0.92); backdrop-filter: blur(4px);
    font-family: inherit; font-size: 11.5px; font-weight: 800;
    letter-spacing: .3px; color: var(--green);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mloc-pick__layer:hover { background: var(--surface); }
/* Активний стан (супутник увімкнено, aria-pressed="true") — зелена
   заливка: контрастна і на світлій карті, і на темному знімку */
.mloc-pick__layer[aria-pressed="true"] {
    background: var(--green); border-color: var(--green);
    color: var(--bg);
}
.mloc-pick__layer i, .mloc-pick__layer svg { width: 13px; height: 13px; flex: none; }
.mloc-pick__layer:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}

/* ============================================================
   RECRE-310 — блок «Координати» на сторінці локації
   (TOR-custom-location-refinements, розділ 2; мокап
   custom-location-refinements.css). Сімейство .mloc-block, сидить
   ОДРАЗУ ПІД блоком «На карті» і НАД блоком шерингу RECRE-287 /
   панеллю маршруту. Чип координат з міні-карти СТОРІНКИ знято
   (дублював блок); чип у геопікері форми не зачеплено — там він
   підтверджує постановку піна.
   ============================================================ */
.mloc-coords__row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* Значення: «широта, довгота», 5 знаків (~1 м — вставляється в
   Google Maps/Waze/месенджер як є); user-select: all — один тап
   виділяє весь рядок для ручного копіювання без кнопки */
.mloc-coords__value {
    flex: 1; min-width: 180px; box-sizing: border-box;
    padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 10px;
    font-family: inherit; font-size: 15px; font-weight: 800;
    color: var(--green); letter-spacing: .4px;
    font-variant-numeric: tabular-nums;
    user-select: all; -webkit-user-select: all;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Кнопка «Копіювати» — вторинне сімейство, ≥44px touch-мішень */
.mloc-coords__copy {
    flex: none; min-height: 44px; padding: 10px 18px;
    font-size: 13.5px;
}
/* Стан «скопійовано» (2с, керує custom-location-form.js): зелена
   заливка + check — підтвердження БЕЗ окремого toast-компонента */
.mloc-coords__copy.is-copied {
    background: var(--green); color: var(--bg);
}
.mloc-coords__help { margin: 8px 0 0; }

/* ============================================================
   RECRE-311 — fullscreen-геопікер на мобільній формі локації
   (TOR-custom-location-refinements, розділ 3; мокап
   mobile-map-fullscreen.html). Кнопка .mloc-pick__expand (лише
   ≤680px, media query — не JS-детект) розгортає ТОЙ САМИЙ
   Leaflet-вузол у модалку .mloc-fs на 100dvh: діти .mloc-pick
   (полотно + чип координат + перемикач «Супутник» + хінт)
   переносяться appendChild-ом у .mloc-fs__map + invalidateSize()
   — один інстанс карти, один стан піна, жодної синхронізації.
   Каркас модалки будує custom-location-form.js::initFullscreen.
   ============================================================ */
.mloc-pick__expand {
    display: none;
    width: 100%; box-sizing: border-box; margin-top: 8px;
    min-height: 44px; padding: 11px 16px;
    align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); color: var(--green);
    font-family: inherit; font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.mloc-pick__expand:hover { background: var(--bg-2); }
.mloc-pick__expand:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}
.mloc-pick__expand i, .mloc-pick__expand svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 680px) {
    .mloc-pick__expand { display: flex; }
}

/* Fullscreen-режим: fixed-оверлей на 100dvh (НЕ лише 100vh —
   мобільний браузерний хром; 100vh — фолбек для старих браузерів).
   z-index 80 — над sticky-шапкою (40) і confirm-скримом (60). */
.mloc-fs {
    position: fixed; inset: 0; z-index: 80;
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    background: var(--bg);
}
.mloc-fs[hidden] { display: none !important; }
body.mloc-fs-open { overflow: hidden; }

/* Шапка: 56px, серифний заголовок + кругла кнопка закриття 44px.
   ✕ = «Готово» (тап уже оновив форму — семантика та сама, що в
   inline-пікері; окремого «Скасувати» свідомо немає). */
.mloc-fs__head {
    flex: none; display: flex; align-items: center; gap: 12px;
    height: 56px; padding: 0 10px 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.mloc-fs__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px; font-weight: 700; color: var(--green);
    margin: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mloc-fs__close {
    flex: none; width: 44px; height: 44px; padding: 0;
    border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--green);
    cursor: pointer; display: grid; place-items: center;
}
.mloc-fs__close:hover { background: var(--bg-2); }
.mloc-fs__close i, .mloc-fs__close svg { width: 19px; height: 19px; }

/* Полотно: увесь простір між шапкою і нижньою панеллю. Успадковує
   контроли пікера (чип topleft, «Супутник» topright, хінт bottom —
   мобільний bottom: 30px з медіа-правила .mloc-pick__hint вище
   лишає видимою атрибуцію OSM, урок RECRE-251 п.7). isolation —
   z-index панелей Leaflet (200–1000) замикається всередині
   (той самий прийом, що .mloc-pick). Та сама градієнтна підкладка
   на час довантаження тайлів. */
.mloc-fs__map {
    flex: 1; position: relative; overflow: hidden;
    isolation: isolate;
    cursor: crosshair;
    background:
        radial-gradient(90% 130% at 30% 20%, rgba(157,179,126,0.5), transparent 60%),
        radial-gradient(80% 120% at 85% 75%, rgba(126,148,102,0.35), transparent 55%),
        var(--bg-2);
}
.mloc-fs__map .leaflet-container { cursor: crosshair; }
/* Readonly-редагування: точка не змінюється — курсор звичайний
   (роздивитись місце на великій карті все одно корисно) */
.mloc-fs--readonly .mloc-fs__map,
.mloc-fs--readonly .mloc-fs__map .leaflet-container { cursor: default; }

/* Нижня панель підтвердження: координати + primary «Готово»
   (min-height 48px; readonly — «Закрити»). safe-area для айфонного
   home-індикатора. */
.mloc-fs__bar {
    flex: none; display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.mloc-fs__coords {
    flex: 1; min-width: 0;
    font-size: 13.5px; font-weight: 800; color: var(--green);
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mloc-fs__coords--empty { color: var(--muted-3); font-weight: 600; }
.mloc-fs__coords i, .mloc-fs__coords svg {
    width: 13px; height: 13px; vertical-align: -2px;
    margin-right: 5px; color: var(--terracotta);
}
.mloc-fs__done { flex: none; min-height: 48px; padding: 12px 26px; }
.mloc-fs__done:disabled { opacity: .55; cursor: default; }

/* ============================================================
   RECRE-199 — стрічка «Скоро» на головній (майбутні події)
   (TOR-upcoming-events-section; мокап upcoming-events.css).

   Патерн горизонтального скролу — 1:1 з каруселі POI-каталогу
   .pcat-track (RECRE-194/196): overflow-x + тонкий скролбар +
   scroll-snap proximity. Класи НОВІ (.event-soon-track), бо
   .pcat-track має зайву механіку докування (is-empty/is-off/FLIP),
   яка цій стрічці не потрібна.

   Дата-квадрат картки — інверсний патерн .pde-date банера парку:
   зелений фон + кремовий день + охристий місяць. Свідомо ІНВЕРСНИЙ
   до білого .event-date-badge великих карток нижче — щоб стрічка
   «Скоро» зчитувалась як окремий компонент, а не зменшена копія
   основної сітки. Мокапний .event-soon-chip (чип «Скоро» на картці)
   СВІДОМО не перенесений — варіант відхилено Дизайнером
   (soon-states.html, стан 4).
   ============================================================ */

/* ---------- Смуга-контейнер секції ----------
   М'яка тонована підкладка (bg-2) групує стрічку і відділяє її від
   чипів зверху та основної сітки знизу, не створюючи важкої рамки.
   У шаблоні вставляється МІЖ .home-chips і скелетоном .grid-events. */
.event-soon {
    margin: 0 0 26px;
    padding: 14px 16px 4px;
    background: var(--bg-2);
    border: 1px solid var(--border-3);
    border-radius: 18px;
}

/* Шапка міні-секції: назва + пояснення в одному рядку (baseline) */
.event-soon__head {
    display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap;
    margin: 0 2px 12px;
}
.event-soon__title {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 700; line-height: 1;
    color: var(--green);
}
.event-soon__title i, .event-soon__title svg {
    width: 16px; height: 16px; flex: none;
    color: var(--terracotta);
    /* іконка calendar-clock — вирівнювання по центру рядка */
    align-self: center;
}
.event-soon__sub {
    margin: 0;
    font-size: 11.5px; font-weight: 600;
    color: var(--muted-2);
}

/* ---------- Трек (скрол-механіка = .pcat-track) ---------- */
.event-soon-track {
    display: flex; overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity; scroll-padding-left: 2px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.event-soon-track::-webkit-scrollbar { height: 8px; }
.event-soon-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.event-soon-track::-webkit-scrollbar-track { background: transparent; }

/* Слот: фіксована базова ширина (компактна картка без фото), а не
   формула «3 на екран» з .pcat-track__slot — та формула існувала для
   повних фото-карток; тут на контейнері 1220px вміщується ~4 картки,
   5-та визирає за край як афорданс скролу */
.event-soon-track__slot {
    flex: 0 0 300px;
    min-width: 0; margin-right: 12px;
    display: flex; align-items: stretch;
    scroll-snap-align: start;
}
.event-soon-track__slot:last-child { margin-right: 0; }

/* ---------- Картка: <a> цілком, href = mapEventHref(e) ---------- */
.event-soon-card {
    flex: 1; min-width: 0; box-sizing: border-box;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 12px 26px -22px rgba(47,74,55,0.5);
    transition: translate .18s ease, box-shadow .18s ease;
}
.event-soon-card:hover {
    translate: 0 -2px;
    box-shadow: 0 16px 30px -20px rgba(47,74,55,0.6);
}
.event-soon-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.45);
}

/* Дата-квадрат: інверсія .pde-date (зелений фон), трохи менший */
.event-soon-date {
    flex: none; width: 48px; height: 54px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--green);
    border-radius: 11px;
}
.event-soon-date__day {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 700; line-height: 1;
    color: var(--bg);
    font-variant-numeric: lining-nums proportional-nums;
}
.event-soon-date__month {
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ochre-light);
    margin-top: 2px;
}

.event-soon-card__main {
    min-width: 0; flex: 1;
    display: flex; flex-direction: column; gap: 3px;
}
/* Eyebrow-категорія (формула .pde-cat / .card-eyebrow) */
.event-soon-card__cat {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9.5px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--terracotta);
}
.event-soon-card__cat i, .event-soon-card__cat svg { width: 11px; height: 11px; flex: none; }

.event-soon-card__title {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px; font-weight: 700; line-height: 1.12;
    color: var(--green);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Рядки «коли» (eventWhen) і «де» (park_name) */
.event-soon-card__meta {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: var(--muted);
    white-space: nowrap; overflow: hidden;
}
.event-soon-card__meta > span { overflow: hidden; text-overflow: ellipsis; }
.event-soon-card__meta i, .event-soon-card__meta svg {
    width: 11px; height: 11px; flex: none;
    color: var(--muted-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
    .event-soon { padding: 12px 12px 2px; border-radius: 16px; }
    .event-soon__title { font-size: 20px; }
    .event-soon-track__slot { flex-basis: 264px; margin-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .event-soon-card { transition: none; }
    .event-soon-card:hover { translate: none; }
}

/* ---------- Floating-toast (RECRE-267 §2.3) ----------
   Мінімальний toast-«піл» підтвердження («Посилання скопійовано»):
   фіксований низ по центру, зелений фон бренду (var(--green)) —
   той самий колірний токен, що .pdc-comments__notice.is-ok;
   показ/приховування — Alpine x-show + x-transition (showToast,
   sharedAppState, автоприховування ~2.5 с). z-index вище overlay
   карти і lightbox — toast має бути видимим з будь-якого шару */
.rm-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 4000;
    background: var(--green);
    color: #FDFBF7;
    font-size: 13.5px; font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    max-width: min(90vw, 420px);
    text-align: center;
}

/* ============================================================
   RECRE-205 · «Додати подію в календар» (.ics + Google Calendar)
   ТЗ: Designer/TOR/TOR-event-add-to-calendar.md §2, §4, §5;
   мокап: design_mockups/event-add-to-calendar/calendar-actions.html
   ============================================================ */

/* ---------- Група двох календарних дій ----------
   Обидві дії — рівень «secondary»: у всіх трьох рядах, куди група
   вбудовується, primary вже зайнятий («Реєстрація» — зелена заливка,
   «Детальніше» — основна дія картки). Жодного дропдауна/«…»: сценарій
   Google має лишатись у межах одного кліка (ТЗ Аналітика §6.1). */
.evcal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.evcal__btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
    padding: 8px 14px; border-radius: 30px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: background .18s, border-color .18s, transform .18s;
}
.evcal__btn i, .evcal__btn svg { width: 15px; height: 15px; flex: none; }
/* .ics — заповнена шавлієва пігулка (контраст #5E6B48 на #E6ECD9 ≈ 5.1:1) */
.evcal__btn--ics {
    background: var(--chip-amenity-bg); color: var(--chip-amenity-fg);
    border-color: #D6DFC4;
}
.evcal__btn--ics:hover { background: #DCE4CB; }
/* Google — контурна пігулка, явно вторинна */
.evcal__btn--google {
    background: var(--surface-2); color: var(--muted); border-color: var(--border-2);
}
.evcal__btn--google:hover { background: var(--bg-2); color: var(--green); }
.evcal__btn:hover { transform: translateY(-1px); }
.evcal__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,.38); }
/* Дотик: гарантований хіт-таргет 44px БЕЗ зміни десктопної щільності */
@media (pointer: coarse) { .evcal__btn { min-height: 44px; padding: 12px 16px; } }
@media (prefers-reduced-motion: reduce) { .evcal__btn:hover { transform: none; } }

/* ---------- Підказка режиму нагадування (calendar_is_reminder) ----------
   Постійний видимий рядок, НЕ тултип: тултипа не існує на дотику й він
   недоступний з клавіатури, а попередження обов'язкове (ТЗ §6.7).
   Охра — токен «увага/уточнення», не теракота: це не помилка. */
.evcal-hint {
    display: flex; align-items: flex-start; gap: 7px; width: 100%;
    margin: 2px 0 0; padding: 7px 10px; border-radius: 12px;
    background: rgba(215,154,63,.14); border: 1px solid rgba(215,154,63,.34);
    color: #8A6420; font-size: 11.5px; line-height: 1.45; font-weight: 600;
}
.evcal-hint i, .evcal-hint svg {
    width: 14px; height: 14px; margin-top: 1px; flex: none; color: var(--ochre);
}
.evcal-hint--clamp span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Вузький екран: кнопки переносяться (flex-wrap вище) і розтягуються на
   всю ширину — ніколи не стискаються до іконки без підпису.
   Свідомо @media, а не @container: container-query вимагав би
   container-type на самій .evcal, що ламає її розмір як flex-елемента
   всередині .event-actions__row2. */
@media (max-width: 400px) {
    .evcal__btn { width: 100%; justify-content: center; }
}

/* Афіша головної: календарна пара — у ВЛАСНОМУ підряді під пунктирним
   роздільником. «Детальніше»/«Реєстрація» — дії про подію, календар —
   дія про МІЙ календар; порядок наявних кнопок не змінюється. */
.event-actions__row2 {
    display: flex; flex-wrap: wrap; gap: 8px; width: 100%;
    padding-top: 8px; margin-top: 2px; border-top: 1px dashed var(--dash);
}

/* Докована картка події Атласу: ряд дій стає колонкою з двох сходинок */
.pdm-evcard__actions { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.pdm-evcard__actions .row1 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Мобільна шторка події (≤900px): обидві кнопки по половині рядка */
@media (max-width: 900px) {
    .pdm-evcard--sheet .evcal__btn { flex: 1; justify-content: center; }
}

/* ---------- Післядійна пропозиція акаунта ----------
   НОВИЙ компонент, а НЕ розширення .rm-toast: у того pointer-events:none,
   2.5 с і форма пігулки — посилання в ньому фізично неклікабельне
   (Дизайнер §5.1). z-index на 1 вище .rm-toast (4000). */
.rm-nudge {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    z-index: 4001;
    display: flex; align-items: flex-start; gap: 12px;
    width: min(92vw, 440px); padding: 14px 14px 14px 16px;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 18px;
    box-shadow: 0 22px 48px -22px rgba(47,74,55,.62);
    animation: nudge-in .2s ease-out both;
}
@keyframes nudge-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .rm-nudge { animation: none; } }
.rm-nudge__orb {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: var(--chip-amenity-bg); color: var(--chip-amenity-fg);
    display: flex; align-items: center; justify-content: center;
}
.rm-nudge__orb i, .rm-nudge__orb svg { width: 17px; height: 17px; }
.rm-nudge__main { flex: 1; min-width: 0; }
.rm-nudge__text { margin: 0 0 9px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.rm-nudge__cta {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
    background: var(--green); color: var(--bg); font-size: 12.5px; font-weight: 700;
    padding: 9px 16px; border-radius: 30px; text-decoration: none;
    box-sizing: border-box;
}
.rm-nudge__cta:hover { background: var(--green-hover); }
.rm-nudge__cta i, .rm-nudge__cta svg { width: 15px; height: 15px; }
.rm-nudge__close {
    flex: none; width: 30px; height: 30px; border-radius: 50%; border: none;
    background: transparent; color: var(--muted-2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.rm-nudge__close:hover { background: var(--bg-2); color: var(--green); }
.rm-nudge__close i, .rm-nudge__close svg { width: 16px; height: 16px; }
/* Смужка-таймер: видимий індикатор автозакриття; пауза на hover/focus —
   WCAG 2.2.1 (керованість часового обмеження) */
.rm-nudge__bar {
    position: absolute; left: 16px; right: 16px; bottom: 7px; height: 2px;
    border-radius: 2px; background: var(--border-2); overflow: hidden;
}
.rm-nudge__bar i { display: block; height: 100%; background: var(--sage); animation: nudge-bar 8s linear both; }
@keyframes nudge-bar { from { width: 100%; } to { width: 0; } }
.rm-nudge:hover .rm-nudge__bar i,
.rm-nudge:focus-within .rm-nudge__bar i { animation-play-state: paused; }
@media (max-width: 680px) {
    .rm-nudge {
        left: 8px; right: 8px; transform: none; width: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
    }
    @keyframes nudge-in {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: none; }
    }
}
/* Коли відкрита мобільна шторка події — nudge підіймається над нею.
   СВІДОМО після медіа-блоку ≤680px: специфічність у обох правил
   однакова (0,1,0), тож усередині медіа-запиту базовий bottom
   .rm-nudge перебивав би модифікатор саме там, де шторка й існує
   (QA RECRE-205, F-3). Клас навішує registerNudge().show(). */
.rm-nudge--above-sheet { bottom: calc(50vh + 12px); }

/* ============================================================
   RECRE-206 · Секція «Події у ваших парках» на /profile/
   ТЗ: Designer/TOR/TOR-events-in-saved-parks.md;
   мокап: design_mockups/saved-parks-events/cabinet-block.html
   Місце в сторінці: ПІСЛЯ .acct-likes, ПЕРЕД .mloc-section.
   ============================================================ */

/* Шапка секції 1:1 повторює «Мої локації» — якір впізнаваності:
   секція має бути іншою ВСЕРЕДИНІ, але однаково зчитуватись як
   секція кабінету */
.sevt-section { margin-top: 40px; }
.sevt-section__head {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 6px;
}
.sevt-section__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px; font-weight: 700; color: var(--green); margin: 0;
}
/* Лічильник = повна кількість майбутніх подій (сітка показує до 6) */
.sevt-section__count {
    font-size: 12.5px; font-weight: 700; color: var(--muted-3);
    font-variant-numeric: tabular-nums;
}
.sevt-section__sub {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--muted-2); margin: 0 0 14px;
}
.sevt-section__sub i, .sevt-section__sub svg {
    width: 13px; height: 13px; flex: none; color: var(--muted-3);
}

/* Сітка 2×N — свідома відмінність від двох сусідніх вертикальних
   списків кабінету («Мої парки», «Мої локації»): третій такий самий
   список перетворив би сторінку на рівновагий стос. Не три колонки:
   на ширині кабінету (~900px) картка стала б вужчою за 230px. */
.sevt-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .sevt-grid { grid-template-columns: 1fr 1fr; } }

.sevt-card {
    display: flex; gap: 12px; min-width: 0;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 18px; padding: 12px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,.45);
    transition: transform .18s ease, box-shadow .18s ease;
}
.sevt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -26px rgba(47,74,55,.5);
}
@media (prefers-reduced-motion: reduce) { .sevt-card:hover { transform: none; } }

/* Дата-квадрат замість обкладинки: фото зробило б картку важчою за
   рядок збереженого парку (а парк тут — первинна сутність), і
   event_news_cover_url часто None → сітка плейсхолдерів замість даних */
.sevt-card__date {
    flex: none; width: 52px; height: 58px; border-radius: 12px;
    background: var(--bg-2); border: 1px solid var(--border-3);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1;
}
.sevt-card__date b {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px; font-weight: 700; color: var(--green);
    font-variant-numeric: lining-nums proportional-nums;
}
.sevt-card__date span {
    font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase; color: var(--muted-2); margin-top: 2px;
}

.sevt-card__main {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;
}
.sevt-card__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--terracotta);
}
.sevt-card__eyebrow i, .sevt-card__eyebrow svg { width: 13px; height: 13px; flex: none; }
/* clamp у 2 рядки: у сітці з двох колонок довгі назви інакше
   розхитують висоту карток у ряду */
.sevt-card__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 19px; font-weight: 700; color: var(--green);
    margin: 0; line-height: 1.18;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sevt-card__when {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--muted);
}
.sevt-card__when i, .sevt-card__when svg { width: 14px; height: 14px; flex: none; }
/* Єдиний клікабельний елемент картки (deep-link на карту з підсвіченим
   маркером події) — уся картка навмисно НЕ клікабельна */
.sevt-card__park {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--green);
    text-decoration: none; align-self: flex-start;
    border-radius: 8px; padding: 2px 0;
}
.sevt-card__park:hover { color: var(--green-hover); text-decoration: underline; }
.sevt-card__park:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,.38);
}
.sevt-card__park i, .sevt-card__park svg { width: 14px; height: 14px; flex: none; }
.sevt-card__go { opacity: .65; }
.sevt-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1px; min-width: 0; }

/* «Вже триває» — стан для багатоденної події, що вже почалась. Без
   нього дата-квадрат у минулому («1 серп» 14 серпня) читається як баг
   вибірки, хоча такі події лишені свідомо (ТЗ Аналітика §5.1). */
.sevt-card__now {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 30px;
    background: rgba(215,154,63,.18); color: #8A6420;
}
.sevt-card__now i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ochre); display: block;
}
.sevt-card--now .sevt-card__date {
    background: rgba(215,154,63,.16); border-color: rgba(215,154,63,.4);
}

/* Календарні дії RECRE-205 у щільній картці кабінету — трохи менший
   шрифт за афішу, роздільник той самий пунктир */
.sevt-card__actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--dash);
}
.sevt-card__actions .evcal__btn { font-size: 12px; padding: 7px 13px; }
@media (max-width: 680px) {
    .sevt-card__actions .evcal__btn { flex: 1; justify-content: center; }
}

/* «Показати всі N подій» — наявний примітив .acct-list-more як є,
   лише центрування і зняття підкреслення (тут це <a>, не <button>) */
.sevt-more-wrap { display: flex; justify-content: center; }
.sevt-more-wrap .acct-list-more { text-decoration: none; }

/* ============================================================
   RECRE-285 фаза A: нюдж пропозиції акаунта, рівень 3 (модалка).
   Тригер 1 «спроба зберегти парк» — ЄДИНИЙ випадок модалки в
   усій механіці нюджів: дію ініціював користувач і вона технічно
   неможлива без акаунта (POST /api/parks/{slug}/like/ →
   IsAuthenticated, apps/api/views.py).
   Родина .snu-* зарезервована під рівні 2 (--sheet) і 1
   (--inline) фаз B/C — не перейменовувати.
   НЕ .rm-nudge (зайнято RECRE-205) і НЕ .obm (онбординг).
   ============================================================ */

/* z-index 75: понад .modal-overlay(60), .park-overlay(40),
   .survey-popup(70); ПІД .obm-overlay(80) — навчання передує
   пропозиції (ТЗ Аналітика §5.5 п.1) — і під лайтбоксом(90). */
.snu-overlay {
    position: fixed; inset: 0; z-index: 75;
    background: rgba(36, 52, 38, 0.55);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 12px;
    /* env() сьогодні = 0px: viewport-fit=cover у base.html не виставлено
       (окремий тікет, рішення координатора 2026-08-14) — calc тихо
       деградує до 12px і лишається forward-compatible, як .env-sheet /
       .rm-nudge. Фолбек 0px другим аргументом обов'язковий. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    animation: snuFade .25s ease;
}
@keyframes snuFade { from { opacity: 0; } to { opacity: 1; } }

.snu {
    position: relative;
    width: min(420px, 100%);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 20px;
    box-shadow: 0 40px 90px -30px rgba(36,52,38,0.7);
    padding: 22px 18px 16px;
    font-family: 'Mulish', system-ui, sans-serif;
    color: var(--ink);
    animation: snuRise .28s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes snuRise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
/* контейнер отримує програмний фокус — власна обводка не потрібна,
   видимий фокус живе на інтерактивних елементах усередині */
.snu:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
    .snu, .snu-overlay { animation: none; }
}

/* Кнопка закриття: 44×44 хіт-бокс НА ВСІХ в'юпортах (критерій №13
   вимірюється QA без прив'язки до типу вказівника). Має власне
   видиме тло-коло — «ніколи не маскується під фон». */
.snu__close {
    position: absolute; top: 8px; right: 8px;
    width: 44px; height: 44px; box-sizing: border-box; padding: 0;
    border-radius: 50%;
    background: var(--bg-2); border: 1px solid var(--border);
    color: var(--muted); cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s ease, color .15s ease;
}
/* pointer-events:none на іконці — системно з .obm__close/.mpp-popup__close */
.snu__close i, .snu__close svg { width: 18px; height: 18px; pointer-events: none; }
.snu__close:hover { background: var(--border); color: var(--green); }
.snu__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.45); }

/* Орб — у кольорах САМОЇ кнопки «Зберегти парк» (.pdc-btn--like:
   bg-2 + terracotta), а не в зелено-шавлієвих .obm__icon: візуальний
   місток «це про кнопку, яку я щойно натиснув». */
.snu__icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--bg-2); color: var(--terracotta);
    display: grid; place-items: center;
    margin-bottom: 12px;
}
.snu__icon i, .snu__icon svg { width: 22px; height: 22px; fill: currentColor; }

.snu__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px; font-weight: 600; line-height: 1.15;
    color: var(--green);
    margin: 0 0 10px;
    padding-right: 36px;             /* коридор під × у першому рядку */
}
.snu__text { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.snu__text b { color: var(--ink-2); font-weight: 700; }

/* Пігулка з назвою парку: підтверджує, ЩО саме зберігається — знімає
   страх «загублю парк, поки реєструюсь». Один рядок з еліпсисом:
   назви бувають довгі («Парк культури і відпочинку "Перемога"»). */
.snu__park {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; margin: 0 0 14px;
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.snu__park i, .snu__park svg { width: 15px; height: 15px; color: var(--terracotta); fill: currentColor; }
.snu__park span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ----- Єдина основна дія ----- */
.snu__form { margin: 0; }
.snu__cta {
    width: 100%; min-height: 52px; box-sizing: border-box;
    font-family: inherit; font-weight: 700; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 20px; border-radius: 30px; cursor: pointer; text-decoration: none;
    /* Брендинг Google (RECRE-101): світла кнопка, кольорове G, темний
       текст. Перефарбовувати в зелений НЕ можна — «первинність» дає
       розмір + самотність + тінь, а не колір. */
    background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--border-2);
    box-shadow: 0 10px 22px -12px rgba(47,74,55,0.55);
    transition: background .18s, box-shadow .18s, transform .18s;
}
.snu__cta:hover { background: #fff; transform: translateY(-1px);
                  box-shadow: 0 14px 26px -12px rgba(47,74,55,0.6); }
.snu__cta:active { transform: translateY(0); }
.snu__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.5); }
.snu__cta svg { width: 19px; height: 19px; flex: none; }

/* Фолбек GOOGLE_OAUTH_ENABLED = False */
.snu__cta--green { background: var(--green); color: var(--bg); border-color: transparent; }
.snu__cta--green:hover { background: var(--green-hover); }
.snu__cta--green i, .snu__cta--green svg { width: 18px; height: 18px; }

.snu__hint { margin: 9px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted-3); }

/* Вторинний вихід — ТЕКСТОВЕ посилання, не кнопка: рівень ваги явно
   нижчий. Власний хіт-бокс 44px по висоті. */
.snu__alt {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; margin-top: 6px;
    font-size: 13.5px; font-weight: 700; color: var(--muted);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--dash);
}
.snu__alt:hover { color: var(--green); text-decoration-color: var(--sage); }
.snu__alt:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.4); border-radius: 10px; }

/* ----- >=681px: те саме вікно по центру ----- */
@media (min-width: 681px) {
    .snu-overlay { align-items: center; padding: 24px; }
    .snu { width: min(440px, 100%); border-radius: 22px; padding: 26px 26px 20px; }
    .snu__title { font-size: 27px; }
}

/* ----- RECRE-319 (К.2, Дизайнер §1): лаконічний режим — кожен показ,
   крім першого за історію браузера. Варіант А: .snu__text/.snu__hint
   відсутні в DOM (x-if у signup_nudge.html), тут — лише менші розміри.
   .snu__close лишається 44×44 (критерій QA RECRE-285 №13 — не
   зменшувати); CTA 48px ≥ 44px-мінімуму. ----- */
.snu--compact { padding: 18px 16px 14px; }              /* було 22 18 16 */
.snu--compact .snu__icon { width: 38px; height: 38px; margin-bottom: 9px; }  /* було 46 */
.snu--compact .snu__icon i, .snu--compact .snu__icon svg { width: 18px; height: 18px; }  /* було 22 */
.snu--compact .snu__title { font-size: 21px; margin-bottom: 8px; }           /* було 25 */
.snu--compact .snu__park { margin-bottom: 12px; }
.snu--compact .snu__cta { min-height: 48px; padding: 12px 18px; }            /* було 52 */
.snu--compact .snu__alt { margin-top: 4px; min-height: 40px; }
@media (min-width: 681px) {
    .snu--compact { padding: 20px 20px 16px; }
    .snu--compact .snu__title { font-size: 22px; }
}

/* ============================================================
   RECRE-270-А · Блок «Перегляди ваших точок» у /business/
   ТЗ: Designer/TOR/TOR-poi-view-stats-business.md;
   мокап: design_mockups/poi-view-stats-business/stats-block.html
   Структурний рецепт узятий з внутрішньої аналітики RECRE-271
   (числа → лінійний графік → таблиця), але БЕЗ її палітри: синього
   #417690 django-admin у публічній частині не існує. Усі кольори —
   наявні токени main.css.
   ============================================================ */

.bstat {
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 18px; padding: 18px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,.45);
}
.bstat__sub {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--muted-2); margin: -4px 0 16px;
}
.bstat__sub i, .bstat__sub svg { width: 14px; height: 14px; flex: none; }

/* ---- KPI: два великі числа ---- */
.bstat-kpis { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.bstat-kpi {
    background: var(--bg-2); border: 1px solid var(--border-3);
    border-radius: 16px; padding: 14px 16px;
}
.bstat-kpi__label {
    display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--muted-3);
}
/* Рівень Ч-1 «Display» за TOR-unified-number-typography — той самий,
   що .hero-stats .num і .env-weather__temp */
.bstat-kpi__value {
    display: block; font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 38px; font-weight: 700; line-height: 1; color: var(--green);
    font-variant-numeric: lining-nums proportional-nums;
}
/* Дельта: колір + ІКОНКА — напрямок читається без сприйняття кольору */
.bstat-delta {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
    font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 30px;
    font-variant-numeric: tabular-nums;
}
.bstat-delta--up { background: var(--chip-amenity-bg); color: var(--chip-amenity-fg); }
/* Спад — теракота, НЕ сигнальний червоний: це інформаційний показник,
   а не аварія; червоний у палітрі зарезервований під danger-дії */
.bstat-delta--down { background: rgba(193,109,69,.14); color: #94512F; }
.bstat-delta--flat {
    background: var(--surface-2); color: var(--muted-2);
    border: 1px solid var(--border-2);
}
.bstat-delta i, .bstat-delta svg { width: 13px; height: 13px; flex: none; }

/* ---- Графік ---- */
.bstat-chart {
    margin-top: 16px; background: var(--surface-2);
    border: 1px solid var(--border-3); border-radius: 16px; padding: 14px;
}
.bstat-chart__cap {
    margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--muted-3);
}
.bstat-chart__canvas { position: relative; height: 180px; }
.bstat-chart__fallback { margin: 8px 0 0; font-size: 12px; color: var(--muted-2); }
.bstat-chart.is-ready .bstat-chart__fallback { display: none; }

/* ---- Список «За точками» ---- */
.bstat-list { margin-top: 18px; }
.bstat-list__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.bstat-list__title {
    margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--muted-3);
}
.bstat-row {
    display: grid; grid-template-columns: 1fr 74px 74px; gap: 10px;
    align-items: center; padding: 10px 12px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--border-3);
    margin-bottom: 8px;
}
.bstat-row--head {
    background: transparent; border: none; padding: 0 12px 2px; margin-bottom: 4px;
}
.bstat-row--head span {
    font-size: 10.5px; font-weight: 800; letter-spacing: .7px;
    text-transform: uppercase; color: var(--muted-3);
}
.bstat-row--head span:not(:first-child) { text-align: right; }
.bstat-row__poi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bstat-row__poi-text { min-width: 0; }
/* Той самий колірний словник --poi-*, що на карті й у .bcab-poi__icon:
   власник упізнає свою точку за кольором */
.bstat-row__icon {
    flex: none; width: 32px; height: 32px; border-radius: 10px;
    background: var(--bg-2); display: flex; align-items: center;
    justify-content: center; color: var(--poi-cafe);
}
.bstat-row__icon i, .bstat-row__icon svg { width: 16px; height: 16px; }
.bstat-row__icon--restaurant { color: var(--poi-restaurant); }
.bstat-row__icon--sports { color: var(--poi-sports); }
.bstat-row__name {
    display: block; font-weight: 700; font-size: 13.5px; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bstat-row__cat { font-size: 11.5px; color: var(--muted-2); }
/* Рівень Ч-2 «Data»: Mulish 800 + tabular-nums — колонка рівна на
   7 vs 142 vs 1034 */
.bstat-row__num {
    text-align: right; font-weight: 800; font-size: 14px; color: var(--green);
    font-variant-numeric: tabular-nums;
}
.bstat-row__num--zero { color: var(--muted-3); font-weight: 700; }
/* Мікро-смужка рангу — дешева альтернатива графіку на кожну точку */
.bstat-row__bar {
    display: block; height: 3px; border-radius: 3px;
    background: var(--border-2); margin-top: 5px; overflow: hidden;
}
.bstat-row__bar i {
    display: block; height: 100%; background: var(--sage); border-radius: 3px;
}
.bstat-more-wrap { display: flex; justify-content: center; }

/* ---- Пояснювальний рядок метрики — постійний, не тултип ---- */
.bstat-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--dash);
    font-size: 12px; line-height: 1.55; color: var(--muted-2);
}
.bstat-note i, .bstat-note svg {
    width: 14px; height: 14px; margin-top: 2px; flex: none; color: var(--muted-3);
}
/* Порожній стан «даних ще немає» — компактніший за стандартний */
.bstat-empty--nodata { margin-top: 14px; padding: 26px 18px; }

/* ---- ≤680px: рядок перебудовується в картку з підписами,
        горизонтального скролу НЕМАЄ ---- */
@media (max-width: 680px) {
    .bstat-kpis { grid-template-columns: 1fr; }
    .bstat-chart__canvas { height: 150px; }
    .bstat-row--head { display: none; }
    .bstat-row { grid-template-columns: 1fr; gap: 8px; }
    .bstat-row__num { text-align: left; display: flex; align-items: baseline; gap: 8px; }
    .bstat-row__num::before {
        content: attr(data-label); font-size: 11px; font-weight: 800;
        letter-spacing: .6px; text-transform: uppercase; color: var(--muted-3);
    }
    .bstat-row__bar { flex: 1; margin-top: 0; }
}

/* ============================================================
   RECRE-287 (TOR-custom-location-sharing, ТЗ 4): шеринг власної
   локації на картці кабінету — тумблер у .mloc-item__actions
   (share-2, активний стан — шавлієва заливка) + рядок активного
   шерингу .mloc-share (readonly-лінк, «Скопіювати», «Нове
   посилання»). Рядок — повноширинний під flex-row картки
   (flex-wrap + basis 100%), той самий прийом, що мобільний
   брейкпоінт .mloc-item.
   ============================================================ */
.mloc-item { flex-wrap: wrap; }
.mloc-item__btn--share { color: var(--green); }
.mloc-item__btn--share:hover { background: var(--bg-2); }
.mloc-item__btn--share.is-on {
    background: var(--green); border-color: var(--green);
    color: var(--bg);
}
.mloc-item__btn--share.is-on:hover { background: var(--green-hover); }
.mloc-item__btn--share:disabled { opacity: .6; cursor: default; }
.mloc-share {
    flex-basis: 100%; display: flex; gap: 8px; align-items: center;
    padding: 8px 10px; border-radius: 12px;
    background: var(--surface-2); border: 1px dashed var(--border);
}
.mloc-share__url {
    flex: 1; min-width: 0; border: none; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--muted-2); text-overflow: ellipsis;
}
.mloc-share__url:focus { outline: none; color: var(--green); }
.mloc-share__btn {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 10px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface);
    font: inherit; font-size: 12px; font-weight: 700;
    color: var(--green); cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}
.mloc-share__btn:hover { background: var(--bg-2); }
.mloc-share__btn:disabled { opacity: .6; cursor: default; }
.mloc-share__btn i, .mloc-share__btn svg { width: 13px; height: 13px; flex: none; }
.mloc-share__btn:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}
@media (max-width: 680px) {
    .mloc-share { flex-wrap: wrap; }
    .mloc-share__url { flex-basis: 100%; }
}

/* ============================================================
   RECRE-317 (TOR-park-visit-checklist Д.6): шеринг чекліста «Хочу
   відвідати» на /profile/ — тумблер у .acct-group__head (ті самі
   класи .mloc-item__btn--share/.mloc-share, що шеринг локацій) +
   рядок періоду .chk-period: два опціональні date-поля «з/до» і
   кнопка збереження. Рядок видимий незалежно від стану шерингу
   (Д.6 п.4 — період можна задати й без публічного лінка).
   ============================================================ */
.acct-group__head .mloc-item__btn--share { margin-left: auto; }
.mloc-share + .chk-period,
.mloc-share { margin-bottom: 10px; }
.chk-period {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 12px; margin-bottom: 10px;
    background: var(--surface-2); border: 1px dashed var(--border);
}
.chk-period__label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--muted-2);
}
.chk-period__label i, .chk-period__label svg {
    width: 14px; height: 14px; flex: none; color: var(--green);
}
.chk-period__field {
    flex-direction: row; align-items: center; gap: 6px;
}
.chk-period__field label {
    font-size: 12px; font-weight: 600; color: var(--muted-2);
    margin: 0;
}
.chk-period__field input[type="date"] {
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); padding: 6px 8px;
    font: inherit; font-size: 12.5px; color: var(--ink);
}
.chk-period__field input[type="date"]:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}

/* ============================================================
   RECRE-318 (TOR-park-visit-checklist Р.2-Р.5; Design TOR
   TOR-checklist-page): чекліст — окрема сторінка /profile/checklist/
   + тизер на /profile/. Чотири нові родини класів (§1 Design TOR),
   решта сторінки — наявні прод-класи (.acct-group, .acct-like,
   .mloc-share, .chk-period, .acct-list-more, .acct-empty) без змін.
   ============================================================ */

/* Back-link «До кабінету» над заголовком /profile/checklist/ —
   той самий тихий рівень, що .acct-list-more, але текстовий */
.chkp-back {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
    font-size: 13px; font-weight: 700; color: var(--muted);
    text-decoration: none;
}
.chkp-back:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.chkp-back i, .chkp-back svg { width: 15px; height: 15px; }

/* Компактний перемикач «Хочу відвідати ⇄ Відвідано» в рядку списку
   (Р.3 п.6) — з RECRE-326 (Р3.4) ЄДИНИЙ контрол стану ParkVisitStatus
   у проєкті (повнорозмірний .pdc-visit-toggle зі сторінки парку/карти
   видалено). Іконки-сегменти flag/check без текстових підписів — не
   вміщаються в рядок .acct-like поруч із мініатюрою і кнопкою
   «прибрати»; значення пояснює постійна легенда .chkp-legend над
   групами (RECRE-327 Р3.10), підписи лишаються і в title/aria-label.
   Висота 38px — ритм .acct-like__remove (прецедент щільних рядків
   кабінету). Активний сегмент — зелений. */
.chkp-row-toggle {
    flex: none; margin-left: auto;
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--border); border-radius: 19px;
    background: var(--bg-2); overflow: hidden;
}
.chkp-row-toggle__opt {
    width: 42px; height: 38px; padding: 0; border: none;
    background: transparent; color: var(--muted); cursor: pointer;
    display: grid; place-items: center;
    transition: background .18s, color .18s;
}
.chkp-row-toggle__opt i, .chkp-row-toggle__opt svg { width: 15px; height: 15px; }
.chkp-row-toggle__opt:hover { color: var(--green); }
.chkp-row-toggle__opt:disabled { opacity: 0.6; cursor: default; }
.chkp-row-toggle__opt.is-active { background: var(--green); color: var(--bg); cursor: default; }
.chkp-row-toggle__opt:focus-visible {
    outline: none; box-shadow: inset 0 0 0 3px rgba(46,77,54,0.35);
}
/* Перемикач стоїть ПЕРЕД кнопкою «прибрати» → auto-margin лишається
   на ньому, «прибрати» втрачає свій */
.chkp-row-toggle + .acct-like__remove { margin-left: 0; }

/* Позначки періоду (Р.5): обчислювані чипи стану відносно заданого
   періоду — лише на /profile/checklist/, ніколи на публічній /c/.
   Кольори — наявна пара чипів зручностей (--rm-chip-amenity-*) для
   «встигли» і теракотовий тінт (#A85A36 — затемнення --terracotta до
   контрасту ≈5.5:1, зафіксований виняток Design TOR §8 п.7) для «не
   встигли»: пропущений період — смуток, не помилка, червоного алярму
   в палітрі немає і не заводимо. */
.chkp-badge {
    display: inline-flex; align-items: center; gap: 5px;
    align-self: flex-start; margin-top: 3px;
    padding: 3px 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700;
}
.chkp-badge i, .chkp-badge svg { width: 12px; height: 12px; flex: none; }
.chkp-badge--done { background: var(--rm-chip-amenity-bg); color: var(--rm-chip-amenity-fg); }
.chkp-badge--missed { background: rgba(193,109,69,0.14); color: #A85A36; }

/* Тизер «Мій чекліст» на /profile/ (Р.4) — замінює повну інлайн-секцію.
   Клікабельна картка-посилання цілком (як рядок .acct-like, але однією
   дією): орб + заголовок + два лічильники + стрілка переходу.
   Прецедент композиції — .acct-support (іконка + текст + дія). */
.chkt {
    display: flex; align-items: center; gap: 14px; margin-top: 28px;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 18px; padding: 16px;
    box-shadow: 0 14px 30px -26px rgba(47,74,55,0.45);
    text-decoration: none; color: inherit;
    transition: background .15s ease, box-shadow .15s ease;
}
.chkt:hover { background: var(--surface-2); box-shadow: 0 16px 32px -24px rgba(47,74,55,0.55); }
.chkt:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.4); }
.chkt__orb {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    background: var(--bg-2); color: var(--green);
    display: grid; place-items: center;
}
.chkt__orb i, .chkt__orb svg { width: 21px; height: 21px; }
.chkt__main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chkt__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 700; color: var(--green); margin: 0;
    line-height: 1.1;
}
.chkt__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.chkt__stat {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    background: var(--bg-2); border: 1px solid var(--border);
    font-size: 12px; font-weight: 700; color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}
.chkt__stat i, .chkt__stat svg { width: 13px; height: 13px; flex: none; color: var(--green); }
.chkt__stat b { color: var(--ink-2); }
/* лічильник «відвідано» — прогрес, зелений сегментний тон (узгоджений
   із .chkp-badge--done) */
.chkt__stat--visited { background: var(--rm-chip-amenity-bg); border-color: transparent; color: var(--rm-chip-amenity-fg); }
.chkt__stat--visited i, .chkt__stat--visited svg { color: var(--rm-chip-amenity-fg); }
.chkt__go {
    flex: none; margin-left: auto; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--green); display: grid; place-items: center;
}
.chkt__go i, .chkt__go svg { width: 17px; height: 17px; }
.chkt:hover .chkt__go { background: var(--bg-2); }
/* Порожній тизер (0+0): пунктир «тихого стану» + заохочення; веде
   так само на сторінку чекліста — там власний порожній стан */
.chkt--empty {
    border: 1.5px dashed var(--dash); background: transparent; box-shadow: none;
}
.chkt--empty .chkt__hint { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.chkt--empty:hover { background: var(--surface); }

@media (max-width: 680px) {
    .chkp-row-toggle__opt { width: 38px; }
    .chkt { flex-wrap: wrap; }
}

/* ============================================================
   RECRE-323/325 (TOR-park-visit-checklist «РОЗШИРЕННЯ 2»; Design TOR
   TOR-multi-checklist §1): кілька іменованих чеклістів + явне
   вимкнення шерингу. П'ять нових родин (мокап multi-checklist.css,
   блок «NEW»); секція «Мої чеклісти» — наявні .mloc-*, чипи —
   наявні .chkt__stat (тому родина .chkt лишається в CSS попри
   заміну тизера — прибирання рештків окремим тікетом).
   ============================================================ */

/* Поріг колапсу 3 для секції «Мої чеклісти» (Р2.0/Р2.7 п.3):
   модифікатор ДО наявного .acct-collapsible — ховає з 4-го елемента
   (базовий клас ховає з 6-го; обидва класи на контейнері разом дають
   поріг 3). JS-тригер accounts.js (.acct-list-more[data-collapse]) —
   БЕЗ ЗМІН, він лише перемикає .is-expanded. */
.acct-collapsible--compact3:not(.is-expanded) > :nth-child(n+4) { display: none; }
.acct-collapsible--compact3.is-expanded > :nth-child(n+4) {
    animation: acct-row-in .22s ease both;
}
@media (prefers-reduced-motion: reduce) {
    .acct-collapsible--compact3.is-expanded > :nth-child(n+4) { animation: none; }
}

/* Картка чекліста в секції «Мої чеклісти» (Р2.7) — сімейство
   .mloc-item (surface, border-2, radius 18, тінь), але замість
   фото-мініатюри — орб 46px (у чекліста немає медіа; той самий орб,
   що тизер .chkt__orb RECRE-318). Дії — наявні .mloc-item__btn
   (--edit = перейменувати інлайн, --delete = діалог). Клік по назві/
   орбу → /profile/checklists/<id>/. */
.chkl-item__orb {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    background: var(--bg-2); color: var(--green);
    display: grid; place-items: center; text-decoration: none;
}
.chkl-item__orb i, .chkl-item__orb svg { width: 21px; height: 21px; }
.chkl-item__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* Чип «Публічний» — індикатор увімкненого шерингу на картці
   (Р2.7 п.3): суцільний зелений (сигнал «це зараз видно за лінком»),
   контраст --green на --bg ≈ 8:1. Рендериться ЛИШЕ при
   share_enabled=true — «тихий нуль» для вимкненого. */
.chkl-item__share {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    background: var(--green); color: var(--bg);
    font-size: 11px; font-weight: 800; letter-spacing: .3px;
}
.chkl-item__share i, .chkl-item__share svg { width: 11px; height: 11px; flex: none; }

/* Інлайн-створення чекліста (Р2.3): пунктирна панель під шапкою
   секції (сімейство .mloc-share) — з'являється по кліку «Створити
   чекліст» (Alpine x-show), фокус одразу в полі. Enter = створити,
   Esc = скасувати. Помилка (дубль назви / ліміт із гонки) — .acct-error
   під панеллю. */
.chkl-create {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 10px; border-radius: 12px; margin-bottom: 12px;
    background: var(--surface-2); border: 1.5px dashed var(--dash);
}
.chkl-create__input {
    flex: 1; min-width: 160px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); padding: 9px 12px;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.chkl-create__input::placeholder { color: var(--muted-3); font-weight: 500; }
.chkl-create__input:focus-visible {
    outline: none; border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(126,148,102,0.25);
}
.chkl-create .acct-error { flex-basis: 100%; }

/* Інлайн-перейменування на картці (Р2.15 п.5): по кліку олівця рядок
   назви підміняється полем + Зберегти/Скасувати (той самий ритм, що
   .chkl-create; кнопки — наявні .mloc-share__btn). */
.chkl-rename { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chkl-rename .chkl-create__input {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 17px; font-weight: 700; color: var(--green);
}

/* Контрол «У чекліст» на /park/{slug}/ і /map/ (Р2.9): повний ряд
   зони дій сайдбару ПІД кнопкою збереження (з RECRE-326 — одразу під
   нею, перемикач між ними видалено) — той самий ритм-сімейство
   (radius 30, bg-2, border), зелений текст (дія організації, не
   збереження-теракота і не прогрес-перемикач). При членстві в N
   чеклістах — « · N» у підписі (той самий «тихий нуль», що лічильник
   лайків). aria-expanded + aria-controls на поповер. */
.chka { position: relative; width: 100%; }
.chka-btn {
    width: 100%; box-sizing: border-box; margin-bottom: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; font-weight: 700; font-size: 13.5px;
    border: 1px solid var(--border); border-radius: 30px;
    background: var(--bg-2); color: var(--green); cursor: pointer;
    padding: 10px 8px;
    transition: background .18s, color .18s;
}
.chka-btn:hover { background: var(--border); }
.chka-btn i, .chka-btn svg { width: 15px; height: 15px; flex: none; }
.chka-btn[aria-expanded="true"] { background: var(--green); color: var(--bg); border-color: var(--green); }
.chka-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35); }

/* RECRE-326 (Р3.3; Design TOR checklist-refinements §2.3): guest-варіант
   кнопки «У чекліст» для гостьової гілки обох поверхонь — той самий
   візуальний рецепт RECRE-319 К.4, що .pdc-btn--like.pdc-btn--guest:
   пунктир --dash + фон --surface-2 + текст --muted (QA-фолбек D2:
   6.28:1, НЕ --muted-3 з його 3.31:1), повна непрозорість, живий hover
   (--bg-2/--ink-2) як доказ клікабельності. aria/disabled НЕ чіпати —
   стан «потребує входу», не «недоступно». Клік → нюдж рівня 3 з темою
   чекліста (requestVisitAsGuest, trigger=checklist_visit). Лічильника
   « · N» у гостя немає — checklists_count персональний. */
.chka-btn--guest {
    background: var(--surface-2);
    color: var(--muted);
    border: 1px dashed var(--dash);
}
.chka-btn--guest:hover { background: var(--bg-2); color: var(--ink-2); }

/* Поповер зі списком чеклістів: картка surface під кнопкою, до 10
   рядків без прокрутки, кожен рядок — чекбокс членства ChecklistPark
   (незалежний виклик API, парк може бути в кількох чеклістах одразу).
   Закриття: клік поза, Esc, повторний клік кнопки. НЕ модалка —
   сторінку не блокує. */
.chka-pop {
    position: absolute; left: 0; right: 0; top: calc(100% - 4px);
    z-index: 50;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 16px; padding: 8px;
    box-shadow: 0 24px 50px -24px rgba(36,52,38,0.55);
}
.chka-pop__head {
    display: flex; align-items: baseline; gap: 8px;
    padding: 6px 10px 8px;
    font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--muted-3);
}
.chka-pop__count {
    margin-left: auto; font-size: 11.5px; font-weight: 700;
    letter-spacing: 0; text-transform: none;
    color: var(--muted-3); font-variant-numeric: tabular-nums;
}
.chka-pop__count--warn { color: var(--ochre); }
/* Рядок-чекбокс: label цілком клікабельний, висота ≥44px (touch) */
.chka-opt {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; box-sizing: border-box;
    padding: 5px 10px; border-radius: 10px; cursor: pointer;
    transition: background .15s ease;
}
.chka-opt:hover { background: var(--bg-2); }
.chka-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chka-opt__box {
    flex: none; width: 20px; height: 20px; box-sizing: border-box;
    border: 1.5px solid var(--border); border-radius: 6px;
    background: var(--surface-2); color: transparent;
    display: grid; place-items: center;
    transition: background .15s ease, border-color .15s ease;
}
.chka-opt__box i, .chka-opt__box svg { width: 13px; height: 13px; }
.chka-opt input:checked + .chka-opt__box {
    background: var(--green); border-color: var(--green); color: var(--bg);
}
.chka-opt input:focus-visible + .chka-opt__box {
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}
.chka-opt__name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.chka-opt__meta {
    margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700;
    color: var(--muted-3); font-variant-numeric: tabular-nums;
}
/* Футер поповера: створення нового чекліста не виходячи з парку.
   При ліміті 10 — disabled + лічильник-межа замість кнопки. */
.chka-pop__foot {
    margin-top: 6px; padding: 8px 10px 4px;
    border-top: 1.5px dashed var(--dash);
}
.chka-new {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0; border: none; background: none; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--green);
}
.chka-new:hover { text-decoration: underline; text-underline-offset: 3px; }
.chka-new i, .chka-new svg { width: 14px; height: 14px; }
.chka-new:disabled { color: var(--muted-3); cursor: default; text-decoration: none; }
.chka-pop__limit {
    margin: 4px 0 0; font-size: 11.5px; font-weight: 600; color: var(--muted-3);
}
/* Порожній поповер (0 чеклістів): підказка + інлайн-створення */
.chka-pop__hint {
    margin: 0 0 8px; padding: 2px 10px 0;
    font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.5;
}
.chka-pop .chkl-create { margin: 0 2px 2px; }

/* RECRE-325: кнопка «Припинити ділитись» — теракотовий варіант
   наявної .mloc-share__btn всередині розкритого блоку .mloc-share.
   Відкриває діалог підтвердження, НЕ викликає API напряму. */
.mloc-share__btn--off { color: var(--terracotta); }
.mloc-share__btn--off:hover { background: rgba(193,109,69,0.1); }

/* RECRE-325: фідбек після підтвердження — інлайн-нотатка на місці
   блоку .mloc-share, що щойно згорнувся. Тиха (не алярм): пунктир,
   muted-текст, теракотова іконка. З'являється fade-ом ~200мс, зникає
   при наступній дії або через ~6с (accounts.js). */
.share-off-note {
    display: flex; align-items: center; gap: 8px;
    flex-basis: 100%; box-sizing: border-box;
    padding: 10px 12px; border-radius: 12px; margin-bottom: 10px;
    border: 1.5px dashed var(--dash); background: transparent;
    font-size: 13px; font-weight: 600; color: var(--muted);
    animation: share-off-in .2s ease both;
}
.share-off-note i, .share-off-note svg {
    width: 15px; height: 15px; flex: none; color: var(--terracotta);
}
@keyframes share-off-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .share-off-note { animation: none; }
}

@media (max-width: 560px) {
    .chka-opt { min-height: 48px; }
}

/* ============================================================
   RECRE-327 (TOR-park-visit-checklist «РОЗШИРЕННЯ 3», Р3.8-Р3.11;
   Design TOR TOR-checklist-page-refinements §1): UX-правки сторінки
   чекліста /profile/checklists/<id>/ — три нові родини (мокап
   checklist-refinements.css, блок «NEW»); період у рядках «Хочу
   відвідати» — наявний .acct-like__date без нового CSS, «тихий нуль»
   лічильника групи — умова в шаблоні.
   ============================================================ */

/* Постійна текстова легенда над групами (Р3.10) — пояснює іконки
   flag/check перемикача .chkp-row-toggle БЕЗ ховера (мобільний його не
   має). Рендериться ОДИН раз, між блоком шерингу і першою групою; коли
   обидві групи порожні — не рендериться. Іконки-мініатюри повторюють
   неактивний сегмент перемикача (bg-2/border/muted), зелене
   підсвічування пояснене текстом; іконки декоративні (aria-hidden). */
.chkp-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
    margin: 22px 0 0;
    font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.chkp-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.chkp-legend__ic {
    flex: none; width: 24px; height: 24px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--bg-2); color: var(--muted);
    display: grid; place-items: center;
}
.chkp-legend__ic i, .chkp-legend__ic svg { width: 13px; height: 13px; }
.chkp-legend__hint {
    flex-basis: 100%; font-weight: 600; color: var(--muted-3);
    line-height: 1.5;
}

/* Дата відвідування в рядку групи «Відвідано» (Р3.8) — кнопка-текст
   «Побували {дата}» з олівцем; клік підміняє на нативний
   <input type="date"> (autosave на change/blur, Esc = скасувати,
   max = сьогодні, accounts.js::checklistRow). Той самий тихий рівень,
   що .acct-like__date, але інтерактивний: hover → зелений +
   підкреслення значення. Стан visited_at=NULL — та сама кнопка з
   текстом «Додати дату відвідування» (affordance редагування
   лишається досяжним, дата вводиться заднім числом). */
.chkp-vdate {
    display: inline-flex; align-items: center; gap: 5px;
    align-self: flex-start;
    margin: 0; padding: 2px 0; border: none; background: none;
    cursor: pointer; text-align: left;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--muted-3);
    transition: color .15s ease;
}
.chkp-vdate:hover { color: var(--green); }
.chkp-vdate:hover .chkp-vdate__val { text-decoration: underline; text-underline-offset: 2px; }
.chkp-vdate i, .chkp-vdate svg { width: 12px; height: 12px; flex: none; }
.chkp-vdate:focus-visible {
    outline: none; border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}
.chkp-vdate__input {
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2); padding: 3px 6px;
    font: inherit; font-size: 12px; color: var(--ink); max-width: 160px;
}
.chkp-vdate__input:focus-visible {
    outline: none; border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(126,148,102,0.25);
}

/* Undo-нотатка після видалення рядка (Р3.11) — з'являється НА МІСЦІ
   прибраного рядка в потоці .acct-likes (НЕ глобальний toast:
   прецеденту toast-системи в проєкті немає — те саме рішення, що
   .share-off-note в RECRE-325, її «тиху» мову й повторюємо: пунктир +
   muted + теракотова іконка; radius 18 = ритм рядка .acct-like).
   Кнопка дії — наявна .mloc-share__btn (без нового класу кнопки).
   role="status"; fade-in — наявна share-off-in (~200мс); вікно ~6с,
   ховер/фокус ставить таймер на паузу (accounts.js::checklistRow). */
.chkp-undo {
    display: flex; align-items: center; gap: 10px;
    box-sizing: border-box; padding: 13px 16px;
    border: 1.5px dashed var(--dash); border-radius: 18px;
    background: var(--surface-2);
    font-size: 13px; font-weight: 600; color: var(--muted);
    animation: share-off-in .2s ease both;
}
.chkp-undo > i, .chkp-undo > svg {
    width: 15px; height: 15px; flex: none; color: var(--terracotta);
}
.chkp-undo .mloc-share__btn { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
    .chkp-undo { animation: none; }
}

@media (max-width: 680px) {
    /* Touch-ціль дати: компактний рядок на десктопі, але на мобільному
       (без ховера, палець) — мін. висота 40px; свідомий компроміс
       щільного рядка (прецедент 38px-контролів кабінету), основна
       страховка від misclick — undo-нотатка і безпечність самої дії */
    .chkp-vdate { min-height: 40px; }
    .chkp-undo { flex-wrap: wrap; }
    .chkp-undo .mloc-share__btn { padding: 10px 14px; }
}

/* ============================================================
   RECRE-334 v2 (Design TOR TOR-checklist-row-mobile, Варіант А):
   мобільна картка чекліста ≤560px у мові каталожної .card-arch —
   hero-фото на всю ширину зверху з фірмовою аркою (рішення
   продакт-власника, ітерація 2; v1 flex-wrap із мініатюрою 92×68
   замінено цим блоком). Скоуп .acct-like--chk — ЛИШЕ рядки
   чекліста (acct_visit_row.html); збережені парки /profile/ і
   десктоп ≥561px — без змін. Touch-цілі ряду дій 48×42 і 42×42 —
   зафіксований v1-компроміс (гайдлайн ≥44px vs 38px-ритм
   контролів кабінету), зазор між цілями гарантований
   рознесенням по протилежних краях картки. */

/* Бейдж «Ще без фото» живе в розмітці завжди (шаблонних умов по
   в'юпорту немає), але потрібен лише мобільному hero — на
   десктопній мініатюрі 92×68 не вміщається; специфічність
   3 класи > .rm-ph--compact .rm-ph__badge */
.acct-like--chk .acct-like__ph .rm-ph__badge { display: none; }

@media (max-width: 560px) {
    /* Картка = мова .card-arch (main.css ~535): верхні кути 22px,
       тінь каталожної картки; спільний падінг 12px знято — фото
       має лягати впритул до країв, кожен ряд несе власні відступи;
       overflow: hidden кліпає верхні кути hero під радіус картки */
    .acct-like--chk {
        flex-wrap: wrap;
        gap: 0;
        padding: 0;
        border-radius: 22px 22px 18px 18px;
        overflow: hidden;
        box-shadow: 0 16px 34px -28px rgba(47,74,55,0.5);
    }
    /* Hero-фото: вся ширина, 122px (нижче каталожних 172px — це
       список, не вітрина); сейдж-градієнт .card-photo — фон за
       аркою і на час завантаження img */
    .acct-like--chk .acct-like__media {
        width: 100%;
        height: 122px;
        border-radius: 0;
        background: linear-gradient(135deg, var(--sage-light), var(--sage));
    }
    /* Фірмова арка знизу — на img/заглушці, НЕ на контейнері:
       кути за аркою показують градієнт (той самий прийом, що
       .card-photo img з радіусом 0 0 70px 70px; тут 56px — під
       нижчий 122px hero) */
    .acct-like--chk .acct-like__media img,
    .acct-like--chk .acct-like__ph {
        border-radius: 0 0 56px 56px;
    }
    /* Заглушка в hero показує бейдж; позицію (нижній лівий кут,
       10px/10px) уже дає наявний .rm-ph--compact .rm-ph__badge */
    .acct-like--chk .acct-like__ph .rm-ph__badge { display: inline-flex; }
    /* Тіло: текст на всю ширину картки, ліва лінія 16px */
    .acct-like--chk .acct-like__main {
        flex-basis: 100%;
        padding: 11px 16px 4px;
    }
    /* Назва: 21px (hero дає простір, +1px до бази — як у
       затвердженому мокапі), до 2 рядків, ellipsis лише в кінці
       другого (перекриває nowrap базового .acct-like__name) */
    .acct-like--chk .acct-like__name {
        font-size: 21px;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        line-height: 1.15;
    }
    /* Ряд дій: тумблер по лівій лінії тексту (16px), «прибрати» —
       до правого краю (margin-left: auto перекриває базове
       .chkp-row-toggle + .acct-like__remove { margin-left: 0 } —
       специфічність вища, оголошення пізніше). border-radius 21px —
       піл-форма під сегменти 42px (базові 19px — під 38px) */
    .acct-like--chk .chkp-row-toggle {
        margin: 10px 0 13px 16px;
        border-radius: 21px;
    }
    .acct-like--chk .chkp-row-toggle__opt { width: 48px; height: 42px; }
    .acct-like--chk .acct-like__remove {
        margin: 10px 12px 13px auto;
        width: 42px;
        height: 42px;
    }
}

/* =====================================================================
   RECRE-320: маячок власного місцеположення (user-location.js)
   Кнопка-контрол на обох картах (/map/ bottomright над зумом;
   Атлас topright) + пульсуюча точка маячка у власному pane rm-userloc
   (z-index 660 — поверх кластерів markerPane 600, під попапами 700).
   Вигляд кнопки — синхронно з .pdm-zoom button (той самий boho-стиль).
   ===================================================================== */
.rm-locate.leaflet-bar {
    border: none;               /* стилі свої, не leaflet-bar дефолт */
    box-shadow: none;
    background: transparent;
}
.rm-locate__btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: rgba(251,245,233,0.95);
    border: 1px solid var(--border);
    color: var(--green);
    cursor: pointer;
    box-shadow: 0 8px 18px -12px rgba(47,74,55,0.5);
    transition: background .18s, color .18s;
}
.rm-locate__btn i, .rm-locate__btn svg {
    width: 16px; height: 16px; flex: none;
}
.rm-locate__btn:hover { background: #FFFDF8; }
.rm-locate__btn:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(126,148,102,0.35);
}
/* Стеження активне: заливка зеленим */
.rm-locate__btn.is-active {
    background: var(--green); border-color: var(--green);
    color: #FBF5E9;
}
.rm-locate__btn.is-active:hover { background: var(--green-hover); }
/* Чекаємо перший фікс: м'яка пульсація іконки */
.rm-locate__btn.is-waiting i, .rm-locate__btn.is-waiting svg {
    animation: rm-locate-wait 1.1s ease-in-out infinite;
}
@keyframes rm-locate-wait {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
/* Дозвіл відхилено / API недоступний: приглушений стан, підказка в title */
.rm-locate__btn.is-denied { color: var(--muted-3); }

/* Маячок: терракотова точка з білою обводкою (контрастна і на зелених
   полігонах парків, і на бежевих тайлах Voyager) + пульс-кільце */
.rm-userloc-divicon { background: none; border: none; }
.rm-userloc-dot {
    position: relative;
    display: block; width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--terracotta);
    border: 3px solid #FFFDF8;
    box-shadow: 0 1px 6px rgba(47,74,55,0.45);
}
.rm-userloc-dot::after {
    content: "";
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--terracotta);
    animation: rm-userloc-pulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes rm-userloc-pulse {
    0%   { transform: scale(1);   opacity: 0.75; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .rm-userloc-dot::after,
    .rm-locate__btn.is-waiting i, .rm-locate__btn.is-waiting svg {
        animation: none;
    }
}