/* ============================================================
   «Звенья истории» — Мобильная адаптация
   ============================================================ */

/* База меню ☰ существует и вне media-запроса, но на десктопе оно
   никогда не открывается (кнопка ☰ скрыта синхронно с шириной
   экрана, см. app-ui _setupMobileMenu). */
#mobile-menu { display: none; }

@media (max-width: 768px) {
    #header { padding: 0 10px; }
    #header h1 { font-size: 13px; }
    #header h1 small { display: none; }
    #progress { font-size: 12px; padding: 4px 8px; }

    /* Шапка на телефоне: только логотип, очки ⭐ и ☰. Счётчик «Открыто
       N / M», фпс-монитор и все кнопки шапки не помещаются — уходят:
       счётчик и фпс скрыты, кнопки заменены меню ☰ (те же действия). */
    #prog-count, #perf-monitor { display: none; }
    #header .header-buttons button { display: none; width: 30px; height: 30px; font-size: 13px; }
    #header .header-buttons #btn-menu {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; font-size: 20px;
    }

    /* Хронологическая лента по умолчанию спрятана — включается пунктом
       «🕐 Хронология» в меню ☰ (класс tl-off снимается). !important
       перекрывает inline-управление видимостью из app-ui. */
    body.tl-off #timeline,
    body.tl-off #btn-toggle-timeline { display: none !important; }

    /* Панель меню навигации ☰ */
    #mobile-menu { position: fixed; inset: 0; z-index: 900; display: none; }
    #mobile-menu.active { display: block; }
    #mobile-menu::before { content: ''; position: absolute; inset: 0; background: rgba(28, 25, 20, 0.35); }
    #mobile-menu .mm-panel {
        position: absolute; top: 52px; right: 8px; left: 8px;
        background: var(--bg-elevated, #FFFDF9);
        border: 1px solid var(--border, #E8E2D9);
        border-radius: 14px;
        box-shadow: var(--shadow-modal, 0 20px 50px rgba(44,42,38,0.16));
        padding: 8px;
        display: flex; flex-direction: column; gap: 2px;
    }
    #mobile-menu .mm-panel button {
        display: flex; align-items: center; gap: 10px;
        padding: 13px 16px; min-height: 48px;
        border: none; background: none; border-radius: 10px;
        font-family: inherit; font-size: 16px; color: var(--text, #2C2A26);
        text-align: left; cursor: pointer;
    }
    #mobile-menu .mm-panel button:active { background: var(--bg-soft, #F9F6F1); }

    #header .header-buttons { gap: 5px; }
    .btn { padding: 7px 11px; font-size: 12px; }
    .node { font-size: 14px; padding: 9px 12px; max-width: 210px; }
    .node-date { font-size: 11px; }
    .modal { padding: 18px; }
    #timeline { bottom: 6px; padding: 0; }
    #timeline-track.player-view .tl-lane { min-height: 52px; border-bottom: none !important; }
    #timeline-track.player-view .tl-lane-base { border-top: none !important; }
    #timeline-track.player-view .tl-epoch { width: 48px; }
    #timeline-track.player-view .tl-epoch .tl-face { width: 28px; height: 28px; font-size: 11px; }
    #timeline-track.player-view .tl-epoch .tl-name { max-width: 48px; font-size: 9px; }
    #timeline-track.player-view .tl-epoch .tl-years { font-size: 9px; color: var(--gold); font-weight: 600; }
    #top-year { font-size: 16px; padding: 2px 12px; top: 8px; }
    #btn-present { top: -24px; right: 32px; font-size: 10px; padding: 3px 7px; }
    #btn-toggle-timeline { width: 30px; height: 30px; font-size: 14px; bottom: 4px; }
    .wiki-window { min-width: 0; max-width: 94vw; }
    #timeline-track.player-view .tl-lane { min-height: 52px; border-bottom: none !important; }
    #timeline-track.player-view .tl-lane-base { border-top: none !important; }
    #timeline-track.player-view .tl-epoch { width: 48px; }
    #timeline-track.player-view .tl-epoch .tl-face { width: 28px; height: 28px; font-size: 11px; }
    #timeline-track.player-view .tl-epoch .tl-name { max-width: 48px; font-size: 9px; }
    #timeline-track.player-view .tl-epoch .tl-years { font-size: 9px; color: var(--gold); font-weight: 600; }
    #time-label { top: -22px; font-size: 11px; }
    #btn-present { top: -24px; right: 32px; font-size: 10px; padding: 3px 7px; }
    .wiki-window { min-width: 0; max-width: 94vw; }
    /* Сенсорные цели по WCAG 2.5.5: кнопки не меньше 44×44px */
    .btn, .modal-close, .tl-scroll { min-height: 44px; min-width: 44px; }
    .wiki-header { min-height: 46px; } /* шапка статьи — удобная ручка переноса пальцем */
    .wiki-read-btn { align-self: stretch; margin: 4px 10px 12px; }
    .wiki-body { padding: 14px 16px; }
}