:root {
    /* Safe area inset — задаётся из JS (48px на Android, 0 на десктопе) */
    --sab: 0px;

    /* Высота ВИДИМОГО содержимого футера карты (.map-footer), без --sab. От неё
       отсчитываются все прижатые к низу элементы карты (таймлайн, линейка,
       координаты, зум, карточка места) — менять высоту футера надо ЗДЕСЬ.
       ⚠️ В эти смещения НЕ добавлять --sab: на Android инлайн-фиксер в index.html
       сам прибавляет высоту системного навбара каждому absolute/fixed элементу
       с bottom, и второе слагаемое дало бы двойной отступ. */
    /* На десктопе рядов ДВА: «выбор даты + стоянка + координаты + линейка» и
       ©-строка (третий ряд появляется только на узком экране, где первый ряд
       переносится). Высота 80px осталась от трёхрядной раскладки, и лишние
       31px уходили в пустоту сверху и снизу — замер 25.08.2026 дал 17px над
       первой строкой текста и 19px под последней при 5px между строками.
       Заказчик: «расстояния сверху и снизу до края футера сделать равными
       межстрочному».
       ⚠️ 26.08.2026 замер переделан ПО ЧЕРНИЛАМ (реальные пиксели текста на
       снимке полосы), а не по текстовым боксам Range API. Боксы давали 5.4
       сверху против 5.0 снизу — почти поровну, а глазами низ был заметно уже:
       по чернилам выходило 10 сверху, 10 между строками и ВСЕГО 6 снизу.
       Причина — разный кегль строк (16px в верхней, 12px в ©-строке) при равной
       высоте рядов: у мелкого шрифта внутри своего ряда больше пустоты.
       Заказчик: «снизу надо чуть добавить, чтобы было как сверху».
       5 + 24 + 1 gap + 24 + 5 = 59, чернила 10/10/10.
       ⚠️ БЕЗ env(safe-area-inset-bottom): на телефоне заказчика он ненулевой
       даже там, где системная панель ничего не перекрывает (замер 01.10.2026 —
       браузер 2: env=19 при вьюпорте, который уже кончается над панелью), и
       прибавка давала лишнюю синеву в футере. */
    --map-footer-h: 59px;

    /* Высота ОДНОГО ряда футера. Все ряды обязаны быть одной высоты, иначе
       строки стоят неровно: раньше высоту задавало содержимое (кнопки 22.5px,
       линейка 22px, ©-строка 14.4px), и просветы между строками выходили 4.8px
       и 2.2px при равном gap. Одна высота + один gap = равный шаг.
       24px — под кегль 16px верхнего меню (в 22px он уже не помещался). */
    --map-footer-row-h: 24px;

    /* ВЫСОТА ПОЛОСЫ ТАЙМЛАЙНА. Была 150px, с 28.08.2026 — 172px.
       Заказчик на созвоне: на шаге «годы» стоянки идут подряд и подписи
       налезают, «это возможно поправить, если мы ещё строку добавим» —
       ступеней стало шесть (TL_STACK_LEVELS в main.js).
       ⚠️ Высота ПОСТОЯННАЯ, шестой ряд не появляется и не исчезает: «если эта
       строка будет появляющейся и исчезающей, пользователю это не понравится,
       потому что будет скачка». Занимаем ступеней столько, сколько нужно, а
       место под шесть держим всегда.
       Откуда 172: линейка 39px + верхний бордюр 1px, значит поле флажков =
       172 − 40 = 132, дно лесенки 132 − 39 = 93, шаг (93 − 3)/5 = 18 при
       минимально допустимых 17 (высота подписи + 3). На 150px шаг выходил 13.6,
       и лесенка сама схлопывалась обратно до пяти ступеней. */
    --tl-strip-h: 172px;

    /* Primitive Color Tokens */
    --color-white: rgba(255, 255, 255, 1);
    --color-black: rgba(0, 0, 0, 1);
    --color-cream-50: rgba(252, 252, 249, 1);
    --color-cream-100: rgba(255, 255, 253, 1);
    --color-gray-200: rgba(245, 245, 245, 1);
    --color-gray-300: rgba(167, 169, 169, 1);
    --color-gray-400: rgba(119, 124, 124, 1);
    --color-slate-500: rgba(98, 108, 113, 1);
    --color-brown-600: rgba(94, 82, 64, 1);
    --color-charcoal-700: rgba(31, 33, 33, 1);
    --color-charcoal-800: rgba(38, 40, 40, 1);
    --color-slate-900: rgba(19, 52, 59, 1);
    --color-teal-300: rgba(50, 184, 198, 1);
    --color-teal-400: rgba(45, 166, 178, 1);
    --color-teal-500: rgba(33, 128, 141, 1);
    --color-teal-600: rgba(29, 116, 128, 1);
    --color-teal-700: rgba(26, 104, 115, 1);
    --color-teal-800: rgba(41, 150, 161, 1);
    --color-red-400: rgba(255, 84, 89, 1);
    --color-red-500: rgba(192, 21, 47, 1);
    --color-orange-400: rgba(230, 129, 97, 1);
    --color-orange-500: rgba(168, 75, 47, 1);

    /* RGB versions for opacity control */
    --color-brown-600-rgb: 94, 82, 64;
    --color-teal-500-rgb: 33, 128, 141;
    --color-slate-900-rgb: 19, 52, 59;
    --color-slate-500-rgb: 98, 108, 113;
    --color-red-500-rgb: 192, 21, 47;
    --color-red-400-rgb: 255, 84, 89;
    --color-orange-500-rgb: 168, 75, 47;
    --color-orange-400-rgb: 230, 129, 97;

    /* Background color tokens (Light Mode) */
    --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
    --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
    --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
    --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
    --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
    --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
    --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
    --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

    /* Semantic Color Tokens (Light Mode) */
    --color-background: var(--color-cream-50);
    --color-surface: var(--color-cream-100);
    --color-text: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-500);
    --color-primary: var(--color-teal-500);
    --color-primary-hover: var(--color-teal-600);
    --color-primary-active: var(--color-teal-700);
    --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
    --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
    --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
    --color-border: rgba(var(--color-brown-600-rgb), 0.2);
    --color-btn-primary-text: var(--color-cream-50);
    --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
    --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
    --color-error: var(--color-red-500);
    --color-success: var(--color-teal-500);
    --color-warning: var(--color-orange-500);
    --color-info: var(--color-slate-500);
    --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
    --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

    /* Common style patterns */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for opacity control */
    --color-success-rgb: 33, 128, 141;
    --color-error-rgb: 192, 21, 47;
    --color-warning-rgb: 168, 75, 47;
    --color-info-rgb: 98, 108, 113;

    /* Typography */
    --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 30px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 550;
    --font-weight-bold: 600;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --letter-spacing-tight: -0.01em;

    /* Spacing */
    --space-0: 0;
    --space-1: 1px;
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-17: 17px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-38: 38px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-base: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

    /* Animation */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;

    --font-family-sans: 'Noto Sans', sans-serif;
}


/* Dark mode colors */


/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
    /* RGB versions for opacity control (dark mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Colorful background palette - Dark Mode */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */

    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
    /* RGB versions for opacity control (light mode) */
    --color-brown-600-rgb: 94, 82, 64;
    --color-teal-500-rgb: 33, 128, 141;
    --color-slate-900-rgb: 19, 52, 59;

    /* Semantic Color Tokens (Light Mode) */
    --color-background: var(--color-cream-50);
    --color-surface: var(--color-cream-100);
    --color-text: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-500);
    --color-primary: var(--color-teal-500);
    --color-primary-hover: var(--color-teal-600);
    --color-primary-active: var(--color-teal-700);
    --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
    --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
    --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
    --color-border: rgba(var(--color-brown-600-rgb), 0.2);
    --color-btn-primary-text: var(--color-cream-50);
    --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
    --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
    --color-error: var(--color-red-500);
    --color-success: var(--color-teal-500);
    --color-warning: var(--color-orange-500);
    --color-info: var(--color-slate-500);
    --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

    /* RGB versions for light mode */
    --color-success-rgb: var(--color-teal-500-rgb);
    --color-error-rgb: var(--color-red-500-rgb);
    --color-warning-rgb: var(--color-orange-500-rgb);
    --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}


*,
*::before,
*::after {
    box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-md);
}

p {
    margin: 0 0 var(--space-16) 0;
    font-size: .9rem;
    text-align: justify;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}


code,
pre {

    font-size: calc(var(--font-size-base) * 0.95);

    border-radius: var(--radius-sm);
}

code {
    padding: var(--space-1) var(--space-4);
}

pre {
    padding: var(--space-16);
    margin: var(--space-16) 0;
    overflow: auto;

}

pre code {
    background: none;
    padding: 0;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-standard);
    border: none;
    text-decoration: none;
    position: relative;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-btn-primary-text);
}

.btn--primary:hover {
    background: var(--color-primary-hover);
}

.btn--primary:active {
    background: var(--color-primary-active);
}

.btn--secondary {
    background: var(--color-secondary);
    color: var(--color-text);
}

.btn--secondary:hover {
    background: var(--color-secondary-hover);
}

.btn--secondary:active {
    background: var(--color-secondary-active);
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.btn--outline:hover {
    background: var(--color-secondary);
}

.btn--sm {
    padding: var(--space-4) var(--space-12);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.btn--lg {
    padding: var(--space-10) var(--space-20);
    font-size: var(--font-size-lg);
    border-radius: var(--radius-md);
}

.btn--full-width {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form elements */
.form-control {
    display: block;
    width: 100%;
    padding: var(--space-8) var(--space-12);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {

    font-size: var(--font-size-base);
}

select.form-control {
    padding: var(--space-8) var(--space-12);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--select-caret-light);
    background-repeat: no-repeat;
    background-position: right var(--space-12) center;
    background-size: 16px;
    padding-right: var(--space-32);
}

/* Add a dark mode specific caret */


.form-control:focus {
    border-color: var(--color-primary);
    outline: var(--focus-outline);
}

.form-label {
    display: block;
    margin-bottom: var(--space-8);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.form-group {
    margin-bottom: var(--space-16);
}

/* Card component */
.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-card-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card__body {
    padding: var(--space-16);
}

.card__header,
.card__footer {
    padding: var(--space-16);
    border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
    display: inline-flex;
    align-items: center;
    padding: var(--space-6) var(--space-12);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.status--success {
    background-color: rgba(
            var(--color-success-rgb, 33, 128, 141),
            var(--status-bg-opacity)
    );
    color: var(--color-success);
    border: 1px solid rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
    background-color: rgba(
            var(--color-error-rgb, 192, 21, 47),
            var(--status-bg-opacity)
    );
    color: var(--color-error);
    border: 1px solid rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
    background-color: rgba(
            var(--color-warning-rgb, 168, 75, 47),
            var(--status-bg-opacity)
    );
    color: var(--color-warning);
    border: 1px solid rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
    background-color: rgba(
            var(--color-info-rgb, 98, 108, 113),
            var(--status-bg-opacity)
    );
    color: var(--color-info);
    border: 1px solid rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-16);
    padding-left: var(--space-16);
}

@media (min-width: 640px) {
    .container {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: var(--container-lg);
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: var(--container-xl);
    }
}

/* Utility classes */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-4 {
    gap: var(--space-4);
}

.gap-8 {
    gap: var(--space-8);
}

.gap-16 {
    gap: var(--space-16);
}

.m-0 {
    margin: 0;
}

.mt-8 {
    margin-top: var(--space-8);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.mx-8 {
    margin-left: var(--space-8);
    margin-right: var(--space-8);
}

.my-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.p-0 {
    padding: 0;
}

.py-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.px-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

.py-16 {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.px-16 {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
}

.block {
    display: block;
}

.hidden {
    display: none;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
    border: 1px solid var(--color-border-secondary);
}


/* Базовая раскладка */
body {
    overflow: hidden; /* Чтобы карта занимала весь экран */
}

/* Хэдер */
.topbar {
    background-color: #1E90FF;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-20);
    height: 56px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    position: relative;
}


.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-20);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}


.main-nav {
    display: flex;
    gap: var(--space-20);
}

.main-nav a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    letter-spacing: -0.2px;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: white;
}

.main-nav a:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--space-2);
}


/* Кнопки RU / EN */
.lang-btn {
    background: white;
    color: #1E90FF;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 11px;
    min-width: 36px;
    text-align: center;
    letter-spacing: -0.3px;
    transition: all 0.2s ease;
}

.lang-btn.active {
    background: #00D4E8;
    color: white;
}

.lang-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.9);
}


.lang-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Страницы */
.page {
    display: none;
    padding: var(--space-24);
}

.page.active {
    display: block;
}

/* Карта */
#map {
    width: 100%;
    height: 100%;
}

.leaflet-top.leaflet-left {
    top: var(--space-20);
    left: var(--space-20);
    transform: none;
}

/* КНОПКИ ИНСТРУМЕНТОВ - панель слева */
.map-tools {
    --map-tools-top: 50px; /* 56 хедер + 20 отступ; на узких экранах переопределяется */
    position: absolute;
    left: 19px;
    top: var(--map-tools-top);
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* ⚠️ ВЫШЕ полосы таймлайна (2000) и футера карты (2001): заказчик 25.08.2026,
       п. 6.1 — «панель инструментов должна быть поверх всего». До этого полоса
       таймлайна перекрывала нижние кнопки, и в ландшафте телефона
       #timeline-toggle-btn не нажимался вовсе (замер 16.08.2026: перекрыт
       ©-строкой на 30px). Модальные окна, карточка места и галерея остаются
       выше (9999 и больше) — они и должны закрывать панель. */
    z-index: 2100;
    /* Колонка из 10 кнопок — 372px (10×30 + 9×8). В телефон в ландшафте (высота
       390) она не влезает и последние кнопки уходили ПОД футер: замер 16.08.2026
       показал, что #timeline-toggle-btn перекрыт ©-строкой на 30px и не
       нажимается (футер непрозрачен и ловит клики, z-index 2001 против 400).
       Ограничиваем высоту свободным местом и разрешаем перенос в соседнюю
       колонку. На обычных экранах запас велик (десктоп 900: 760px против 372) —
       перенос не срабатывает и раскладка не меняется. */
    max-height: calc(100% - var(--map-tools-top) - var(--map-footer-h) - 8px);
    flex-wrap: wrap;
    align-content: flex-start;
}

.map-btn {
    border: none;
    outline: 2px solid rgba(0, 0, 0, .2);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.12);
    padding: 0;
    flex-shrink: 0;
    border-radius: 4px;

    /* Фон и цвет — ЯВНО. Раньше их не было, и кнопка брала UA-дефолт <button>,
       а он разный в Blink и WebKit. Картиночным иконкам всё равно (цвет запечён
       в ассете), но глифы Font Awesome (линейка, таймлайн, KML) — это текст, он
       наследует UA-color, и на iPad они красились в системный цвет.
       Замер голой <button>: Chrome — bg rgb(240,240,240), color rgb(0,0,0);
       WebKit — bg rgb(192,192,192) (серебристая), color rgba(0,0,0,0.8).
       Берём значения Chrome, чтобы вид на Android не изменился, а iPad подтянулся. */
    -webkit-appearance: none;
    appearance: none;
    background: #f0f0f0;
    color: #000;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 480px) {
    .cae-logo-link {
        width: 60px;
        height: 60px;
        top: 12px; /* центр 30px кнопки = 15px, минус половина высоты лого */
        left: 10px;
    }
}

/* Упрощаем вложенность */
@media (max-width: 480px) {
    .cae-logo-link {
        top: 10px; /* подстройте под ваши кнопки */
    }
}



.map-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

/* Капля кнопки «Маркеры на карте» (ROE-803): тот же квадрат 18×18, что у
   картиночных иконок соседних кнопок; пропорции капли сохраняются. */
.map-btn .map-btn-drop {
    width: 18px;
    height: 18px;
    display: block;
}

/* Hover — только для мыши/трекпада: WebKit на тач-устройствах оставляет :hover
   «залипшим» на последней нажатой кнопке до тапа в другом месте, и она выглядит
   подсвеченной. */
@media (hover: hover) and (pointer: fine) {
    .map-btn:hover {
        background: #ecf5ff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
}

/* Скрытый файловый инпут (KML). Не display:none — WebKit ненадёжно открывает
   пикер для элемента, полностью выключенного из раскладки. */
.visually-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.map-btn.active {
    background: #9ECFFF;
}


.map-btn:focus-visible {
    outline: 2px solid #9ECFFF;
    outline-offset: 2px;
}


/* Индикатор активного таба в .maps-tabs — рисуем как псевдоэлемент,
   чтобы голубая линия гарантированно совпадала по ширине с кнопкой
   и не выходила за серую границу контейнера. */
.maps-tab-btn {
    position: relative;
}
.maps-tab-btn.active::after {
    content: '';
    position: absolute;
    left: 0;
    /* До края кнопки. Было 7px — пока «Дополнительную» вылезала за меню; с
       шириной 258px (19.10.2026) кнопка кончается ровно на конце серой линии,
       и отступ оставлял синюю на 7px короче (жалоба 20.10.2026). */
    right: 0;
    bottom: -2px;
    height: 2px;
    /* Голубой хеддера/футера (.top-bar, .map-footer) — ROE-803. Был #9ecfff. */
    background: #42a5f5;
    pointer-events: none;
}

/* ПАНЕЛЬ НАСТРОЕК */
.maps-panel {
    background: white;
    border-radius: 4px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: var(--space-20);
    position: absolute;
    top: calc(56px + var(--space-16));
    left: calc(var(--space-12) + 40px + 8px);
    width: 250px;
    max-height: 400px;
    overflow-y: auto;
    /* 2100 — выше полосы таймлайна (2000), шкалы Ventusky (900) и панелей даты
       (1000), ниже футера с раскрытым меню дат (2200). Жалоба 03.10.2026:
       «выскакивающие меню карт должны перекрывать таймлайн и шкалу градиентов
       вентускай (а также выбор дат)». При равном z побеждал порядок в разметке,
       а полоса идёт позже меню. */
    z-index: 2100;
    display: none;
}


.maps-panel.active {
    display: block;
}

.maps-header {
    padding: var(--space-2);
    border-bottom: 2px solid #e0e0e0;
    margin-left: 1px;
    margin-right: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.maps-header h3 {
    margin-top: -16px;
    font-size: 14px;
    color: #000000 !important;
    font-weight: var(--font-weight-semibold);
}

/* KML-панель: заголовок с отступами как в панели "Выбрать карту" */
.kml-header {
    position: relative;
    justify-content: center;
    padding-bottom: var(--space-16);
    border-bottom: none;
}

.kml-header::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e0e0e0;
    pointer-events: none;
    z-index: 0;
}

.kml-header h3 {
    text-align: center;
    font-size: 14px;
    margin: -20px 42px 6px 0;
    color: #000 !important;
    width: 100%;
    font-weight: var(--font-weight-semibold);
}

.kml-header .maps-close {
    position: absolute;
    left: 197px;
    right: var(--space-4);
    transform: translateY(-50%);
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.kml-track-item {
    transition: background-color var(--duration-fast) var(--ease-standard);
}

.kml-track-item:hover {
    background-color: #9ecfff;
}

#kmlPanel .kml-track-delete {
    position: relative;
    right: -6px;
    width: 16px;
}

.maps-close {
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
    color: var(--color-text-secondary);
    width: 24px;
    height: 24px;
    padding: 0;
    transition: color var(--duration-fast) var(--ease-standard);
}

.maps-close:hover {
    color: var(--color-primary);
}

.maps-close:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--space-2);
}

.maps-basemaps,
.maps-opacity {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-card-border-inner);
}


.maps-basemaps:last-child,
.maps-opacity:last-child {
    border-bottom: none;
}

/* KML Tracks Panel */
.kml-tracks-list {
    position: relative;
    left: -3px;
    padding: var(--space-8) var(--space-4);
}

.kml-empty {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--space-12) 0;
}

.kml-track-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-8);
    border-bottom: 1px solid var(--color-card-border-inner);
    gap: var(--space-8);
}

.kml-track-item:last-child {
    border-bottom: none;
}

.kml-track-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kml-track-name {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kml-track-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    padding: 2px 4px;
    line-height: 1;
    transition: color var(--duration-fast) var(--ease-standard);
}

.kml-track-delete:hover {
    color: var(--color-red-400);
}

.maps-basemaps h4,
.maps-opacity h4 {
    margin: 0 0 var(--space-12) 0;
    font-size: var(--font-size-base);
    color: #000000; /* был var(--color-text), который может быть серым */
    font-weight: var(--font-weight-semibold);
}

.maps-basemaps label,
.maps-opacity label {
    display: flex;
    align-items: center;
    margin: var(--space-8) 0;
    cursor: pointer;
    font-size: var(--font-size-base);
    color: #000000; /* был var(--color-text-secondary), который серый */
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast);
}

.maps-basemaps label:hover,
.maps-overlays label:hover {
    background-color: #9ECFFF;
    color: black;
}

.maps-basemaps input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 2px solid #42a5f5;
    border-radius: 50%;
    margin-right: var(--space-8);
    cursor: pointer;
    flex-shrink: 0;
}

/* Значок (i) у групп меню карт и у торговых путей (ROE-803, 17.10.2026) —
   открывает инфо-окно #appAlert. Цвет и отступ — как у .date-warning-icon, глиф —
   fa-info-circle из подключённого Font Awesome; размер — от текста строки. */
.maps-info-btn {
    border: none;
    background: none;
    padding: 0;
    margin-left: 4px;
    color: #42a5f5;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    vertical-align: baseline;
}

.maps-info-btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--space-2);
}

.maps-basemaps input[type="radio"]:checked {
    background-color: #42a5f5;
    box-shadow: inset 0 0 0 2px white;
}

.maps-opacity input[type="range"] {
    margin-right: var(--space-8);
    cursor: pointer;
    accent-color: #42a5f5;
}

.maps-basemaps input[type="radio"]:focus-visible,
.maps-opacity input[type="range"]:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--space-2);
}

.maps-opacity label {
    display: flex;
    flex-direction: column;
}

/* Левое поле меню выбора карт = полю меню внешних карт (19.10.2026).
   У .external-maps-link текст стоит на padding 4px от края строки. Здесь
   заголовок группы стоял на 0 (на 4px левее), а кружок — на 9px: 4px
   padding строки + UA-шный margin-left 5px у radio. Замер:
   tools/diag_maps_menu_indent.js — h4, кружок и текст ссылки на 17px. */
.maps-basemaps h4 {
    padding-left: var(--space-4);
}

.maps-basemaps input[type="radio"] {
    margin-left: 0;
}

/* Над первой группой «Дополнительной» — тот же зазор, что над остальными
   (8px от линии разделителя-<p>): от линии под вкладками было 2px. */
#extra-maps .maps-basemaps > h4:first-child {
    margin-top: 6px;
}

/* Ширина меню выбора карт: +8px — ровно ширина полосы прокрутки
   (.maps-panel::-webkit-scrollbar). Полоса стоит ВНУТРИ 250px, и вкладкам
   «Основную | Дополнительную» (вместе 222px по содержимому) оставалось 214:
   «Дополнительную» вылезала на 8px вправо и упиралась в ползунок — поле
   слева 22px, справа 14 (жалоба 19.10.2026). С 258px оба по 22px. */
#mapsPanel {
    width: 258px;
}

.maps-opacity input[type="range"] {
    margin: var(--space-8) 0 0 0;
    width: 100%;
    /* Голубой хеддера/футера — ROE-803. Был var(--color-primary) = бирюзовый
       rgb(33,128,141), «зеленоватый» из ТЗ. */
    accent-color: #42a5f5;
}

/* ===== ПАНЕЛЬ ПОИСКА ===== */
.search-panel {
    position: absolute;
    top: calc(50px) !important;
    left: calc(var(--space-12) + 40px + 8px);
    width: max-content;
    max-height: calc(100dvh - 150px);
    background: white;

    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Та же выпадашка колонки инструментов, что и .maps-panel, — и тот же слой.
       Замер 03.10.2026 на 390×844: при z 500 кнопка и панель даты Ventusky
       (1000) накрывали поиск целиком, 9 проб из 9. */
    z-index: 2100;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.search-panel.active {
    display: flex;
}

.search-header {
    padding: var(--space-12);
    border-bottom: 2px solid #e0e0e0;
    flex-shrink: 0;
    position: relative;
}

/* Скрываем разделитель, когда нет результатов и не показано сообщение "Ничего не найдено" */
.search-panel:has(.search-results:empty):has(.search-empty.hidden) .search-header {
    border-bottom: none;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-8);

}

.search-input {
    flex: 0.8;
    padding: var(--space-10) var(--space-12);
    font-size: var(--font-size-base);
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
    border-radius: 4px;
    width: 150px;
    height: 30px;
}

.search-input:focus {
    border-color: #9ecfff;
    box-shadow: 0 0 0 2px #9ecfff;
    outline: none;
}



.search-date-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-standard);
    border-radius: 4px;
}

.search-date-btn img {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.search-date-btn:hover {
    background: var(--color-secondary);
}

.search-date-btn.active {
    background: #9ecfff !important;
    border-color: #9ecfff !important;
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-date-btn.active img {
    /*filter: brightness(0) invert(1);*/
    opacity: 1;
}

.search-close {
    font-size: 26px;
    line-height: 1;
    color: var(--color-text-secondary);


    width: 30px;
    height: 30px;
    padding: 0;
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-standard);
    border-radius: 4px;
}

.search-close:hover {
    color: var(--color-error);
}

/* Date picker section */
.search-date-picker {
    margin-top: var(--space-12);
    padding-top: var(--space-12);
    border-top: 2px solid #e0e0e0;
}

.search-date-picker.hidden {
    display: none;
}

.search-date-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
}

.search-date-row label {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.search-date-input {
    padding: var(--space-6) var(--space-8);
    font-size: var(--font-size-sm);
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-sm);
    width: 120px;
    height: 30px;
}

.search-date-input:focus {
    border-color: #9ecfff;
    box-shadow: 0 0 0 2px #9ecfff;
    outline: none;
}

.search-date-apply,
.search-date-clear {
    padding: var(--space-6) var(--space-10);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
    height: 30px;
}

.search-date-apply {
    background: #9ecfff !important;
    color: black;
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);}

.search-date-apply:hover {
    background: var(--color-primary-hover);
}

.search-date-clear {
    background: transparent;
    color: black;
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);}

.search-date-clear:hover {
    background: var(--color-secondary);
}

/* Results container */
.search-results {
    flex: 0 1 auto;
    overflow-y: auto;
    min-height: 0;
    max-height: 400px;
}

/* Пустой контейнер не должен занимать высоту (фикс бага на Android, где
   при повторном открытии под .search-header висел пустой блок). */
.search-results:empty {
    display: none;
}

.search-result-item {
    display: flex;
    flex-direction: column;
    padding: var(--space-12) var(--space-16);
    cursor: pointer;
    border-bottom: 1px solid var(--color-card-border-inner);
    transition: background var(--duration-fast) var(--ease-standard);
    font-weight: 400;
}

.search-result-item:hover,
.search-result-item.highlighted {
    background: rgb(158, 207, 255) !important;
    transition: background 0.1s ease;
}

.search-result-item:hover .search-result-title,
.search-result-item.highlighted .search-result-title {
    color: #000;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-title {
    font-size: var(--font-size-base);

    color: rgb(0, 0, 0);
    margin-bottom: var(--space-4);
}

.search-result-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.search-result-author {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: 2px;
}

.search-result-painting-icon {
    color: #b8651a;
    margin-right: 4px;
}

.search-result-photo-icon {
    margin-right: 4px;
}

.search-result-video-icon {
    margin-right: 4px;
}

/* Значок типа места (перевал / стоянки / достопримечательность / транзит) —
   фиксированная ширина, чтобы названия выстраивались в колонку. */
/* Мини-маркер места в выдаче поиска: уменьшенная копия маркера карты
   (.awesome-marker + .awesome-marker-{color}, см. ниже ~3634).
   Высота = ровно 2 строки результата: 21px заголовок (14px×1.5)
   + 4px отступ (--space-4) + 18px дата (12px×1.5) = 43px. */
.search-result-item.search-result-place {
    flex-direction: row;      /* маркер слева, текст в 2 строки справа */
    align-items: flex-start;  /* капля прижата к 1–2-й строкам: при переносе
                                 заголовка (3+ строки) центрирование вылезало
                                 бы за низ 2-й строки */
    gap: 8px;
}

.search-result-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-result-marker {
    flex: 0 0 auto;
    width: 26px;           /* 34 × 35/45 (пропорция маркера) */
    height: 34px;          /* по ревью 22.07: верх капли = верх БУКВ 1-й строки
                              (не line-box: у него ~4px полу-интерлиньяжа сверху),
                              низ — чуть выше низа 2-й строки (4+34=38) */
    margin-top: 4px;
    position: relative;
}

.search-result-marker .awesome-marker {
    transform: scale(0.7556);  /* 34/45 */
    transform-origin: top left;
    z-index: 0 !important;     /* сброс картового z-index:700 !important */
}

/* Тень маркера (::after) в списке не нужна */
.search-result-marker .awesome-marker::after {
    display: none;
}

/* Подпись «арх. фото» / «совр. фото» / «совр. видео» — шрифтом строки автора. */
.search-result-kind {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 0 4px 0 2px;
}

/* Empty state */
.search-empty {
    padding: var(--space-24);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.search-empty.hidden {
    display: none;
}

/* Mobile responsive */
@media (max-width: 350px) {
    .search-panel {
        left: var(--space-8);
        right: var(--space-8);
        width: auto;
        max-height: calc(100dvh - 130px);
    }

    .search-date-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-date-row label {
        width: 100%;
    }

    .search-date-input {
        flex: 1;
        width: auto;
    }

    .search-date-row button {
        width: 100%;
    }
}

/* Общий контейнер зума */
.leaflet-control-zoom {
    background: transparent !important;

    box-shadow: none !important;

    margin: 0 !important;
}

/* Кнопки + и - */
.leaflet-control-zoom a {
    background: white !important;
    border: none !important;
    border-bottom: 1px solid #ddd !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 18px !important;
    color: #333 !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 !important;
    padding: 0 !important;
}

.leaflet-control-zoom a:last-child {
    border-bottom: none !important;
}

.leaflet-control-zoom a:hover {
    background: #ecf5ff !important;
    color: #9ECFFF;
}

.leaflet-control-zoom a:focus-visible {
    outline: 2px solid #ecf5ff;
    outline-offset: -2px;
}

.zoom-level {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    font-weight: 600;
    color: #000000;
    background: white;
    border: none;
    cursor: default;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.leaflet-bottom.leaflet-left .leaflet-control-zoom {
    margin: 0 0 8px var(--space-20) !important;
    border-radius: 4px;
    left:-3px;
    bottom: calc(var(--tl-strip-h) + var(--map-footer-h));
}

/* Невидимая метка на бывшем месте зума (ROE-803): зум переехал в колонку кнопок,
   а линейка масштаба на широком десктопе осталась тут. Отступы — те же, что у
   правила выше, рамка — как у .leaflet-bar (2px), чтобы правый и нижний край
   совпали с прежним зумом. Нужна только для замера в alignScaleToZoom. */
.leaflet-bottom.leaflet-left .zoom-scale-anchor {
    margin: 0 0 8px var(--space-20) !important;
    left: -3px;
    bottom: calc(var(--tl-strip-h) + var(--map-footer-h));
    box-sizing: content-box;
    width: 30px;
    height: 30px;
    border: 2px solid transparent;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 800px) {
    .leaflet-control-zoom a {

        width: 30px !important;
        height: 30px !important;
        line-height: 32px !important;
        font-size: 16px !important;
    }

    .zoom-level {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: var(--font-size-2xl);
    background-color: #9ECFFF !important;
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.leaflet-control-zoom.leaflet-bar {

    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;

}

.leaflet-bottom.leaflet-left .leaflet-control-zoom {
    margin: 0 0 10px var(--space-20);
    border-radius: 4px;
}

.leaflet-control-zoom.leaflet-bar a {

    border: 1px solid var(--color-border) !important;

}

.leaflet-control-zoom.leaflet-bar a:last-child {
    margin-bottom: 0 !important;
}

.leaflet-control-zoom.leaflet-bar a:hover {

    box-shadow: var(--shadow-md) !important;
}

/* ФИЛЬТР ПО ГОДАМ */
.year-filter {
    background-color: white;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: var(--space-16);
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    min-width: auto;
}

.year-filter label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    padding: 0;
    margin: 0;
}

.year-filter label input[type="checkbox"] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}

.year-filter label span {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    letter-spacing: -0.3px;
}

.year-filter label::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    flex-shrink: 0;
}

/* Цвета по годам */
.year-filter label[data-year="1923"]::before {
    background-color: var(--color-black);
}

.year-filter label[data-year="1924"]::before {
    background-color: var(--color-red-500);
}

.year-filter label[data-year="1925"]::before {
    background-color: var(--color-teal-500);
}

.year-filter label[data-year="1926"]::before {
    background-color: var(--color-success);
}

.year-filter label[data-year="1927"]::before {
    background-color: var(--color-warning);
}

.year-filter label[data-year="1928"]::before {
    background-color: var(--color-orange-500);
}

/* Приглушаем подпись и кружок, если чекбокс выключен */
.year-filter input[type="checkbox"]:not(:checked) + span {
    opacity: 0.4;
}

.year-filter input[type="checkbox"] {
    position: absolute;
    opacity: 0;

}

/* КАРТОЧКА МЕСТА */

.place-card h3,
.place-card h4 {
    margin-top: 10px;
    margin-bottom: 8px;
    line-height: 1.3;
    color: var(--color-text, #13343b); /* Темный цвет текста */
    font-size: 15px !important;
}

/* Основной текст описания */
.place-card p,
.place-card .description {

    line-height: 1.5; /* Междустрочный интервал для легкого чтения */
    margin-bottom: 12px;
}

/* Ссылки внутри текста */
.place-card a {
    color: #42a5f5; /* Синий цвет ссылок */
    text-decoration: none;
    word-break: normal;            /* не рвём слова посередине */
    overflow-wrap: anywhere;       /* но длинные URL/токены переносим, чтобы не вылезали */
    white-space: normal; /* Разрешаем перенос строк */
    max-width: 100%;
}

.place-card-body, .place-card p {
    /* ... существующие стили ... */
    overflow-wrap: break-word;
    word-wrap: break-word; /* Для старых браузеров */
    word-break: break-word;
}


.place-card a:hover {
    text-decoration: underline;
}

/* Принудительно красим ВЕСЬ текст внутри карточки в темный цвет */
.place-card,
.place-card * {

}

/* Возвращаем ссылкам синий цвет (так как правило выше перекрасит и их) */
.place-card a {
    color: #42a5f5 !important;

    font-weight: 600!important;
}

/* Делаем заголовки чуть темнее и насыщеннее */
.place-card h1,
.place-card h2,
.place-card h3,
.place-card strong,
.place-card b {
    color: #000000;
    font-weight: 600;
}

.place-card h3 {
    font-size: 16px !important;
    font-family: 'Noto Sans', sans-serif !important;
}

.place-card h4 {
    font-size: 14px !important;
}

/* Делаем мета-информацию (даты, транспорт) чуть светлее, но читаемой */
.place-card-meta,
.place-card-subtitle {
    color: #5a6b7c !important;
}


.place-card-title {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.place-card-subtitle {
    margin-bottom: var(--space-8);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.place-card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.place-card-section {
    margin-bottom: var(--space-10);
    line-height: var(--line-height-normal);
    font-size: 14px !important;
}

.place-card-section p {
    margin: 0 0 var(--space-8) 0;
    font-size: 14px !important;
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif !important;

    text-align: justify;
    line-height: 1.5;
}

.place-card-location-ref {
    font-style: italic;
    color: var(--color-text-secondary);
}

.place-card-link {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

.place-card-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.place-card-link:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--space-2);
}


/* ===== ДНЕВНИКИ - СТИЛЬ CAEMAP. ===== */

/* Бежевый фон для страницы дневников */
/* Полоска под хедером на странице Книги */
#books_page {
    background-color: rgb(241, 233, 216) !important;
    justify-items: center;
    padding-top: 0;
}

#books_page .page-top-stripe {
    display: none;
}

/* Заход сразу на /#books: «Книги» с первого кадра ПОВЕРХ ещё грузящейся карты
   (флаг html.boot-books ставит <head> в index.html, снимает showPage()). Карту не
   прячем — она должна инициализироваться в своих обычных размерах. z-index выше
   панели инструментов карты (2100) и футера (2001), ниже логотипа и модалок (9999). */
html.boot-books #books_page {
    display: block !important;
    position: fixed;
    top: var(--boot-books-top, 30px);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 5000;
}

/* Разметка приходит потоком, и #map_page (выше в DOM) успевал нарисоваться раньше
   #books_page — на медленной сети карта мелькала ~0.4 с (замер на 178, 15.09.2026).
   visibility, а НЕ display: размеры карты сохраняются, Leaflet/TimelineJS мерят как
   обычно. Корень красим в бежевый книг вместо голубого html:has(body.page-map-active). */
html.boot-books #map_page {
    visibility: hidden;
}

html.boot-books {
    background-color: rgb(241, 233, 216) !important;
}

body:has(#books_page.active) .page-top-stripe {
    display: block;
    position: fixed;
    top: 30px;
    left: 0;
    right: 18px;
    height: 16px;
    background-color: rgb(241, 233, 216);
    z-index: 1999;
}

@media (max-width: 871px) {
    body:has(#books_page.active) .page-top-stripe {
        top: 72px;
    }
}

/* Буферная полоса низа: под неё уходит текст при прокрутке (заказчик
   28.09.2026: «над футером нужно вернуть вот это поле буферное»). Стоит РОВНО
   на футере — иначе либо закроет его нижние 16px (так и было 27.09: голубого
   оставалось 18px из 34), либо оставит щель. */
body:has(#books_page.active)::after {
    content: "";
    position: fixed;
    left: 0;
    right: 18px;
    bottom: var(--narrow-footer-h);
    height: 16px;
    background-color: rgb(241, 233, 216);
    z-index: 1999;
    pointer-events: none;
}

/* Заголовок центрирован и синий */
#books_page .diaries-header {
    max-width: 1400px;
    text-align: center;
    padding: 35px 16px 30px 16px;
}

#books_page .diaries-header h1 {

    font-size: 32px;
    font-weight: 700;
    color: #00000D;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    font-family: Literata, serif !important;
}

#books_page .diaries-header p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: #5a7a8e;
}

/* Сетка: 4 книги в ряд на больших экранах */
#books_page .diaries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-32);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-24);
}

/* Карточка книги без фона, прозрачная */
.book-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-normal) var(--ease-standard);
    cursor: pointer;

}
a.book-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирует картинку и текст по горизонтали */
    text-align: center;  /* На всякий случай центрирует сам текст */
    width: 100%;         /* Убеждаемся, что карточка занимает всю ширину колонки */
    text-decoration: none; /* Убираем подчеркивание у ссылки */
}

/* На всякий случай, если картинка все равно не по центру */
a.book-card img,
a.book-card .book-cover {
    margin: 0 auto;
    display: block;
}

.book-card:hover {
    transform: translateY(-8px);
}

.book-card:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--space-4);
    border-radius: var(--radius-md);
}

/* Обложка книги с тенью */
.book-cover {
    min-height: 322px; /* Добавьте минимальную высоту для надежности */
    width: 211px;
    height: 322px;
    background-color: #e8e4d8;
    border-radius: var(--radius-base);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: var(--space-12);
    transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.book-card:hover .book-cover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 5px;
}

/* Информация под обложкой - синий текст */
.book-info {
    text-align: center;
    padding: 0 var(--space-8);
}

.book-info h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: #1e5a8e;
    line-height: var(--line-height-tight);
}

.book-info p {
    text-align: center;
    margin: 0;
    font-size: 16px;
    color: #00000D;
    line-height: var(--line-height-normal);
    font-family: Literata, serif !important;
    font-weight: 700;
}

.book-year {
    font-size: var(--font-size-sm);
    color: #5a7a8e;
    margin-top: var(--space-2);
}

/* ===== АДАПТИВНОСТЬ СЕТКИ ДНЕВНИКОВ ===== */

/* Планшеты большие (3 книги в ряд) */
@media (max-width: 2000px) {
    #books_page .diaries-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-24);
        max-width: 1000px;
        justify-items: center;
        padding-top: 24px;
    }

    #books_page .diaries-header h1 {
        font-size: 21px;
        font-family: Literata, serif !important;
            font-weight: 700;
    }
}

/* Планшеты средние (2 книги в ряд) */
@media (max-width: 1017px) {
    #books_page .diaries-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-20);
        padding: 0 var(--space-20);
    }

    #books_page .diaries-header {


        padding: 15px 16px 30px 16px;
    }

    #books_page .diaries-header h1 {
        margin-top: 17px;
        font-size: 21px;
            font-weight: 700;
    }

    .book-info h2 {
        font-size: var(--font-size-base);
    }

    .book-info p {
        font-size: 12px;
    }
}

/* Мобильные устройства (1 книга в ряд) */
@media (max-width: 871px) {
#books_page .diaries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-20);
        padding: 0 var(--space-20);
    }

    #books_page .diaries-header {
        padding: 15px 16px 30px 16px;

    }

    #books_page .diaries-header h1 {
        font-size: 14px;
            font-weight: 700;
    }

    #books_page .diaries-header p {
        font-size: var(--font-size-sm);
    }

    .book-cover {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .book-info h2 {
        font-size: var(--font-size-lg);
    }
        .book-info p {
        font-size: 12px;
    }
}

/* Очень маленькие экраны */
@media (max-width: 529px) {
#books_page .diaries-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--space-20);
        padding: 0 var(--space-20);
    }

    #books_page .diaries-header h1 {
        font-size: 14px;
            font-weight: 700;
    }

    .book-cover {
        max-width: 250px;
    }
        .book-info p {
        font-size: 12px;
    }
}


/* О проекте / О ЦАЭ */
.about-wrapper {
    max-width: 900px;
    margin: 0 auto;
    line-height: var(--line-height-normal);
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.about-wrapper h1 {
    margin-top: 0;
    margin-bottom: var(--space-16);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.about-wrapper h2 {
    margin-top: var(--space-32);
    margin-bottom: var(--space-12);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.about-wrapper h3 {
    margin-top: var(--space-24);
    margin-bottom: var(--space-8);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.about-wrapper p {
    margin: 0 0 var(--space-12);
}

.about-wrapper p.justify {
    text-align: justify;
}

.about-list,
.about-links {
    margin: 0 0 var(--space-12) var(--space-16);
    padding: 0;
}

.about-list li,
.about-links li {
    margin-bottom: var(--space-4);
}

.about-wrapper a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

.about-wrapper a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.about-wrapper a:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--space-2);
}

/* Картинки с подписями */
.about-figure {
    margin: var(--space-20) 0;
}

.about-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
    box-shadow: var(--shadow-sm);
}

.about-figure figcaption {
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Мобильные стили для страниц «О ЦАЭ» и «О проекте» */
@media (max-width: 917px) {
    .about-wrapper {
        font-size: 12px !important;
    }

    .about-wrapper h1 {
        font-size: 16px !important;
    }

    .about-wrapper h2 {
        font-size: 14px !important;
    }

    .about-wrapper p,
    .about-wrapper li,
    .about-wrapper blockquote,
    .about-wrapper blockquote p,
    .about-wrapper .about-figure figcaption {
        font-size: 12px !important;
    }
}

/* Футер */

body.page-map-active {
    overflow: hidden;
}

body.page-map-active .site-footer {
    display: none;
}

body.page-map-active #map_page.page.active {
    padding: 0;
}



.site-footer-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-24);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    letter-spacing: var(--letter-spacing-tight);
}

.page-map-active #map_page.page.active + .site-footer,
.page-map-active .site-footer {
    display: none;
}

body:not(.page-map-active) {
    /* Высота узкого футера: строка 24px + поля 3/3 = 30px, ровно как шапка
       (на телефоне 18 + 7/7 = 32px). Ею пользуются три правила: сам футер,
       буферная полоса над ним и отступ снизу у прокрутки. */
    --narrow-footer-h: 30px;
}

body:not(.page-map-active) .site-footer {
    display: block;
    /* УЗКИЙ ФУТЕР = НИЖНЯЯ СТРОКА ФУТЕРА КАРТЫ (заказчик 27.09.2026): на других
       страницах нет таймлайна и координат, поэтому остаётся только ©-строка, но
       фон, поля и типографика — те же, что у .map-footer. */
    background-color: #42a5f5 !important;
    color: #fff;
    /* Поля 3px: со строкой 24px высота выходит ровно 30px — как у шапки
       (заказчик 28.09.2026: «нужно чтобы они были одинаковые… в хедере ничего
       не меняй»). Сверху и снизу поровну. */
    padding: 3px 12px;
    font-family: 'Noto Sans', sans-serif;
    /* Тень над полосой — зеркало шапочной (та светит вниз: 0 2px 4px). */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
    /* Тень — ровно как у .map-footer (заказчик 28.09.2026: «чтоб точно как в
       футере на странице карта»). Кнопка языка берёт её по наследству —
       правило .cae-lang-foot__cur с text-shadow: inherit в lang_footer.css.
       ⚠️ Фигурных скобок в комментарии быть не должно: тесты режут блок
       по первой закрывающей. */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    /* Прибит к низу окна во всю ширину — как в книгах вики (заказчик
       28.09.2026: «верни сюда такой же футер»). Раньше он стоял в конце
       содержимого .pages-container, и на экране его не было, пока не
       докрутишь. z 2000: выше буферной полосы (1999); шапка (header.top-bar,
       z 2000) с ним не пересекается — она в строках 0…30. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
}

body:not(.page-map-active) .site-footer .site-footer-inner {
    /* Один в один с .map-footer-copy: строка ровно --map-footer-row-h. */
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 12px;
    line-height: var(--map-footer-row-h);
    letter-spacing: var(--letter-spacing-tight);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 871px) {
    /* Поля — как у футера карты на телефоне; хвост названия прячет общее
       правило .mf-copy-tail (остаётся «RU / © 2021-2026 CAEMAP.ONLINE»). */
    body:not(.page-map-active) {
        --narrow-footer-h: 32px;
    }

    body:not(.page-map-active) .site-footer {
        /* Поровну сверху и снизу: 7 + строка 18 + 7 = 32px. */
        padding: 7px 12px;
    }

    /* ⚠️ Трекинг как у ©-строки карты на телефоне — там он normal (замер:
       карта normal против −0.12px у нашей строки). */
    body:not(.page-map-active) .site-footer .site-footer-inner {
        letter-spacing: normal;
    }
}

.leaflet-control-attribution {
    display: none !important;
}

/* ПОЛНОЭКРАННЫЙ РЕЖИМ */
.map-wrapper:fullscreen {
    width: 100vw;
    height: 100vh;
}

.map-wrapper:fullscreen #map {
    width: 100%;
    height: 100%;
}


/* Адаптив для планшетов */
@media (max-width: 800px) {
    .topbar {
        padding: var(--space-12) var(--space-16);
    }

    .logo {
        font-size: var(--font-size-xl);
        margin-right: var(--space-20);
    }

    .main-nav {
        gap: var(--space-16);

    }

    .main-nav a {

        font-size: var(--font-size-sm);
    }

    .year-filter {
        gap: var(--space-12);
        padding: var(--space-6) var(--space-12);
        font-size: var(--font-size-xs);
    }




    .diaries-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-16);
    }

    .book-cover {
        height: 300px;
    }
}

/* Адаптив для мобильных устройств */
@media (max-width: 600px) {
    .topbar {
        flex-direction: column;
        height: auto;
        gap: var(--space-12);
        padding: var(--space-12);
    }

    .topbar-left {
        width: 100%;
        justify-content: space-between;
    }

    .logo {
        font-size: var(--font-size-lg);
        margin-right: 0;
    }

    .main-nav {
        gap: var(--space-12);
        flex-wrap: wrap;
    }

    .main-nav a {
        font-size: var(--font-size-xs);
    }

    .year-filter {
        gap: var(--space-8);
        flex-wrap: wrap;
        padding: var(--space-6) var(--space-10);
    }

    .book-cover {
        height: 250px;
    }

    .about-wrapper {
        font-size: var(--font-size-sm);
    }



}

/* Адаптив для портретной мобильной ориентации */
@media (max-width: 480px) {
    .topbar {
        padding: var(--space-8) var(--space-12);
        gap: var(--space-8);
    }

    .logo {
        font-size: var(--font-size-md);
    }

    .main-nav {
        gap: var(--space-8);
        width: 100%;
    }

    .main-nav a {
        font-size: 11px;
        padding: var(--space-4);
    }

    .topbar-right {
        width: 100%;
        justify-content: center;
    }

    .lang-btn {
        min-width: 48px;
        height: 36px;
        padding: 0 var(--space-10);
        font-size: var(--font-size-sm);
    }




    .year-filter {
        bottom: var(--space-16);
        padding: var(--space-4) var(--space-8);
        gap: var(--space-6);
        font-size: 10px;
        max-width: calc(100vw - var(--space-32));
    }

    .year-filter label::before {
        width: 10px;
        height: 10px;
    }


    .place-card-title {
        font-size: var(--font-size-lg);
    }



    .maps-header {
        padding: var(--space-2);
    }

    .maps-basemaps,
    .maps-opacity {
        padding: var(--space-2);
    }


    .diaries-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .book-cover {
        height: 220px;
    }

    .book-info {
        padding: 0 var(--space-8);
    }

    .book-info h2 {
        font-size: var(--font-size-lg);
    }

    .about-wrapper {
        font-size: var(--font-size-sm);
    }

    .about-wrapper h1 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--space-12);
    }

    .about-wrapper h2 {
        font-size: var(--font-size-lg);
        margin-top: var(--space-24);
    }

    .about-wrapper h3 {
        font-size: var(--font-size-md);
        margin-top: var(--space-16);
    }

    .site-footer-inner {
        padding: var(--space-16);
        font-size: var(--font-size-xs);
    }


}

.top-bar {
    position: relative;
    flex: 0 0 auto;
    top: 0;
    height: 30px!important;
    background-color: #42a5f5;
    display: flex;
    justify-content: center; /* Центрируем меню */
    align-items: center;
    padding: 0 20px;
    z-index: 2000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.nav-item {
    color: white;
    text-decoration: none;
    font-weight: 700; /* Жирный шрифт как в оригинале */
    font-size: 16px;
    display: flex;
    align-items: center;
    /* Легкая тень для текста, чтобы он "выпрыгивал" с фона */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.3px;
    position: relative;
    margin: 0 12px; /* Отступы между пунктами */
}

/* Активный пункт меню подчеркнут */
.nav-item.active {

    text-underline-offset: 4px; /* Отступ линии от текста */
    text-decoration-thickness: 2px;
}

.nav-item .nav-text {
    text-decoration: none;
}

.nav-item.active .nav-text {
    text-decoration: underline;
    text-decoration-thickness: 1.5px; /* Задаем толщину */
    text-underline-offset: 1px;
}

.nav-item {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);

    /* Плавный переход при наведении */
    transition: all 0.2s ease;
}

/* можно сделать чуть сильнее для активного */
.nav-item.active {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);


}

.icon {
    font-size: 18px;
}

/* Переключатель языка */
.lang-switch {
    position: absolute; /* Вырываем из потока */
    right: 20px; /* Прибиваем к правому краю */

    display: none;
    /*display: flex;*/
    background: rgba(255, 255, 255, 0.2); /* Полупрозрачный фон */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Тонкая обводка */
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}

.lang-btn {
    background: none;
    border: none;
    color: white;
    padding: 2px 10px;
    border-radius: 15px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    transition: all 0.2s;
}

/* Активная кнопка (белая с синим текстом) */
.lang-btn.active {
    background-color: white;
    color: #42a5f5; /* Цвет текста берем такой же как фон шапки */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lang-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ================= НИЖНИЙ ТАЙМЛАЙН ================= */
.timeline-container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    /* Максимум int32 минус один: таймлайн остаётся выше всего интерфейса, но
       строго ниже модального сообщения .app-alert (у того сам максимум).
       ⚠️ Прежние 10¹² клампились браузером в тот же максимум, что и у
       сообщения, и таймлайн вылезал поверх серой подложки. */
    z-index: 2147483646;
    display: flex;
    justify-content: center;
    pointer-events: none; /* Пропускать клики сквозь контейнер */
}

.timeline {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 5px 5px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    max-width: 80vw;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    pointer-events: auto; /* Включить клики для кнопок */

}

.timeline::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.year-item {
    border: 1px solid #ddd;
    background: white;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    transition: all 0.2s;
}

.far {

    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 0;
}


/* Скрываем checkbox */
.year-item input {
    display: none;
}


/* ================= СТИЛИ ДЛЯ МАРКЕРОВ (Leaflet) ================= */
/* Лейблы городов (белые плашки с синей обводкой) */
.leaflet-tooltip.place-label {
    background-color: white;
    border: 1px solid #42a5f5;
    color: #333;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Стрелка тултипа */
.leaflet-tooltip-bottom:before {
    border-bottom-color: #42a5f5;
}

/* Гарантируем, что body и html занимают всю высоту и не имеют отступов */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Скрывает скроллбары и лишний контент снизу */
}

/* Контейнер карты должен растягиваться на всю доступную область */
#map, .map-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
/* Скрываем футер, если он есть в коде, когда карта активна */
.site-footer {
    display: none;
}

.nav-item i {
    margin-right: 8px;
    font-size: 1.1em;
}


/* Нужно добавить position: relative родительскому элементу для работы точек */
.nav-item {
    position: relative;
    margin-right: 15px; /* Дополнительный отступ для точки */
}

/* ===== Lightbox для фото в карточке ===== */
.place-card-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.place-card-lightbox-content {
    max-width: min(1200px, 96vw);
    max-height: 92vh;
}

.place-card-lightbox-content img {
    width: 100%;
    height: auto;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

/* чтобы было понятно, что кликабельно */
.place-card-image-item img {
    cursor: zoom-in;
}

/* кнопка закрытия (опционально) */
.place-card-lightbox-close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    cursor: pointer;
}

.place-card-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Ограничиваем ширину изображений внутри карточки */
.place-card img {
    max-width: 100%;
    height: auto;
    /*display: block; /* Убирает лишние отступы снизу */

    margin: 0; /* Опционально: отступы сверху и снизу */
}

/* TOOLTIP ДЛЯ МАРКЕРОВ НА КАРТЕ - с цветом топбара */
.leaflet-tooltip.place-tooltip {
    background-color: white;
    border: 2px solid #1E90FF; /* 🔑 Цвет топбара вместо серого */
    color: #000000;
    font-weight: 500;
    border-radius: 3px;
    padding: 4px 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: auto;
    pointer-events: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Убираем стрелку */
.leaflet-tooltip.place-tooltip::before {
    display: none;
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
    .leaflet-tooltip.place-tooltip {
        background-color: #ffffff;
        color: #000000;
        border: 2px solid #1E90FF;
    }
}

/* ================= ФОТО МАРКЕРЫ НА КАРТЕ ================= */
.photo-marker {
    background: transparent;
    border: none;
}

.photo-marker > div {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.photo-marker > div:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ================= КЛАСТЕРЫ ФОТО МАРКЕРОВ ================= */
.photo-cluster-wrapper {
    background: transparent;
    border: none;
    z-index: 300 !important;
}

/* The Megalithic Portal — слой памятников (оффлайн-дамп) */
/* Контейнер divIcon 20×20 — центрируем содержимое (GIF-значок или фолбэк-точку). */
.megalith-marker {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Иконка-маркер = GIF из mapic/ (20×20). Рисуем плоско, как на сайте. */
.megalith-ic {
    cursor: pointer;
    display: block;
}
/* Фолбэк-точка — цвет статуса задаётся инлайном (background). По центру 20×20. */
.megalith-ic--fallback {
    width: 12px; height: 12px;
    background: #c0392b;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
}

/* Крестик подсказки на тач-экране: у Leaflet это 24×24 px под палец (~9 мм) —
   мимо попадали чаще, чем в него, а промах внутри попапа не делает ничего
   (Leaflet гасит клики внутри подсказки). Увеличиваем зону нажатия и
   освобождаем под неё правое поле контента. Только для «грубого» указателя —
   на десктопе вид подсказок не меняется. */
@media (pointer: coarse) {
    .leaflet-container a.leaflet-popup-close-button {
        width: 36px;
        height: 36px;
        font-size: 20px;
        line-height: 34px;
    }

    .leaflet-popup-content {
        margin-right: 34px;
    }
}

.megalith-popup__meta {
    margin-top: 4px;
    font-size: 12px;
    color: #555;
}

.megalith-popup__thumb {
    margin-top: 6px;
}
.megalith-popup__thumb img {
    max-width: 100%;
    border-radius: 4px;
    display: block;
}

.megalith-popup__link {
    margin-top: 6px;
    font-size: 12px;
}

/* ЮНЕСКО — слой объектов Всемирного наследия (чекбокс-оверлей).
   Маркер здесь обычный L.icon (<img> со значком ЮНЕСКО), а не divIcon как у
   мегалитов, поэтому контейнерных правил не нужно — только курсор. */
.unesco-ic {
    cursor: pointer;
}

.unesco-popup__meta {
    margin-top: 4px;
    font-size: 12px;
    color: #555;
}

.unesco-popup__danger {
    margin-top: 4px;
    font-size: 12px;
    color: #c0392b;
    font-weight: 600;
}

.unesco-popup__link {
    margin-top: 6px;
    font-size: 12px;
}

/* Места силы (sacredsites.com) — третий слой объектов. Значок — родная капля
   источника (L.icon, как у ЮНЕСКО), поэтому здесь только курсор; типографика
   карточки повторяет мегалиты и ЮНЕСКО (те же кегли и цвета). */
.sacred-ic {
    cursor: pointer;
}

/* Длинные названия переносим ПО СЛОВАМ (заказчик 01.09.2026): break-word рвёт
   слово только тогда, когда оно само шире карточки. */
.sacred-popup {
    overflow-wrap: break-word;
    word-break: normal;
}

.sacred-popup__meta {
    margin-top: 4px;
    font-size: 12px;
    color: #555;
}

.sacred-popup__links {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
}

/* Ссылку рвём где угодно: доменное имя целиком может не влезть, а переносить
   его по словам не по чему (заказчик: «если ссылка — то неважно»). */
.sacred-popup__links a {
    overflow-wrap: anywhere;
    word-break: break-all;
}

.sacred-popup__link {
    margin-top: 6px;
    font-size: 12px;
}

.photo-cluster-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 2px solid #42a5f5 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    background: #eee center center / cover no-repeat;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.photo-cluster-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.photo-cluster-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #42a5f5;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 0 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
}

/* ================= ВНЕШНИЕ ССЫЛКИ НА КАРТЫ ================= */
.maps-panel#externalMapsPanel {
    /* Используем те же стили позиционирования, что и у #mapsPanel,
       но можно чуть сдвинуть или переключать их visibility */
    display: none;
}

.maps-panel#externalMapsPanel.active {
    display: block;
}

.external-maps-list {
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.external-maps-link {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    color: black;
    text-decoration: none;
    font-size: var(--font-size-base);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast);
}

.external-maps-link:hover {
    background-color: #9ECFFF;
    color: black;
}

/* ================= ПОИСК (Leaflet Geocoder) ================= */
/* Скрываем стандартную кнопку геокодера, так как у нас своя в тулбаре */
.leaflet-control-geocoder {
    display: none !important;
}

/* Контейнер для результатов поиска, если будем показывать кастомно */
.leaflet-control-geocoder-form {
    display: none;
}

/* Полностью скрываем кнопку плагина PolylineMeasure */
#polyline-measure-control {
    display: none !important;
}


/* ===== СКРОЛЛ ДЛЯ ВСЕХ СТРАНИЦ КРОМЕ КАРТЫ ===== */

/* По умолчанию разрешаем прокрутку документа */


/* На карте — наоборот, никаких скроллов внутри */
body.page-map-active #map_page.page.active {
    overflow: hidden !important;
}

/* ===== UNIVERSAL FLEX LAYOUT: скроллбар начинается под хедером ===== */

/* Body всегда flex-column, заполняет viewport */
body {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Контейнер страниц: занимает всё пространство под хедером */
.pages-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding-top: 0;
}

/* Не-карта: скролл внутри .pages-container (скроллбар под хедером) */
body:not(.page-map-active) .pages-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* ⚠️ Контейнер кончается на ВЕРХУ футера, а не под ним: иначе его
       скроллбар уезжает за полосу (жалоба 29.09.2026, замер: контейнер
       30…900 при футере 870…900). */
    margin-bottom: var(--narrow-footer-h);
    /* Место под буферную полосу над футером — под неё уходит текст. */
    padding-bottom: 16px;
    /* ⚠️ Фон — цвет страницы. Содержимое (.page) кончается на 16px выше низа
       контейнера (тот самый padding), и в этой полосе просвечивал фон <html>
       rgb(252,252,249): у правого края, куда не достаёт буферная полоса
       (right: 18px, она обходит колонку скроллбара), это выглядело светлым
       квадратом у низа скроллбара (жалоба 30.09.2026; замер 1400×900: правые
       12px строк 854…868 — rgb(252,252,249) вместо бежевого). */
    background-color: rgb(241, 233, 216);
}

body:not(.page-map-active) .pages-container::-webkit-scrollbar {
    width: 8px;
}

body:not(.page-map-active) .pages-container::-webkit-scrollbar-track {
    background: #f1e9d8;
}

body:not(.page-map-active) .pages-container::-webkit-scrollbar-thumb {
    background-color: #666666;
    border-radius: 4px;
}

/* Не-карта: содержимое страниц не ограничено по высоте */
body:not(.page-map-active) .page.active {
    max-height: none !important;
    overflow: visible !important;
}

/* Карта занимает высоту экрана минус хедер */


/* Инструменты карты и панели привязываем к высоте хедера 50px */

body.page-map-active .maps-panel {
    top: 50px ;
}

body.page-map-active .search-panel {
    border-radius: 4px;
    max-width: 250px;
}


/* ===== PHOTOSWIPE КАСТОМИЗАЦИЯ ===== */

/* 60px затемнённая рамка вокруг фото */
.pswp__scroll-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    box-shadow: inset 0 0 0 60px rgba(0, 0, 0, 0.85);
    pointer-events: none;
    z-index: 5; /* между слайдами (1) и кнопками (10) */
}

@media (max-width: 767px) {
    .pswp__scroll-wrap::after {
        box-shadow: inset 0 60px 0 0 rgba(0, 0, 0, 0.85);
    }
}

/* Контейнер миниатюр */
.pswp-thumbnails {
    position: fixed;
    bottom: 0 !important;
    left: 0;
    right: 0;
    height: calc(90px + var(--sab, 0px));
    background: black;
    display: none;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 10px 20px calc(10px + var(--sab, 0px)) 20px;
    overflow-x: auto;
    z-index: 999999;
    scrollbar-width: none;
    cursor: grab;
}

/* Центрируем если миниатюр мало */
.pswp-thumbnails.few-items {
    justify-content: center;
}

.pswp-thumbnails::-webkit-scrollbar {
    height: 0;
}

.pswp-thumbnails.active {
    display: flex;
}

.pswp-thumbnails.is-dragging {
    cursor: grabbing;
}

/* Миниатюры */
.pswp-thumb {
    height: 60px;
    width: 80px;
    object-fit: cover;
    opacity: 0.6;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: 0.2s;
    flex-shrink: 0;
}



/* Кастомный caption для PhotoSwipe */
.pswp__custom-caption {
    position: absolute;

    /* Прибиваем к левому краю и растягиваем */
    left: 0;
    right: 0;
    width: 100%;

    /* Убираем ограничения ширины и сдвиги */
    transform: none;
    max-width: none;
    border-radius: 0; /* На всю ширину скругления обычно не нужны */

    /* Остальное по вашему вкусу */
    bottom: 90px; /* Высота над низом (под миниатюры) */
    padding: 10px 20px; /* Чуть больше отступы по бокам */
    background: black;
    color: #fff;
    text-align: center;
    pointer-events: none;
    font-size: 12px;

    /* Чтобы текст не прилипал к краям на мобильных */
    box-sizing: border-box;
}


.pswp__custom-caption:empty {
    display: none;
}

/* ===== ВИДЕО В PHOTOSWIPE ===== */
.pswp__video-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pswp__video {
    max-width: 90vw;
    max-height: 80vh;
    background: #000;
    border-radius: 4px;
}

/* Миниатюра видео в списке */
.pswp-thumb-video {
    position: relative;
    height: 60px;
    width: 80px;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: 0.2s;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.pswp-thumb-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ⚠️ Центрирование «play» НЕ должно зависеть ни от shorthand `inset`, ни от
   flex-выравнивания: на мобильных движках (жалоба 03.08.2026, Android) оверлей
   схлопывался по содержимому и треугольник уезжал к верхнему краю миниатюры.
   Поэтому: растяжка — четырьмя longhand-смещениями, центровка иконки — своим
   absolute + translate(-50%,-50%). flex оставлен как запасной путь. */
.pswp-thumb-video-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.pswp-thumb-video-overlay svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    fill: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* 1. Отключаем системный серый/синий квадрат при тапе на iOS и Android */
.pswp-thumb,
.pswp-thumb-video {

    outline: none;
}

/* 2. Стили ТОЛЬКО для активного (открытого сейчас) фото */
.pswp-thumb.active,
.pswp-thumb-video.active {
    opacity: 1 !important;
    border-color: #42a5f5 !important;
}

/* 3. Эффект наведения ТОЛЬКО для ПК (где есть мышка) */
@media (hover: hover) and (pointer: fine) {
    .pswp-thumb:hover,
    .pswp-thumb-video:hover {
        opacity: 1;
        border-color: var(--color-primary);
    }

}

/* Рамка вокруг открытого большого фото в PhotoSwipe */
.pswp__img {
    border: 2px solid #42a5f5;
    box-sizing: border-box;
}

/* 4. ЖЕЛЕЗОБЕТОННЫЙ СБРОС для мобилок */
/* Если устройство с тачскрином, жестко запрещаем менять стили при касании,
   пока скрипт сам не добавит класс .active */
@media (hover: none) {
    .pswp-thumb:not(.active),
    .pswp-thumb-video:not(.active) {
        opacity: 0.6 !important;
        border-color: transparent !important;
    }
}


/* Видео в карточке места */
.place-card-video-item {
    cursor: pointer;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 80px;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}

.video-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Центрирование — как у миниатюры в PhotoSwipe (см. .pswp-thumb-video-overlay):
   longhand-смещения + собственный translate(-50%,-50%) у иконки. */
.video-play-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.2s;
}

.video-thumbnail:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.15);
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    fill: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s;
}

/* ⚠️ hover-увеличение обязано сохранять центрирующий translate, иначе иконка
   прыгает в правый нижний угол при наведении. */
.video-thumbnail:hover .video-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Place card navigation (prev/next + dots) */
.place-card-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 14px;
}

.place-card-nav button {
    border: none;
    background: rgba(var(--color-brown-600-rgb), 0.12);
    color: #000;
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    cursor: pointer;
}

.place-card-nav button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.place-card-dots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.place-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: rgba(var(--color-brown-600-rgb), 0.25);
    cursor: pointer;
}

.place-card-dot.active {
    background: var(--color-primary);
}

#readerpage .reader {
    max-width: 1100px;
    margin: 0 auto;
}

#readerpage .reader-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
}

#readerpage .reader-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

#readerpage #readerTitle {
    font-size: 22px;
    line-height: 1.2;
}

.wiki-content {
    line-height: 1.65;
}

.wiki-content p {
    margin: 0 0 12px 0;
}

.wiki-content h1, .wiki-content h2, .wiki-content h3 {
    margin: 18px 0 12px;
}

.wiki-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.reader-chapter-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
}

.reader-chapter-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

@media (max-width: 900px) {
    #readerpage .reader-layout {
        grid-template-columns: 1fr;
    }
}

/* Стили для новых дневников */
/* Стили для API дневников */
.diary-section-api {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.diary-entry {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.diary-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Заголовок: Автор + Дата */
.diary-header {
    font-size: 0.95em;
    margin-bottom: 6px;
    line-height: 1.4;
    color: #333;
}

.diary-author {
    font-weight: 700;
    color: #000; /* Черный, как в примере */
    margin-right: 8px;
}

.diary-date {
    color: #666;
    font-size: 0.95em;
}

/* Сам текст */
.diary-text {
    font-size: 0.95em;
    line-height: 1.6;
    color: #000000;
    text-align: left;
}

/* Для Bang! и коротких фраз в дате */
.diary-date em, .diary-date i {
    font-style: italic;
    color: #c0392b; /* Красный оттенок для Bang!, если хотите выделить */
}

/* Выравнивание текста дневников по ширине */
.api-diary-paragraph-text,
.api-diary-full-chapter {
    text-align: justify;
    /* Опционально: добавить переносы слов для лучшего выравнивания */
    hyphens: auto;
    -webkit-hyphens: auto;
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif !important;
    font-size: 14px;
    color: #000000;
}
.api-diary-paragraph-text{
    margin-bottom: 8px;
}

/* Для полной главы (pre) нужно разрешить перенос строк */
.api-diary-full-chapter {
    word-break: break-word;
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
    font-size: 14px;

}

/* ЗОНА СИСТЕМНОЙ ПАНЕЛИ ANDROID под футером — цвета футера.
   Заказчик 08.09.2026: «на Андроиде у меня теперь белая полоса».
   После снятия viewport-fit=cover (см. index.html и docs/ui.md) вьюпорт больше
   не заезжает под системную панель — и в этой полосе Chrome рисует ФОН
   КОРНЕВОГО элемента, а он у нас светлый (--color-background). Раньше туда
   заезжала карта, теперь остаётся белая кромка высотой с жестовый индикатор.
   ⚠️ Красим именно `html`: canvas-фон страницы берётся у корня, если у него
   есть свой background (у нас есть, строка выше по файлу), и фон body в этой
   зоне уже не виден. Только на карте — на остальных страницах фон свой.
   ⚠️ ЦВЕТ — ПО ТЕМЕ УСТРОЙСТВА (02.10.2026). История цвета этой полосы:
     светлый по умолчанию → «на Андроиде у меня теперь белая полоса» (08.09);
     #42a5f5 (цвет футера) → полоса слилась с футером, «футер слишком широкий
       снизу» (01.10, замер по скриншоту: 29 CSS px до низа синего вместо 8);
     чёрный → «под футером появляется чёрная полоса… нужно сделать её такого же
       цвета, как фон нашей карты. А ещё лучше — системным цветом» (02.10).
   ⚠️ С 07.10.2026 — РОВНО ТЕ ЦВЕТА, КОТОРЫМИ РИСУЕТ САМ БРАУЗЕР, замеренные
   заказчиком пипеткой на его планшете (расширение Pick Color):
     тёмная тема — панель браузера #131313, наша полоса была #000000;
     светлая тема — панель браузера #FFFFFF, наша полоса была #FCFCF9 (кремовый
       фон карты; на снимке #FCFDF8 — единица расхождения от сжатия).
   Оба раза шов было видно. Путь «отдать браузеру НАШ цвет» через
   <meta name="theme-color"> опробован 06.10 и НЕ СРАБОТАЛ: Chrome на Android
   красит свою панель сам и мету игнорирует (проверено на проде: меты отдаются,
   панель осталась #FFFFFF). Поэтому идём обратно — красим полосу СИСТЕМНЫМ
   цветом, как заказчик и просил 02.10.
   ⚠️ Белый в светлой теме — это НЕ возврат к состоянию 08.09.2026. Тогда белой
   была полоса при ТЁМНОЙ панели браузера, оттого её и было видно; теперь белый
   стоит только там, где сам браузер белый.
   ⚠️ #131313 — константа поверхности Material у Chrome. Другой браузер может
   дать свой оттенок; это осознанный размен: иначе шов остаётся у ЗАКАЗЧИКА,
   на его устройстве. Меты theme-color оставлены — там, где они работают,
   браузер возьмёт тот же самый цвет, и расхождения всё равно не будет.
   ⚠️ Размером полосу не закрыть: прибавка env(safe-area-inset-bottom) даёт на
   телефоне заказчика лишнюю синеву — см. комментарий у меты viewport в
   index.html и замер в docs/ui.md. */
html:has(> body.page-map-active) {
    background-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
    html:has(> body.page-map-active) {
        background-color: #131313;
    }
}

/* ⚠️ …НО САМА СТРАНИЦА ПРИ ЗАГРУЗКЕ НЕ ДОЛЖНА БЫТЬ СИНЕЙ (заказчик 01.10.2026:
   «при загрузке появляется синий фон, раньше не было; на 176 при загрузке
   серый»). Правило выше красит КОРЕНЬ, и пока карта не нарисовалась, в окне
   виден именно он: замер — на 178 фон <html> rgb(66,165,245) всё время
   загрузки, на 176 (эталон) rgb(252,252,249).
   Возвращаем светлый фон САМОМУ body: он `position: fixed` на весь вьюпорт,
   поэтому закрывает синеву внутри окна, а полоса системной панели Android
   лежит ВНЕ вьюпорта — там по-прежнему виден синий фон корня, ради которого
   правило выше и появилось. */
body.page-map-active {
    background-color: var(--color-background);
}

/* ============ ФУТЕР КАРТЫ ============ */
/* Синяя полоса под таймлайном (ТЗ 06.08.2026): координаты курсора, масштабная
   линейка и ©-строка. Цвет и белый текст — как у шапки .top-bar; координаты
   сохраняют типовую серую рамку (решение заказчика на созвоне).
   Высота задаётся --map-footer-h в :root, --sab уходит в padding — так контент
   футера не залезает под системный навбар Android. */
.map-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    /* ⚠️ БЕЗ var(--sab). Раньше высота и нижнее поле прибавляли высоту
       системного навбара Android — и это была ДВОЙНАЯ компенсация: инлайн-фиксер
       в index.html поднимает каждый absolute/fixed элемент с bottom на ту же
       величину, а футер он не пропускает. Замер 26.08.2026 при --sab 48px:
       футер вырастал до 108px И получал bottom:48px, то есть под ©-строкой
       оставалось 48px пустой синевы, а под самим футером — ещё 48px карты.
       Это и есть «непотребство на Андроиде». Правило записано в :root: в
       смещения --sab не добавлять, им занимается фиксер. */
    /* ⚠️ min-height, а НЕ height: если содержимое всё-таки не влезло в строку
       (узкий экран, длинные координаты), футер обязан вырасти, а не обрезать
       ©-строку. Именно обрезанная ©-строка и была видна на телефоне заказчика.
       При штатном содержимом высота выходит ровно --map-footer-h, поэтому все
       замеры и смещения от неё остаются верны. */
    min-height: var(--map-footer-h);
    /* ⚠️ Поля сверху и снизу РАЗНЫЕ намеренно, и мерить их надо ПО ЧЕРНИЛАМ
       (пиксели текста на снимке полосы), а не по текстовым боксам: строки
       разного кегля (16px и 12px) при равной высоте рядов дают разный запас
       внутри ряда. Замер 26.08.2026: с полями 5/1 чернила стояли 10 сверху,
       10 между строками и 6 снизу. С 5/5 — ровно 10/10/10.
       Проверка: tests/test_map_footer.py::test_footer_outer_gaps_match_line_gap. */
    padding: 5px 12px 5px;
    z-index: 2001; /* на 1 выше .timeline-wrapper: они стыкуются, не перекрываются */
    /* Тень НАД полосой — зеркало шапочной (.top-bar светит вниз: 0 2px 4px).
       Заказчик 28.09.2026: «нужно чтобы над футером была тень, такая же как ПОД
       хеддером; её видно, когда карта светлая». */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background-color: #42a5f5;
    color: #fff;
    /* ⚠️ Гарнитура ТА ЖЕ, что у верхнего меню (ТЗ A-1: «гарнитура и кегль — как
       в шапке»). Меню наследует её от `body { font-family: 'Noto Sans' }`, а НЕ
       от --font-family-base (замер: .nav-item → "Noto Sans"). Не заменять на
       переменную — это разведёт футер с шапкой. */
    font-family: 'Noto Sans', sans-serif;
    letter-spacing: 0.3px;                      /* как у .nav-item */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);  /* тоже как у .nav-item */
}

/* Верхний ряд футера. Грид 1fr/auto/1fr: панель выбора даты прижата влево, а
   координаты с линейкой остаются РОВНО по центру полосы независимо от её ширины
   (при обычном flex центр уезжал бы вслед за длиной названия стоянки). */
/* Ряд футера: содержимое по центру, ширина ограничена полосой (max-width),
   чтобы длинное название стоянки не распирало ряд за края экрана. */
.map-footer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Единая высота у всех трёх рядов — иначе шаг между строками неравномерный
       (см. --map-footer-row-h). flex:none, чтобы колонка футера их не ужимала. */
    height: var(--map-footer-row-h);
    flex: none;
}

/* ---- НИЖНИЙ РЯД: © слева, координаты по центру, линейка справа ----
   Правка заказчика 18.08.2026: на десктопе футер в ДВЕ строки, края нижней
   выровнены по краям верхнего меню, линейка прибита к правому краю.

   ⚠️ Сетка, а не flex: только она держит координаты РОВНО по центру независимо
   от длины ©-строки и от того, как линейка меняет ширину при зуме. У flex с
   space-between центр уезжал бы вслед за соседями — ровно то дёрганье, которое
   заказчик просил не допустить (ТЗ, раздел 5, п. 4).
   ⚠️ minmax(0, 1fr), а не 1fr: голый 1fr не даёт колонке сжаться ниже
   min-content, и длинная ©-строка распирала бы ряд (уже обжигались на этом). */
.map-footer-row--info {
    display: grid;
    /* ⚠️ Первая колонка — auto, а НЕ 1fr. При равных боковых колонках левая
       упиралась в (740-237)/2 = 239px, выбор даты со стрелками её выбирал
       целиком, и название стоянки схлопывалось в ноль (замер 19.08.2026).
       Теперь блок выбора берёт по содержимому, а середина отдаёт ему место —
       заказчик просил у названия «запас для увеличения вправо». */
    /* minmax(0, auto): по содержимому, НО со способностью сжиматься. С голым
       auto блок выбора даты не сжимался вовсе и налезал на координаты и линейку
       (замер 19.08.2026); с 1fr — наоборот, схлопывал название в ноль. */
    /* Колонки: слева ВЕСЬ остаток строки под выбор даты и стоянку, затем
       координаты и линейка по содержимому.
       ⚠️ Ни auto, ни равные 1fr тут не годятся (замерено 19.08.2026): с auto
       блок выбора не сжимался и налезал на координаты на 47px, с равными 1fr
       левая колонка упиралась в 239px и название стоянки схлопывалось в ноль.
       У координат white-space:nowrap, они не сжимаются вовсе — значит уступать
       место обязан именно левый блок, а лишнее там уходит в многоточие. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    /* Ширина = ширина верхнего меню, замеряется в main.js (mfSyncMenuWidth).
       Пока не замерена — вся полоса, чтобы ряд не схлопнулся. */
    width: var(--map-menu-w, 100%);
    margin: 0 auto;
}

/* Выбор даты + стоянка + кнопка таймлайна — ПЕРВАЯ колонка (правка заказчика
   19.08.2026: на десктопе футер в две строки, внизу только ©).
   ⚠️ justify-self:start делает элемент шириной по содержимому, и он способен
   вылезти за свою колонку — уже обжигались. Держим min-width:0 и max-width:100%
   (они есть у .map-footer-picker), а длинное название стоянки режется
   многоточием у .mf-stop-title. */
.map-footer-row--info .map-footer-picker {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
    /* ⚠️ БЕЗ overflow:hidden. Он казался страховкой от переполнения колонки, но
       выпадающие списки дат раскрываются ВВЕРХ за пределы этого блока — и он их
       обрезал: клик по пункту уходил в полосу таймлайна (замер 19.08.2026,
       elementFromPoint отдавал .timeline-wrapper). Ширину и так держит колонка
       minmax(0, 1fr), а лишнее в названии режет .mf-stop-title многоточием. */
}

/* Координаты — во ВТОРОЙ колонке сетки, то есть ровно по центру полосы
   независимо от ширины линейки (она меняется при зуме). */
.map-footer-row--info .map-footer-coords {
    grid-column: 2;
}

/* Линейка прижата к ПРАВОМУ краю и удлиняется ВЛЕВО (правка 18.08.2026;
   в ТЗ A-4 было наоборот — «линейка растёт вправо»). */
.map-footer-row--info .map-footer-scale {
    grid-column: 3;
    justify-self: end;
}

/* ---- НИЖНИЙ РЯД: только ©-строка ----
   Правка заказчика 19.08.2026. До неё © жила в одном ряду с координатами и
   линейкой, и полное название туда не влезало: замер на 1440 — ряд ограничен
   шириной меню (740px), «© 2021-2026 CAEMAP.ONLINE — Интерактивная Карта
   Центрально-Азиатской Экспедиции семьи Рерихов» ~430px + координаты 237px +
   линейка 74px ≈ 765px, и строка резалась многоточием посреди слова. Своя
   строка на всю ширину полосы снимает конфликт: хвост прячется только на
   узких экранах (@media ≤871px), где он не влезает и в одиночку. */
.map-footer-row--copy {
    width: 100%;
}

/* ---- Выбор даты: год · месяц · число ---- */
.map-footer-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.mf-pick-wrap {
    position: relative;
}

/* Плашек НЕТ (правки 11.08.2026): белый полужирный текст прямо на голубом.
   min-width убран намеренно — он и создавал широкие пустые промежутки между
   «1926», «май» и «29»; теперь ширина по слову, а расстояние задаёт только gap. */
.mf-pick {
    appearance: none;
    box-sizing: border-box;
    height: var(--map-footer-row-h);
    padding: 0 2px;
    border: 0;
    background: none;
    color: #fff;
    /* Кегль и начертание — как у .nav-item верхнего меню (ТЗ A-1). Гарнитура
       наследуется от .map-footer, там она уже общая с шапкой.
       ⚠️ letter-spacing задаём ЯВНО: у кнопок UA-стиль ставит `normal`, и от
       .map-footer 0.3px не наследуется (замер: было normal против 0.3px в меню). */
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3px;
    /* ⚠️ И letter-spacing, и text-shadow кнопкам задаём ЯВНО: от .map-footer они
       не наследуются (замер: тень «none» против «0 1px 4px» в меню). */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.mf-pick[disabled] {
    opacity: 0.55;
    cursor: default;
}

/* Выбранное значение — подчёркиванием, а не заливкой: фон остаётся голубым */
.mf-pick.is-set {
    /* ⚠️ Линия ТОЧЕЧНАЯ, и ровно такая же, как у координат (.mf-coord-click:
       1px dotted rgba(255,255,255,.7)). Заказчик на созвоне 27.08.2026:
       «подчёркивание в футере сделай таким же, с точечками» — довод у него
       содержательный: наверху, в шапке, сплошной линией подчёркнута ССЫЛКА, и
       сплошная линия в футере читается так же, хотя ссылкой не является.
       ⚠️ Цвет и толщину задаём ЯВНО: по умолчанию линия берёт цвет текста
       (чистый белый) и рисуется тоньше — с координатами тогда не совпадает.
       Историю не повторять: 26.08 линия уже была точечной, 27.08 я по ошибке
       вернул сплошную, прочитав ТЗ наоборот. */
    /* ⚠️ Линию рисует ПСЕВДОЭЛЕМЕНТ с тем же border-bottom, что у координат, а
       НЕ text-decoration. Заказчик 09.09.2026: «подчёркивания у даты и у
       координат отличаются, нужно сделать как у координат». И то и другое
       «dotted», но рисуются они разными подсистемами: у text-decoration точки
       мельче и чаще, у border-bottom — крупнее и реже, рядом в одной плашке
       разница видна.
       ⚠️ left/right = 2px — ровно горизонтальный padding кнопки, чтобы линия
       шла по тексту, а не шире его.
       ⚠️ ЗАЗОР ОТ БУКВ подобран замером по чернилам, а не формулой: у кнопки и
       у координат разные кегль и интерлиньяж, и «низ элемента» у них приходится
       на разную высоту под базовой линией. Заказчик 09.09.2026: «расстояние от
       подчерка до низа букв большое слишком, надо чтобы точно как у координат».
       Замер (node tools/diag_footer_underline.js) при bottom: -1px — десктоп 6px
       против 4px у координат, мобильный 4.73 против 3.64. Отсюда 1px здесь и 0
       в мобильном медиазапросе (там у кнопки и координат один кегль 12/18). */
    position: relative;
}

.mf-pick.is-set::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 1px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

/* ПОКА ОТКРЫТ СПИСОК футер поднимается НАД панелью инструментов карты.
   Заказчик 09.09.2026 (скриншот): список годов уходит под кнопки зума.
   Замер: .map-tools z-index 2100 против .map-footer 2001, и любое пересечение
   отдаёт верх кнопкам. Поднять сам список нельзя — .map-footer с z-index и
   position создаёт КОНТЕКСТ НАЛОЖЕНИЯ, внутри которого потомку выше родителя
   не подняться.
   ⚠️ Поднимаем ТОЛЬКО на время открытого списка: постоянный z-index выше 2100
   клал бы весь футер поверх кнопок карты, а на низком экране колонка кнопок
   доходит до него. Класс ставит mfSyncFooterZ в main.js. */
.map-footer.mf-menu-open {
    z-index: 2200;
}

/* Список раскрывается ВВЕРХ (bottom: 100%) — под футером места нет */
.mf-pick-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
    border-radius: 4px;
    background: #fff;
    color: #111;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

.mf-pick-menu[hidden] {
    display: none;
}

.mf-pick-opt {
    display: block;
    width: 100%;
    padding: 5px 14px;
    border: 0;
    background: none;
    color: inherit;
    font: 600 12px/1.2 "Noto Sans", sans-serif;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.mf-pick-opt:hover {
    background: #e3f2fd;
}

.mf-pick-opt.is-active {
    background: #42a5f5;
    color: #fff;
}

/* Пункт сброса уровня — отделён чертой и приглушён, чтобы не путался со
   значениями. Заменяет убранную кнопку «×». */
.mf-pick-opt--clear {
    color: #666;
    font-style: italic;
    border-bottom: 1px solid #e0e0e0;
}

/* ---- Текущая стоянка (дубль состояния карточки места) ----
   Правки 11.08.2026: ни плашки, ни рамки — белые полужирные стрелки и название
   прямо на голубом; дата убрана совсем (она видна в карточке места). */
.mf-stop {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    /* ⚠️ Потолок 260px снят (правка заказчика 18.08.2026: «название места должно
       иметь запас для увеличения вправо»). Обрезка по первому слову в JS тоже
       убрана — имя показывается целиком и растёт вправо. Ряд не распирает:
       .map-footer-picker центрирован и ограничен шириной полосы, а на самый
       крайний случай остаётся многоточие у .mf-stop-title. */
    max-width: min(560px, 60vw);
    flex: 0 1 auto;
    min-width: 0;
}

.mf-stop[hidden] {
    display: none;
}

/* ⚠️ Перебиваем базовое правило .nav-arrow-btn (белый квадрат 30×30 с серой
   обводкой): в футере стрелка — только глиф на голубом. Класс типовой оставлен
   намеренно, чтобы стрелки жили в одном месте разметки с карточкой места. */
.mf-stop .nav-arrow-btn {
    width: auto;
    height: auto;
    padding: 0 2px;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    /* Кегль как у стрелок в карточке места (.nav-arrow-btn — 14px), правка
       заказчика 18.08.2026. Плашки 30×30 у футерных стрелок нет, поэтому
       совпадает именно глиф. */
    font-size: 14px;
}

.mf-stop .nav-arrow-btn:hover {
    background: none;
    color: #fff;
}

.mf-stop .nav-arrow-btn[disabled] {
    opacity: 0.45;
}

/* Кнопка вкл/выкл таймлайна в футере (правка заказчика 18.08.2026): «только сам
   значок — белым цветом без контура кнопки». Стоит сразу за названием стоянки.
   Выключенное состояние приглушено, включённое — полный белый; фона и рамки нет
   ни в одном из них. */
.mf-tl-btn {
    appearance: none;
    flex: 0 0 auto;
    margin-left: 10px;
    padding: 0 2px;
    height: var(--map-footer-row-h);
    border: 0;
    outline: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 0.6;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.mf-tl-btn:hover {
    opacity: 0.85;
}

.mf-tl-btn.active {
    opacity: 1;
}

.mf-stop-body {
    min-width: 0;
    text-align: center;
}

/* ЖЁЛТЫЙ ВЫБОР В ФУТЕРЕ (заказчик 17.09.2026, пп. 8 и 9).
   Цвет тот же, что у подсветки маршрута (#ffd400), держится 60 с — снимает
   таймер в main.js (mfClearFlash).
   ⚠️ Меняется ТОЛЬКО color: пунктир под датой рисует .mf-pick.is-set::after
   своим цветом rgba(255,255,255,.7) и остаётся белым, как и просил заказчик. */
.map-footer .mf-pick.mf-flash,
.map-footer .mf-stop-title.mf-flash {
    color: #ffd400;
}

/* Дата попала в СЕРЕДИНУ диапазона стоянки — название мигает раз в секунду.
   ⚠️ steps(1, end): нужен именно переключатель белый/жёлтый, а не плавный
   перелив — «менять цвет шрифта с белого на жёлтый и обратно с периодом
   1 раз в секунду». */
.map-footer .mf-stop-title.mf-flash-blink {
    animation: mf-title-blink 1s steps(1, end) infinite;
}

@keyframes mf-title-blink {
    0%, 49.99% { color: #ffd400; }
    50%, 100%  { color: #fff; }
}

/* Название стоянки кликабельно (заказчик 25.09.2026, п. 3). Подчёркивание —
   ТОЧНО как у координат (.mf-coord-click): пунктир 1px rgba(255,255,255,.7),
   при наведении белый. ⚠️ Не text-decoration: у него точки мельче и чаще, и
   рядом в одной плашке разница видна — на этом уже спотыкались 09.09.2026. */
.map-footer .mf-stop-title {
    cursor: pointer;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.7);
}

.map-footer .mf-stop-title:hover {
    border-bottom-color: #fff;
}

/* Пустое название (карточка ещё не открыта) подчёркивать нечем. */
.map-footer .mf-stop-title:empty {
    border-bottom: 0;
    cursor: default;
}

.mf-stop-title {
    /* Кегль и начертание как у верхнего меню (ТЗ A-1); гарнитура наследуется. */
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    /* Многоточие — только страховка на совсем узком экране: по правке 18.08.2026
       имя показывается целиком и растёт вправо (обрезка в JS снята). */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Заказчик 28.09.2026: «название мест нужно на 1 пиксель ниже опустить — только
   в десктоп версии». Двигаем ВЕСЬ блок стоянки, то есть название ВМЕСТЕ со
   стрелками: их чернила стояли на одной строке с названием, и сдвиг одного
   названия развалил бы группу. Смещение относительное — на раскладку не влияет,
   высота футера и рядов прежняя. */
@media (min-width: 872px) {
    .map-footer .mf-stop {
        position: relative;
        top: 1px;
    }
}

/* Даты в футере нет (правки 11.08.2026) */
.mf-stop-date {
    display: none;
}

/* Рамки вокруг координат НЕТ — снята по ТЗ от 09.08.2026 (в первой редакции она
   требовалась; в DoD осталась старая формулировка). */
.map-footer-coords {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Широта и долгота кликабельны: рисуют параллель/меридиан. Пунктир снизу —
   единственный намёк на кликабельность, обычный курсор-палец на плашке
   координат выглядел бы как ссылка. */
.mf-coord-click {
    cursor: pointer;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.7);
}

.mf-coord-click:hover {
    border-bottom-color: #fff;
}

/* Линия для этой координаты сейчас на карте. Заливку убрал (заказчик: «может и не
   нужно выделять цветом») — остаётся сплошная белая черта вместо пунктира. */
.mf-coord-click.is-on {
    border-bottom: 1px solid #fff;
}

/* Линейка в футере — БЕЛАЯ («метки на синем фоне белого цвета»), в отличие от
   чёрной на карте.

   ⚠️ Фиксированной ширины 100px здесь БОЛЬШЕ НЕТ (правка заказчика 18.08.2026:
   «масштаб привязан к правому краю, удлиняться должен влево»). Раньше коробка
   была фиксированной, а линейка центрировалась в ней — так ряд не дёргался при
   зуме. Теперь от дёрганья спасает сетка ряда: линейка сидит в своей колонке с
   justify-self:end, её правый край не двигается, а расти она может только влево,
   в свободное место колонки. Соседей это не сдвигает. */
.map-footer-scale {
    position: relative;
    width: max-content;
    height: var(--map-footer-row-h);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ⚠️ width: max-content обязателен. Без него линейка растягивалась на все 100px
   коробки: подпись центрировалась по коробке, а полоса оставалась прижатой влево,
   и на коротком масштабе «100 km» свисало правее конца полосы. На карте линейка
   лежит в absolute-контейнере, который обжимает полосу (замер: контейнер 92px =
   полоса 92px, сдвиг центров 0) — здесь воспроизводим то же поведение. */
.map-footer-scale .custom-scale {
    position: static;
    width: max-content;
    color: #fff;
    text-shadow: none;
}

.map-footer-scale .custom-scale-bar {
    border-color: #fff;
}

/* ©-строка ВСЕГДА в одну строку: высота футера фиксирована (--map-footer-h), и
   перенос на вторую выдавливал ряды футера за его верхний край.
   ⚠️ display:block перебивает flex от .map-footer-row: во flex текстовый узел и
   <span> с хвостом названия становятся ДВУМЯ элементами, и между ними влезал
   gap ряда — в строке появлялся разрыв «CAEMAP.ONLINE   — Интерактивная». */
.map-footer-copy {
    display: block;
    font-size: 12px;
    /* Ряд тут display:block (см. выше), align-items:center не действует — строку
       центрирует по высоте ряда сама line-height. */
    line-height: var(--map-footer-row-h);
    text-align: center;
    letter-spacing: var(--letter-spacing-tight);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Узкие экраны: полное название в строку не влезает — оставляем только домен */
@media (max-width: 871px) {
    /* ⚠️ Хвост названия здесь БОЛЬШЕ НЕ ПРЯЧЕМ (заказчик 19.08.2026: «текст
       футера не тот»). Раньше на узких экранах оставался только домен, потому
       что строка была однострочной; теперь ©-строка переносится на две. */
    /* ⚠️ ©-строка на мобильных — ОДНА строка полным текстом. Перенос на две
       давал четвёртую строку футера (жалоба заказчика 19.08.2026: «стало вообще
       в 4 строки, а было в три»), а прятать хвост нельзя — текст должен быть
       полным. Компромисс: мелкий кегль, при котором фраза целиком влезает в
       390px (замер ниже в тесте сторожит, что она не обрезается). */
    /* ⚠️ На мобильных — СОКРАЩЁННАЯ ©-строка: только «© 2021-2026 CAEMAP.ONLINE»
       (заказчик 20.08.2026, после просмотра на телефоне). Полный текст в 390px
       читается только кеглем 7px — мелко; хвост прячем, кегль возвращаем к
       нормальному. Хвост живёт в отдельном span .mf-copy-tail именно ради этого. */
    .mf-copy-tail {
        display: none;
    }

    /* ©-строка тоже 12px/18px — иначе её ряд выше остальных по пустоте, и
       межстрочные зазоры выходят неравными (замер: 5 и 6 вместо равных).
       Вес оставлен обычным: это подпись, а не пункт меню. */
    .map-footer-copy {
        white-space: nowrap;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0;
        text-align: center;
    }

    /* Ряды те же три, что и на десктопе, только компактнее. */
    :root {
        /* Заказчик 19.08.2026: «слишком много пустых строк». Ряды ужаты, а
           ©-строка мелкая и в одну строку (nowrap — см. .map-footer-copy выше;
           расчёт «© в две строки» устарел, из-за него в высоте оставалось 8px
           пустоты, которые centering разбрасывал по краям — замер 25.08.2026
           дал 7px над первой строкой и 8px под последней при межстрочных 2 и 4).
           ⚠️ 26.08.2026 всё перемерено ПО ЧЕРНИЛАМ против ШАПКИ — заказчик:
           «отступы сверху и снизу от текста до краёв и межстрочный интервал
           должны быть такие же как в хеддере».
           Шапка на телефоне: поля 3px + margin .nav-items 4px, три строки по
           18px с gap 1px.
           ⚠️ 28.08.2026 ВСЕ ЧИСЛА ПЕРЕМЕРЕНЫ ЗАНОВО. Прежние («чернила 11/11 и
           в шапке, и в футере») сняты с РАЗМЫТОГО снимка: диалог выбора языка
           вешает на body класс modal-open, а тот — filter: blur(5px) на всё
           содержимое страницы. По размытому снимку глифов почти не видно (60
           пикселей на строку вместо нескольких сотен), и зазоры выходили
           неверные. Отсюда и жалоба заказчика на созвоне 27.08.2026, что
           разница видна: «ты не видишь, что там разные расстояния? Очень
           сильно заметно разные».
           Честный замер на 390px: шапка 8.3 сверху / 10.0 снизу, футер был
           11.0 / 10.7. Поля 9/6 → 6/5, высота 71 → 67.
           6 + 18 + 1 + 18 + 1 + 18 + 5 = 67.
           ⚠️ 04.09.2026 мерено ПО ТЕКСТОВЫМ КОРОБКАМ (Range API), а не по
           чернилам: чернила у шапки закрывают иконки в строках, и межстрочное
           по ним не читается вовсе. Требование заказчика прежнее — «отступ
           сверху до первой строки, отступ снизу до третьей и межстрочное как в
           шапке», теперь оно выражено в тех же единицах, что и у шапки.
           Шапка на 390px: 8.0 сверху / 9.0 снизу, межстрочные 2.0 и 2.0.
           Футер был 6.5 / 6.0 при межстрочных 1.5 и 2.0.
           7 + 18 + 2 + 18 + 1 + 18 + 8 = 72 — ровно высота шапки, и ШАГ СТРОК
           тоже её: 19 и 19 (у шапки 17 текста + 2 зазора).
           ⚠️ Зазоры рядов РАЗНЫЕ (2 и 1) намеренно: в первом ряду стоят стрелки
           стоянки, по их базовой линии равняется вся строка и текст садится на
           1px ниже, чем во втором ряду. Лишний пиксель зазора это ровно
           компенсирует, и ВИДИМЫЙ шаг строк выходит одинаковый.
           ⚠️ Ряды остаются 18px (= line-height текста). Вариант «ряд 17, поля
           8/9, зазор 2» проверен и отвергнут: элементы ряда сами 17-19px
           высотой, в 17px ряду они центрируются по-разному, и текст внутри
           одной строки расходился на 0.5-1px (замер 04.09.2026 с живыми
           данными: поля даты 780.5, название места 779.5). */
        --map-footer-h: 72px;
        --map-footer-row-h: 18px;
    }

    /* Узкая полоса: сетка шириной с меню не нужна — координаты и линейка просто
       становятся по центру. ⚠️ Высота строки задаётся явно: иначе её диктует
       содержимое (координаты 14px против линейки 20px) и шаг между строками
       уезжает — замер до правки 18.08 давал 24px и 18px вместо равных. */
    /* Поля = 3px паддинга шапки + 4px margin её .nav-items, одним числом.
       ⚠️ Без var(--sab): им занимается инлайн-фиксер, см. .map-footer выше. */
    .map-footer {
        /* ⚠️ Не поровну и не «структурно как в шапке»: у шапки поля 3px, но её
           .nav-items добавляют свой margin, и от края до ТЕКСТА выходит 8.0
           сверху и 9.0 снизу. Футер догоняет именно эти числа (заказчик
           04.09.2026: «отступ сверху от границы до первой строки, отступ снизу
           до третьей строки и межстрочное — как в хедере»).
           Поля 7/8 при рядах 18 дают ровно шапочные 8 сверху, 9 снизу и шаг
           строк 19/19 (замер по тексту 04.09.2026, 390px). */
        padding: 7px 12px 8px;
        /* Зазор между 2-й и 3-й строками. Повторяет десктопное значение
           намеренно: высота футера считается из него явно, и молчаливое
           наследование ломало бы расчёт при правке десктопа. */
        gap: 1px;
    }

    .map-footer-row--info {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        /* ⚠️ height:auto обязателен: у .map-footer-row высота жёстко равна ОДНОЙ
           строке, а здесь ряд разворачивается в две и вылез бы за край футера.
           ⚠️ row-gap 1.5px, а не 1px как у колонки футера: между 1-й и 2-й
           строками текст стоит на 0.5px ближе, чем между 2-й и 3-й (замер
           04.09.2026 давал 1.5 против 2.0 при одинаковом gap). Ровняем по
           ТЕКСТУ, а не по коробкам — заказчик сравнивает глазами именно его. */
        height: auto;
        /* ⚠️ Колоночный зазор 8px, а не 16: при 16 координаты с высотой
           («lat: 27.05204, lng: 88.26347, alt: 2055 м» = 239px) и линейка (74px)
           упирались в ширину уже на 360px — линейка сваливалась на свою строку,
           футер становился четырёхстрочным и ©-строка обрезалась. С 8px запас
           на 360px — 15px. */
        gap: 2px 8px;
    }

    /* Выбор даты уходит на ОТДЕЛЬНУЮ первую строку, координаты с линейкой — на
       вторую; вместе с ©-строкой получается трёхрядный футер. */
    .map-footer-row--info .map-footer-picker {
        order: 1;
        width: 100%;
        justify-self: auto;
        justify-content: center;
    }

    .map-footer-row--info .map-footer-coords,
    .map-footer-row--info .map-footer-scale {
        order: 2;
    }

    /* Каждая визуальная строка ровно --map-footer-row-h: иначе высоту диктует
       содержимое (координаты 14px против линейки 20px) и шаг уезжает. */
    .map-footer-row--info > * {
        height: var(--map-footer-row-h);
        line-height: var(--map-footer-row-h);
    }

    /* ⚠️ Одна коробка на ВСЁ, что стоит в рядах, а не только на прямых потомков
       ряда. Иначе внутренности разной высоты (обёртка поля даты 18, само поле
       17, подпись линейки с полосой 19) центрируются каждая по-своему, и текст
       ОДНОЙ строки расходится по вертикали на 0.5-1px: замер 04.09.2026 с
       живыми данными давал поля даты на 780.5, а название места на 779.5.
       Заказчик сравнивает отступы глазами по строке целиком, поэтому строка
       обязана быть одной линией, а не тремя близкими. */
    /* ⚠️ Ряд равняется ПО БАЗОВОЙ ЛИНИИ, а не по центру. В строке стоят вещи
       разной высоты — поле даты, название места, стрелки, полоса линейки — и
       при центрировании каждая садилась по-своему: замер 04.09.2026 с живыми
       данными давал название места на 780, поля даты на 781, подпись линейки на
       798.5 против координат на 799. Глазами это и есть «строки чуть пляшут».
       По базовой линии весь текст строки встаёт на один пиксель. */
    .map-footer-row--info,
    .map-footer-picker,
    .mf-stop,
    .map-footer-scale {
        align-items: baseline;
    }

    /* ⚠️ Пустой элемент базовой линии НЕ ИМЕЕТ — flex берёт вместо неё нижний
       край коробки, и ряд распухает. Пока не пришли данные (первые ~3 с: нет
       названия места, координаты «—», подписи линейки нет), футер был 77px и
       ОСЕДАЛ до 72 на глазах. Неразрывный пробель нулевой ширины даёт строке
       базовую линию всегда; на ширину и на текст он не влияет. */
    .mf-stop::before,
    .mf-stop-title::before,
    .map-footer-coords::before,
    .map-footer-scale::before {
        content: '\200B';
        /* ⚠️ Кегль и интерлиньяж — как у строки. С унаследованными (14px/21px
           у футера) псевдоэлемент даёт коробку ВЫШЕ ряда, и футер вырастает до
           73px вместо 72. */
        font-size: 12px;
        line-height: var(--map-footer-row-h);
    }

    .map-footer-picker,
    .mf-pick-wrap,
    .mf-pick,
    .mf-stop,
    .mf-stop-title,
    .map-footer-coords,
    .map-footer-scale,
    .map-footer-scale .custom-scale-text,
    .map-footer-copy {
        height: var(--map-footer-row-h);
        line-height: var(--map-footer-row-h);
    }

    /* ⚠️ Ни min-width, ни padding, ни фиксированного размера у стрелок: плашки
       сняты правками 11.08.2026, а высоту ряда держит --map-footer-row-h.
       Кегль 16px верхнего меню — требование ТОЛЬКО для десктопа (заказчик
       18.08.2026: «совпадение по размерам шрифтов также в десктопе»); здесь
       полоса узкая, поэтому шрифт остаётся компактным. */
    /* ⚠️ 26.08.2026: кегль/начертание/интерлиньяж — РОВНО как у пунктов шапки
       (.nav-item .nav-text на ≤871px: 12px, line-height 18px, вес 700).
       Заказчик: «шрифты Даты, Названия и Координат должны быть такие же как в
       хеддере; в футере сейчас шрифты отличаются друг от друга» — было 11px/700
       у даты и названия против 12px/600 у координат и 10px/400 у ©-строки. */
    .mf-pick,
    .mf-stop-title,
    .mf-stop .nav-arrow-btn,
    .map-footer-coords,
    .map-footer-scale .custom-scale {
        font-size: 12px;
        line-height: 18px;
        font-weight: 700;
    }

    /* Полоса «⊔» в футере поднята на 1px: её ЧЕРТА (нижняя граница) обязана
       лежать РОВНО на пунктире под координатами — заказчик 10.09.2026, после
       промежуточного варианта с подъёмом на 3px: «надо чуть ниже опустить,
       чтобы визуально было как в дубликате и на уровне подчёркивания
       координат».
       ⚠️ Ориентир — пунктир координат, а НЕ равенство отступов от базовой
       линии с дубликатом на карте: у копий разные кегль и интерлиньяж (футер
       12px/18px по правилу «шрифты как в шапке», карта 11px/600/13.2px), и
       выровненные по базе линии глаз видит как разные. Замер: пунктир
       координат на 5px ниже базовой линии строки, черта линейки без сдвига
       была на 6px, при подъёме на 3px — на 3px; при −1px обе на 803.
       ⚠️ Сдвиг именно `position: relative`, а не отрицательный margin: высота
       блока остаётся 19px, и ряд футера (выравнивание по базовой линии,
       --map-footer-row-h) не шевелится.
       ⚠️ Только мобильный: на десктопе линейки совпадают и без сдвига
       (замер: верх полосы −7 от низа глифов у обеих). */
    .map-footer-scale .custom-scale-bar {
        position: relative;
        top: -1px;
    }

    /* Зазор до подчёркивания — как у координат (замер: 3.64px у них против 4.73
       у даты при bottom: -1px). Здесь кегль и интерлиньяж у кнопки и координат
       одинаковые (12/18), поэтому линия садится ровно на низ строки. */
    .mf-pick.is-set::after {
        bottom: 0;
    }

    .mf-stop {
        max-width: 190px;
        margin-left: 6px;
    }

    .mf-stop .nav-arrow-btn {
        font-size: 12px;
    }

    /* Дата стоянки в узкую плашку не влезает; она видна в карточке места */
    .mf-stop-date {
        display: none;
    }
}

/* ============ KNIGHTLAB TIMELINE ============ */
/* ⚠️ ПОЛОСА НЕ ПЕРЕХВАТЫВАЕТ МЫШЬ (заказчик 25.09.2026, п. 7): под её
   прозрачной частью карта должна двигаться, зуммироваться и отдавать клики по
   маркерам и тултипам. Обратно события включены только там, где с полосой
   действительно работают, — у линейки и у самих флажков (правило сразу ниже).
   Замер до правки: в любой точке полосы elementFromPoint возвращал
   `tl-timenav-slider`, то есть карта под полосой была недоступна целиком. */
.timeline-wrapper {
    pointer-events: none;
}

/* Линейка — зона жестов оси и кликов по подписям засечек.
   Флажок — его подпись и полоса длительности под ней («сам флажок с названием и
   пространство под ним»); корень флажка растянут на всю высоту полосы, поэтому
   события включаем ИМЕННО детям, а не ему. */
.timeline-wrapper .tl-timeaxis,
.timeline-wrapper .tl-timeaxis *,
.timeline-wrapper .tl-timemarker .tl-timemarker-content-container,
.timeline-wrapper .tl-timemarker .tl-timemarker-timespan {
    pointer-events: auto;
}

/* ⚠️ Подложка слайдера лежит выше оси и забирала бы клики по подписям засечек
   (правка 28.08.2026) — оставляем её прозрачной для мыши и после включения
   событий у линейки. */
.timeline-wrapper .tl-timenav-slider-background {
    pointer-events: none;
}

.timeline-wrapper {
    position: absolute;
    /* Над футером карты, а не по нижнему краю окна */
    bottom: var(--map-footer-h);
    left: 0;
    width: 100%;
    height: var(--tl-strip-h);
    z-index: 2000;
    /* ФОН ГРАДИЕНТОМ: у линейки белый, кверху сходит на нет (заказчик на
       созвоне 27.08.2026: «внизу он белый, а вверху он уже прозрачный
       становится — поэтому таймлайн всегда будет видно», и «сейчас у нас 15
       процентов? — будет 0»). До этого фон был равномерный: 0.95 → 0.7
       (18.08.2026) → 0.15 (24.08.2026), и выросшая до шести рядов полоса
       заметно замутила бы карту.
       Нижние 40px — это линейка, там белое без прозрачности; выше идёт спуск
       до нуля у верхнего края.
       ⚠️ Прозрачность держит ФОН, а не opacity элемента: флажки, засечки и
       подписи оси должны оставаться в полную силу — при opacity на обёртке
       выцвело бы всё содержимое. Саму линейку прикрывает ещё и непрозрачная
       подложка .timeline-wrapper::after (см. ниже): градиент под ней, и на
       читаемость засечек он не влияет. */
    background: linear-gradient(to top,
        rgba(255, 255, 255, 1) 0,
        rgba(255, 255, 255, 1) 40px,
        rgba(255, 255, 255, 0) 100%);
    /* ⚠️ Верхней ГРАНИЦЫ у полосы больше НЕТ (было border-top: 1px solid #ddd).
       Она обозначала край полосы, пока фон был равномерный. С градиентом верх
       полосы прозрачен, и единственной жёсткой линией на карте оставалась
       именно граница — на снимке 28.08.2026 она читается как случайная черта
       поперёк карты, а не как край элемента. Край теперь показывает сам
       градиент. */
}

/* ⚠️ Контейнер оси — ВО ВСЮ ШИРИНУ полосы. Полей у контейнера больше НЕТ.
   С 25.08.2026 по 28.08.2026 он сужался на --tl-inset с обеих сторон, чтобы
   левая засечка стояла правее панели инструментов. Заказчик на созвоне
   27.08.2026 показал, к чему это привело: «у тебя слева некоторая часть экрана
   просто не задействована — вот, тут курсор меняется; надо, чтобы он был
   задействован полноценно слева направо». Сужённый контейнер забирал вместе с
   засечками и зону перетаскивания, и по краям оставались мёртвые полосы шириной
   в поле (на десктопе это по 40px).
   Формулировка заказчика: «расстояние АКТИВНОЙ ЗОНЫ немножко слева и справа
   отступить, а таймлайн сам должен быть во весь экран». Поэтому поле теперь
   держит не контейнер, а ЗАПАС КАДРА в tlFitAxisToRange: крайние засечки
   встают на то же место, что и раньше, а тянуть полосу можно от края до края.
   ⚠️ overflow:hidden оставляем — слайдер TimelineJS шире кадра. */
#timeline-embed {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Скрыть story slider — показать только timenav (ось дат) */
#timeline-embed .tl-storyslider {
    display: none !important;
}
#timeline-embed .tl-timenav {
    height: 100% !important;
    /* ⚠️ Своя граница у .tl-timenav (1px solid #e5e5e5) снимается ОБЯЗАТЕЛЬНО.
       Убрать border-top у .timeline-wrapper мало: замер 28.08.2026 показал, что
       линию поперёк карты рисовала именно эта, библиотечная. С градиентным
       фоном она осталась единственной жёсткой чертой наверху полосы и читалась
       как случайный артефакт на карте. */
    border-top: 0 !important;
}
#timeline-embed .tl-attribution {
    display: none !important;
}
#timeline-embed .tl-menubar {
    display: none !important;
}
#timeline-embed .tl-timemarker-content {
    padding:0;
}


.cae-logo-link {
    position: fixed;
    top: -3px;
    z-index: 9999;
    width: 70px;
    height: 70px;
    transition: transform 0.3s ease;
    isolation: isolate;
}

.cae-logo-link::before {
    content: "";
    position: absolute;
    inset: -24%;
    border-radius: 20%;
    background: radial-gradient(circle closest-side,
        rgba(255, 255, 255, 1) 28%,
        rgba(255, 255, 255, 1) 40%,
        rgba(255, 255, 255, 0.92) 50%,
        rgba(255, 255, 255, 0.78) 58%,
        rgba(255, 255, 255, 0.6) 66%,
        rgba(255, 255, 255, 0.42) 73%,
        rgba(255, 255, 255, 0.27) 80%,
        rgba(255, 255, 255, 0.16) 86%,
        rgba(255, 255, 255, 0.08) 91%,
        rgba(255, 255, 255, 0.035) 95%,
        rgba(255, 255, 255, 0.012) 98%,
        rgba(255, 255, 255, 0) 100%);
    z-index: -1;
    pointer-events: none;
}

.cae-floating-logo {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.95;
    position: relative;
}

/* Эффект при наведении (опционально) */
.cae-logo-link:hover {
    transform: scale(1.15);
}
.cae-logo-link:hover .cae-floating-logo {
    opacity: 1;
}

/* Адаптив для мобильных устройств: делаем поменьше */


/* Выключенный таймлайн НЕ ВИДЕН вовсе (правка заказчика 18.08.2026: раньше
   полоса висела серой полупрозрачной плашкой поверх карты). */
.timeline-wrapper.disabled {
    display: none;
}

/* ЗАСТАВКА «Loading» САМОЙ БИБЛИОТЕКИ — не показываем.
   Жалоба 10.10.2026, п. 1: «при включении ТЛ появляется панель loading, раньше
   не было этого»; 11.10.2026: «loading ещё появляется».
   Это не наша плашка (её убрали 10.10), а сообщение TimelineJS
   `.tl-message-full` со спиннером `.tl-loading-icon` и словом «Loading»: замер
   tools/diag_tl_loading_panel.js — на десктопе ~1 с, во всю ширину полосы.
   «Раньше не было» потому, что до 09.10.2026 ось строилась при загрузке
   страницы, пока полоса скрыта, и заставку никто не видел; с переносом сборки
   на первое включение (docs/performance.md) она оказалась на экране.
   ⚠️ !important — библиотека показывает и прячет сообщение сама; правило
   должно перебить её независимо от того, как она это делает.
   ⚠️ Тем же классом библиотека выводит свои ошибки данных. Посетителю они не
   нужны (английский служебный текст), в консоль они попадают по-прежнему. */
.timeline-wrapper .tl-message-full {
    display: none !important;
}

/* ⚠️ Прозрачность 70% держит ТОЛЬКО .timeline-wrapper, а внутренние слои
   TimelineJS рисуют свой НЕПРОЗРАЧНЫЙ фон поверх неё (замер 21.08.2026:
   .tl-timeline #fff, .tl-timenav #f2f2f2, .tl-timeaxis-background #fff,
   .tl-slider-background #fff) — из-за них полоса выглядела сплошной.
   Гасим их фон, чтобы сквозь полосу была видна карта. */
.timeline-wrapper .tl-timeline,
.timeline-wrapper .tl-slider-background,
.timeline-wrapper .tl-timenav,
.timeline-wrapper .tl-timeaxis-background,
.timeline-wrapper .tl-attribution {
    /* ⚠️ !important обязателен: фон слайдера TimelineJS ставит ИНЛАЙНОМ из опции
       default_bg_color, обычное правило ему проигрывает. */
    background: transparent !important;
}

/* ЛИНЕЙКА ОСИ — НЕПРОЗРАЧНАЯ (правка заказчика 24.08.2026). Полупрозрачной
   остаётся только сама полоса: сквозь неё видна карта, а вот засечки и числа
   на её фоне читались плохо.
   ⚠️ Не возвращаем фон самому .tl-timeaxis-background (z-index 2): он лежит
   ВЫШЕ слайдера, и жёлтая полоса выбранного промежутка (она живёт в слайдере,
   см. tlMarkPeriodBand) ушла бы под него. Поэтому белую подложку рисуем
   псевдоэлементом обёртки с z-index:-1 — она над фоном полосы, но под всем
   содержимым оси: и засечки, и жёлтая полоса остаются поверх неё.
   Высота 40px = .tl-timeaxis-background (39px + верхняя граница). */
.timeline-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: #fff;
    z-index: -1;
    pointer-events: none;
}

/* ⚠️ ОТДЕЛЬНЫМ правилом, а не строкой в списке выше: вставка внутрь списка
   селекторов 23.08.2026 отдала `display:none` всей полосе таймлайна — ширина
   стала нулевой, pixels_per_milli обнулился, и засечки пропали с оси целиком.
   Флажки распорок шкалы (1920 и 1937) служебные, их не показываем; сами события
   нужны — без них TimelineJS не строит деления за пределами дат экспедиции. */
.timeline-wrapper .tl-timemarker[id^="tl-spacer"] {
    display: none;
}

/* Флажок, не проходящий по ШАГУ оси (ТЗ B-3: «все годы» — только длительные
   стоянки). Класс ставит tlApplyAxisSet; из набора такие точки НЕ убираются —
   пересборка оси создаёт инстанс TimelineJS заново и на каждый клик недопустима. */
.timeline-wrapper .tl-timemarker.tl-marker-off {
    display: none;
}

/* ЦВЕТА ФЛАЖКОВ ОСИ (заказчик 17.09.2026, п. 7):
     неактивный — белый полупрозрачный, как плашки-тултипы на карте;
     активный   — голубой цвета шапки (#42a5f5), подпись белая;
     под курсором (только мышь) — жёлтый, как подсветка кнопок тултипа (#ffeb3b).
   Замер до правки: неактивный фон rgb(229,229,229), подпись rgb(191,191,191);
   активный фон rgb(255,255,255), подпись rgb(51,51,51).
   ⚠️ Контур и КЕГЛЬ подписи не трогаем (прямое указание): цвет подписи у
   неактивного остаётся библиотечным, меняется только фон.
   ⚠️ Вместе с фоном обязательно переписывать градиент `tl-headline-fadeout`:
   библиотека гасит длинную подпись в СВОЙ цвет фона (#e5e5e5), и на белом
   флажке оставался серый клин у нижнего края.
   ⚠️ Наведение — под `@media (hover: hover)`: на телефоне :hover залипает после
   касания, и флажок оставался бы жёлтым до следующего тапа. */
.timeline-wrapper .tl-timemarker .tl-timemarker-content-container {
    background-color: rgba(255, 255, 255, 0.85);
}
.timeline-wrapper .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout:after,
.timeline-wrapper .tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p.tl-headline-fadeout:after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%);
}

/* ЗОНА КАСАНИЯ КНОПОК ФУТЕРА (жалоба 05.10.2026, ролик с планшета: «не могу
   включить таймлайн, нажимаю — ничего не происходит»).

   Замер живых размеров: кнопка таймлайна 18×24 на планшете и 18×18 на телефоне,
   стрелки стоянки 13×14 и 12×12, поля даты от 18×18. Палец в такое не попадает
   — рекомендованный минимум 44×44. Вид не трогаем: зону касания растит
   невидимый ::after, а размеры подобраны по замеренным зазорам до соседей
   (14 px у кнопки и стрелок, 4 px между полями даты), чтобы зоны не
   перекрывались и не воровали касания друг у друга.

   ⚠️ Только для пальца. На мыши прицел точный, и расширенные зоны там лишние. */
@media (pointer: coarse) {
    .map-footer .mf-tl-btn,
    .map-footer .nav-arrow-btn,
    .map-footer .mf-pick {
        position: relative;
    }
    .map-footer .nav-arrow-btn::after {
        content: '';
        position: absolute;
        inset: -10px -6px;          /* соседи с обеих сторон: зазор 14–16 px */
    }
    /* ⚠️ У кнопки таймлайна зона НЕсимметрична, и это не прихоть: слева в 14 px
       стоит стрелка стоянки, а справа до края строки футера свободно (замер
       elementFromPoint: на +6…+30 px только контейнеры). Поэтому влево 6 px,
       вправо 20 — и зона выходит ровно 44 px по ширине, как требует палец. */
    .map-footer .mf-tl-btn::after {
        content: '';
        position: absolute;
        inset: -6px -20px -14px -6px;
    }
    /* ⚠️ У полей даты ::after ЗАНЯТ: им рисуется пунктир под выбранной датой
       (.mf-pick.is-set::after), и наша зона касания его бы затёрла. Берём
       ::before — он свободен. */
    .map-footer .mf-pick::before {
        content: '';
        position: absolute;
        inset: -6px -2px;
    }
}

/* ЖЕСТЫ ОСИ ПРИНАДЛЕЖАТ ПОЛОСЕ, А НЕ БРАУЗЕРУ (жалоба 04.10.2026, планшет:
   «при первом заходе таймлайн не реагирует на драги/скроллы»).
   Сдвиг оси одним пальцем висит на ПАССИВНЫХ слушателях — отменить жест они не
   могут. Без touch-action браузер распознаёт горизонтальную протяжку как свою
   прокрутку и перестаёт отдавать touchmove странице. Поэтому зоне жестов —
   линейке, ловушке под ней и флажкам — жест отдаём явно.
   ⚠️ Только этой зоне: под прозрачной частью полосы жесты принадлежат карте
   (правка 25.09.2026, п. 7), и там touch-action остаётся браузерным. */
.timeline-wrapper .tl-timeaxis,
.timeline-wrapper .tl-axis-hitbar,
.timeline-wrapper .tl-timemarker {
    touch-action: none;
}

/* ЛОВУШКА МЫШИ НАД ЛИНЕЙКОЙ (жалоба 04.10.2026).
   TimelineJS уводит контейнер линейки далеко за левый край (замер: left
   −1 009 868 при ширине 2664), и между подписями засечек курсор проваливается
   на карту: курсор-рука, колесо зумит карту, протяжка её же и тащит. Эта полоса
   стоит на месте и ловит мышь во всю ширину окна; её верх и высоту проставляет
   main.js по живой линейке.
   ⚠️ z-index 2 — НИЖЕ самой линейки (3) и флажков (10–12): клики по подписям
   засечек и по флажкам должны доходить до них, а не до ловушки. */
.timeline-wrapper .tl-axis-hitbar {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: auto;
    background: transparent;
}

.timeline-wrapper .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    background-color: #42a5f5;
}

/* ПОЛОСА ДЛИТЕЛЬНОСТИ активной стоянки (заказчик 22.09.2026, п. 1: «чёрный фон
   у флажка — так не должно быть»). Библиотека красит её у активного маркера в
   #333, и на шаге «день» у длительной стоянки это чёрная плашка во всю ширину
   кадра. Цвет — тот же, что у самого активного флажка. */
.timeline-wrapper .tl-timemarker.tl-timemarker-active .tl-timemarker-timespan .tl-timemarker-timespan-content {
    background-color: #42a5f5;
}

/* Z-ПОРЯДОК В ПОЛОСЕ (заказчик 22.09.2026, п. 2): красная линия числа обязана
   уходить ПОД панель с названием, но оставаться видимой на полосе длительности.
   У библиотеки: подпись 6 (активная 9), полоса длительности 8. Поднимаем
   подписи выше линий (линии — 9, см. main.js). */
.timeline-wrapper .tl-timemarker .tl-timemarker-content-container {
    z-index: 10;
}


.timeline-wrapper .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {
    z-index: 12;
}
.timeline-wrapper .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: #fff;
}
.timeline-wrapper .tl-timemarker.tl-timemarker-active .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout:after {
    background: linear-gradient(to bottom, rgba(66, 165, 245, 0) 0%, #42a5f5 80%);
}

/* ⚠️ `body:not(.map-handling)` — пока карту ВЕДУТ (тянут мышью, ведут пальцем,
   крутят колесо), наведение не работает: курсор едет через флажок по пути, а не
   наводится на него (жалоба 03.10.2026, класс ставит main.js). */
@media (hover: hover) {
    body:not(.map-handling) .timeline-wrapper .tl-timemarker:not(.tl-timemarker-active):hover .tl-timemarker-content-container,
    body:not(.map-handling) .timeline-wrapper .tl-timemarker:not(.tl-timemarker-active):focus .tl-timemarker-content-container {
        background-color: rgba(255, 235, 59, 0.85);
        border-color: #d9d9d9;
        /* Под курсором подпись выходит вперёд — но остаётся выше линий даты
           (z 9), чтобы правило п. 2 от 22.09.2026 не нарушалось. */
        z-index: 11;
    }
    /* Библиотека на наведении красит подпись в белый — на жёлтом её не видно.
       Возвращаем библиотечный цвет неактивной подписи. */
    body:not(.map-handling) .timeline-wrapper .tl-timemarker:not(.tl-timemarker-active):hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline,
    body:not(.map-handling) .timeline-wrapper .tl-timemarker:not(.tl-timemarker-active):focus .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
        color: #bfbfbf;
    }
    body:not(.map-handling) .timeline-wrapper .tl-timemarker:not(.tl-timemarker-active):hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout:after,
    body:not(.map-handling) .timeline-wrapper .tl-timemarker:not(.tl-timemarker-active):focus .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout:after {
        background: linear-gradient(to bottom, rgba(255, 235, 59, 0) 0%, rgba(255, 235, 59, 0.85) 50%);
    }
    /* АКТИВНЫЙ флажок под курсором — тоже жёлтый (заказчик 13.10.2026: «так же,
       как это сейчас работает с неактивными»). Цвета те же, z-index остаётся
       активным (12), чтобы флажок не ушёл под соседей.
       ⚠️ Только :hover, без :focus: после клика флажок активен И в фокусе, и
       с :focus он оставался бы жёлтым и после ухода курсора. */
    body:not(.map-handling) .timeline-wrapper .tl-timemarker.tl-timemarker-active:hover .tl-timemarker-content-container {
        background-color: rgba(255, 235, 59, 0.85);
        border-color: #d9d9d9;
    }
    body:not(.map-handling) .timeline-wrapper .tl-timemarker.tl-timemarker-active:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
        color: #bfbfbf;
    }
    body:not(.map-handling) .timeline-wrapper .tl-timemarker.tl-timemarker-active:hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout:after {
        background: linear-gradient(to bottom, rgba(255, 235, 59, 0) 0%, rgba(255, 235, 59, 0.85) 50%);
    }
}

/* То же жёлтое наведение для ПЛАНШЕТА с мышью или стилусом (19.10.2026):
   там `hover: none`, и правила выше не включаются. Класс `.tl-hover` ставит
   main.js только от pointerType mouse/pen — тап пальцем его не даёт. Значения
   те же, что выше; активный сохраняет свой z-index 12. */
body:not(.map-handling) .timeline-wrapper .tl-timemarker.tl-hover .tl-timemarker-content-container {
    background-color: rgba(255, 235, 59, 0.85);
    border-color: #d9d9d9;
}
body:not(.map-handling) .timeline-wrapper .tl-timemarker.tl-hover:not(.tl-timemarker-active) .tl-timemarker-content-container {
    z-index: 11;
}
body:not(.map-handling) .timeline-wrapper .tl-timemarker.tl-hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline {
    color: #bfbfbf;
}
body:not(.map-handling) .timeline-wrapper .tl-timemarker.tl-hover .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline.tl-headline-fadeout:after {
    background: linear-gradient(to bottom, rgba(255, 235, 59, 0) 0%, rgba(255, 235, 59, 0.85) 50%);
}

/* Подписи оси кликабельны (заказчик 27.08.2026): клик по году, месяцу или числу
   уводит таймлайн на эту дату и заполняет поля в футере.
   ⚠️ Курсор и подсветка — единственный признак кликабельности: рамку или
   заливку тут вешать некуда, засечка сидит вплотную к соседним. */
/* ⚠️ Указатель ловит только ПОДПИСЬ, а не коробку засечки: коробка нулевой
   ширины, подпись внутри — 100px с margin-left:-50px, и на плотной шкале коробки
   соседей накрывают чужой текст. Без этого клик по видимой подписи доставался бы
   засечке соседнего месяца (замер 28.08.2026: «tl-timeaxis-tick … intercepts
   pointer events» на подписи, которая визуально свободна). */
/* Засечка, попавшая в поле по краю полосы (см. tlClipAxisEdges в main.js).
   Поле = правый край колонки кнопок левого меню: заказчик 08.09.2026 просил,
   чтобы линейка начиналась ровно на их уровне, а справа — на том же отступе.
   ⚠️ Кликов скрытая засечка не ловит: попасть по ней глазом уже нельзя. */
.timeline-wrapper .tl-tick-edge-hidden,
.timeline-wrapper .tl-tick-edge-hidden .tl-timeaxis-tick-text {
    display: none !important;
    pointer-events: none !important;
}

.timeline-wrapper .tl-timeaxis-tick {
    pointer-events: none;
}

.timeline-wrapper .tl-timeaxis-tick-text {
    pointer-events: auto;
    cursor: pointer;
}

/* Погашенная засечка не кликается: нельзя щёлкнуть по тому, чего не видно.
   Библиотека гасит уезжающие подписи классом tl-timeaxis-tick-hidden, оставляя
   их в DOM, и они перехватывали клики у соседних видимых. */
.timeline-wrapper .tl-timeaxis-tick-hidden,
.timeline-wrapper .tl-timeaxis-tick-hidden .tl-timeaxis-tick-text {
    pointer-events: none;
}

/* ⚠️ Фон слайдера НЕ ЛОВИТ УКАЗАТЕЛЬ. Он растянут на всю полосу и лежит выше
   оси (z-index 6 против auto у засечек), поэтому клик по подписи года доставался
   ему, а не засечке: замер 28.08.2026 — elementFromPoint над подписью возвращал
   .tl-timenav-slider-background, и Playwright отказывался кликать («intercepts
   pointer events»). Своё перетаскивание TimelineJS у нас отключено
   (tlDisableLibraryDrag), а наши обработчики сдвига и зума висят на ОБЁРТКЕ и
   ловят события всплытием — фону указатель не нужен вовсе. */
.timeline-wrapper .tl-timenav-slider-background {
    pointer-events: none;
}

.timeline-wrapper .tl-timeaxis-tick-text:hover {
    color: #1976d2;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Активное состояние кнопки таймлайна (подсветка) */
/* ⚠️ Кнопка таймлайна переехала в футер (18.08.2026) — плашки у неё больше нет,
   и серая заливка активного состояния на голубом фоне выглядела бы грязным
   пятном. Активность показываем яркостью самого значка (см. .mf-tl-btn ниже). */

.leaflet-control-scale {
    pointer-events: none;
}

/* Скрыть стандартный Leaflet scale */
.leaflet-control-scale {
    display: none !important;
}

/* Линейка НА КАРТЕ по умолчанию скрыта (ТЗ A-5 от 09.08.2026): показывается
   только кликом по линейке в футере, повторный клик убирает.
   ⚠️ Скоуп строго по родителю `#map`: в футере лежит ВТОРОЙ экземпляр с тем же
   классом .custom-scale, и голый селектор погасил бы и его. */
#map > .custom-scale {
    display: none;
}

body.map-scale-on #map > .custom-scale {
    display: block;
}

/* Кастомная масштабная линейка — СПРАВА ОТ КНОПОК ЗУМА, вровень с их низом.

   ⚠️ Позицию доводит JS (alignScaleToZoom в main.js): «в ту же визуальную
   позицию, что в десктопе» (заказчик 09.09.2026) означает именно «рядом с
   кнопками зума» — на десктопе замер дал низ линейки 659 при низе зума 661.
   Сами кнопки зума сдвинуты вверх собственным `bottom` (замер: relative,
   bottom 231px на десктопе; на телефоне правило другое и даёт 157px от низа),
   и повторить это правилами CSS нельзя — в CSS нет «относительно другого
   элемента». Отсюда и провал двух прежних попыток: привязка к --tl-strip-h
   уводила линейку в пустоту при выключенном таймлайне, а привязка к футеру —
   вниз, далеко от зума.
   Значения ниже — запасные, до первого вызова JS. */
.custom-scale {
    position: absolute;
    left: 58px;
    bottom: calc(var(--tl-strip-h) + 10px + var(--map-footer-h));
    z-index: 400;
    pointer-events: none;
    font-family: "Noto Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #111;
    text-align: center;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.leaflet-container{
    font-family: "Noto Sans", sans-serif;
    font-weight: 600;
}
.leaflet-tooltip:not(.place-label):not(.place-tooltip) {
    font-weight: 400;
    font-family: "Noto Sans", sans-serif;
    color: #000000;

}

@media (max-width: 871px) {
    .custom-scale {
        font-size: 11px;
    }
}

.custom-scale-text {
    margin-bottom: -7px;
}

.custom-scale-bar {
    box-sizing: border-box;
    height: 8px;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    /* Когда подпись ШИРЕ полосы (короткий масштаб — «100 km» над узкой полосой),
       контейнер обжимает подпись, и прижатая влево полоса уезжала из-под неё.
       Центрируем полосу; когда она шире подписи, auto-поля ничего не меняют. */
    margin-left: auto;
    margin-right: auto;
}

/* Плашки координат НА КАРТЕ больше нет (ТЗ A-5 от 09.08.2026): координаты живут
   только в футере. Стили .leaflet-control.mouse-coords удалены вместе с контролом;
   в DoD осталась старая формулировка «координаты на карте по-прежнему на месте». */

.place-card-marker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.place-card-marker svg {
    width: 18px;
    height: auto;
    transform: translateY(1px);
}

/* ================================================================== */
/* СТИЛИ AWESOME MARKERS (имитация библиотеки для современной карты) */
/* ================================================================== */

.awesome-marker {
    width: 35px;
    height: 45px;
    position: relative !important;
    z-index: 700 !important;
    /* Тень от всего маркера */
    filter: none !important;

    /* Центрирование иконки */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 9px; /* Отступ сверху, чтобы попасть в кружок */
}

/* Капля-«пин» вынесена в отдельный слой, чтобы лежать НАД тенью (::after).
   Раньше «капля» была фоном самого .awesome-marker, а фон элемента всегда
   рисуется ниже псевдоэлементов — поэтому овал-тень (::after) оказывался
   поверх «капли». Теперь порядок: тень (::after, z-index:-1) → капля
   (::before, z-index:1) → иконка (z-index:2). Форма тени не меняется. */
.awesome-marker::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Базовый фон - синий флажок (SVG) */
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 33 46" xmlns="http://www.w3.org/2000/svg"><path fill="%232196F3" stroke="white" stroke-width="1.5" d="M16.5 1C8.5 1 2 7.5 2 15.5C2 26 16.5 45 16.5 45C16.5 45 31 26 31 15.5C31 7.5 24.5 1 16.5 1Z"/></svg>') no-repeat center bottom;
    background-size: contain;
    z-index: 1;
}

.awesome-marker::after {
    content: '';
    position: absolute;

    /* Размеры тени - подбираем под размер "ножки" */
    width: 22px;
    height: 6px;

    /* Цвет: черный полупрозрачный */
    background: rgba(0, 0, 0, 0.6);

    /* Позиционирование: центрируем и опускаем вниз */
    left: 70%;
    bottom: 2px; /* Подбираем так, чтобы острие касалось центра тени */
    transform: translateX(-50%);

    /* Делаем овал и размываем края */
    border-radius: 50%;
    filter: blur(2.5px);

    /* Кладем тень ПОД картинку маркера */
    z-index: -1;
}

/* ЦВЕТОВЫЕ ВАРИАНТЫ */

/* Темно-бордовый (darkred) */
.awesome-marker-darkred::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 33 46" xmlns="http://www.w3.org/2000/svg"><path fill="%23a23336"  d="M16.5 1C8.5 1 2 7.5 2 15.5C2 26 16.5 45 16.5 45C16.5 45 31 26 31 15.5C31 7.5 24.5 1 16.5 1Z"/></svg>');
}

/* Оранжевый (orange) */
.awesome-marker-orange::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 33 46" xmlns="http://www.w3.org/2000/svg"><path fill="%23f57c00"  d="M16.5 1C8.5 1 2 7.5 2 15.5C2 26 16.5 45 16.5 45C16.5 45 31 26 31 15.5C31 7.5 24.5 1 16.5 1Z"/></svg>');
}

/* Красный (red) */
.awesome-marker-red::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 33 46" xmlns="http://www.w3.org/2000/svg"><path fill="%23d32f2f"  d="M16.5 1C8.5 1 2 7.5 2 15.5C2 26 16.5 45 16.5 45C16.5 45 31 26 31 15.5C31 7.5 24.5 1 16.5 1Z"/></svg>');
}

/* Жёлтый (yellow) — места с признаком «Царствие Божие на земле»
   (places.secret_history, чек-бокс настроек opt_secret_history). Янтарный #FFC107,
   а не чистый жёлтый: белая иконка внутри капли на нём ещё читается, и он не
   сливается с оранжевым перевалов #f57c00. */
.awesome-marker-yellow::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 33 46" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFC107"  d="M16.5 1C8.5 1 2 7.5 2 15.5C2 26 16.5 45 16.5 45C16.5 45 31 26 31 15.5C31 7.5 24.5 1 16.5 1Z"/></svg>');
}

/* Синий (blue) - используется по умолчанию, но можно и явно */
.awesome-marker-blue::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 33 46" xmlns="http://www.w3.org/2000/svg"><path fill="%232196F3"  d="M16.5 1C8.5 1 2 7.5 2 15.5C2 26 16.5 45 16.5 45C16.5 45 31 26 31 15.5C31 7.5 24.5 1 16.5 1Z"/></svg>');
}

/* СТИЛИ ИКОНКИ ВНУТРИ */
.awesome-marker i {
    color: white; /* Белая иконка */
    font-size: 13px; /* Размер иконки */
    position: relative; /* над слоем-«каплей» (::before) */
    z-index: 2;
}

.place-card-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.place-card-photo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.85;
}

.place-card-photo-badge i {
    font-size: 14px;
}

.leaflet-tooltip.place-tooltip .tooltip-photo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid rgba(30, 144, 255, .35);
    border-radius: 999px;
    background: rgba(30, 144, 255, .08);
    font-weight: 700;
    font-size: 12px;
}


.tooltip-photo-count {
    color: #0078a8;
}

.fa-image:before {
    color: #0078a8;
}

.leaflet-tooltip.place-tooltip .tt-btn:focus {
    outline: none;
}

body,
button,
input,
textarea,
select {
    font-family: 'Noto Sans', sans-serif;
}


/* 1. Если режим реализован через класс .fullscreen на обертке (как в вашем cssfix.txt) */
.map-wrapper.fullscreen #location-btn,
.map-wrapper.fullscreen #settings-btn-2 {
    display: none !important;
}

/* Логотип лежит ВНЕ .map-wrapper (position:fixed; z-index:9999) — в псевдо-
   фуллскрине прячем его через класс на body (его ставит toggleFullscreen). */
body.pseudo-fs .cae-logo-link {
    display: none !important;
}

/* Псевдо-полноэкран (мобильные/Android): карта перекрывает всю вкладку, включая
   хедер .top-bar (z-index:2000). Селектор намеренно «тяжёлый»
   (body.page-map-active #map_page .map-wrapper.fullscreen), чтобы перебить
   `body.page-map-active #map_page .map-wrapper{position:relative!important}`
   (из-за которого раньше режим НЕ открывался — position оставался relative). */
body.page-map-active #map_page .map-wrapper.fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important; /* dvh учитывает динамическую панель Android */
    z-index: 3000 !important;  /* выше хедера (2000) */
    margin: 0 !important;
}
body.page-map-active #map_page .map-wrapper.fullscreen #map {
    width: 100% !important;
    height: 100% !important;
}

/* 2. Если режим реализован через класс Leaflet */
.leaflet-fullscreen-on #location-btn,
.leaflet-fullscreen-on #settings-btn-2 {
    display: none !important;
}

/* 3. На всякий случай, если все-таки сработает нативный API */
:fullscreen #location-btn,
:fullscreen #settings-btn-2 {
    display: none !important;
}

/* Стили для иконки внутри кнопки */
.fullscreen-icon {
    width: 26px;
    height: 26px;
    /* Укажите правильный путь к вашей картинке-спрайту */
    background-image: url('icons/fullscreen.svg');
    background-repeat: no-repeat;
    background-size: 26px auto; /* Ширина 20px, высота авто */
    background-position: 0 0; /* Показываем верхнюю часть */
}

/* Когда JS добавляет класс .active на кнопку, сдвигаем фон внутри */
#fullscreen-btn.active .fullscreen-icon {
    background-position: 0 100%; /* Показываем нижнюю часть */
}

.tt-btn.tt-title:hover,
.tt-btn.tt-gallery.tooltip-photo-badge:hover {
    background-color: rgba(255, 235, 59, 0.2);
}

/* общий базис для обоих кнопок */
.tt-btn.tt-title,
.tt-btn.tt-gallery.tooltip-photo-badge {
    position: relative;
    z-index: 0;
    background: transparent; /* Прозрачный фон по умолчанию */
    transition: background-color .15s ease;
}

/* расширенная зона подсветки */
.tt-btn.tt-title::before,
.tt-btn.tt-gallery.tooltip-photo-badge::before {
    content: "";
    position: absolute;
    /* Расширяем зону клика/подсветки: -4px сверху/снизу, -6px по бокам */
    inset: -4px -6px;
    border-radius: 4px;
    background-color: transparent;
    transition: background-color .15s ease;
    z-index: -1; /* Кладем ПОД текст */
    font-weight: 500;
}

.tt-btn tt-title {
    color: #000;
}

/* подсветка при наведении */
.tt-btn.tt-title:hover::before,
.tt-btn.tt-gallery.tooltip-photo-badge:hover::before {
    background-color: #ffeb3b;
}


/* Подставь реальный селектор: #externalMapsPanel или .externalMapsPanel */
#externalMapsPanel,
.externalMapsPanel {
    background-color: #fff;
    color: #111;
    color-scheme: light; /* чтобы UA-стили не “уезжали” в тёмную схему */
}

.search-result-item {
    background-color: #fff !important;
}

/* чтобы ссылки/кнопки внутри не оставались белыми из-за своих стилей */
.search-result-item a,
.search-result-item button,
.search-result-item .tt-btn {
    color: inherit;
}

@media (prefers-color-scheme: dark) {
    #externalMapsPanel,
    .externalMapsPanel,
    .search-result-item {
        background-color: #f7f7f7;
        color: #f2f2f2;
    }
}

/* Иконка FontAwesome в кнопке "Внешние карты" */
#external-maps-btn i.fa-layer-group {
    font-size: 20px;
    line-height: 20px; /* чтобы высота была 20 */
    width: 18px; /* на всякий случай, для центровки как блока */
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a6; /* серый */
}

.fa-layer-group:before {
    font-size: 18px;
    line-height: 18px;
}

.fa-history:before {
    font-size: 14px;
    line-height: 14px;
}

.fa-ruler:before {
    font-size: 16px;

}

/* Если кнопка становится .active — не перекрашиваем в белый */
#external-maps-btn.active i.fa-layer-group {
    color: #9aa0a6;
}


/* Центрирование блока map-tools как единого целого */
body.page-map-active .map-tools {
    /*top: calc(var(--header-h) + var(--space-20));*/


    bottom: auto !important;
}

/* Стили зума внутри map-tools */
.map-tools .leaflet-control-zoom {
    margin: 0 !important;
    background: white !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    outline: 2px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.map-tools .leaflet-control-zoom a {
    width: 30px !important;
    height: 30px !important;
    border: none !important;
    border-bottom: 1px solid #ddd !important;
    outline: none;
    border-radius: 0;
    box-shadow: none;
}

.map-tools .leaflet-control-zoom a:last-child {
    border-bottom: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .map-tools .leaflet-control-zoom a:hover {
        background: #ecf5ff !important;
        box-shadow: none;
    }
}

.map-tools .zoom-level {
    border: none;
    border-bottom: 1px solid #ddd;
    outline: none;
    border-radius: 0;
    box-shadow: none;
}


.date-warning-icon {
    color: #42a5f5;
    font-weight: bold;
    cursor: help;
    margin-left: 4px;
    font-size: 0.95em;
}

.date-warning-icon:hover {
    color: #42a5f5; /* Чуть темнее при наведении */
}


/* === НОВЫЙ ДИЗАЙН КАРТОЧКИ === */

/* Шапка с навигацией */
.place-card-header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;

}


/* Кнопки навигации (< и >) */


/* Строка мета-информации (иконки и дата) */
.place-card-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #000;
    margin-bottom: 12px;
    font-style: italic; /* на скрине дата курсивом */
}

.place-card-meta-row i {
    font-size: 11px;
    color: #333;
}


/* Разделитель */
.place-card-divider {
    border: 0;
    border-top: 2px solid #e0e0e0;
    margin: 14px 0 9px 0;
}

/* Поля контента */
.place-card-body {
    font-family: 'Fira Sans', sans-serif !important;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    text-align: justify;


}

.place-card-field {
    margin-bottom: 4px;
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
}

.place-card-field--distance {
    margin-top: -1px;
    margin-bottom: 1px;
}

.place-card-field strong {
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #000;
    /*margin-right: 4px;*/
    margin-bottom: 4px;
}

/* Иконка транспорта и дистанции */
.place-distance-val {
    border-bottom: 1px dotted #333; /* подчеркивание как на скрине */
}
.fa-train:before {
    content: "\f238";
    position: absolute;
    top: 3px;
    font-size: 11px;
}
.place-transport-icon {
    margin-left: 8px;
    font-size: 16px;
    vertical-align: middle;
    color: #000;
    position: relative;
    top: -4px;
}
.place-transport-arrow {
    display: inline-block;
    margin: 0 4px;
    color: #555;
}
.place-transport-icon > span {
    display: inline-block;
    text-align: center;
    height: 16px;
    vertical-align: middle;
}

.place-transport-icon > span img {
    height: 16px;
}
.place-transport-icon > span.place-transport-arrow {
    min-width: 0;
    top: -4px;
}

.fa-ship:before {
    content: "\f21a";
    position: absolute !important;
    font-size: 10px !important;
    top: 3.5px !important;
}

/* Заголовок дневников */
.place-diaries-header {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    margin: 12px 0;
    color: #000;
}

h3.place-diaries-header {
    font-family: 'Noto Sans', sans-serif !important;
}

div.api-diary-group-title {
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif !important;
    color: #42a5f5;
    font-weight: 600;
    line-height: 1.125;
    margin-bottom: 1.5px;
    margin-top: 11px;
}

div.api-diary-entry-header {
    font-family: 'Roboto', sans-serif !important;
}

/* Кликабельные элементы блока дневников:
   название книги / главы — подсветить участок маршрута жёлтым на 60 с,
   дата параграфа — вернуть карту к текущему месту.
   Классы вешает renderGroup (main.js) ТОЛЬКО когда участок реально резолвится
   (см. canHighlightBookRoute), поэтому «мёртвых» курсоров не бывает. */
.api-diary-book-name,
.api-diary-chapter-name,
.api-diary-date-link {
    cursor: pointer;
}

.api-diary-book-name:hover,
.api-diary-chapter-name:hover,
.api-diary-date-link:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

div.api-images-5 {
    font-family: 'Noto Sans', sans-serif !important;
}

div.place-card-section {
    font-family: 'Noto Sans', sans-serif !important;
}

button.expand-chapter-btn {
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif !important;
}

button.collapse-chapter-btn {
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif !important;
    background: none;
    border: none;
    cursor: pointer;
    color: #42a5f5 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
"

}

/* Иконка точности (из прошлого шага) */
.accuracy-icon {
    height: 16px;
    vertical-align: middle;
    margin: 0 4px;
}

/* Футер карточки */
.place-card-footer {
    margin-top: 12px;
    text-align: center;
    border-radius: 4px;
}

.place-card-accuracy-icon {
    width: 13px; /* Ширина во весь родительский блок */
    height: 20px;

}

/* Скроллбар карточки — СВОЙ ползунок (attachCardScrollbar в main.js).
   Нативный скрыт полностью: браузерные скроллбары (fluent на Win11)
   резервируют место под кнопки-стрелки, и убрать этот зазор сверху
   CSS-ом стабильно на всех версиях Chrome не удаётся. Свой div-ползунок
   выглядит как прежний (8px, #666, скругление) и начинается вплотную
   к верху скролл-области в любом браузере. */
.place-card-scroll-content {
    scrollbar-width: none;      /* Firefox, Chrome 121+ */
    -ms-overflow-style: none;
}

.place-card-scroll-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Сам ползунок (создаётся из JS) */
.place-card-scrollbar-thumb {
    position: absolute;
    right: 0;
    width: 8px;
    background-color: #666666;
    border-radius: 4px;
    z-index: 30;
    display: none; /* показывается из JS, когда есть что скроллить */
}

/* Обнуляем кнопки-стрелки сверху/снизу — иначе Chrome резервирует
   под них несколько пикселей и thumb не доезжает до верха трека. */
.maps-panel::-webkit-scrollbar-button,
.maps-panel::-webkit-scrollbar-button:start,
.maps-panel::-webkit-scrollbar-button:end,
.maps-panel::-webkit-scrollbar-button:vertical:start,
.maps-panel::-webkit-scrollbar-button:vertical:end {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Добавляем обрезку контента, чтобы он не вылезал за скругленные углы */
.maps-panel {
    border-radius: 4px;
    outline: 2px solid rgba(0, 0, 0, .2);

    /* Если скролл должен быть внутри отступов, переносим overflow-y внутрь
       или оставляем как есть, но overflow: hidden на родительском блоке обязателен */

    flex-direction: column;
}

/* Стилизация скроллбара конкретно для .maps-panel
   (или для блока внутри нее, который скроллится) */
.maps-panel::-webkit-scrollbar {
    width: 8px; /* Тонкий скролл */
}

/* Сам ползунок */
.maps-panel::-webkit-scrollbar-thumb {
    background-color: #666666;
    border-radius: 4px; /* Закругление ползунка */
}

/* Трек (фон скролла) */
.maps-panel::-webkit-scrollbar-track {
    background: transparent;
     /* Компенсация системного зазора сверху */
}


/* Глобальный единый стиль скроллбара (эталон — карточка места).
   Более специфичные селекторы (.timeline, .pswp-thumbnails, .pages-container,
   otterwiki-стили в custom.css) перекрывают это правило там, где нужно. */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: #666666;
    border-radius: 4px;
    border: none;
}
*::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-button,
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
*::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: transparent;
}


:root {
    color-scheme: light;
}
:root {
  --header-h: 56px; /* дефолт, перезапишется JS-ом */
}



/* === НОВЫЕ СТИЛИ ДЛЯ ПОДСКАЗОК (TOOLTIPS) === */
[data-tooltip] {
    position: relative;
    cursor: help;
}

/* Черная плашка с текстом */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;

    /* Центрируем по горизонтали */
    left: 50%;
    transform: translateX(-50%);

    /* СТАЛО: Позиционируем СНИЗУ от элемента */
    top: 100%; /* Сразу под элементом */
    bottom: auto; /* Отключаем привязку к низу */
    margin-top: 10px; /* Небольшой отступ сверху (от текста "км") */

    background-color: #d2d2d2;
    color: #444;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 9999;


    font-style: normal !important;
    font-weight: 500;
    font-family: Literata, serif !important;
    text-shadow: none;

    /* Перенос текста */
    white-space: normal;
    word-wrap: break-word;
    width: max-content;
    max-width: 220px;
    text-align: center;
}

/* Стрелочка вниз */
[data-tooltip]::before {
    border-bottom-color: #d2d2d2 !important;
    content: '';
    position: absolute;

    /* Позиционируем стрелочку */
    top: 100%; /* Сразу под элементом */
    left: 50%;
    transform: translateX(-50%);

    /* Рисуем треугольник, смотрящий ВВЕРХ */
    border: 6px solid transparent;
    border-bottom-color: #222; /* Цвет низа (треугольник смотрит вверх) */

    /* Корректируем положение, чтобы острие касалось текста */
    margin-top: -2px; /* Подтягиваем чуть выше к тексту */

    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 9998;

}

/* Показываем при наведении */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
}

/* Исправление для первого тултипа (Точность), чтобы не улетал влево */
.place-card-meta-row > span:first-child[data-tooltip]::after {
    left: 0;
    transform: none; /* Тултип прижат к левому краю иконки */

    /* Текст внутри тултипа снова по центру */
    text-align: center;
}

/* Стрелочка для этого тултипа тоже слева */
.place-card-meta-row > span:first-child[data-tooltip]::before {
    left: 10px; /* Подгоняем под центр иконки (обычно ~10-14px) */
    transform: translateX(-50%); /* Центрируем саму стрелку относительно точки 10px */
}

/* Применяем тот же стиль ко ВТОРОМУ элементу (иконка места), если он есть */
.place-card-meta-row > span:nth-child(2)[data-tooltip]::after {
    left: 0;
    transform: none;
    text-align: center;
}

.place-card-meta-row > span:nth-child(2)[data-tooltip]::before {
    left: 10px;
    transform: translateX(-50%);
}


.place-tooltip {
    background-color: #fff !important; /* Белый фон */

    border-radius: 4px !important; /* Закругление углов */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; /* Легкая тень */
    color: #000 !important; /* Черный текст */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13px !important; /* Размер шрифта как на скрине */
    font-weight: 500 !important; /* Немного жирнее обычного */
    padding: 2px 6px !important; /* Внутренние отступы */
    white-space: nowrap !important; /* Текст в одну строку */
    margin-top: -2px !important; /* Корректировка позиции (если нужно) */
    border: 1.5px solid #0700ff !important;
    overflow: hidden !important;
}


/* Примеры использования разных весов */
.thin {
    font-weight: 100;
}

/* Thin */
.extra-light {
    font-weight: 200;
}

/* Extra-light */
.light {
    font-weight: 300;
}

/* Light */
.regular {
    font-weight: 400;
}

/* Regular (стандартный) */
.medium {
    font-weight: 500;
}

/* Medium */
.semi-bold {
    font-weight: 600;
}

/* Semi-bold */
.bold {
    font-weight: 700;
}

/* Bold */
.extra-bold {
    font-weight: 800;
}

/* Extra-bold */
.black {
    font-weight: 900;
}

/* Black */


.leaflet-tooltip .place-tooltip .leaflet-zoom-animated .leaflet-tooltip-right {
    font-weight: 900;
}

/* --- Карточка (Возвращаем старое позиционирование) --- */
/* Не меняем position самой карточки, добавляем только Flex для структуры */

/* --- Шапка (фиксированная) --- */
.place-card-sticky-header {
    flex-shrink: 0; /* Не сжиматься */
    background-color: #42a5f5;
    border-bottom: 1px solid #eee;
    z-index: 100; /* Высокий z-index */
    position: relative; /* Чтобы крестик внутри позиционировался от шапки */
}

/* --- Контент (скроллится): единственное правило — ниже по файлу,
       рядом с остальными стилями карточки --- */

/* --- Кнопка закрытия --- */

.place-card-close:hover {
    color: #000;
}


/* 1. Базовое состояние - СКРЫТО */


@media (max-width: 871px) {
    .top-bar {
        height: 72px !important;
        min-height: 30px;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .nav-items {
        margin-right: -22px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-item {
        white-space: normal;
    }
}

/* Позиционирование и flex для page-map-active определены в конце файла
   через position: fixed + inset: 0 */



.place-tooltip-selected {
    background-color: #42a5f5 !important;
    /* Увеличиваем размер через шрифт и отступы */
    font-size: 110% !important; /* Чуть крупнее текст (было ~12px станет ~13.2px) */
    padding: 6px 10px !important; /* Больше воздуха внутри (было, вероятно, 6px) */

    /* Опционально: сделать жирнее или добавить тень для акцента */
    font-weight: bold !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;

    z-index: 1000 !important;
}


body {
    font-family: 'Noto Sans', sans-serif;
}

/* 1. БАЗОВЫЕ СТИЛИ (Фон, рамка, размер) */


/* 2. СТРЕЛОЧКИ (Под цвет фона) */
.leaflet-tooltip-right.place-tooltip-selected::before {
    border-right-color: #42a5f5 !important;
}

.leaflet-tooltip-left.place-tooltip-selected::before {
    border-left-color: #42a5f5 !important;
}

/* 3. КНОПКИ ВНУТРИ (Сбрасываем их фон, чтобы видеть бирюзовый) */
.place-tooltip-selected .tt-btn {
    background-color: transparent !important;
    color: #fff !important;
    font-size: 1.11rem !important; /* Наследуем крупный шрифт */
    font-weight: 800 !important;

    background: none !important; /* Убираем фон */
    background-color: #42a5f5 !important;
    border: none !important; /* Убираем рамки */
    border-radius: 0 !important; /* Убираем скругление (чтобы не было эффекта круга) */
    box-shadow: none !important; /* Убираем тени */
    outline: none !important;

    /* Убираем собственные отступы кнопок, чтобы управлял родитель */
    padding: 2px 4px !important;
    margin: 0 !important;
    height: auto !important; /* Чтобы не сплющивались */
}

/* 4. РАЗДЕЛИТЕЛЬ МЕЖДУ КНОПКАМИ (Тонкая черточка) */
.place-tooltip-selected .tt-btn + .tt-btn {
    border-left: none !important;
    padding-left: 6px !important;
    margin-left: 2px !important;
}

/* 5. ИКОНКИ И СЧЕТЧИКИ */
.place-tooltip-selected img {
    filter: brightness(0) invert(1)!important; /* Черная иконка */
    opacity: 0.7;
    vertical-align: middle !important;
}
.tooltip-photo-badge:hover img {
    filter: brightness(0) saturate(100%) invert(63%) sepia(35%) saturate(600%) hue-rotate(175deg);
}
.place-tooltip-selected .tooltip-photo-count {
    font-weight: 500 !important;
    margin-left: 4px;
}

/* ================== СИНИЕ СТРЕЛКИ (ТРЕУГОЛЬНИКИ) ================== */

/* 1. Базовые настройки стрелки (псевдоэлемент) */
.leaflet-tooltip.place-tooltip {
    /* Убедимся, что тултип не обрезает выступающую стрелку */
    overflow: visible !important;
}

.leaflet-tooltip.place-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent; /* Размер стрелки */
    z-index: 100; /* Гарантированно поверх всего */
}

/* 2. Настройка направлений */

/* Тултип СПРАВА от маркера -> Стрелка смотрит ВЛЕВО */
.leaflet-tooltip-right.place-tooltip::after {
    top: 50%;
    right: 100%; /* Приклеиваем к левому краю тултипа */
    margin-top: -6px; /* Центрируем по вертикали */
    border-right-color: #0700ff !important; /* Синий цвет */
}

/* Тултип СЛЕВА от маркера -> Стрелка смотрит ВПРАВО */
.leaflet-tooltip-left.place-tooltip::after {
    top: 50%;
    left: 100%; /* Приклеиваем к правому краю тултипа */
    margin-top: -6px;
    border-left-color: #0700ff !important;
}

/* Тултип СВЕРХУ от маркера -> Стрелка смотрит ВНИЗ */
.leaflet-tooltip-top.place-tooltip::after {
    left: 50%;
    top: 100%; /* Приклеиваем к нижнему краю тултипа */
    margin-left: -8px; /* Центрируем по горизонтали */
    border-top-color: #0700ff !important;
}

/* Тултип СНИЗУ от маркера -> Стрелка смотрит ВВЕРХ */
.leaflet-tooltip-bottom.place-tooltip::after {
    left: 50%;
    bottom: 100%; /* Приклеиваем к верхнему краю тултипа */
    margin-left: -8px;
    border-bottom-color: #0700ff !important;
}

/* ================== ИСПРАВЛЕНИЕ ВЫЛЕЗАЮЩЕГО ФОНА ================== */

/* 1. Настраиваем внутреннюю обертку, чтобы она обрезала фон кнопок */
.leaflet-tooltip.place-tooltip .tt-wrap {
    display: flex !important; /* Выстраиваем кнопки в ряд */
    width: 100% !important; /* Занимаем всю ширину */
    height: 100% !important;

    /* Скругляем углы контента, чтобы они совпадали с рамкой тултипа */
    /* (можно поставить чуть меньше 6px, если рамка толстая, например 4px) */
    border-radius: 5px !important;

    /* ГЛАВНОЕ: Обрезаем всё, что внутри (желтый фон), по этим углам */
    overflow: hidden !important;


}

/* 2. Убираем внутренние отступы у тултипа, чтобы обертка прилегала вплотную к рамке */
.leaflet-tooltip.place-tooltip.place-tooltip-selected {
    z-index: 20000 !important;
    background-color: #42a5f5 !important;
    border: 1px solid #0700ff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;

    opacity: 1 !important;

    /* ВЕРНУЛИ РАЗМЕРЫ ТЕКСТА И ОТСТУПЫ */
    color: #000 !important;
    font-weight: 500 !important;
    font-size: 14px !important;


    border-radius: 6px !important;

    /* ВАЖНО: Делаем flex, чтобы содержимое (текст или кнопки) центрировалось */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;

    overflow: visible !important;
}

/* 3. (Опционально) Если кнопки внутри имеют свои margin, убираем их */
.leaflet-tooltip.place-tooltip .tt-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;

    font: inherit;

    cursor: pointer;
    line-height: inherit;
    font-family: 'Noto Sans', sans-serif;


    font-size: clamp(12px, 1.01rem, 20px);

    font-weight: 500;
    margin: 0 !important;
    border-radius: 0 !important; /* Убираем собственное скругление кнопок, полагаемся на обертку */
}

/* === ИСПРАВЛЕННАЯ КНОПКА === */


/* Сам язычок */
.place-card-toggle {
    position: absolute;
    left: -44px !important; /* Принудительно выносим влево */
    top: 70px; /* Отступ сверху */
    width: 32px;
    height: 48px;

    background: white;


    /* Скругляем левые углы */
    border-radius: 4px 0 0 4px;
    border: 1px solid #ffffff;
    border-right: none; /* Справа границы нет, чтобы слилось */

    cursor: pointer;
    z-index: 9999; /* Максимальный слой */

    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;

    /* Убираем стандартные стили кнопок */
    padding: 0;
    margin: 0;
    font-size: 16px;
}

/* При наведении */
.place-card-toggle:hover {
    background: #ecf5ff;
    color: #409eff !important;
}

/* Когда карточка свернута */
.place-card.minimized {

    transform: translateX(calc(100% + 20px)) !important;

    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
}

/* =========================================
   АДАПТИВНЫЕ РАЗМЕРЫ КАРТОЧКИ
   ========================================= */


/* Активная карточка на ПК */


/* Свернутая карточка (язычок) */
.place-card.minimized {
    transform: translateX(calc(100% + 20px)) !important;
    visibility: visible !important;
}


/* --- 2. ПЛАНШЕТ (ширина до 1024px) --- */


/* --- 3. ТЕЛЕФОН (ширина до 600px) --- */
@media (max-width: 600px) {


    /* Активная на телефоне */
    /* Свернутая на телефоне (если нужна кнопка) */
    /* Обычно на мобильном кнопку сворачивания делают иначе,
       но если оставить логику "язычка", то нужно адаптировать кнопку */
    .place-card.minimized {
        transform: translateY(120%) !important;
    }

    /* Кнопку-язычок на мобильном лучше повернуть или скрыть/переместить */
    .place-card-toggle {
        top: -40px; /* Торчит сверху */
        left: 50% !important;

        border-radius: 8px 8px 0 0;
        border-bottom: none;

        width: 48px;
        height: 32px;
    }
}

/* === УЛУЧШЕННЫЙ ДИЗАЙН ЗАГОЛОВКА КАРТОЧКИ === */

/* Контейнер заголовка */
.place-card-sticky-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    /* Отступ до контента задаётся padding-top скролл-области, а не margin здесь:
       margin оставлял бы белый зазор между шапкой и скроллбаром карточки */
    margin-bottom: 0;
    /* Зазор «вправо» — «закрыть» = зазору «календарь» — «закрыть» в Поиске
       (.search-input-wrapper, var(--space-8)); ТЗ 20.10.2026, п. 3. Было 12px. */
    gap: 8px;
    border-radius: 4px;
}

/* Белое «буферное поле» под шапкой: прокручиваемый текст уходит под него,
   как раньше при margin-bottom у шапки. Рисуется поверх контента, но НЕ
   доходит до колонки скроллбара (right: 10px = 8px ползунок у края + 2px),
   поэтому ползунок начинается вплотную к шапке без зазора. */
.place-card-sticky-header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 10px;
    height: 12px;
    background: rgba(255, 255, 255, 0.95); /* как фон карточки .place-card.active */
}

/* Навигационный блок (стрелки и заголовок) */
.place-card-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    gap: 16px; /* Гармоничный отступ между стрелками и текстом */
}

/* Общий стиль для ВСЕХ кнопок в шапке (стрелки и крестик) */
.nav-arrow-btn,
.place-card-close {
    width: 30px;
    height: 30px;
    border-radius: 4px; /* Мягкий квадрат */
    background: white;
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    font-size: 14px;


    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0; /* Чтобы не сплющивались */
}

/* RR-панель: стрелки меньше, чем в place-card */
.rr-year-row .nav-arrow-btn,
.nav-arrow-btn.rr-arrow {
    width: 30px;
    height: 30px;
}

/* При наведении */
.nav-arrow-btn:hover,
.place-card-close:hover {
    background: #ecf5ff !important;
    color: #409eff !important;
    border-color: #ccc;

}

/* Крестик - делаем его чуть жирнее или меняем иконку на FontAwesome */
.place-card-close {
    font-size: 26px;
    line-height: 1.2;
    position: static !important;

    order: 10;
    margin-left: auto;
    margin-right: 0;
    font-weight: 400; /* На всякий случай обнуляем отступ справа */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}


/* Заголовок по центру */
.place-card-title-center {
    font-size: 16px;
    font-weight: 700 !important;
    text-align: center;
    margin: 0;
    line-height: 1.1;
    flex-grow: 1;
    font-family: 'Noto Sans', sans-serif;
}

/* ========================================= */
/* НОВЫЕ СТИЛИ ДЛЯ КАРТОЧКИ (Замените ими старые) */
/* ========================================= */

/* ========================================= */
/* НОВЫЕ СТИЛИ ДЛЯ КАРТОЧКИ (РАСТЯНУТАЯ) */
/* ========================================= */

.place-card {
    /* 1. ПОЗИЦИОНИРОВАНИЕ */
    position: absolute;
    top: calc(56px + 16px) !important;
    right: 16px !important;
    width: 500px !important;
    height: calc(100dvh - 120px) !important;
    max-height: none !important;

    /* 2. СТРУКТУРА */
    display: flex !important;
    flex-direction: column !important;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    z-index: 2001;
    padding: 0 !important;
    /* visible — чтобы язычок .place-card-toggle (left: -32px) не обрезался;
       сам контент клиппится скролл-контейнером внутри */
    overflow: visible;
    outline: 2px solid rgba(0, 0, 0, .2);

    /* Анимация */
    visibility: hidden;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

.place-card.active {
    visibility: visible;
    transform: translateX(0);
    /* Полупрозрачность задаём через rgba фона, а не opacity, чтобы
       ползунок скроллбара оставался полностью непрозрачным (#666666),
       а не наследовал opacity родителя. */
    background-color: rgba(255, 255, 255, 0.95);
}

.place-card.no-transition {
    transition: none !important;
}

.place-card-scroll-content {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    /* Без min-height:0 у флекс-ребёнка действует min-height:auto (= размер контента),
       и он не сжимается: скролл не включается, область вылезает за нижнюю границу
       карточки, а свой ползунок (attachCardScrollbar) прячется, т.к. его гейт
       scrollHeight > clientHeight не срабатывает. На WebKit (iPad) это и ломало низ. */
    min-height: 0;
    /* 12px сверху — бывший margin-bottom шапки: перенесён внутрь скролл-области,
       чтобы её верх (и ползунок) начинался вплотную к шапке */
    padding: 12px 16px 16px 16px;
}

.place-card-sticky-header {
    flex-shrink: 0;
    /* Края кнопок шапки — по краям текста карточки (ТЗ 20.10.2026, п. 2): текст
       стоит в 16px от краёв, кнопки обведены outline 2px снаружи, поэтому 18px
       даёт видимый край рамки ровно на 16px. Справа до 20.10 было 26px —
       крестик не доходил до края текста на 8px. */
    padding: 16px 18px 16px 18px;
    background: #42a5f5;
    z-index: 10;
    position: relative !important;
    top: auto !important;
}

/* === НИЖНЕЕ БУФЕРНОЕ ПОЛЕ КАРТОЧКИ (ТЗ 20.10.2026, п. 8–14) ===
   Было: отступ 16px под текстом + «наверх» в рамке поверх текста. Стало:
   неподвижная полоса 32px (вдвое выше), под неё уходит текст, как под буфер
   шапки; кнопки в ней без рамок. Логика — initCardBottomBar в main.js. */
.place-card-scroll-content:has(~ .place-card-bottom-bar) {
    padding-bottom: 32px;   /* последняя строка докручивается до верха полосы */
}

.place-card-bottom-bar {
    position: absolute;
    left: 0;
    right: 10px;            /* колонка своего ползунка (8px + 2px) остаётся открытой, как у буфера шапки */
    bottom: 0;
    height: 32px;
    background: rgba(255, 255, 255, 0.95);   /* как фон карточки и буфер шапки */
    border-radius: 0 0 0 4px;
    z-index: 20;            /* над текстом, под ползунком (30) */
}

/* Кнопки — голые стрелки. Ширина = глиф 14px + по 4px с боков, вплотную
   друг к другу: между краями СТРЕЛОК выходит 8px — тот же зазор, что между
   «вправо» и «закрыть» в шапке (п. 14). */
.place-card-bottom-btns {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Центр «наверх» = центр крестика (п. 8): крестик 30px в 18px от края
       карточки → центр в 33px; полоса кончается в 10px от края → 33 − 10 − 11. */
    right: 12px;
    display: flex;
    align-items: stretch;
}

.place-card-bottom-btn {
    width: 22px;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: #555;
    transition: color 0.2s ease, opacity 0.3s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.place-card-bottom-btn[hidden] {
    display: none;
}

/* «Наверх» — серая, видна после прокрутки; место держит, чтобы стрелки не прыгали */
.place-card-up-btn.is-off {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* «Свернуть» — цвет пункта «Развернуть» (.expand-chapter-btn) */
.place-card-collapse-btn {
    color: #42a5f5;
}

/* Всё свёрнуто — стрелка вниз, нажатие ничего не делает (п. 9) */
.place-card-collapse-btn.is-inactive {
    cursor: default;
}

/* Переходы — цветом счётчика своего подраздела */
.place-card-jump-btn[data-jump="etika"] { color: #ff9900; }     /* .etika-paragraph-count */
.place-card-jump-btn[data-jump="photos"] { color: #3b8fb0; }    /* #place-photo-count */
.place-card-jump-btn[data-jump="painting"] { color: #1E90FF; }  /* .painting-count */

@media (hover: hover) {
    .place-card-up-btn:hover {
        color: #42a5f5;
    }
    .place-card-collapse-btn:not(.is-inactive):hover,
    .place-card-jump-btn:hover {
        filter: brightness(0.8);
    }
}

/* «Редактирование карточки» — невидимая: цвет полосы, без курсора-руки.
   Левый край = левый край текста (16px), открывает админку на этом месте. */
.place-card-edit-btn {
    position: absolute;
    left: 16px;
    top: 0;
    width: 24px;
    height: 100%;
    background: transparent;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

/* Режим без хедера */
body.page-map-active .place-card {
    top: 16px !important;
    bottom: calc(16px + var(--map-footer-h)) !important;
    height: auto !important;
}

/* АДАПТИВ */
@media (max-width: 800px) {
    .place-card {
        width: 400px !important;
        height: calc(100dvh - 120px) !important;
    }
}

@media (max-width: 600px) {
    .place-card {
        width: calc(100% - 20px) !important;
        right: 10px !important;
        left: 10px !important;
        top: calc(56px + 10px) !important;
        height: calc(100dvh - 90px) !important;
        transform: translateY(120%);
    }

    .place-card.active {
        transform: translateY(0);
    }

    body.page-map-active .place-card {
        top: 10px !important;
        bottom: calc(10px + var(--map-footer-h)) !important;
        height: auto !important;
    }
}


/* === ИСПРАВЛЕННАЯ КНОПКА === */
/* (overflow: visible и outline карточки заданы в базовом правиле .place-card выше) */

/* Сам язычок */
.place-card-toggle {
    position: absolute;
    left: -32px !important;
    top: 50%;
    width: 32px;
    height: 48px;

    background: white;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    outline: 2px solid rgba(0, 0, 0, .2);
    clip-path: inset(-5px 0 -5px -5px);


    border-radius: 4px 0 0 4px;
    cursor: pointer;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    padding: 0;
    margin: 0;
}


/* При наведении */
.place-card-toggle:hover {
    background: #f0f0f0;
    color: #000;
}

/* Когда карточка свернута */
.place-card.minimized {

    transform: translateX(calc(100% + 20px)) !important;

    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
}

/* Мобильный оверрайд для язычка */
@media (max-width: 871px) {
    .place-card-toggle {
        left: -44px !important;
    }
}

/* === ФИНАЛЬНЫЙ CSS ДЛЯ МЕТА-СТРОКИ (ДАТА И ИКОНКИ) === */

.place-card-meta-row {
    display: flex;
    align-items: baseline; /* Выравнивание по базовой линии текста! */
    gap: 10px; /* Чуть больше воздуха */
    margin-top:-5px;
    margin-bottom: 12px;
    padding-left: 2px; /* Компенсация визуального веса иконок */

    font-size: 12px;
    line-height: 1.4;
    color: #444;
}

/* Общий стиль для контейнеров иконок */
.place-card-meta-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px; /* Фиксированная высота строки под иконку */
    vertical-align: middle;
}

/* Сами картинки/svg */
.place-card-meta-row img,
.place-card-meta-row svg,
.place-card-meta-row i {
    display: block;
    height: 11px !important; /* Высота всех иконок = высоте букв */
    width: auto !important;

    /* Сдвигаем чуть вниз, чтобы оптически выровнять с текстом */
    transform: translateY(2px);

    opacity: 0.85;
}

/* Специально для иконки сигнала (она обычно узкая) */
/* Фикс для иконки сигнала (точности) */
.place-card-accuracy-icon {
    height: 13px !important;
    /* Опускаем чуть ниже, чем было (было 2px, стало 3px или 4px) */
    transform: translateY(3.5px) !important;
    margin-right: -2px; /* Чуть прижимаем к палатке, если кажется далеко */
}


/* Иконка палатки (FontAwesome) */
.place-card-meta-row .fa-campground,
.place-card-meta-row .fa-star-of-life {
    font-size: 11px; /* Размер шрифтовой иконки */
    transform: translateY(2px);
}

.fa-home:before {
    font-size: 13px;
}

/* Текст даты */
.place-date-text {
    font-weight: 500;
    color: #333;
    /* ТЗ 20.10.2026, п. 4: «межбуквенное расстояние уменьшить на 10%». Буквально
       (0.02em → 0.018em) это 0,8px на всю строку — глазом не видно. Сделано
       «строка на 10% плотнее»: 0.02em → −0.03em, «22 января — 6 марта 1925 г.»
       202 → 183px (замер 21.10.2026). */
    letter-spacing: -0.03em;
    font-size: 14.4px;
    position: relative;
    top: 3px;
    font-family: sans-serif;
}

/* Иконки-ссылки на натальную карту места (geocult.ru) — две «волшебные палочки»
   подряд, последними в мета-строке, после текста даты.
   Синяя открывает карту на 00:00, оранжевая — на 06:00. */
.place-astro-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    text-decoration: none;
    cursor: pointer;
    /* Совпадает со сдвигом .place-date-text, чтобы иконки сели на одну линию с датой */
    position: relative;
    top: 3px;
    margin-left: -4px; /* компенсация gap:10px мета-строки — прижимаем к дате */
}

/* Пара идёт впритык друг к другу, а не через общий gap мета-строки */
.place-astro-link + .place-astro-link {
    margin-left: -6px;
}

/* Цвета РОВНО как у кругов распределения на карте (radialGradient в index.html):
   синий — круги по числу картин, оранжевый — по числу параграфов Учения Живой Этики.
   Правятся только вместе с градиентами, на глаз не подбирать.

   ⚠️ СЕЛЕКТОР НЕ УПРОЩАТЬ до `.place-astro-link--blue`. Выше (строка ~1799) стоит
   `.place-card a { color: #42a5f5 !important }` — общее правило для ссылок в карточке.
   Оно специфичнее (0,1,1) одиночного класса (0,1,0), поэтому даже с !important
   короткий селектор проигрывает, и ОБЕ палочки красятся в один синий #42a5f5 —
   ровно этот баг и был 04.08.2026. Пара «класс карточки + класс ссылки» даёт (0,2,1)
   и выигрывает честно. */
.place-card a.place-astro-link--blue {
    color: #0700ff !important;
}

.place-card a.place-astro-link--orange {
    color: #ff8c00 !important;
}

.place-card-meta-row .place-astro-link svg {
    /* Ширину задаём явно: бланкетное правило выше ставит width:auto !important */
    width: 11px !important;
    transform: none; /* сдвиг уже сделан через top у самой ссылки */
}

.place-astro-link:hover svg {
    opacity: 1;
}

/* === РАЗДЕЛЬНАЯ ПОДСВЕТКА КНОПОК В ТУЛТИПЕ === */

/* 1. Сам тултип - просто контейнер, НЕ красим его при наведении */
.leaflet-tooltip.place-tooltip {
    background-color: white !important;
    padding: 0 !important; /* Убираем паддинги у контейнера, чтобы кнопки прижимались к краям */
    border: 2px solid #1E90FF;
    overflow: hidden; /* Обрезаем всё, что вылезает за скругления */
    display: flex; /* Выстраиваем кнопки в ряд */
    align-items: stretch; /* Растягиваем кнопки по высоте */
    gap: 0; /* Убираем дырки между кнопками */
}

/* Убираем желтый фон с родителя, если он там остался */
.leaflet-tooltip.place-tooltip:hover {
    background-color: white !important;
    border-color: #1E90FF !important;
}

/* Хвостик тоже оставляем синим/белым, не желтым */
.leaflet-tooltip.place-tooltip:hover::before {
    /* Возвращаем дефолтные цвета стрелочки */
    border-top-color: #1E90FF;
}


/* 2. КНОПКИ ВНУТРИ (Название и Фото) */
.tt-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px; /* Внутренние отступы кнопок */
    transition: background-color 0.15s ease;

    display: flex;
    align-items: center;
    justify-content: center;
    height: auto; /* Растягиваются по высоте флекса */

    font-size: 12px;
    font-weight: 500;
    color: #000;
    position: relative;
    z-index: 1;
}

/* 3. Левая часть (Название) */
.tt-btn.tt-title {
    flex-grow: 1; /* Занимает всё свободное место */
    text-align: left;
    justify-content: flex-start;
    padding-left: 8px;
    border-right: 1px solid #eee; /* Разделитель между названием и фото (опционально) */
}

/* 4. Правая часть (Фото) */
.tt-btn.tt-gallery {
    flex-shrink: 0; /* Не сжимается */
    padding-left: 8px;
    padding-right: 8px;
    min-width: 30px;
}


/* 5. ГЛАВНОЕ: Желтая подсветка при наведении на КОНКРЕТНУЮ кнопку.
   ⚠️ Подсветку держит ещё и КЛАСС .tt-hover: его ставит main.js на mouseover и
   снимает через 250 мс после mouseout (initTooltipHoverHold). Так короткая
   потеря наведения — подпись уехала из-под курсора, её перерисовали, курсор
   прошёл по шву между кнопками — не успевает моргнуть жёлтым и голубым
   (жалоба заказчика 27.09 и 28.09.2026).
   ⚠️ Прежнее лечение — гасить подсветку на время движения карты
   (body.map-moving) — УБРАНО: у выбранной подписи на месте жёлтого проступал
   её голубой фон, то есть оно само давало жёлто-голубое мигание.
   ⚠️ ГОЛОГО :hover ЗДЕСЬ НЕТ (03.10.2026). Браузер пересчитывает :hover и
   когда подпись САМА приехала под неподвижный курсор (карта переехала), и
   посетитель видел подсветку там, куда не наводил (жалоба 02.10.2026, на
   планшете то же). Класс ставит main.js и только при реальном движении мыши. */
.tt-btn.tt-hover {
    background-color: #ffeb3b !important; /* Желтый фон только под курсором */
    color: #000 !important;
}
.tooltip-photo-badge:hover img {
    filter: brightness(0) saturate(100%)
    invert(64%) sepia(52%) saturate(900%)
    hue-rotate(182deg) brightness(97%) contrast(95%) !important;}

/* Опционально: убрать разделитель при наведении, чтобы было красивее */
.tt-btn.tt-hover {
    border-color: transparent;

}

/* ================================
   TOOLTIP spacing (ergonomic)
   Вставить В САМЫЙ НИЗ css1.txt
   ================================ */

/* 1) Контейнер: без внутренних padding, чтобы отступы контролировали сами блоки */
.leaflet-tooltip.place-tooltip,
.leaflet-tooltip.place-tooltip.place-tooltip-selected {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: hidden !important; /* чтобы ничего “не торчало” за скругления */
    border-radius: 6px !important; /* чуть мягче и удобнее для глаз */
    font-weight: 400;
}

/* 2) Общие размеры клика/чтения внутри (вместо margin’ов) */
.leaflet-tooltip.place-tooltip .tt-btn,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-btn {
    margin: 0 !important;
    padding: 4px 10px !important; /* базовые отступы: слева/справа */
    min-height: 24px !important; /* удобнее на тач/трекпаде */
    line-height: 1.2 !important;

    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;

    border-radius: 0 !important; /* чтобы подсветка была “плашкой” без лишних скруглений внутри */
}

/* 3) Левая часть (заголовок): чуть больше воздуха справа, чтобы не липло к разделителю */
.leaflet-tooltip.place-tooltip .tt-btn.tt-title,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-btn.tt-title {
    justify-content: flex-start !important;
    padding-left: 10px !important;
    padding-right: 8px !important;
}

/* 4) Правая часть (иконка/счётчик): убираем margin-left и делаем разделение через border */
.leaflet-tooltip.place-tooltip .tt-btn.tt-gallery,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-btn.tt-gallery,
.leaflet-tooltip.place-tooltip .tooltip-photo-badge,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tooltip-photo-badge {
    margin-left: 0 !important; /* в твоём CSS есть margin-left у .tooltip-photo-badge — он даёт “лишний” визуальный сдвиг/слой */
    padding-left: 8px !important;
    padding-right: 10px !important;
    border-left: 1px solid #0700ff !important; /* тонкий разделитель вместо зазора */
}

/* 5) Если у тебя остался ::before с отрицательным inset — прибиваем “расширение подсветки”,
      чтобы справа не было второго слоя подсветки */
.leaflet-tooltip.place-tooltip .tt-btn::before,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-btn::before {
    inset: 0 !important;
    border-radius: 0 !important;
}


/* =========================================
   PLACE CARD: фото-плитки без обрезки + серый фон
   Вставить В САМЫЙ НИЗ css1.txt
   ========================================= */

/* Контейнер сетки (если у тебя уже есть grid — этот блок не помешает) */
.place-card-images,
.place-card-image-grid,
.place-card-photos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Сама плитка (ячейка) */
.place-card-image-item,
.place-card-photo-item {
    background: #d2d2d2; /* серое свободное место */
    border-radius: 6px;
    overflow: hidden;

    /* фиксируем “карточку” по форме: как на примере (чуть вертикальнее квадрата) */
    aspect-ratio: 4 / 3;

    /* чтобы внутри было удобно центрировать картинку */
    display: flex;
    align-items: center;
    justify-content: center;
}

.geo-pin-badge {
    position: absolute !important;
    bottom: 4px !important;
    right: 4px !important;
    z-index: 10;
}

/* Картинка: показываем целиком, не обрезаем */
.place-card-image-item img,
.place-card-photo-item img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: contain !important; /* ключевое: без кропа */
    object-position: center;
    background: transparent; /* фон уже на контейнере */
}

.leaflet-tooltip.place-tooltip,
.leaflet-tooltip.place-tooltip.place-tooltip-selected {
    overflow: visible !important;
}


/* Tooltip: не терять синий бордер на hover */
.leaflet-tooltip.place-tooltip,
.leaflet-tooltip.place-tooltip:hover,
.leaflet-tooltip.place-tooltip:focus-within {
    border: 1.5px solid #0700ff !important;
    overflow: visible !important; /* чтобы хвостик не резался */
    background-color: #fff !important;
}

/* Если есть “выбранный” тултип — тоже фиксируем */
.leaflet-tooltip.place-tooltip.place-tooltip-selected,
.leaflet-tooltip.place-tooltip.place-tooltip-selected:hover,
.leaflet-tooltip.place-tooltip.place-tooltip-selected:focus-within {
    border: 1.5px solid #0700ff !important;
    overflow: visible !important;
}

.place-card-note-title {
    font-weight: 700;
    font-size: 16px;
    margin: 6px 0 6px;
}

.place-card-note-body {
    line-height: 1.5;
    color: #000000;
}

.place-card .settings-subheader {
    font-size: 0.95em;
    font-weight: 600;
    margin: 12px 0 4px;
    color: #555;
}

.place-card .settings-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    user-select: none;
}

.place-card .settings-item input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.place-card .settings-text {
    flex: 1 1 auto;
    /* .place-card-body задаёт text-align: justify — на подписи чек-боксов это даёт
       растянутые по всей ширине строки при мягком переносе (жёсткий <br> justify
       не трогает, поэтому раньше это не всплывало). */
    text-align: left;
}

/* Неразрывный смысловой кусок подписи чек-бокса: перенос строки разрешён только
   МЕЖДУ такими кусками. Так «Распределение картин и рисунков / Н.К., С.Н. и Ю.Н.
   Рерихов по маршрутам экспедиций» на широкой карточке занимает 2 строки, а при
   сужении честно распадается на 3 — без медиа-запросов и брейкпоинтов. */
.place-card .settings-text .settings-nb {
    white-space: nowrap;
}

.place-card .settings-group-gap {
    height: 1.6em;
}

.place-card .settings-info {
    flex: 0 0 auto;
    cursor: help;
    color: #000;
}

/* Смещение всплывающих подсказок в настройках влево */
.place-card .settings-info[data-tooltip]::after {
    left: auto !important;
    right: -10px !important;
    transform: none !important;
}


.el-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999; /* Самый верхний слой */
    background-color: rgba(0, 0, 0, 0.7); /* Чуть темнее */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.el-dialog {
    background: #f5f1e8;
    border-radius: 8px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    width: 700px;
    max-width: 90%;
    padding: 30px;
    animation: dialog-fade-in 0.4s ease-out;
}

@keyframes dialog-fade-in {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Колонка: сверху шапка (логотип + заголовки), под ней — блок выбора языка
   во всю ширину карточки. */
.el-dialog__body {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Двухколоночная шапка. Отступ между логотипом и заголовками — тот же 30px,
   что был у .el-dialog__body до выноса блока языка. */
.dialog-head {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Блок выбора языка центрируется по карточке: он больше не внутри правой
   колонки, поэтому подпись, кнопки и строка про Yandex Cloud стоят по центру. */
.language-selection {
    text-align: center;
}

.logo-container {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(175%);
    border: none;
}

.logo-container img {
    width: 160px;
    border-radius: 50%;
    object-fit: contain;
    margin-bottom: 50px !important;
    margin-left: -40px;
}

.logo-container {
    flex: 0 0 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(175%);
    border: none;
    padding-left: 60px;
}

.logo-container img {
    width: 160px;
    border-radius: 50%;
    object-fit: contain;
    margin-bottom: 50px !important;
    margin-left: -27px;
}

.content-container {
    flex: 1;
    text-align: center;
}

h3.dialog-title {
    color: #42a5f5;
    font-family: Literata, serif !important;
    font-size: 25px;
    line-height: 1.0;
    margin-bottom: 30px;
    /* margin-left: -20px убран: он сдвигал текст в зазор между логотипом и
       колонкой, из-за чего правый отступ был 10px против 30px слева. Пережиток
       старой раскладки, где у .content-container стоял margin-right: -30px. */
}

@media (max-width: 768px) {

    .el-dialog {
        max-height: calc(100dvh - 20px);
        padding: 20px;
        overflow-y: auto;
    }

    .el-dialog__body {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }


    .logo-container {
        padding: 0;
        transform: none;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 20px 0; /* top = dialog padding (20px), bottom = 20px → equal */
    }

    .logo-container img {
        width: 65%;          /* 60–70% ширины WP */
        max-width: 300px;
        margin: 0 !important;
    }

    .content-container {
        margin: 0;
        text-align: center;
        padding: 0 10px;
    }

    h3.dialog-title {
        font-size: 20px;
        line-height: 1.2;
        margin: 0 0 16px 0;
        text-align: center;
    }

    .language-selection {
        margin: 0;
    }

    .button-group {
        min-height: 44px;
    }

    .button-group .el-button--primary {
        /* Ширина та же, что на десктопе, — меняем только высоту под палец. */
        height: 44px;
        min-height: 44px;
        padding: 0 8px;
    }
}

@media (max-width: 871px) {

    .el-dialog {
        width: calc(100vw - 16px);
        margin: 5px auto;
        max-height: calc(100dvh - 10px);
        padding: 15px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .el-dialog__body {
        flex: 1 1 auto;
        padding: 0;
    }

    .logo-container {
        margin: 0 0 15px 0; /* top = dialog padding (15px), bottom = 15px → equal */
    }

    .logo-container img {
        width: 65%;
        max-width: 220px;
    }

    .content-container {
        padding: 0 5px;
    }

    h3.dialog-title {
        font-size: 16px;
        line-height: 1.15;
        margin: 0 0 10px 0;
    }
}


.language-label {
    margin-bottom: 15px;
    color: #606266;
    font-size: 14px;
}

/* Подпись про используемый сервис. Тот же шрифт и цвет, что у
   «Выберите язык / Select Language» — это подписи одного уровня, разнобой
   в кегле бросался в глаза. */
.cloud-note {
    margin-top: 15px;
    color: #606266;
    font-size: 14px;
}

/* Домены сайта перед атрибуцией — синим заголовка заставки, полужирным,
   шрифт строки тот же. Только десктоп. */
.cloud-note__domains b {
    color: #42a5f5;
    font-weight: 700;
}

@media (max-width: 871px) {
    .cloud-note__domains {
        display: none;
    }
}

/* Вертикальные отступы заставки симметричны: сверху и снизу по 30px из
   padding у .el-dialog. У h3 есть браузерный margin, который добавлял сверху
   лишнее, — обнуляем у первого заголовка; снизу лишнего margin быть не должно,
   поэтому последний элемент тоже без него. */
.el-dialog__body .content-container > :first-child {
    margin-top: 0;
}

/* Нижний отступ карточки задаёт padding .el-dialog, поэтому у самого нижнего
   элемента своего margin быть не должно. У последнего заголовка margin, наоборот,
   НУЖЕН — он отделяет шапку от блока выбора языка. */
.language-selection > :last-child {
    margin-bottom: 0;
}

.button-group {
    display: flex;
    /* 5 кнопок по 80px + 4 промежутка по 8px = 432px при контейнере 440px. */
    gap: 8px;
    justify-content: center;
    /* Языков стало пять (28.08.2026) — в одну строку на узком экране не влезают. */
    flex-wrap: wrap;
    min-height: 40px !important;
}

.el-button {
    padding: 10px 25px;
    border: 1px solid #dcdfe6;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.el-button--primary {
    background-color: #409EFF;
    border-color: #409EFF;
    color: #fff;
    /* ВСЕ кнопки языков одного размера. По содержимому был разброс 27px:
       «中文» 57px против «Français» 84px. Самый широкий текст — 54px, при
       padding 8px остаётся 64px, поэтому 80px хватает с запасом.
       box-sizing: border-box, поэтому padding уже внутри этих 80px. */
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    white-space: nowrap;
    height: 31px;
    min-height: 31px;
    padding: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-button--primary:hover {
    background-color: #66b1ff;
    transform: translateY(-1px);
}

/* Пока i18n.js не подтвердил, что сервис перевода включён, языки кроме
   исходного не выбираются: иначе посетитель нажал бы «English», а сайт остался
   бы русским. Атрибут data-i18n-ready ставит i18n.js по ответу
   /api/translate/status. */
html:not([data-i18n-ready]) .el-button--primary[data-needs-service] {
    background-color: #a0cfff;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}

/* Язык ещё не открыт: кнопка видна (показывает планы), но не нажимается. */
.el-button.is-disabled {
    background-color: #a0cfff;
    cursor: not-allowed;
    opacity: 0.7;
}

.el-button.is-disabled:hover {
    background-color: #a0cfff;
    transform: none;
}

/* Blur effect for main content */
body.modal-open > *:not(.el-overlay) {
    filter: blur(5px);
    pointer-events: none;
}

body.modal-open {
    overflow: hidden;
}

/* Mobile */
@media (max-width: 600px) {
    .el-dialog__body {
        flex-direction: column;
        text-align: center;
    }
}

.place-card-title-center {
    color: white !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);

}
/* --- 1. СТАНДАРТНЫЙ ЦВЕТ (синий) для неактивного тултипа --- */
.leaflet-tooltip.place-tooltip .tooltip-photo-count {
    color: #0078a8;
}
.leaflet-tooltip.place-tooltip .tt-photo-icon {
    color: #0078a8;
}

/* --- 2. ЦВЕТ ДЛЯ АКТИВНОГО ТУЛТИПА (полностью белый) --- */
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tooltip-photo-count {
    color: #ffffff !important;
}
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-photo-icon {
    color: #ffffff !important;
}

/* --- 3. ЦВЕТ ПРИ НАВЕДЕНИИ НА АКТИВНЫЙ (желтый фон) --- */
/* Возвращаем синий цвет иконке и тексту при :hover */
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-btn.tt-gallery:hover .tooltip-photo-count {
    color: #42a5f5 !important;
}
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-btn.tt-gallery:hover .tt-photo-icon {
    color: #42a5f5 !important;
}

/* СТАТИЧНАЯ ПОЛОСКА 16px ВНИЗУ КАРТОЧКИ МЕСТА */


/* Создаем полоску как псевдоэлемент карточки */
.place-card::after,
#placecard::after {
    content: ' ' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;

    height: 16px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.98) 100%) !important;

    z-index: 10 !important;

    font-size: 10px !important;
    color: rgba(0,0,0,0.6) !important;
    text-align: center !important;
    line-height: 16px !important;
    letter-spacing: 0.3px !important;
    font-weight: 500 !important;
    pointer-events: none !important;
    border-radius: 0 0 4px 4px !important;
    right: 8px !important;
}




@media (max-width: 871px) {
    :root{
        --header-h: 0px !important;
    }
}

.pswp-thumb {
  object-fit: contain !important;
  background-color: #d2d2d2;
}


/* Адаптив все что меньше 360 в ширину ..*/
@media (max-width: 871px) {
    .cae-logo-link {
        width: 64px;
        height: 64px;
        top: 1px;
        left: 2px;
    }
    .map-tools{
        left: 17px;
        /* top задаётся переменной в базовом правиле — из неё же считается
           max-height, иначе перенос колонки посчитался бы от чужого отступа. */
        --map-tools-top: 17px;
    }
    .leaflet-bottom.leaflet-left .leaflet-control-zoom{
        left: -5px;
    }
    body.page-map-active .maps-panel{
        top:17px !important;
    }


}


@media (max-width: 871px) {
    .nav-item .nav-text {
        text-decoration: none;
        font-size: 12px;
    }

    .nav-item:not(:last-child)::after {
        content: "•";
        position: absolute;
        right: -16px;
        color: rgba(255, 255, 255, 1);
        font-weight: normal;
        transform: scale(1.5);
    }
.maps-panel#externalMapsPanel.active {
    top:calc(var(--header-h) + var(--space-17) + 38px) !important; ;
}
}
.maps-panel#externalMapsPanel.active {
    top:calc(var(--header-h) + var(--space-17) + 41px) ;
}

@media (max-width: 871px) {
    .nav-items {
        justify-content: center;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        margin-left: 20px;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .nav-row {
        display: flex;
        justify-content: center;
        gap: 0;
        flex-wrap: nowrap;
    }
}
@media (min-width: 872px) {

    .nav-items {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .nav-row {
        display: contents;
    }

    /* точки после всех пунктов */
    .nav-item::after {
        content: "•";
        position: absolute;
        right: -16px;
        color: rgba(255, 255, 255, 1);
        font-weight: normal;
        transform: scale(1.5);
    }

    /* убрать точку только у "Инструкция" */
    .nav-row:last-child .nav-item:last-child::after {
        display: none;
    }
}

.maps-panel,
.externalMapsPanel {
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);


    width: 250px;
    max-height: 400px;
    z-index: 2100;              /* см. первое объявление .maps-panel */


    /* --- НОВЫЙ КОД --- */

    padding: 0 var(--space-20); /* Убираем верхний/нижний padding */
    border-top: 11px solid white; /* Статичный отступ сверху */
    border-bottom: 11px solid white; /* Статичный отступ снизу */
    background-clip: padding-box; /* Чтобы скроллбар отображался корректно */
}
/* НАЙДИТЕ этот блок в вашем CSS и замените max-height: */

.maps-panel {
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-top: 0;
    border-bottom: 0;
    padding: 36px 11px 11px 11px;


    left: calc(var(--space-12) + 40px + 8px);
    width: 250px;

    z-index: 2100;              /* см. первое объявление .maps-panel */

}
/* Body fixed — html не скроллится */
html {
    overflow: hidden !important;
}

@media (max-width: 871px) {
    .nav-item i {
        margin-right: 8px;
        font-size: 12px !important;
    }

    .search-panel{
        top: 17px !important;
    }
    /* Правило .place-card с height: calc(100dvh - 104px) убрано: оно всё равно
       перекрывалось более поздним блоком того же брейкпоинта
       (position:fixed; top:8px; bottom:8px; height:auto) и только путало. */
    }
.place-card-image-grid{
    margin-bottom: 18px;
}


/* ===========================================================
   FIX: Android — контент обрезается за навбаром браузера.

   На Android системный навбар перекрывает нижнюю часть viewport.
   --sab задаётся из JS (48px на Android, 0 на десктопе).
   =========================================================== */

/* Карта: контейнер страниц не скроллится */
body.page-map-active .pages-container {
    overflow: hidden !important;
    height: auto !important;
}

/* Секция карты */
body.page-map-active #map_page {
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Обёртка карты — заполняет секцию, является контейнером для
   абсолютно-позиционированных элементов (карточка, таймлайн) */
body.page-map-active #map_page .map-wrapper {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
}

/* Мобилка — все нижние элементы: position:fixed + отступ от навбара (JS) */
@media (max-width: 871px) {
    body.page-map-active .place-card {
        position: fixed !important;
        top: 8px !important;
        bottom: calc(8px + var(--map-footer-h)) !important;
        height: auto !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        z-index: 99999; /* ниже PhotoSwipe (100000) чтобы галерея перекрывала карточку */
    }

    /* Таймлайн (годы) */
    body.page-map-active .timeline-container {
        position: fixed !important;
        bottom: 10px !important;
    }

    /* Месяцы */
    body.page-map-active .month-scroller {
        position: fixed !important;
        bottom: 55px !important;
    }

    /* Дни */
    body.page-map-active .day-scroller {
        position: fixed !important;
        bottom: 100px !important;
    }

    /* Timeline-wrapper (ползунок) — над футером карты */
    body.page-map-active .timeline-wrapper {
        position: fixed !important;
        bottom: var(--map-footer-h) !important;
    }

    /* Zoom-кнопки карты */
    body.page-map-active .leaflet-bottom.leaflet-left .leaflet-control-zoom {
        position: fixed !important;
        bottom: calc(var(--tl-strip-h) + 10px + var(--map-footer-h)) !important;
        left: 14px !important;
    }

}

/* Мобилка — линейка НА КАРТЕ стоит там же, где на десктопе: слева, на 10px
   над полосой таймлайна, вровень с колонкой кнопок.
   Заказчик 09.09.2026: «в мобилке дубликат Масштаба не в нужном месте
   появляется — сдвинуть туда же, где он в Десктопе».

   ⚠️ position: FIXED, как у .timeline-wrapper и кнопок зума в этом же
   медиазапросе. Раньше линейка оставалась absolute внутри #map и отсчитывала
   свой bottom от НИЗА КАРТЫ, а полоса таймлайна — от низа экрана: пока карта
   доходит до низа экрана, это одно и то же (замер 460×640 и 510×900: низ
   линейки 386/646 при верхе полосы 396/656), но стоит карте кончиться выше —
   и линейка уезжает вверх на всю эту разницу, повисая посреди карты.
   ⚠️ Ограничение `min-height: 710px` снято: на низком экране линейка иначе
   оставалась на десктопном left: 58px, то есть не под кнопками. */
/* ⚠️ На мобильном НЕТ своего правила позиции: линейку ставит alignScaleToZoom
   по фактическим кнопкам зума. Прежние здешние `!important` перебивали бы
   инлайн-стиль от JS. */
.pswp__top-bar{
    background: black !important;
}
.pswp__bg{
    opacity: 1 !important;
}

/* ── Photo visibility toggle ── */
/* low — always hidden, never shown */
.place-card-image-item.photo-low-vis { display: none !important; }
/* medium — hidden by default, shown when container has .show-medium-photos */
.place-card-image-item.photo-medium-vis { display: none !important; }
.show-medium-photos .place-card-image-item.photo-medium-vis { display: flex !important; }
/* Hide group sections when all visible children are hidden */
.place-card-section:has(.place-card-image-grid:not(:has(.place-card-image-item:not(.photo-low-vis):not(.photo-medium-vis)))) { display: none; }
/* show-medium-photos: hide sections where all items are low-vis */
.show-medium-photos .place-card-section:has(.place-card-image-grid):not(:has(.place-card-image-item:not(.photo-low-vis))) { display: none !important; }

.etika-paragraph-count {
    color: #ff9900;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-left: 5px;
    font-weight: 700;
}

.painting-count {
    color: #1E90FF;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-left: 5px;
    font-weight: 700;
}
.show-medium-photos .place-card-section:has(.place-card-image-grid:has(.place-card-image-item:not(.photo-low-vis))) { display: block; }


/* .shape-text-label / .shape-text-inner переехали в html/shape_text.css —
   общий файл для карты и админки (у админки была своя копия этих правил,
   а styles.css она не подключает). Не возвращать сюда. */
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img{
    border-radius: 5px;
}
.pswp__counter {
    margin-inline-end: auto;
}
.pswp__place-name {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 110px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
}
.pswp__place-name > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
@media (max-width: 1024px) {
    .pswp__place-name {
        padding: 0 110px;
    }
    .pswp__place-name > span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-break: break-word;
        font-size: 13px;
        line-height: 1.15;
        text-align: center;
    }
}

/* === Running Reality integration === */
#rr-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 0;
    pointer-events: none;
    background: #72AED5;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#rr-iframe.rr-loaded { opacity: 1; }
.map-wrapper.rr-mode { overflow: hidden; }
/* Запас RR-контента вокруг вьюпорта — по ОБЕИМ осям (см. updateRRTransform,
   константа RR_IFRAME_BUFFER_PX). Раньше запас был только по горизонтали, и на
   узком высоком мобильном экране вертикальный сдвиг сразу обрывал подложку.
   Значения дублируют RR_IFRAME_BUFFER_PX=1000 на время до первого вызова
   updateRRTransform (дальше JS задаёт то же самое инлайном). */
.map-wrapper.rr-mode #rr-iframe {
    left: -1000px;
    top: -1000px;
    right: auto;
    bottom: auto;
    width: calc(100% + 2000px);
    height: calc(100% + 2000px);
}
/* На мобильных буфер меньше (400px, см. rrIframeBufferPx): iframe с полным
   RR-приложением на площади 2390×2664 ронял вкладку в iOS Safari. */
@media (max-width: 767px) {
    .map-wrapper.rr-mode #rr-iframe {
        left: -400px;
        top: -400px;
        width: calc(100% + 800px);
        height: calc(100% + 800px);
    }
}
.map-wrapper.rr-mode #map { background: transparent !important; }
/* Тайлы прячем только когда RR-подложка реально показана. Ниже
   RR_IFRAME_MIN_ZOOM её нет (RR не отдаёт кадр шире своего 4-го зума —
   см. RRBackdropLayer._hide), и класс rr-noframe возвращает обычную карту,
   поверх которой рисуются исторические границы вектором. */
.map-wrapper.rr-mode:not(.rr-noframe) .leaflet-tile-pane { display: none; }

/* ===== Phersu Atlas: исторические границы (канвас MapLibre в phersuPane) =====
   Класс ставит enablePhersuMode. Правило ОБЯЗАТЕЛЬНОЕ, а не косметика:
   initMap (main.js:4065) добавляет стартовую подложку CARTO напрямую в карту,
   мимо currentBasemap, и switchBasemap её никогда не снимает. Обычные подложки
   этого не замечают — они рисуются поверх, в том же tilePane. А канвас Phersu
   лежит в СВОЁМ пане (z=195, ниже tilePane=200), и без этого правила он
   оказывается ПОД забытым слоем CARTO: карта Phersu просто не видна.
   Пан phersuPane — сосед tilePane внутри mapPane, поэтому под это правило
   не попадает. */
.map-wrapper.phersu-mode .leaflet-tile-pane { display: none; }

/* ===== Ventusky V2: нативный погодный слой (без iframe) =====
   Погода — L.GridLayer в pane ventuskyWeatherPane (z=320, между тайлами и
   маршрутом); базовая карта остаётся видимой. Ниже — легенда-шкала справа
   и чип со значением у курсора (вид как на оригинальном сайте). */

/* Подложка World_Terrain_Base светло-бежевая → при полупрозрачной погоде
   «вымывает» цвета. Глушим до тёмно-нейтрального серого рельефа (как фон
   Ventusky), чтобы просвет под погодой не белил карту. */
.ventusky-basemap-tiles {
    filter: brightness(0.62) saturate(0.45) contrast(1.08);
}

#ventusky-legend {
    position: absolute;
    /* Колонка заканчивается ВЫШЕ язычка свёрнутой карточки места
       (.place-card-toggle торчит у правого края на середине высоты). */
    top: 56px;
    bottom: calc(50% + 44px);
    right: 0;
    z-index: 900;                 /* над панелями карты, под попапами-морталами */
    display: flex;
    flex-direction: column;
    width: 36px;
    border-radius: 6px 0 0 6px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    pointer-events: none;
    /* Тот же шрифт И размер, что в панели координат (.mouse-coords): Noto Sans 600, 12px. */
    font: 600 var(--font-size-sm)/1 "Noto Sans", sans-serif;
}
/* display:flex выше перебивает UA-правило [hidden] — возвращаем скрытие,
   иначе легенда остаётся после переключения на не-Ventusky карту. */
#ventusky-legend[hidden] { display: none !important; }
#ventusky-legend .vl-unit {
    background: rgba(255,255,255,0.92);
    color: #333;
    text-align: center;
    padding: 4px 0;
    font-weight: var(--font-weight-semibold);
}
#ventusky-legend .vl-cell {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Мобильный: горизонтальная полоса вверху под хедером. row-reverse: DOM-порядок
   (unit, max..min) превращается в  min..max | unit  слева направо.
   Брейкпоинт 871px — как у остальной мобильной раскладки (.place-card, нижние
   элементы). Раньше был 768px: в полосе 769–871px легенда оставалась вертикальной
   колонкой у правого края вместо горизонтальной полосы. */
@media (max-width: 871px) {
    #ventusky-legend {
        /* Вплотную к верхнему меню навигации (без зазора сверху); скругление
           только снизу — верх ровный, как продолжение шапки. */
        top: 0;
        /* Левые кнопки .map-tools: left:17px, ширина 30 → правый край 47px.
           Зазор до шкалы = 8px (как между кнопками) → left:55px. */
        left: 55px;
        right: 8px;
        bottom: auto;
        width: auto;
        height: 26px;
        flex-direction: row-reverse;
        border-radius: 0 0 6px 6px;
        font-size: var(--font-size-xs); /* 11px — как координаты на мобилке */
    }
    #ventusky-legend .vl-unit {
        display: flex;
        align-items: center;
        padding: 0 6px;
    }
    /* min-width: 3px — крошечный пол, чтобы ячейки НИКОГДА не схлопнулись в 0
       (flex:1 без явной ширины при дёргании вьюпорта на Android теоретически может
       дать 0). 20 ячеек × 3 = 60px ≪ ширины полосы (~349px) — в норме не срабатывает. */
    #ventusky-legend .vl-cell { min-width: 3px; }
    /* кнопка даты — под горизонтальной легендой, чтобы не перекрывались */
    .map-wrapper.ventusky-mode .rr-date-display { top: 46px; }
}
#ventusky-legend .vl-nodata {
    background: rgba(255,255,255,0.92);
    color: #b00;
    text-align: center;
    padding: 8px 2px;
    font-weight: bold;
    white-space: nowrap;
    font-size: 10px;
}

/* Чип значения под курсором — белая овальная «пилюля». Шрифт/размер — НАШ типовой
   (дизайн-система сайта), а не Ventusky (только число + единица; стрелка — на ветре). */
#ventusky-cursor {
    position: absolute;
    z-index: 950;
    pointer-events: none;
    padding: 4px 12px;
    border-radius: 999px;                 /* овал/пилюля */
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    /* Тот же шрифт, что в панели координат (.mouse-coords): Noto Sans 600. */
    font: 600 var(--font-size-sm)/1.2 "Noto Sans", sans-serif;
    white-space: nowrap;
    background: #fff;
    color: #2b2b2b;
}
#ventusky-cursor .vc-arrow {
    display: inline-block;
    margin-right: 5px;
    font-size: var(--font-size-xs);
}

.rr-panel {
    position: absolute;
    z-index: 500;
    background: #fff;
    color: #333;
    border-radius: 4px;
    border: none;
    outline: 2px solid rgba(0, 0, 0, .2);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
}
.rr-panel[hidden] { display: none !important; }
/* Панель выбора даты Ventusky (top:56px right:12px) правым краем налезает на
   шкалу-легенду #ventusky-legend (z900, right:0). Без этого её правый край
   прячется за цветным градиентом легенды — поднимаем над легендой, когда открыта. */
#ventusky-date-panel { z-index: 1000; }
.rr-year-panel {
    top: 56px;
    right: 12px;
    left: auto;
    width: 230px;
}
.rr-set-btn {
    flex: 1;
    background: #9ECFFF;
    color: #333;
    font-size: 14px;
    letter-spacing: 1px;
}
.rr-set-btn:hover { background: #7abfff; }
.rr-year-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}
.rr-year-input, .rr-month-input, .rr-day-input {
    flex: 1;
    text-align: center;
    height: 30px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    background: #fff;
    border: none;
    outline: 2px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    padding: 4px 6px;
    min-width: 0;
}
.rr-year-input:focus, .rr-month-input:focus, .rr-day-input:focus {
    outline-color: #9eCFFF;
    outline-offset: 0;

}
.rr-year-input::placeholder,
.rr-month-input::placeholder,
.rr-day-input::placeholder {
    color: #999;
    font-family: 'Noto Sans', sans-serif;
    opacity: 1;
}
.rr-btn {
    background: #fff;
    color: #333;
    height: 30px;
    border: none;
    outline: 2px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.12);
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 400;
    font-family: inherit;
    transition: all 0.2s ease;
}
.rr-btn:hover { background: #ecf5ff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.rr-arrow { flex-shrink: 0; }
.rr-year-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    gap: 6px;
}
.rr-year-actions .rr-btn { flex: 1; font-size: 12px}

.rr-date-display {
    font-weight: 400 !important;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 500;
    background: #fff;
    color: #333;
    height: 30px;
    font-size: 12px;
    border: none;
    outline: 2px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
}
.rr-date-display:hover { background: #ecf5ff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.rr-date-display[hidden] { display: none !important; }
/* Левая кнопка тултипа: название + мета-блок (точность и дата прибытия) в одном
   наводимом элементе — при hover подсвечивается вся левая сторона */
.leaflet-tooltip.place-tooltip .tt-btn.tt-title,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-btn.tt-title {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 12px !important; /* разрыв между мета-блоком и разделителем */
}

.leaflet-tooltip.place-tooltip .tt-title .tt-title-text,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-title .tt-title-text {
    display: inline-flex;
    align-items: center;
}

/* Мета-блок: стиль, как у остального тултипа */
.leaflet-tooltip.place-tooltip .tt-meta,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(12px, 1.01rem, 20px);
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    white-space: nowrap;
    opacity: 1;
}

.leaflet-tooltip.place-tooltip .tt-meta .tt-date,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-meta .tt-date {
    font: inherit;
    color: inherit;
    opacity: 1;
    white-space: nowrap;
    font-size: 1.11rem;
}

/* Разделитель между значком точности и датой — цвет как у рамки тултипа,
   тянется во всю высоту тултипа (клипится overflow:hidden у .tt-wrap) */
.leaflet-tooltip.place-tooltip .tt-meta .tt-date,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-meta .tt-date {
    position: relative;
    padding-left: 10px;
}
/* Для невыделенных точек (уменьшенный шрифт) */
.leaflet-tooltip.place-tooltip:not(.place-tooltip-selected) .tt-meta .tt-date {
    font-size: 14.14px;
}

/* Для выделенных точек (увеличенный шрифт) */
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-meta .tt-date {
    font-size: 1.11rem;
}
.leaflet-tooltip.place-tooltip .tt-meta .tt-date::before,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-meta .tt-date::before {
    content: '';
    position: absolute;
    left: 0;
    top: -100px;
    bottom: -100px;
    width: 0;
    border-left: 1px solid #0700ff;
    pointer-events: none;
}

/* Общие размеры обоих вариантов значка точности */
.leaflet-tooltip.place-tooltip .tt-meta .tt-accuracy-icon,
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-meta .tt-accuracy-icon {
    height: 0.715em;
    width: auto;
    flex: 0 0 auto;
    filter: none !important;
    opacity: 1 !important;
}

/* По умолчанию: тёмный виден, светлый скрыт */
.leaflet-tooltip.place-tooltip .tt-meta .tt-accuracy-icon-dark {
    display: block;
}
.leaflet-tooltip.place-tooltip .tt-meta .tt-accuracy-icon-light {
    display: none;
}

/* Активный тултип: светлый виден, тёмный (идущий за светлым) скрыт */
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-meta .tt-accuracy-icon-light {
    display: block;
}
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-meta .tt-accuracy-icon-light + .tt-accuracy-icon-dark {
    display: none;
}

/* Активный тултип + hover: обратно к тёмному */
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-btn.tt-title:hover .tt-accuracy-icon-light {
    display: none;
}
.leaflet-tooltip.place-tooltip.place-tooltip-selected .tt-btn.tt-title:hover .tt-accuracy-icon-dark {
    display: block;
}

/* ===== Унифицированные размеры шрифтов: панели дат + правые меню =====
   Исключения: #mapsPanel (меню выбора карт), #externalMapsPanel, крестики
   закрытия обоих поисков (.search-close / .obj-search-close — у них свой
   кегль 26px, см. правило .search-close)
   ⚠️ Панели Ventusky и Phersu ОБЯЗАНЫ быть в этом списке: они переиспользуют
   классы RR-панели, но кегль задан по ID, и без них цифры в этих двух панелях
   набирались крупнее и светлее — панели выглядели чужими (жалоба заказчика
   20.08.2026 со скриншотами трёх панелей рядом). */
#rr-year-panel,
#rr-year-panel input,
#rr-year-panel button,
#ventusky-date-panel,
#ventusky-date-panel input,
#ventusky-date-panel button,
#phersu-year-panel,
#phersu-year-panel input,
#phersu-year-panel button,
.rr-date-display,
#searchPanel,
#searchPanel input,
#searchPanel button:not(.search-close),
#objSearchPanel,
#objSearchPanel input,
#objSearchPanel button:not(.obj-search-close),
#kmlPanel,
#kmlPanel button,
#kmlPanel h3 {
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 871px) {
    #rr-year-panel,
    #rr-year-panel input,
    #rr-year-panel button,
    #ventusky-date-panel,
    #ventusky-date-panel input,
    #ventusky-date-panel button,
    #phersu-year-panel,
    #phersu-year-panel input,
    #phersu-year-panel button,
    .rr-date-display,
    #searchPanel,
    #searchPanel input,
    #searchPanel button:not(.search-close),
    #objSearchPanel,
    #objSearchPanel input,
    #objSearchPanel button:not(.obj-search-close),
    #kmlPanel,
    #kmlPanel button
    {
        font-size: 11px;
    }
}

#rr-year-panel .rr-arrow,
#rr-year-panel button.rr-arrow,
#ventusky-date-panel .rr-arrow,
#ventusky-date-panel button.rr-arrow,
#phersu-year-panel .rr-arrow,
#phersu-year-panel button.rr-arrow {
    font-size: 14px;
}

#kmlPanel .maps-close {
    position: absolute;
    top: -9px;
    margin-left: -1px;
    right: 4px;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: white;
    outline: 2px solid rgba(0, 0, 0, .2);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    color: #555;
    font-size: 26px;
    line-height: 1.2;
    transition: all 0.2s ease;
    z-index: 1;
}
#kmlPanel h3{
    font-size:14px !important;
}
#kmlPanel .maps-close:hover {
    background: #ecf5ff;
    color: var(--color-error);
    border-color: #ccc;
}

.rr-date-display{
    font-weight: 600 !important;
}

/* Замедление анимации распада кластера фото (spiderfy) в 2.5 раза:
   0.3s (дефолт Leaflet.markercluster) -> 0.75s. styles.css грузится после
   MarkerCluster.css, поэтому селекторы той же специфичности перебивают вендорные. */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition: -webkit-transform 0.75s ease-out, opacity 0.75s ease-in;
    transition: transform 0.75s ease-out, opacity 0.75s ease-in;
}
.leaflet-cluster-spider-leg {
    -webkit-transition: -webkit-stroke-dashoffset 0.75s ease-out, -webkit-stroke-opacity 0.75s ease-in;
    transition: stroke-dashoffset 0.75s ease-out, stroke-opacity 0.75s ease-in;
}

@media (max-width: 871px) {
    br.desktop-only-br { display: none; }
}

/* ── Защита фото от скачивания ───────────────────────────────────────────────
 * Парная часть к делегированным contextmenu/dragstart в html/main.js
 * (ЗАЩИТА ФОТО ОТ СКАЧИВАНИЯ). Селекторы обязаны совпадать с PROTECTED_IMG_SEL:
 * большое фото в PhotoSwipe, лента миниатюр, миниатюры в карточке места.
 *
 * -webkit-touch-callout: none — единственный способ убрать меню «Сохранить в
 * Фото» по долгому тапу в iOS Safari; JS-обработчиком оно не отменяется.
 *
 * ⚠️ pointer-events НЕ трогать: PhotoSwipe ведёт зум, панораму и свайп по
 * событиям указателя на самом <img> — глушение убьёт всю навигацию галереи.
 * ⚠️ Это поднятие порога, а не запрет: URL картинки виден в DevTools.
 *   Подробности — docs/gallery.md.
 */
.pswp img,
.pswp-thumbnails img,
.place-card-image-item img {
    /* user-drag есть только в WebKit/Blink (-webkit-), стандартного свойства не
       существует; в Firefox перетаскивание гасит JS-обработчик dragstart. */
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Поиск по названиям объектов слоёв (Мегалитик Портал / ЮНЕСКО) ───────────
 * Отдельный от .search-panel поиск: тот ищет места и фото экспедиции слева,
 * этот живёт в ПРАВОМ ВЕРХНЕМ углу и фильтрует объекты выбранной карты-слоя.
 *
 * Стиль — НАШЕЙ панели выбора даты Running Reality (требование заказчика
 * 02.08.2026): разметка переиспользует её же классы `.rr-btn`, `.rr-panel`,
 * `.rr-year-row`, `.rr-year-input`, поэтому фон/рамки/скругления/шрифты/ховеры
 * берутся из одного места и не разъедутся при правках темы. Здесь — только
 * раскладка панели и список результатов.
 * Позиция совпадает с кнопкой даты RR (top:12 right:12): они никогда не видны
 * одновременно — RR/Ventusky и Мегалитик/ЮНЕСКО взаимоисключающие подложки.
 * Подробности — docs/overlay-search.md.
 */
.obj-search {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;          /* как #ventusky-date-panel: над легендой (900) */
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* ⚠️ Контейнер ШИРЕ своего видимого содержимого: свёрнутая плашка «ПОИСК»
       занимает ~70px, а бокс — все 260px (на узком экране — до 100vw−70px).
       Без этого невидимая полоса поверх карты съедала клики в правом верхнем
       углу: крестик подсказки мегалита/ЮНЕСКО и карта рядом с ним не
       откликались (жалоба 16.08.2026, мобильная версия). Приём тот же, что у
       .timeline-container и .map-tools. */
    pointer-events: none;
}

.obj-search[hidden] {
    display: none !important;   /* правило display:flex перебило бы UA [hidden] */
}

/* Над полосой таймлайна для списка нет места (телефон в альбомной ориентации) —
   раскрытая панель ложится ПОВЕРХ полосы (.timeline-wrapper 2000), иначе метки
   мест перехватывают тап по строкам. Ставит syncObjSearchBottom (main.js).
   Ниже .map-footer с открытым списком даты (2200) и колонки кнопок (2100). */
.obj-search.obj-search--over-tl {
    z-index: 2050;
}

/* Свёрнутая плашка: внешний вид даёт .rr-btn, здесь — только надпись */
.obj-search-pill {
    pointer-events: auto;   /* обёртка кликов не ловит — см. .obj-search */
    font-size: 12px;
    letter-spacing: 1px;
    padding: 6px 12px;
    /* Полупрозрачный серый текст — как placeholder в полях RR-панели */
    color: #999;
    font-weight: 600;
}

/* Развёрнутая панель: .rr-panel позиционируется сама (absolute) — здесь она
   должна лежать в потоке обёртки, поэтому position сбрасываем, а вид (белый фон,
   outline, скругление, тень, padding) остаётся от .rr-panel. */
.obj-search-panel {
    pointer-events: auto;   /* обёртка кликов не ловит — см. .obj-search */
    position: static;
    display: none;
    flex-direction: column;
    width: 100%;
    max-height: calc(100dvh - 170px);
    overflow: hidden;
    /* ⚠️ Метрики выровнены по ЛЕВОЙ панели поиска (.search-panel, правка
       заказчика 20.08.2026: «внизу отступ больше, чем в левом поиске»).
       Свой padding у .rr-panel снят: там его гасили отрицательным margin'ом
       списка (margin-bottom:-10px), и стоило списку опустеть — снизу
       оставалась пустая полоса 10px + 6px от margin строки. Теперь отступы
       даёт только строка ввода, ровно как .search-header. */
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);   /* тень .search-panel */
}

.obj-search.expanded .obj-search-pill { display: none; }
.obj-search.expanded .obj-search-panel { display: flex; }

/* Строка «поле + крестик» = .search-header левой панели: те же 12px вокруг и
   тот же разделитель 2px под ней. Разделитель гаснет, когда нечего показывать
   (пустой список + скрытое «ничего не найдено») — приём взят оттуда же. */
.obj-search-row {
    margin: 0;
    padding: var(--space-12);
    border-bottom: 2px solid #e0e0e0;
    flex-shrink: 0;
    /* Зазор между кнопками — как в левом поиске (правка заказчика 04.09.2026):
       там .search-input-wrapper даёт gap 8px. Перебивает 6px от .rr-year-row.
       ⚠️ Менять вместе с .search-input-wrapper. */
    gap: var(--space-8);
}

.obj-search-panel:has(.obj-search-results:empty):has(.obj-search-empty.hidden)
.obj-search-row {
    border-bottom: none;
}

/* .rr-year-input центрирует текст (там вводят год/месяц/день) — для строки
   поиска это неудобно, выравниваем по левому краю. Остальной вид — от RR. */
/* Поле ввода — метрики и отделка как у .search-input левой панели.
   Кегль и насыщенность приходят из общего блока «Унифицированные размеры
   шрифтов» (#objSearchPanel input), здесь только то, что задаёт .rr-year-input
   иначе: цвет текста и тень. ⚠️ Менять вместе с .search-input. */
.obj-search-input {
    text-align: left;
    padding: var(--space-10) var(--space-12);
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Крестик закрытия — ПОЛНАЯ копия .search-close левой панели (жалоба заказчика
   22.08.2026: «шрифт и размер крестика отличаются»). Значения продублированы, а
   не унаследованы, потому что .obj-search-close это ещё и .rr-btn, чьё правило
   идёт ниже по файлу и перебило бы общий селектор фоном, тенью и padding'ом.
   ⚠️ Менять только вместе с .search-close. */
.obj-search-close {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--color-text-secondary);
    background: white;
    border: none;
    outline: 2px solid rgba(0, 0, 0, .2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-standard);
}
.obj-search-close:hover {
    color: var(--color-error);
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.obj-search-results {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 400px;    /* как .search-results */
    overflow-y: auto;
    overflow-x: hidden;   /* длинные названия переносим, а не растягиваем панель */
    /* ⚠️ Никаких margin'ов: панель больше не имеет своего padding, список идёт
       от края до края и упирается в низ панели — как в левом поиске. Верхняя
       линия не нужна, её роль играет border-bottom строки ввода. */
    margin: 0;
}

.obj-search-results:empty {
    display: none;
}

/* Скроллбар — наш, из .maps-panel (элемент из ТЗ) */
.obj-search-results::-webkit-scrollbar {
    width: 8px;
}

.obj-search-results::-webkit-scrollbar-thumb {
    background-color: #666666;
    border-radius: 4px;
}

.obj-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.obj-search-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* Отступы строки — как у .search-result-item левой панели */
    padding: var(--space-12) var(--space-16);
    cursor: pointer;
    /* Тонкие разделительные линии — элемент из ТЗ */
    border-bottom: 1px solid var(--color-card-border-inner);
}

.obj-search-item:last-child {
    border-bottom: none;
}

.obj-search-item:hover,
.obj-search-item.highlighted {
    background: rgb(158, 207, 255);   /* та же подсветка, что в нашем поиске */
}

/* Значок объекта — ровно тот же, что на карте (GIF-пин Мегалитика / SVG ЮНЕСКО) */
.obj-search-item__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.obj-search-item__icon img {
    width: 20px;
    height: 20px;
    display: block;
}

.obj-search-item__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.obj-search-item__title {
    /* Кегль и цвет — как .search-result-title */
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 17px;
    color: rgb(0, 0, 0);
    margin-bottom: var(--space-4);
    word-break: break-word;
}

/* Серый вторичный текст: тип объекта / категория и страна */
.obj-search-item__sub {
    /* Как .search-result-date: вторичный кегль и вторичный цвет темы */
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 15px;
}

/* Хвост длинной выдачи: сколько объектов не поместилось в список (на карте они есть) */
.obj-search-more {
    padding: var(--space-12) var(--space-16);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-secondary);
    text-align: center;
}

.obj-search-empty {
    padding: var(--space-12) var(--space-16);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.obj-search-empty.hidden {
    display: none;
}

/* Строка истории запросов — текст + значок часов справа (как в нашем поиске) */
.obj-search-item.obj-search-history {
    justify-content: space-between;
    align-items: center;
}

.obj-search-history__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: #42a5f5;
}

/* Шкала Ventusky (right:0, width:36) с этими слоями не сочетается — обе подложки
   взаимоисключающие, — но правило оставлено защитно, если появится оверлей. */
body:has(#ventusky-legend:not([hidden])) .obj-search {
    right: 52px;
}

/* Карточка места занимает правый верхний угол (500px) — уводим поиск левее неё.
   ⚠️ Свёрнутая карточка остаётся `.active`, но уезжает за экран через transform
   (класс `minimized`), поэтому обязательно `:not(.minimized)` — иначе плашка
   висит в середине экрана всегда.
   Идёт ПОСЛЕ правила шкалы Ventusky: одинаковая специфичность, а карточка шире. */
body:has(.place-card.active:not(.minimized)) .obj-search {
    right: calc(500px + 32px);
}

@media (max-width: 800px) {
    body:has(.place-card.active:not(.minimized)) .obj-search {
        right: calc(400px + 32px);
    }
}

/* На узких экранах карточка места разворачивается во весь экран — там поиск
   прячем совсем (запрос сохраняется, плашка вернётся после закрытия карточки). */
@media (max-width: 600px) {
    .obj-search {
        top: 10px;
        right: 10px;
        width: min(260px, calc(100vw - 70px));
    }

    body:has(.place-card.active:not(.minimized)) .obj-search {
        display: none;
    }
}

/* ============================================================
   Переключатель языка в верхней панели (docs/i18n_yandex.md)
   ============================================================
   Пилюлю-контейнер берём готовую: `.lang-switch` выше (строка ~2596) была
   заготовлена в проекте заранее и лежала под display:none, потому что
   разметки под неё не существовало. Здесь её только включаем.

   А вот кнопки называются `.cae-lang-btn`, а НЕ `.lang-btn`, и это не
   прихоть: `.lang-btn` объявлен в файле ДВАЖДЫ — двумя заброшенными
   итерациями дизайна (строки ~751 и ~2609) с разными фонами и разным
   `.active` (#00D4E8 против white). Их каскад разрешается неочевидно,
   и опираться на него нельзя. Свой класс делает результат однозначным. */
/* Переключатель скрыт, пока i18n.js не подтвердил, что сервис перевода включён
   (`data-i18n-ready` на <html> по ответу /api/translate/status). Мёртвая кнопка
   «EN», которая молча ничего не делает, хуже её отсутствия. */
.lang-switch {
    display: none;
}

html[data-i18n-ready] .lang-switch {
    display: flex;
}

.cae-lang-btn {
    background: none;
    border: 0;
    color: #fff;
    border-radius: 15px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cae-lang-btn:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Активный язык. Класс .active проставляет html/i18n.js.
   !important — по образцу соседнего `.search-date-btn.active` в этом же файле:
   фон кнопок в шапке перебивается правилами выше, и без него активный язык
   остаётся без заливки (цвет текста при этом применяется). */
.cae-lang-btn.active {
    background-color: #fff !important;
    color: #42a5f5;   /* тот же синий, что и фон шапки */
    cursor: default;
}

@media (max-width: 871px) {
    /* На узких экранах .top-bar становится 72px и .nav-items переносит
       строки — прижимаем переключатель к верхней строке, чтобы он не
       наезжал на перенесённые пункты меню. */
    .lang-switch {
        top: 5px;
    }

    .cae-lang-btn {
        padding: 1px 6px;
        font-size: 11px;
    }
}

/* ============================================================
   ТИПОВОЕ ОКНО-СООБЩЕНИЕ (.app-alert)
   Центр экрана, наша «панельная» отделка: скруглённые края, контурный
   outline вместо border (как у .search-panel / .rr-panel), полупрозрачный
   белый фон. Подложка прозрачная — она нужна только чтобы поймать клик
   мимо окна (закрытие) и не дать нажать что-то на карте под сообщением.
   ============================================================ */
.app-alert {
    position: fixed;
    inset: 0;
    /* ⚠️ Сообщение обязано быть САМЫМ верхним слоем: это модальное окно, оно
       гасит карту и блокирует ввод. Прежние 99000 не спасали — на экранах
       ≤871px .place-card получает z-index 99999 и вылезала поверх серой
       подложки вместе с язычком .place-card-toggle (жалоба 22.08.2026).
       ⚠️ Браузер КЛАМПИТ z-index до 2147483647 (int32). Поэтому «просто очень
       большое» число не работает: 10¹² у .timeline-container сплющивается в то
       же самое значение, и при равенстве побеждал бы тот, кто ниже в DOM.
       Здесь стоит сам максимум, а таймлайну отдан максимум минус один. */
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Карта под окном затемняется на 50% (заказчик 20.08.2026). Подложка и
       раньше перехватывала клики мимо окна — теперь она ещё и видима, так что
       понятно, почему карта не отвечает. */
    background: rgba(0, 0, 0, 0.5);
}
/* display:flex выше перебивает UA-правило [hidden] — возвращаем скрытие */
.app-alert[hidden] { display: none !important; }

/* Ссылки в окне — голубой хеддера, без подчёркивания (ТЗ ROE-803, 17.10.2026:
   «здесь и далее цвет текста со ссылками — голубой (как в хеддере)»). */
.app-alert-text a {
    color: #42a5f5;
    text-decoration: none;
}

.app-alert-box {
    position: relative;
    max-width: min(420px, calc(100vw - 32px));
    padding: 22px 30px;   /* по бокам поровну: крестик стоит в самом углу */
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    border: none;
    outline: 2px solid rgba(0, 0, 0, .2);
    border-radius: var(--radius-base);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg);
    line-height: 1.35;
    text-align: center;
}

/* Геометрия и цвет — ОДИН В ОДИН с крестиком popup'ов карты (мегалиты, ЮНЕСКО):
   `.leaflet-container a.leaflet-popup-close-button` = position:absolute,
   top:0/right:0, 24×24, #757575, на наведении #585858. Крестик стоит В САМОМ
   УГЛУ окна, а не отступает от края (правка заказчика 19.08.2026: «не на месте»
   — было top/right по 10px). */
.app-alert-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #757575;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--duration-fast) var(--ease-standard);
}
.app-alert-close:hover { color: #585858; }   /* как у popup'ов Leaflet */
/* ⚠️ SVG занимает ВСЮ кнопку 24×24, а не 14×14 по центру. Сам ✕ нарисован
   от 7 до 17 внутри viewBox 24, то есть при рендере 1:1 это 10px в середине
   кнопки — ровно там, где стоит глиф × у popup'ов Leaflet (16px/24px, по
   центру). При svg 14px масштаб был 0.58: крестик получался ~6px и с отступом
   ~9px от краёв кнопки, то есть заметно ближе к центру окна, чем в popup'е
   (жалоба заказчика 19.08.2026). */
.app-alert-close svg {
    /* 20px вместо полных 24: глиф × у popup'ов Leaflet (16px Tahoma) ~8px, а
       путь 7..17 внутри viewBox 24 при рендере 1:1 давал 10px — заметно крупнее.
       Центр SVG всё равно посередине кнопки (flex), поэтому уменьшение НЕ
       уводит крестик от угла: он остаётся на том же месте, только мельче.
       stroke-width 1.8 × масштаб 0.83 = те же ~1.5px линии. */
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    fill: none;
}

/* ============================================================
   ГЕОМЕТРИЯ ЗАСТАВКИ
   ============================================================
   ⚠️ ВСЯ раскладка ниже — ТОЛЬКО десктоп (@media min-width: 872px).
   01.09.2026 базовые правила (`padding-left: 307px` у шапки, абсолютный
   логотип) действовали на всех ширинах и разносили мобильную вёрстку.
   Ниже 872px работает прежняя колоночная раскладка — из нового там только
   ряд из пяти кнопок языков.

   Логотип использует ОБРЕЗАННУЮ копию icons/ICON_CAE_overlay.png (382×388):
   у оригинала прозрачные поля (469×532, ink 382×388 со сдвигом 44/60), из-за
   них рамка была на десятки пикселей больше видимого круга.

   Подбор значений — html/dev/overlay-playground.html. */
:root {
    /* Слева от карточки до логотипа и справа от логотипа до текста. */
    --overlay-logo-inset: 30px;
    --overlay-logo-gap: 30px;
    /* Ширина логотипа. Высоту НЕ задаём: она берётся от колонки заголовков
       (см. align-items: stretch ниже). Значение подбирают так, чтобы картинка
       заполняла рамку без полей: ширина ≈ высота × 382/388. */
    --overlay-logo-width: 247px;
    /* Левый отступ КОЛОНКИ ТЕКСТА. Задан числом, а не суммой раскладки:
       логотип вынесен из потока, поэтому его размер на текст не влияет.
       По смыслу = inset + ширина логотипа + gap. */
    --overlay-text-inset: 307px;
    /* Выход логотипа за интерлиньяж заголовков вверх и вниз: рамка равна
       высоте line-box, глифы начинаются ниже. Подбирается в плейграунде. */
    --overlay-logo-bleed: 0px;
    /* Сдвиг логотипа по вертикали — визуальная подгонка к строкам текста. */
    /* Насколько логотип НИЖЕ высоты шапки. Шапка выше текста на нижний
       отступ последнего заголовка, поэтому без подрезки низ логотипа уезжал
       под текст. Подбирается в плейграунде. */
    --overlay-logo-trim: 30px;
    --overlay-logo-nudge: 0px;
    /* Горизонтальный сдвиг логотипа: «+» вправо, «−» влево. */
    --overlay-logo-shift: 0px;
    /* Зазор от заголовков до блока выбора языка. Раньше его давал нижний
       margin последнего заголовка — теперь он обнулён, иначе низ логотипа
       не совпал бы с последней строкой. */
    /* Единый вертикальный ритм заставки: верх карточки, зазор между двумя
       заголовками и зазор до блока выбора языка. */
    /* Ширина карточки на десктопе. Запас против прежних 700px нужен, чтобы
       зазор справа (край → последняя буква заголовка) сравнялся с зазором
       слева (край → логотип): текст центрирован в колонке, поэтому справа
       зазор = padding + половина свободного места. */
    --overlay-card-width: 756px;
    --overlay-vgap: 30px;
    /* Внутренний ритм. Зазоры 4 и 5 заданы РАЗНЫМИ числами намеренно:
       над кнопками у «Выберите язык / Select Language:» есть нижние выносные
       (у, з, g), они опускаются почти до низа строки; под кнопками строка
       Yandex Cloud начинается с прописных, а те стоят ниже верха своей строки
       на полуинтерлиньяж плюс промежуток до высоты прописных. Одинаковые
       числа дают разные зазоры. Проверено 01.09.2026: практической разницы
       нет, оба зазора равны — держим одно значение, переменная оставлена на
       случай точечной подстройки. */
    --overlay-vgap-inner: 10px;
    --overlay-vgap-inner-bottom: 10px;

    /* --- узкий экран: свой ритм, десктопные значения тут не годятся --- */
    /* Красные зазоры схемы: верх карточки → логотип, логотип → заголовок,
       между заголовками, заголовок → «Выберите язык», Yandex Cloud → низ. */
    --overlay-m-vgap: 18px;
    /* Зелёные: «Выберите язык» → кнопки, между рядами кнопок,
       кнопки → Yandex Cloud. */
    --overlay-m-vgap-inner: 10px;
    /* Кнопки → Yandex Cloud отдельно: у строки снизу заглавные выступают над
       коробкой, поэтому при равном числе зазор на глаз короче. */
    --overlay-m-vgap-inner-bottom: 10px;
    /* Размер логотипа. Было 65% — при нём верхний зазор не сводился. */
    --overlay-m-logo: 45%;
    /* Низ карточки отдельно: под базовой линией последней строки остаётся
       место под нижние выносные, из-за чего одинаковое число даёт разный
       зазор на глаз. */
    --overlay-lang-gap: 28px;
}


/* Блок выбора языка центрируется по карточке. */
.language-selection {
    text-align: center;
    margin: 0;
}

@media (min-width: 872px) {
    /* Карточка: шапка сверху, блок выбора языка под ней во всю ширину. */
    .el-dialog__body {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .dialog-head {
        display: flex;
        align-items: stretch;
        /* Опора для абсолютного логотипа. */
        position: relative;
        /* Логотип вне потока, поэтому колонка текста отступает на
           фиксированное число и от размера логотипа не зависит. */
        gap: 0;
        padding-left: var(--overlay-text-inset);
    }

    .dialog-head .logo-container {
        /* ВНЕ ПОТОКА: ширина логотипа не участвует в раскладке и не двигает
           колонку заголовков. Высота = высоте шапки, то есть верх на первой
           строке, низ на последней. */
        position: absolute;
        left: var(--overlay-logo-inset);
        top: 0;
        bottom: 0;
        width: auto;
        padding: 0;
        transform: none;
        display: block;
    }

    .dialog-head .logo-container img {
        /* Высота ЯВНАЯ, ширина по пропорции. Через object-fit не получалось:
           при рамке 247×H и H > 251 подгонка шла по ширине, и логотип
           оказывался ниже текста. */
        height: calc(100% - var(--overlay-logo-trim));
        width: auto;
        display: block;
        border-radius: 0;
        margin: 0 !important;
        transform: translate(var(--overlay-logo-shift), var(--overlay-logo-nudge));
    }

    /* Низ логотипа совпадает с последней строкой, поэтому у последнего
       заголовка нижнего отступа быть не должно. */
    .dialog-head .content-container > :last-child {
        margin-bottom: 0;
    }
}

/* Узкий экран: прежняя раскладка — логотип НАД заголовками, всё в потоке.
   Гасим здесь ровно то, что включено выше для десктопа. */
@media (max-width: 871px) {
    .dialog-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
        padding-left: 0;
        position: static;
    }

    .dialog-head .logo-container {
        position: static;
        width: 100%;
        display: flex;
        justify-content: center;
        /* ⚠️ flex: 0 0 auto и height: auto обязательны. Старое правило
           `.logo-container { flex: 0 0 200px }` в КОЛОНОЧНОЙ раскладке задаёт
           не ширину, а ВЫСОТУ: контейнер становился 200px при картинке 150.8px,
           и align-items: center оседал по 24.6px сверху и снизу. Отсюда
           верхний зазор был 42.6px вместо заданных 18. */
        flex: 0 0 auto;
        height: auto;
    }

    .dialog-head .logo-container img {
        position: static;
        height: auto;
        width: var(--overlay-m-logo);
        max-width: 300px;
        margin: 0 auto !important;
        transform: none;
        border-radius: 0;
    }

    /* --- вертикальный ритм узкого экрана --- */

    .el-dialog {
        padding-top: var(--overlay-m-vgap);
        padding-bottom: var(--overlay-m-vgap);
    }

    /* Логотип → русский заголовок. */
    .dialog-head .logo-container {
        margin-bottom: var(--overlay-m-vgap);
    }

    /* Между заголовками и от последнего до «Выберите язык» — тот же зазор.
       text-box-trim обязателен: без него коробка строки несёт невидимое поле
       шрифта, и равные числа дают разные зазоры на глаз. */
    h3.dialog-title {
        margin: 0 0 var(--overlay-m-vgap) 0;
        text-box-trim: trim-both;
        text-box-edge: ex alphabetic;
    }

    .language-label {
        margin-bottom: var(--overlay-m-vgap-inner);
        text-box-trim: trim-both;
        text-box-edge: ex alphabetic;
    }

    /* gap задаёт и промежуток между рядами кнопок, и между кнопками в ряду. */
    .button-group {
        gap: var(--overlay-m-vgap-inner);
    }

    .button-group .el-button {
        text-box-trim: trim-both;
        text-box-edge: cap text;
    }

    /* Нижний край — по ВЫНОСНЫМ (`text`), а не по базовой линии (`alphabetic`):
       у «technologies» есть «y» и «g», они выступали на 4.2px ниже коробки, и
       нижний зазор на глаз был 13.8 вместо заданных 18. */
    /* Низ — по БАЗОВОЙ ЛИНИИ, а не по выносным: глаз читает низ строки по
       основанию букв, хвосты «g» и «y» в «technologies» его не задают.
       С краем 	ext нижний зазор смотрелся шире остальных. */
    .cloud-note {
        margin-top: var(--overlay-m-vgap-inner-bottom);
        text-box-trim: trim-both;
        text-box-edge: ex alphabetic;
    }
}

/* ============================================================
   ВЕРТИКАЛЬНЫЙ РИТМ ЗАСТАВКИ — только десктоп
   ============================================================
   Зазоры по разметке заказчика (01.09.2026):
     1 верх карточки → русский заголовок          ┐
     2 между русским и английским заголовками     ├ --overlay-vgap
     3 английский заголовок → «Выберите язык»     │
     6 строка Yandex Cloud → низ карточки         ┘
     4 «Выберите язык» → ряд кнопок               ┐ --overlay-vgap-inner
     5 ряд кнопок → строка Yandex Cloud           ┘

   ⚠️ Ограничение по ширине обязательно: ниже 872px действуют мобильные
   правила (padding карточки 15/20px, свои margin у заголовков), а этот файл
   идёт последним — без @media он бы их перебил. */
@media (min-width: 872px) {
    .el-dialog {
        width: var(--overlay-card-width);
        padding-top: var(--overlay-vgap);
        padding-bottom: var(--overlay-vgap);
    }

    .dialog-head .content-container h3.dialog-title {
        margin-bottom: var(--overlay-vgap);
        /* Срезаем мёртвое поле, которое несёт САМ ШРИФТ. Браузер строит
           коробку строки из line-height и метрик шрифта (ascender, descender,
           line-gap), а НЕ по контурам букв: сверху всегда лежит разница между
           ascender и высотой прописных, снизу — зарезервированное место под
           нижние выносные, даже если выносных в строке нет.

           Именно из-за него одинаковые margin давали разные зазоры на глаз, а
           логотип не совпадал с текстом — компенсировали числами.
           Верхний край — по линии СТРОЧНЫХ (`ex`), а не прописных (`cap`):
           так просил заказчик 01.09.2026. Прописные при этом выступают над
           коробкой — это нормально и ожидаемо.

           Chrome/Edge 133+, Safari 18.2+. Старые браузеры свойство игнорируют
           и получают прежнее поведение — деградация безопасная. */
        text-box-trim: trim-both;
        text-box-edge: ex alphabetic;
    }

    .language-selection {
        margin: 0;
    }

    /* Ряд кнопок выше самих кнопок: min-height 40px против высоты кнопки.
       Лишняя высота должна делиться поровну сверху и снизу, иначе зазор 5
       (кнопки → Yandex Cloud) больше зазора 4 («Выберите язык» → кнопки).

       ⚠️ Одного align-items здесь НЕ хватает: у .button-group стоит
       flex-wrap: wrap, а в многострочном флекс-контейнере свободную высоту
       распределяет align-content (по умолчанию stretch — прижимает вниз).
       Нужны оба свойства. */
    .button-group {
        align-items: center;
        align-content: center;
    }

    /* Тот же срез мёртвого поля шрифта, что и у заголовков: коробка строки
       строится из line-height и метрик шрифта, а не по контурам букв. */
    .language-label {
        /* Явное число, а не переменная: после среза мёртвого поля шрифта
           зазор наконец равен тому, что написано. */
        margin-bottom: 15px;
        text-box-trim: trim-both;
        text-box-edge: ex alphabetic;
    }

    .cloud-note {
        margin-top: 15px;
        font-size: 14px;
        text-box-trim: trim-both;
        text-box-edge: ex alphabetic;
    }

    /* Кнопки языков: размер шрифта задан явно (в базовом правиле .el-button
       он уже 14px — фиксируем, чтобы не уехал) и тот же срез поля.

       min-height снят на десктопе: он делал ряд выше самих кнопок, лишняя
       высота уходила в зазоры 4 и 5 и мешала им сравняться. На узком экране
       min-height остаётся — там у кнопок своя высота 44px под палец. */
    .button-group {
        min-height: 0 !important;
    }

    .button-group,
    .button-group .el-button {
        font-size: 14px;
        text-box-trim: trim-both;
        text-box-edge: ex alphabetic;
    }
}

/* Стиль плашки «Строю полосу…» СНЯТ 10.10.2026 вместе с самой плашкой:
   заказчик попросил убрать панель loading при включении ТЛ. Разбор — в
   docs/performance.md. */


/* Засечка далеко за кадром — вон из раскладки (09.10.2026).
   Замер: на приближённых шагах оси существует 980–983 засечки, а в окне их
   27–36. Остальные участвуют в вёрстке впустую; в профиле включения полосы на
   вёрстку браузера приходится 36,8% времени.
   ⚠️ Класс ставит tlClipAxisEdges тем же проходом, что и обрезку краёв.
   ⚠️ НЕ `visibility: hidden` и не прозрачность: они оставляют узел в раскладке,
   а смысл правки ровно в том, чтобы он из неё выпал. */
/* Правило .tl-tick-offscreen СНЯТО 09.10.2026 вместе с самой затеей гасить
   засечки за краем экрана: включение полосы от неё стало медленнее (21,9 с
   против 12,7 с на планшете с замедлением ×4), потому что переключение класса
   у ~900 узлов на каждую перерисовку обнуляет раскладку всей оси. Разбор —
   в main.js рядом с tlClipAxisEdges и в docs/performance.md.
   ⚠️ Если когда-нибудь вернётесь к этой идее: !important обязателен, у самой
   библиотеки правило из четырёх классов
   (cdn/timeline3/css/timeline.css:1569, `display: block`) перебивает наше. */