/* ============================================================
   RECRE-420 — ЗОНА ВИДИМОСТІ: ДЕЛЬТА СТИЛІВ (кадр + картка)
   Дизайнер, 2026-08-30. ТЗ: Designer/TOR/TOR-recre420-viewshed-framing.md

   Перенесено з design_mockups/viewshed-framing/viewshed.css БЕЗ ЗМІН
   (Розробник, RECRE-420): змінні тут із самого початку — ПРОДАКШН-назви
   (--green, --surface, --border…) з :root static/css/main.css, тому
   те, що видно в мокапі, — те й у бою. Підключений там само, де
   atlas.css: park_detail.html і map.html — обидві поверхні Атласу.

   Наприкінці файлу — розділ 8, дописаний Розробником: чип «межа
   розрахунку» на колі, який дизайн-ТЗ §10 свідомо лишило на розсуд
   реалізації (L.marker з divIcon проти L.tooltip).

   СКЛАД:
   1. Токени шару
   2. Стан полотна .is-viewshed (притлумлення схеми парку)
   3. Пілюля режиму .vs-pill (банер «інший масштаб»)
   4. Блок «Зона видимості» в картці POI (.vs-block)
   5. Свотч легенди / чипа (.vs-swatch) — fidelity за TOR-legend-swatch
   6. Мобільна поверхня
   7. prefers-reduced-motion
   8. Чип «межа розрахунку · N км» (Розробник)
   9. Прев'ю блоку в каруселі каталогу (Розробник, RECRE-473)
   ============================================================ */

/* ---------- 1. Токени шару ---------------------------------- */
:root {
    /* Акцент = колір категорії «Точка огляду» з довідника
       (apps/pois/reference_data.py: viewpoint, #2F7A63). Нового
       кольору в палітру НЕ вводимо. */
    --vs-accent:      #2F7A63;
    --vs-accent-ink:  #24594A;
    /* Заливка ВИДИМОЇ зони — ледь помітний підсвіт, не «фарба» */
    --vs-visible:     rgba(47, 122, 99, 0.10);
    /* «Тінь рельєфу» — те, що НЕ видно. Головний носій сенсу:
       затемнюємо невидиме, а не заливаємо видиме (див. ТЗ §3.1) */
    --vs-shadow:      rgba(46, 36, 25, 0.38);
    /* Той самий шар поверх СУПУТНИКА (RECRE-385): темне на темному
       не читається світлим контуром — контур світлішає, вуаль глибшає */
    --vs-shadow-sat:  rgba(10, 16, 12, 0.52);
    --vs-accent-sat:  #7FD8BA;
    /* Межа розрахунку (пунктирне коло радіуса) */
    --vs-ring:        #6B5D49;
}

/* ---------- 2. Полотно в режимі зони видимості --------------- */
/* Клас ставиться на КОНТЕЙНЕР карти Атласу (той самий вузол, що вже
   отримує .is-route-focus у RECRE-418) — park-mini-map.js. */

/* Піни РОІ, крім обраної точки огляду, і маркери подій ідуть з очей:
   на z11–12 вони перетворюються на кашу з кластерів рівно над зоною.
   visibility, а не display: Leaflet лишає вузли живими, і повернення
   в кадр парку не потребує перерендеру. */
.pdm-map .is-viewshed .rm-poi-marker,
.pdm-map .is-viewshed .rm-cluster,
.pdm-map .is-viewshed .rm-event-marker {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
}
.pdm-map .is-viewshed .rm-poi-marker.is-observer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Легенда «Шари» на час режиму: рядки лишаються на місці (нічого не
   стрибає), але гасяться й не приймають кліків — керувати схемою
   парку, якої в кадрі немає, безглуздо. */
/* УВАГА (Розробник): у мокапі легенда зветься .pdm-legend з рядками
   .pdm-lrow/.pdm-srow, у бою це .pdm-side з рядками .pdm-srow (і
   секціями .pdm-side__group/.pdm-side__sep). Селектори мокапу лишені
   як є — вони нічому не шкодять і зберігають файл звіряним із
   дизайн-ТЗ; бойові дописані поруч, а не замість. */
.pdm-legend.is-viewshed .pdm-lrow,
.pdm-legend.is-viewshed .pdm-srow,
.pdm-side.is-viewshed .pdm-srow,
.pdm-side.is-viewshed .pdm-routes,
.pdm-side.is-viewshed .pdm-side__sep {
    opacity: .42;
    pointer-events: none;
}
.pdm-legend .vs-legend-note,
.pdm-side .vs-legend-note {
    display: none;
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border-3);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
}
.pdm-legend.is-viewshed .vs-legend-note,
.pdm-side.is-viewshed .vs-legend-note { display: block; }
.pdm-legend .vs-legend-note b,
.pdm-side .vs-legend-note b { color: var(--vs-accent-ink); }
/* Згорнута в рейку 44px панель (RECRE-370, .is-rail) примітку не
   показує: там немає ширини під текст, і вона розсунула б рейку */
.pdm-side.is-rail .vs-legend-note { display: none !important; }

/* ---------- 3. Пілюля режиму -------------------------------- */
/* Верх-центр полотна — єдиний вільний кут Атласу (ліво-верх .pdm-zoom,
   право-верх — стовпчик «Моє місцеположення» / .pdm-basemap / .pdm-fs,
   низ-ліво атрибуція + .rt-focus, низ-право .pdm-fullmap лише на
   /park/{slug}/). Це БАНЕР РЕЖИМУ, тому центр і не ховається.
   RECRE-447: низ-ліво кут — .rt-focus підняли над атрибуцією
   (route-card.css), .vs-pill із взаємовиключним маршрутом не
   перетинається (вибір одного знімає інший), тож сюди не заходить.

   RECRE-475: «верх-центр вільний» справджувалось лише на широкому
   полотні. Стеля була calc(100% - 20px) — тобто на вузькому Атласі
   пілюля розпливалась майже на всю ширину і лягала ПОВЕРХ обох
   стовпчиків кнопок (заміряно на 375px у повноекранному режимі:
   .pdm-zoom 32×53, .rm-locate 32×32 — обидві кнопки зникали під нею
   цілком). Стеля тепер симетрично віднімає ЖОЛОБИ стовпчиків
   (--atlas-ctl-*, atlas.css) — max() з обох боків, бо пілюля лишається
   центрованою по полотну, і звужуватись вона мусить від того боку,
   який тісніший. 430px лишається як було: на широкому полотні
   вираз у нього ж і впирається, тож десктоп не змінюється. */
.vs-pill {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    /* RECRE-475: у ОДИН рядок — і це принципово, а не косметика.
       Правий стовпчик Атласу має три поверхи (.rm-locate top 12,
       .pdm-basemap top 52, .pdm-fs top 92), і жолоб --atlas-ctl-r
       міряний по НАЙШИРШОМУ з тих, до чиєго поверху пілюля дістає.
       Однорядкова пілюля (~55px, тобто 10..65) дістає лише до
       .pdm-basemap — на неї жолоб і розрахований. Варто пілюлі
       переноситись і підрости до ~95px, як вона дотягується до
       .pdm-fs, який ШИРШИЙ за .pdm-basemap, і нахлест повертається
       (заміряно 21×13 px на 1440px у не-повноекранному Атласі).
       Дозволити перенос можна лише там, де ВСІ кнопки стовпчика —
       кружечки 32px (≤680px, правила .pdm-basemap/.pdm-fs): тоді
       жолоб 52px покриває будь-який поверх, хоч би якою високою
       стала пілюля. Саме тому wrap живе в @media ≤680px нижче. */
    flex-wrap: nowrap;
    gap: 10px;
    max-width: min(430px, calc(100%
        - 2 * max(var(--atlas-ctl-l, 52px), var(--atlas-ctl-r, 52px))));
    padding: 7px 8px 7px 12px;
    background: rgba(251, 245, 233, 0.95);
    border: 1px solid var(--border);
    border-radius: 30px;
    box-shadow: 0 12px 26px -16px rgba(47, 74, 55, 0.55);
    backdrop-filter: blur(4px);
}
.vs-pill__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--vs-visible);
    color: var(--vs-accent-ink);
}
.vs-pill__icon svg, .vs-pill__icon i { width: 13px; height: 13px; }
/* RECRE-475: flex-basis 140px — це поріг, на якому кнопка виходу
   переноситься на другий рядок (див. flex-wrap у .vs-pill). Нижче
   ~140px назва точки перестає читатись узагалі, тому саме тут вигідніше
   віддати кнопці окремий рядок, ніж далі стискати текст. */
.vs-pill__text { flex: 1 1 140px; min-width: 0; line-height: 1.25; }
.vs-pill__title {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--green);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* RECRE-481: рядок чисел — ЄДИНИЙ із трьох, який лишався без клапана
   переповнення. Сусіди (.vs-pill__title вище, .vs-pill__legend нижче)
   мають overflow:hidden + ellipsis, а тут стояв самий лише nowrap:
   .vs-pill__text — flex-елемент з min-width:0, тобто стискається до
   ширини пілюлі, а незламний рядок усередині нього виїжджав ЗА бордюр
   (заміряно на 375px, «Сколівські Бескиди», точка «Батинець»:
   scrollWidth 253px проти clientWidth 223px — 30px тексту фізично поза
   скругленою рамкою; сама .vs-pill не має overflow, тож нічого не
   кліпало). Ellipsis тут — страхувальний клапан для ширин, де пілюлі
   рости вниз не можна (681–900px, див. коментар про flex-wrap вище);
   основний сценарій ≤680px розв'язано переносом рядка нижче. */
.vs-pill__meta {
    display: block;
    font-size: 11px;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* RECRE-442: третій, найтихіший рядок пілюлі — пояснює затемнення на
   полотні саме там, де воно в кадрі. Той самий тон, що .vs-src у
   картці (найдрібніший розмір, --muted-3): це підказка, а не факт
   розрахунку, тому вона тихіша за .vs-pill__meta. */
.vs-pill__legend {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--muted-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Кнопка виходу: видимі 26px, зона влучання 44×44 через ::after —
   той самий прийом, що .rt-focus__close (RECRE-418). */
.vs-pill__back {
    position: relative;
    flex: none;
    /* RECRE-475: коли кнопка переїхала на власний рядок (flex-wrap
       вище), auto притискає її до правого краю пілюлі — інакше вона
       стала б під іконкою, і рядок читався б як обірваний текст. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border-2);
    border-radius: 30px;
    background: var(--surface-2);
    color: var(--muted);
    font: 700 11px/1 var(--font-sans, 'Mulish', sans-serif);
    cursor: pointer;
}
.vs-pill__back::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: calc(100% + 16px); height: 44px;
    transform: translate(-50%, -50%);
}
.vs-pill__back:hover { background: var(--bg-2); color: var(--ink-2); }
.vs-pill__back:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(193, 109, 69, .45);
}
.vs-pill__back svg, .vs-pill__back i { width: 12px; height: 12px; }

/* RECRE-483 — «На весь екран»: та сама пілюля, що «До схеми парку»
   (родина .vs-pill__back), лише інша дія. Показується ЛИШЕ ≤900px:
   саме там полотно Атласу — стрічка, і саме там до тікета режим
   підіймався на весь екран САМ. На десктопі кадр і так великий, а
   повний екран має власну кнопку .pdm-fs у куті полотна.
   margin-left: 0 на сусідці обов'язковий: .vs-pill__back несе
   margin-left: auto, і ДВА auto-поля поділили б вільне місце між
   собою — пара кнопок роз'їхалась би по різних краях пілюлі (той
   самий випадок, що .poi-sheet__more + .pdm-info__close). */
.vs-pill__fs { display: none; }
@media (max-width: 900px) {
    .vs-pill__fs { display: inline-flex; }
    .vs-pill__fs + .vs-pill__back { margin-left: 6px; }
}

/* Поява пілюлі — 180мс, у межах 150–300мс для мікровзаємодій */
.vs-pill {
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.is-viewshed .vs-pill,
.vs-pill.is-on { opacity: 1; pointer-events: auto; }

/* Підпис масштабу Leaflet (L.control.scale) на час режиму — ключовий
   доказ «масштаб змінився навмисно», а не «карта поламалась». */
.is-viewshed .leaflet-control-scale-line {
    border-color: var(--muted-2);
    background: rgba(251, 245, 233, .82);
    color: var(--ink-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- 4. Блок «Зона видимості» в картці POI ------------ */
/* Живе в тілі картки: і в доку/шторці (poiPanelHtml), і в картці
   каталогу (poiCardHtml) — один білдер на обидві. Правило порожнечі:
   блоку немає взагалі, якщо API не віддав опубліковану зону. */
.vs-block {
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid var(--border-2);
    border-radius: 14px;
    background: var(--surface-2);
}
.vs-block__head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 2px;
}
.vs-block__head svg, .vs-block__head i {
    width: 15px; height: 15px;
    color: var(--vs-accent-ink);
    flex: none;
}
.vs-block__title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--green);
}
.vs-block__method {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted-2);
}
/* «Оцінка RecreMap» — обов'язковий підпис методу (E-7 з RECRE-297) */
.vs-est {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 30px;
    background: var(--vs-visible);
    color: var(--vs-accent-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Три числа. Ч-1 «Display» з TOR-unified-number-typography:
   Cormorant 700 + lining/proportional. */
.vs-nums {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 0 0 10px;
    background: var(--border-3);
    border: 1px solid var(--border-3);
    border-radius: 10px;
    overflow: hidden;
}
.vs-num {
    padding: 8px 6px;
    background: var(--surface);
    text-align: center;
}
.vs-num__val {
    display: block;
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.05;
    color: var(--green);
    font-variant-numeric: lining-nums proportional-nums;
}
.vs-num__val small {
    font-family: var(--font-sans, 'Mulish', sans-serif);
    font-size: 10.5px;
    font-weight: 800;
    margin-left: 2px;
    color: var(--muted-2);
}
.vs-num__lbl {
    display: block;
    margin-top: 2px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted-3);
}

/* Головна дія. 44px висоти — touch-таргет без винятків. */
.vs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--vs-accent);
    border-radius: 12px;
    background: var(--vs-accent);
    color: #FBF5E9;
    font: 800 13px/1 var(--font-sans, 'Mulish', sans-serif);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.vs-btn:hover { background: var(--vs-accent-ink); border-color: var(--vs-accent-ink); }
.vs-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(193, 109, 69, .45); }
.vs-btn svg, .vs-btn i { width: 15px; height: 15px; }
/* Стан «шар увімкнено» — кнопка стає вторинною й називає вихід */
.vs-btn[aria-pressed="true"] {
    background: var(--surface);
    color: var(--vs-accent-ink);
    border-color: var(--vs-accent);
}
.vs-btn[aria-pressed="true"]:hover { background: var(--bg-2); }

.vs-note {
    margin: 10px 0 0;
    padding-left: 10px;
    border-left: 3px solid var(--dash);
    font-size: 11px;
    line-height: 1.55;
    color: var(--muted);
}
.vs-src {
    margin: 8px 0 0;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--muted-3);
}

/* ---------- 5. Свотч (fidelity: мініатюра рендера) ----------- */
/* TOR-legend-swatch-map-fidelity: свотч має бути зменшеною копією
   того, що на карті — світла пляма з контуром у кільці тіні. */
.vs-swatch {
    width: 22px; height: 16px;
    flex: none;
    border-radius: 5px;
    background:
        radial-gradient(ellipse 58% 62% at 50% 50%,
            rgba(47, 122, 99, .16) 0 68%,
            transparent 69%),
        radial-gradient(ellipse 58% 62% at 50% 50%,
            transparent 0 66%,
            rgba(46, 36, 25, .38) 68% 100%);
    box-shadow: inset 0 0 0 1px rgba(46, 36, 25, .18);
}

/* ---------- 6. Мобільна поверхня ---------------------------- */
@media (max-width: 900px) {
    /* Пілюля вужча; масштаб з двох рядків не робимо — обрізаємо назву.
       RECRE-475: max-width звідси ПРИБРАНО. Саме воно (100% - 16px) і
       розпускало пілюлю на всю ширину вузького полотна поверх обох
       стовпчиків кнопок — базове правило з жолобами (§3) вужче й
       коректніше на будь-якій ширині, а тут лишається тільки
       ущільнення полів. */
    .vs-pill { padding: 6px 6px 6px 10px; gap: 8px; }
    .vs-pill__title { font-size: 11.5px; }
    .vs-pill__meta { font-size: 10.5px; }
    .vs-pill__legend { font-size: 9.5px; }
    /* Числа лишаються втрьох — на 320px це 3×~92px, читається */
    .vs-num__val { font-size: 19px; }
}
/* RECRE-475: тут — і ЛИШЕ тут — пілюлі можна рости вниз. На цій ширині
   всі кнопки правого стовпчика вже кружечки 32px (правила .pdm-basemap
   / .pdm-fs), тож жолоб --atlas-ctl-r (52px) покриває кожен його
   поверх незалежно від того, якою високою стане пілюля. Кнопка
   «До схеми парку» переноситься на власний рядок замість того, щоб
   з'їсти назву точки до «Зона вид…»: її підпис — єдиний вихід із
   режиму, ховати його (як роблять сусідні кнопки) не можна.
   Брейкпоінт 680 навмисно той самий, що в --atlas-ctl-r: перенос
   дозволений рівно там, де жолоб перестав залежати від поверху. */
@media (max-width: 680px) {
    .vs-pill { flex-wrap: wrap; }
    /* RECRE-481: тут — і лише тут — рядок чисел вигідніше ПЕРЕНЕСТИ, а
       не обрізати трьома крапками: «масштаб змінено» — це відповідь на
       питання «чому карта раптом в іншому масштабі», тобто сенс самої
       пілюлі, і в обрізку він зникав першим. Рости вниз пілюлі дозволено
       рівно на цій ширині (див. коментар до flex-wrap вище), тож зайвий
       рядок нікуди не наїжджає. Розриви можливі ТІЛЬКИ по роздільниках:
       усередині кожного факту viewshedPillMeta() (alpine-data.js) ставить
       нерозривні пробіли, інакше перенос розсікав би «масштаб змінено»
       чи «1,7 м» навпіл. */
    .vs-pill__meta { white-space: normal; }
}
/* На час режиму шторка обраного POI стуляється до «ручки», щоб не
   з'їдати висоту кадру; повний вміст повертається тапом по ручці. */
.poi-sheet.is-vs-collapsed {
    transform: translateY(calc(100% - 96px));
}
.poi-sheet.is-vs-collapsed .poi-sheet__body { visibility: hidden; }

/* ---------- 7. prefers-reduced-motion ----------------------- */
@media (prefers-reduced-motion: reduce) {
    .vs-pill,
    .pdm-map .is-viewshed .rm-poi-marker,
    .vs-btn { transition: none; }
    /* Пульсацію ореолу спостерігача не вмикаємо взагалі */
    .rm-poi-marker.is-observer::before { animation: none; }
}

/* Ореол «спостерігач» — статичне кільце, БЕЗ пульсації (пульсація
   на карті = нескінченна анімація, антипатерн для vestibular). */
.rm-poi-marker.is-observer::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(47, 122, 99, .55),
                0 0 0 9px rgba(47, 122, 99, .16);
    pointer-events: none;
}

/* ---------- 8. Чип «межа розрахунку · N км» (Розробник) -------
   Дизайн-ТЗ §10 лишило вибір носія реалізації: L.marker з divIcon чи
   L.tooltip(permanent). Обрано divIcon-маркер — L.tooltip тягне власний
   хвіст (стрілку, клас-темізацію, z-index у tooltipPane) і живе в
   іншому пейні, ніж шари зони.

   Єдина ЖОРСТКА вимога ТЗ до цього елемента — не конфліктувати з
   пілюлею режиму на вузьких екранах. Вона розв'язана в JS
   (VS_CHIP_BOTTOM_MQ: на ≤680px чип переїжджає на НИЖНЮ точку кола),
   а не тут: місце на колі — це географія, а не оформлення.

   Обгортка нульового розміру, сам чип центрується трансформом — так
   iconAnchor не доводиться перераховувати під довжину напису. */
/* Ручка шторки в режимі стає <button> (тап розгортає картку назад,
   §5 п.2) — скидаємо хром кнопки, щоб вигляд лишився тим самим
   декоративним грипом, і даємо їй нормальний touch-таргет через
   ::after (той самий прийом, що .vs-pill__back). */
button.poi-sheet__grip {
    display: block;
    padding: 0;
    border: 0;
    appearance: none;
    cursor: pointer;
    position: relative;
    /* RECRE-474: жест по грипу (sheetDragStart) — вертикальний, тож
       браузеру не можна віддавати вертикальну прокрутку сторінки, інакше
       він з'їсть pointermove разом із жестом. cursor натякає, що ручку
       тягнуть, а не лише тиснуть. */
    touch-action: none;
    cursor: grab;
}
button.poi-sheet__grip:active { cursor: grabbing; }
button.poi-sheet__grip::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 120px; height: 44px;
    transform: translate(-50%, -50%);
}
button.poi-sheet__grip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(193, 109, 69, .45);
}

.vs-ring-chip-wrap { pointer-events: none; }
.vs-ring-chip {
    position: absolute;
    left: 0; top: 0;
    transform: translate(-50%, -50%);
    display: inline-block;
    padding: 3px 9px;
    border-radius: 30px;
    background: rgba(251, 245, 233, .92);
    border: 1px solid var(--border-2);
    color: var(--muted);
    font: 800 10px/1.3 var(--font-sans, 'Mulish', sans-serif);
    letter-spacing: .2px;
    white-space: nowrap;
    box-shadow: 0 8px 18px -14px rgba(47, 74, 55, .6);
}
/* Супутник (RECRE-385): кремовий чип на аерофото «світиться» —
   темна підкладка тримає ту саму читабельність, що й на карті */
.is-viewshed-sat .vs-ring-chip {
    background: rgba(10, 16, 12, .72);
    border-color: rgba(203, 190, 156, .55);
    color: #F2EAD8;
}

/* ============================================================
   9. RECRE-473 — блок у КАРУСЕЛІ каталогу = прев'ю (Розробник)

   ТІКЕТ ПО: «для карток РОІ присутня аномально порожня ділянка».
   Це ДРУГА інкарнація тієї самої проблеми, що RECRE-452 (там
   лікували `.pcat-track { align-items: flex-start }` — картки
   більше не тягнуться до найвищої сусідки). Порожнеча лишилась,
   бо флекс-РЯД однаково має висоту найвищої картки, а картки
   тепер стоять до верху — під короткими зяє діра.

   ВИМІРЯНО (НПП «Сколівські Бескиди», overlay /map/, 1440px):
   трек 785px при типовій картці 283–340px. Джерело висоти —
   `.vs-block` (RECRE-420) у картці «Точка огляду»: 411px при
   тілі всієї картки 499px, з них 226px — застереження В-2
   (`.vs-note`), рядок атрибуції DEM (`.vs-src`) і кнопка 44px.
   Таких карток у цьому парку 169 із 480, тобто це не викид
   одного рядка даних, а ціла категорія.

   ПРИЧИНА: `viewshedBlockHtml` — спільний білдер дока й картки
   каталогу (Д-3 дизайн-ТЗ), і в трек він потрапляє в ПОВНОМУ,
   доковому розмірі. Проєкт для такого має власне правило —
   «карусель = прев'ю, докована картка = повний текст» (RECRE-167
   §6 / §15.1 концепту), реалізоване САМЕ так: ancestor-скоуп
   `.pcat-track__slot`, жодного розгалуження в JS (пор.
   `.pcat-track__slot .pcat-card__desc` і `.pcat-facts__hl dd`
   у main.css). RECRE-420 це правило на свій блок не поширив.

   ЩО ЛИШАЄТЬСЯ В ПРЕВ'Ю: заголовок, підпис методу з обов'язковою
   пілюлею `.vs-est` («оцінка RecreMap за моделлю рельєфу
   Copernicus 30 м» — прибирати заборонено дизайн-ТЗ §3, і саме
   вона називає джерело даних) і три числа. Тобто весь ЗМІСТ.

   ЩО ХОВАЄМО (є в повному представленні — докована картка ≥901px
   і шторка ≤900px, обидві за один дотик):
     • `.vs-note` — застереження В-2 (119px суцільного дрібного
       тексту, який у прев'ю ніхто не читає);
     • `.vs-src` — рядок ст. 6(b) DEM_ATTRIBUTION_DERIVED. Юридично
       безпечно: похідні числа в прев'ю вже підписані джерелом
       («модель рельєфу Copernicus 30 м»), повний рядок стоїть у
       повному представленні. Прецедент поруч — компактна картка
       маршруту `.rtc-card`: показує «перепад 604 м» з ТОГО САМОГО
       DEM і жодного підвалу джерела не має, він у картці дока.
     • `.vs-btn` — ЛИШЕ ≥901px, де картка треку клікабельна
       (cardsClickable(), poi-catalog.js): там кнопка живе в
       докованій картці, а вкладений інтерактив усередині
       `role="button"` — відома пастка доступності цього ж проєкту
       (RECRE-418 з тієї ж причини зробив CTA картки маршруту
       <span>, а не <button>). На ≤900px картка треку НЕ
       клікабельна, тож кнопка лишається — це єдиний вхід у
       «Панораму» з каруселі на мобільному.

   РЕЗУЛЬТАТ: трек 785 → 548px, картка точки огляду 714 → 468px;
   різниця з типовою карткою входить у звичайний розкид каталогу
   (283–367px) замість діри в цілу картку.
   ============================================================ */
.pcat-track__slot .vs-note,
.pcat-track__slot .vs-src { display: none; }
@media (min-width: 901px) {
    .pcat-track__slot .vs-btn { display: none; }
    /* Кнопки в прев'ю немає — знімаємо і зазор під числами, інакше
       він стає «висячим» нижнім відступом блоку. */
    .pcat-track__slot .vs-nums { margin-bottom: 0; }
}