/* ============================================================
   Дорожная карта — мобильный карточный таймлайн
   Порт Stitch «Дорожная карта (Таблица, Mobile, Dark)»
   (screen 7de08cdb…). На телефоне вид «Чеклист» рендерится не
   таблицей, а вертикальным таймлайном карточек. Всё на токенах
   (tokens.css) → работает и в светлой, и в тёмной теме.
   Видимостью управляет 56-roadmap-timeline.js (только ≤768px).
   ============================================================ */

.rmt-root {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 16px 92px;       /* единый левый/правый край для выравнивания */
}

/* Шапка таймлайна: «Хронология» + «Свернуть всё» */
.rmt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
.rmt-toolbar h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}
.rmt-collapse-all {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    cursor: pointer;
    min-height: 44px;
}

/* ── Фаза ── */
.rmt-phase { display: flex; flex-direction: column; gap: 6px; }
.rmt-phase-div { display: flex; align-items: center; gap: 12px; }
.rmt-phase-div::before,
.rmt-phase-div::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
    opacity: 0.6;
}
.rmt-phase-pill {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    background: var(--fill);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
}
.rmt-phase-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--accent);
    /* По центру (моб) — по просьбе. */
    text-align: center;
}
.rmt-phase.is-collapsed .rmt-phase-body { display: none; }

.rmt-phase-body { display: flex; flex-direction: column; gap: 6px; }

/* ── Группа этапа: плоско, фон только у ШАПКИ этапа (не у задач) ── */
.rmt-stage {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}
/* Фон в цвет фазы — только сама строка этапа (--rmt-c наследуется с .rmt-phase). */
.rmt-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    background: color-mix(in srgb, var(--rmt-c, var(--accent)) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--rmt-c, var(--accent)) 18%, transparent);
    border-radius: 9px;
    cursor: pointer;
    min-height: 0;
}
.rmt-stage-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Маркер этапа: 8px-точка в 20px-слоте — чтобы заголовок этапа совпал
   по левому краю с заголовком задачи (у задачи 20px-кружок статуса). */
.rmt-stage-ic {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background: none;
    border: none;
    color: transparent;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rmt-stage-ic::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 3px;
    /* Цветовой индикатор фазы (--rmt-c задаётся на .rmt-phase в JS). */
    background: var(--rmt-c, var(--accent));
}
/* Пилюля «ФАЗА NN» — цветная точка-индикатор + тонированная рамка. */
.rmt-phase-pill::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rmt-c, var(--accent));
    margin-right: 7px;
    vertical-align: 1px;
}
.rmt-phase-pill { border-color: color-mix(in srgb, var(--rmt-c, var(--accent)) 40%, var(--border)); }
.rmt-stage-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rmt-stage-pct {
    flex: 0 0 auto;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.rmt-stage.is-collapsed .rmt-tasks { display: none; }

/* ── Задачи: плоские строки с тонкими разделителями (стиль референса) ── */
.rmt-tasks { display: flex; flex-direction: column; padding-left: 0; }
.rmt-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    cursor: pointer;
    transition: background 0.12s var(--ease, ease);
}
.rmt-task + .rmt-task { border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }
.rmt-task:active { background: color-mix(in srgb, var(--accent-tint) 40%, transparent); }

/* Иконка статуса — диск с глифом, без шрифта иконок */
.rmt-stat {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}
.rmt-stat--done { background: var(--status-done); }
.rmt-stat--overdue { background: var(--status-overdue); }
.rmt-stat--progress { background: var(--status-progress); position: relative; }
.rmt-stat--progress::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: rmtPulse 1.6s ease-in-out infinite;
}
.rmt-stat--todo { background: transparent; border: 2px solid var(--border); }
@keyframes rmtPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rmt-stat--progress::after { animation: none; opacity: 0.9; } }

.rmt-task-main { flex: 1; min-width: 0; }
.rmt-task-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rmt-task-title { font-size: 13px; font-weight: 500; color: var(--text); }
.rmt-task-menu { flex: 0 0 auto; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 0 2px; }

.rmt-chips { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rmt-chip {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 6px;
}
.rmt-chip--done     { background: color-mix(in srgb, var(--status-done) 12%, transparent);     color: var(--status-done);     border: 1px solid color-mix(in srgb, var(--status-done) 26%, transparent); }
.rmt-chip--overdue  { background: color-mix(in srgb, var(--status-overdue) 12%, transparent);  color: var(--status-overdue);  border: 1px solid color-mix(in srgb, var(--status-overdue) 26%, transparent); }
.rmt-chip--progress { background: color-mix(in srgb, var(--status-progress) 14%, transparent); color: var(--status-progress); border: 1px solid color-mix(in srgb, var(--status-progress) 28%, transparent); }
.rmt-chip--review   { background: color-mix(in srgb, var(--status-progress) 10%, transparent); color: var(--status-progress); border: 1px solid color-mix(in srgb, var(--status-progress) 22%, transparent); }
.rmt-chip--todo     { background: var(--fill); color: var(--text-muted); border: 1px solid var(--border); }
.rmt-chip--urgent   { background: color-mix(in srgb, var(--color-warning, #C2700E) 14%, transparent); color: var(--color-warning, #C2700E); border: 1px solid color-mix(in srgb, var(--color-warning, #C2700E) 28%, transparent); }
.rmt-chip--critical { background: color-mix(in srgb, var(--status-overdue) 16%, transparent); color: var(--status-overdue); border: 1px solid color-mix(in srgb, var(--status-overdue) 30%, transparent); }

.rmt-date { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--text-muted); }
.rmt-date.is-overdue { color: var(--status-overdue); font-weight: 700; }
.rmt-date svg { width: 11px; height: 11px; }

.rmt-avatars { display: flex; align-self: center; margin: 0 0 0 auto; flex: 0 0 auto; padding-left: 8px; }
.rmt-av {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--fill);
    color: var(--text);
    font-size: 8px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    margin-left: -8px;
}
.rmt-av:first-child { margin-left: 0; }
.rmt-av--more { background: var(--accent-tint); color: var(--accent); }

.rmt-mini { margin-top: 10px; height: 4px; width: 100%; background: var(--fill); border-radius: 999px; overflow: hidden; }
.rmt-mini > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.rmt-empty { padding: 44px 16px; text-align: center; font-size: 14px; color: var(--text-muted); }

/* ── FAB «новая задача» ── */
.rmt-fab {
    position: fixed;
    right: 16px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    border: none;
    box-shadow: 0 8px 24px rgba(8, 10, 18, 0.30);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; line-height: 1;
    z-index: 1400;
    cursor: pointer;
    transition: transform 0.12s var(--ease, ease);
}
.rmt-fab:active { transform: scale(0.94); }

/* Старая широкая группа на телефоне скрыта целиком командной панелью.
   Плотность остаётся доступна в компактном меню «Вид». */
@media (max-width: 768px) {
    #tab-plan .roadmap-command-desktop .roadmap-density-switch { display: none !important; }
}

/* ============================================================
   Мобильные правки раздела «Проект/Дорожная карта» (≤768px)
   — убираем боковые отступы (контент на всю ширину),
   — компактные подвкладки,
   — прячем «Развернуть всё / Свернуть всё».
   ============================================================ */
@media (max-width: 768px) {
    /* Контент проекта — на всю ширину (без боковых отступов) */
    #tab-plan, #tab-gantt, #tab-passport, #tab-competitors, #tab-schema {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .roadmap-subtabs {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 2px !important;
        border-bottom: none !important;   /* без рамки экрана — только подчёркивание активной */
        background: transparent !important;
    }
    /* Минималистичные подвкладки: только текст + подчёркивание активной
       (раньше — бордюрные «вкладки-коробки», смотрелись громоздко). */
    .roadmap-subtab {
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 9px 8px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--text-muted) !important;
        border-bottom: 2px solid transparent !important;
        margin-bottom: -1px !important;
        box-shadow: none !important;
    }
    .roadmap-subtab.active {
        color: var(--accent) !important;
        background: transparent !important;
        border-bottom-color: var(--accent) !important;
        font-weight: 600 !important;
    }
    /* Убираем «Развернуть всё / Свернуть всё» на телефоне */
    .btn-expand, .btn-collapse { display: none !important; }
}

/* ============================================================
   Компактные контекст-селекторы (Департамент/Отдел/Проект) на телефоне.
   Были на всю ширину и высокие (стопкой). Делаем ниже и делим строку.
   ============================================================ */
@media (max-width: 768px) {
    .plan-context-bar {
        padding: 6px 10px !important;
        gap: 6px !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    /* Обёртки селекторов делят строку пополам (раньше каждая занимала всю
       ширину — нативный select не сжимался под длинным текстом, шли стопкой). */
    .plan-context-bar > #planSelectorWrap,
    .plan-context-bar > #pcbContext {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 49% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .plan-context-bar select,
    .plan-context-bar .project-select-styled,
    .plan-context-bar .dept-select-styled {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 3px 20px 3px 8px !important;
        font-size: 12px !important;
        /* минимализм: без жёсткой рамки, лёгкая заливка */
        border: none !important;
        background-color: var(--fill) !important;
        border-radius: 8px !important;
        color: var(--text) !important;
        box-shadow: none !important;
    }
    .plan-context-bar { border: none !important; background: transparent !important; }
    .plan-context-bar .dept-selector-label { font-size: 11px !important; flex: 0 0 auto; }
}

/* ============================================================
   «Без рамок в веб-версии»: убираем внешнюю «коробку» вокруг контента
   проекта (.roadmap-sheet) — рамка/скругление/тень/фон. Контент лежит
   на фоне страницы (как Паспорт 3+1 / Анализ конкурентов). Карточки фаз
   и задач (.rc-phase/.rmt-stage) НЕ трогаем — у них свои границы.
   roadmap-timeline.css грузится после design-2026.css → перебивает.
   ============================================================ */
.roadmap-sheet {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* На мобильном .roadmap-sheet — внутренний скроллер подвкладок проекта
   (Паспорт / Дорожная карта / Гант / ИСР): сам #tab-X = overflow:hidden, а
   скроллится .roadmap-sheet. Нижний отступ + safe-area, иначе таб-бар
   перекрывал низ контента (напр. карточку «Версия» в Паспорте). */
@media (max-width: 768px) {
    /* #tab-passport/#tab-schema задают padding:10px !important (специфичность
       1,1,0) — бьём такой же специфичностью только по padding-bottom. */
    .roadmap-sheet,
    #tab-passport .roadmap-sheet,
    #tab-schema .roadmap-sheet {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================================
   Доп. минимализм (мобила): пилюля фазы и чипы без рамок —
   только лёгкая заливка + цвет текста (как в референсе).
   ============================================================ */
.rmt-phase-pill {
    border: none !important;
    background: color-mix(in srgb, var(--fill) 75%, transparent) !important;
    color: var(--text-muted) !important;
}
.rmt-chip { border: none !important; }

/* ============================================================
   Доп. правки мобилы: «Свернуть всё» в строке Чеклист/Карточки,
   минималистичный фильтр «Фаза», без рамок у экрана.
   ============================================================ */
@media (max-width: 768px) {
    /* «Свернуть всё» — справа в строке переключателя видов */
    #tab-plan .roadmap-view-bar { align-items: center !important; }
    #rmtCollapseBtn {
        margin-left: auto !important;
        font-size: 12px !important;
        min-height: 0 !important;
        padding: 6px 4px !important;
        white-space: nowrap;
    }
    /* Фильтр «Фаза» — без жёсткой рамки, лёгкая заливка */
    #tab-plan .filter-group select {
        border: none !important;
        background-color: var(--fill) !important;
        border-radius: 8px !important;
        height: 30px !important;
        font-size: 12px !important;
        box-shadow: none !important;
    }
    #tab-plan .filter-group label { font-size: 12px !important; color: var(--text-muted) !important; }
    /* Никаких рамок у контейнеров экрана дорожной карты */
    #tab-plan, #tab-plan .roadmap-view-bar, #tab-plan .plan-toolbar {
        border: none !important;
        box-shadow: none !important;
    }
}

/* ============================================================
   Компактный вид «Карточки» (rc-*) на телефоне (≤768px).
   Плоско, меньше паддингов/кольца, без инлайн-клаттера (правка — тапом
   по карточке → drawer). Десктоп не трогаем.
   ============================================================ */
@media (max-width: 768px) {
    #planCards .rc-phase { box-shadow: none !important; border-radius: 10px !important; }
    #planCards .rc-head { padding: 10px 12px !important; gap: 10px !important; }
    #planCards .rc-ring { width: 34px !important; height: 34px !important; }
    #planCards .rc-ring span { font-size: 10px !important; }
    #planCards .rc-pstatus { display: none !important; }
    #planCards .rc-hmeta { font-size: 11px !important; }
    #planCards .rc-stage { padding: 8px 12px 8px 16px !important; }
    #planCards .rc-task {
        padding: 9px 12px !important;
        row-gap: 4px !important;
        font-size: 13px !important;
    }
    /* инлайн-редактирование скрываем — правка через тап (drawer) */
    #planCards .rc-note-input,
    #planCards .rc-task-dates,
    #planCards .rc-task-owner,
    #planCards .rc-urg-pill,
    #planCards .rc-stage-dates,
    #planCards .rc-drag { display: none !important; }
    #planCards .rc-stage-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #planCards .rc-compose { padding: 8px 12px !important; font-size: 12px !important; }
}

/* ============================================================
   Мобильные карточки дорожной карты без белых рамок.
   Фаза, этапы и задачи образуют одну цельную поверхность: остаётся одна
   внешняя рамка карточки, но нет внутренних линий и отдельных подложек.
   ============================================================ */
@media (max-width: 768px) {
    #tab-plan #planCards .rc-phase {
        border: 1px solid color-mix(in srgb, var(--rc-color, var(--accent)) 18%, var(--border)) !important;
        background: color-mix(in srgb, var(--rc-color, var(--accent)) 5%, var(--surface)) !important;
        box-shadow: none !important;
    }
    #tab-plan #planCards .rc-head,
    #tab-plan #planCards .rc-stage,
    #tab-plan #planCards .rc-task,
    #tab-plan #planCards .rc-compose {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    #tab-plan #planCards .rc-body {
        padding: 0 !important;
        background: transparent !important;
    }
    #tab-plan #planCards .rc-head {
        background: color-mix(in srgb, var(--rc-color, var(--accent)) 14%, var(--surface)) !important;
    }
    #tab-plan #planCards .rc-stage {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        border-radius: 0 !important;
        background: color-mix(in srgb, var(--rc-color, var(--accent)) 8%, var(--surface)) !important;
    }
    #tab-plan #planCards .rc-task + .rc-task {
        border-top: 0 !important;
    }
    #tab-plan #planCards .rc-stage-count {
        border: 0 !important;
        background: color-mix(in srgb, var(--rc-color, var(--accent)) 9%, transparent) !important;
    }
    #tab-plan .rmt-stage-head {
        border: 0 !important;
        box-shadow: none !important;
        background: color-mix(in srgb, var(--rmt-c, var(--accent)) 10%, var(--surface)) !important;
    }
    #tab-plan .rmt-stage {
        overflow: visible;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
    }
    #tab-plan .rmt-task + .rmt-task {
        border-top: 0 !important;
    }
    #tab-plan .rmt-phase-pill {
        background: color-mix(in srgb, var(--rmt-c, var(--accent)) 12%, var(--surface)) !important;
        color: color-mix(in srgb, var(--rmt-c, var(--accent)) 70%, var(--text)) !important;
    }
}

/* ============================================================
   Гант (мобила, ≤768px): компактная легенда в один ряд + плотнее
   тулбар. Гант — подвкладка Проекта; этот файл грузится после
   design-2026.css, поэтому перебивает его мобильный гант-слой.
   ============================================================ */
@media (max-width: 768px) {
    #tab-gantt .gantt-v2-legend {
        padding: 5px 10px !important;
        gap: 6px 12px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }
    #tab-gantt .gantt-v2-legend::-webkit-scrollbar { display: none; }
    #tab-gantt .gantt-v2-legend .gv2-lg { font-size: 10px !important; white-space: nowrap; }
    /* «Сегодня» и «Критический путь» — без отдельной легенды на телефоне
       (линия «сегодня» видна, критпуть включается кнопкой). */
    #tab-gantt .gantt-v2-legend .gv2-lg:nth-child(n+5) { display: none !important; }
    #tab-gantt .gantt-v2-source-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 4px !important;
        padding: 3px 10px !important;
        overflow: visible !important;
    }
    #tab-gantt .gantt-v2-scale {
        display: flex;
        width: 100%;
        min-width: 0;
        margin-left: 0 !important;
        padding: 1px;
    }
    #tab-gantt .gantt-v2-scale-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 32px;
        padding: 3px 5px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }
    #tab-gantt .gantt-v2-crit-btn {
        min-height: 34px;
        padding: 3px 7px !important;
        font-size: 11px !important;
    }
    #tab-gantt .gantt-v2-today-btn {
        width: 34px;
        height: 34px;
        justify-content: center;
        gap: 0;
        padding: 0 !important;
        font-size: 0 !important;
    }
    #tab-gantt .gantt-v2-today-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Гант (мобила): прячем аватар ответственного на полосе — на узких полосах
   18px-кружок вылезал за край и «накладывался» на сетку/соседние полосы.
   Ответственный доступен по тапу (окно задачи). */
@media (max-width: 768px) {
    #tab-gantt .gantt-v2-avatar { display: none !important; }
}

/* ── Шапка (мобила): длинное имя/заголовок переносится на 2 строки ──────────
   «Доброе утро, Екатерина», «Иерархическая структура работ» и пр. не влезали
   в одну строку и обрезались. Разрешаем до 2 строк (line-clamp), затем «…». */
@media (max-width: 768px) {
    .main-area > header h1 {
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        line-height: 1.12 !important;
        font-size: 14px !important;
        text-overflow: ellipsis;
    }
}

/* ── Сенсорные экраны: не залипает hover-подсветка кнопок шапки ─────────────
   На iOS после тапа по кнопке (напр. переключатель темы) :hover «прилипает»
   и оставляет сиреневый прямоугольник (--accent-tint) — выглядит как лишняя
   рамка. На устройствах без hover убираем фон/цвет hover вовсе. */
@media (hover: none) {
    .hdr-right .hdr-action-btn:hover,
    .hdr-right .notes-header-btn:hover,
    .hdr-right .notif-btn:hover,
    .hdr-right .appr-btn:hover,
    #themeToggleBtn:hover {
        background: transparent !important;
        color: var(--ink-muted) !important;
    }
}

/* ── Главная (мобила): убрать боковые «рамки»/отступы — контент во всю ширину ──
   #tab-home давал 20px + .home-layout ещё 10px → широкая пустая рамка по бокам.
   Обнуляем внешний отступ, оставляем тонкие 6px, чтобы тени карточек не резались. */
@media (max-width: 768px) {
    #tab-home.tab-content { padding-left: 0 !important; padding-right: 0 !important; }
    #tab-home .home-layout,
    #tab-home .home-layout.home-mockup {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ НИЖНЯЯ НАВИГАЦИЯ: 4 пункта + центральная FAB «+» (≤768px)
   Главная · Основные · [ + ] · Инструменты · Настройки
   Базовый .mob-tabbar/.mob-tab/.active — в design-2026.css; тут FAB + поповеры.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #mobTabbar {
        align-items: flex-end; overflow: visible;
        z-index: var(--z-nav-bar);
        border-top-left-radius: 18px; border-top-right-radius: 18px;   /* обтекаемый верх */
        box-shadow: 0 -6px 20px rgba(15, 19, 28, 0.08);
    }

    /* центральная «+» — ВНЕДРЕНА в таб-бар: обычный flex-пункт по центру, кружок
       в акценте на уровне иконок (не приподнят над баром). 4 пункта расходятся
       вокруг него. */
    .mob-fab {
        flex: 0 0 auto;
        align-self: center;
        width: 48px; height: 48px;
        margin: 0 6px;
        border: none; border-radius: 50%;
        background: var(--accent);
        color: var(--on-accent, #fff);
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 12px rgba(78, 81, 128, 0.35);
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .mob-fab svg { width: 24px; height: 24px; }
    .mob-fab:active  { transform: scale(0.94); }
    .mob-fab.is-open { transform: rotate(45deg); }   /* + → ×, открыто */

    /* Нижний отступ контента: бар + safe-area (home-indicator) — иначе
       последние элементы списков прятались под таб-баром/индикатором.
       Базовые 76px без safe-area не хватало на iPhone с индикатором. */
    .main-area > .tab-content {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* у #tab-home своё высокоспецифичное правило (1,3,0) в design-2026 — бьём его
       такой же специфичностью + safe-area, иначе бар перекрывал низ Главной. */
    .main-area > #tab-home.tab-content.active {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* затемнение под поповеры (тап вне — закрыть) */
    .mnav-scrim {
        position: fixed; inset: 0;
        background: rgba(15, 19, 28, 0.28);
        z-index: var(--z-nav-scrim);
        opacity: 0; transition: opacity .2s ease;   /* плавно и туда, и обратно */
    }
    .mnav-scrim.is-open { opacity: 1; }

    /* поповер над баром */
    .mnav-pop {
        position: fixed;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px));
        z-index: var(--z-nav-pop);
        min-width: 184px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(15, 19, 28, 0.20);
        padding: 6px;
        display: flex; flex-direction: column; gap: 2px;
        transform: translateY(8px); opacity: 0;
        transition: transform .16s ease, opacity .16s ease;
    }
    /* КРИТИЧНО: display:flex выше перебивает [hidden] → закрытые поповеры
       оставались в layout (opacity:0, но ловили тапы) и блокировали селектор
       проекта и переходы. Скрытый поповер должен исчезать полностью. */
    .mnav-pop[hidden] { display: none !important; }
    .mnav-pop:not(.is-open) { pointer-events: none; }
    .mnav-pop.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    /* FAB-поповер — по центру над «+» */
    .mnav-pop--fab { left: 50%; transform: translate(-50%, 8px); min-width: 196px; }
    .mnav-pop--fab.is-open { transform: translate(-50%, 0); }

    .mnav-pop-item {
        display: flex; align-items: center; gap: 12px;
        width: 100%; min-height: 44px;
        padding: 11px 14px;
        background: none; border: none; border-radius: 10px;
        font: inherit; font-size: 15px; color: var(--text);
        text-align: left; cursor: pointer;
    }
    .mnav-pop-item:active { background: var(--accent-tint); }
    .mnav-pop-item img { width: 20px; height: 20px; opacity: .8; flex: 0 0 auto; }

    /* прятать бар под клавиатурой (чтобы не «прыгал») */
    #mobTabbar.mnav-kbd { transform: translateY(120%); transition: transform .2s ease; }
}

/* Старая FAB добавления задачи (#rmtFab) заменена центральной FAB таб-бара —
   прячем её на мобильном, чтобы не было двух «плюсов». */
@media (max-width: 768px) {
    #rmtFab { display: none !important; }
}

/* ── Шторка «Куда добавить задачу?» (58-add-task-sheet.js) ──────────────────
   Центрируется/стилизуется базовыми .modal-overlay/.modal (мобильная
   центровка уже есть). Тут — сегмент-переключатель и поля. Токены/3 темы. */
.aws-modal { display: flex; flex-direction: column; gap: 10px; }
.aws-title { margin: 0 0 2px; font-size: 17px; font-weight: 700; color: var(--text); }
.aws-seg {
    display: flex; gap: 4px;
    background: var(--fill); border-radius: 12px; padding: 4px;
}
.aws-seg-btn {
    flex: 1 1 0; min-height: 40px;
    border: none; background: transparent; border-radius: 9px;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; padding: 8px 6px; transition: background .15s, color .15s;
}
.aws-seg-btn.is-active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px rgba(15,19,28,.10); }
.aws-hint { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.aws-sub  { margin: 0 0 2px; font-size: 12.5px; color: var(--text-muted); }
.aws-lbl  { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 4px; }
.aws-proj {
    padding: 9px 12px; border-radius: 9px;
    background: var(--fill); border: 1px solid var(--border);
    font-size: 14px; color: var(--text);
}
.aws-input {
    width: 100%; box-sizing: border-box;
    padding: 9px 12px; min-height: 42px;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); color: var(--text);
    font: inherit; font-size: 14.5px;
}
.aws-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* Селекты — в стиле системы: убираем нативную стрелку, ставим свой шеврон
   (как .project-select-styled). Фон остаётся var(--surface) от .aws-input. */
select.aws-input {
    appearance: none; -webkit-appearance: none;
    padding-right: 36px; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 13px 13px;
}
.aws-pane, .aws-common { display: flex; flex-direction: column; gap: 4px; }
/* [hidden] должен побеждать display:flex выше (иначе обе панели видны разом) */
.aws-pane[hidden], .aws-common[hidden] { display: none !important; }
.aws-btns { margin-top: 6px; }
#awsCreate[disabled] { opacity: .5; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════════════
   Общий менеджер оверлеев (59-overlay.js): .ov-scrim/.ov-panel/.ov-popover/
   .ov-sheet/.ov-modal. z-index ставит JS (из --z-nav-* токенов). Глобально —
   компонент используется точечно (и моб., и веб).
   ════════════════════════════════════════════════════════════════════════════ */
.ov-scrim {
    position: fixed; inset: 0;
    background: rgba(15, 19, 28, 0.28);
    opacity: 0; transition: opacity .2s ease;
}
.ov-scrim.is-open { opacity: 1; }
.ov-panel { transition: opacity .18s ease, transform .18s ease; opacity: 0; }
.ov-popover { transform: translateY(6px); }
.ov-popover.is-open { opacity: 1; transform: translateY(0); }
.ov-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--surface);
    box-shadow: 0 -10px 30px rgba(15, 19, 28, 0.18);
    transform: translateY(100%);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: 86vh; overflow-y: auto;
}
.ov-sheet.is-open { opacity: 1; transform: translateY(0); }
.ov-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%); }
.ov-modal.is-open { opacity: 1; transform: translate(-50%, -50%); }

/* ── Аудит перекрытий: реальные скроллеры подвкладок, у которых не хватало
   нижнего отступа под таб-бар (Гант/ИСР/Канбан/Чаты). Бьём высокой
   специфичностью + safe-area. ──────────────────────────────────────────── */
@media (max-width: 768px) {
    #tab-gantt .gantt-v2-wrap,
    #tab-schema #wbsStructure,
    #tab-schema .wbs-structure,
    #tab-kanban #kbBoard,
    #tab-kanban .kb-board,
    #tab-chat,
    #wfGallery,
    .wf-gallery {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ─── Дорожная карта (мобила): на весь экран, без «рамки»-инсета ───────────
   .roadmap-sheet имел боковые margin:20px (карта «плавала» с полями) — убираем;
   .rmt-root 16px → 10px. Контент дорожной карты тянется почти во всю ширину. */
@media (max-width: 768px) {
    .roadmap-sheet { margin-left: 0 !important; margin-right: 0 !important; }
    .rmt-root { padding-left: 10px !important; padding-right: 10px !important; }
}

/* Дорожная карта — небольшая рамка (лёгкий боковой отступ), а Гант остаётся
   во всю ширину без рамок. Поэтому margin возвращаем ТОЛЬКО для #tab-plan. */
@media (max-width: 768px) {
    #tab-plan .roadmap-sheet { margin-left: 10px !important; margin-right: 10px !important; }
}

/* ─── ИСР (мобила): без «блока»-карты + кнопки Развернуть/Свернуть в одну строку ───
   #wbsStructure был белой карточкой с рамкой/радиусом → убираем (как Гант/карта).
   Тулбар компактим, прячем длинную подсказку (десктоп-интеракции), чтобы
   «+ Фаза · Развернуть всё · Свернуть всё» помещались в один ряд. */
@media (max-width: 768px) {
    #tab-schema #wbsStructure {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #tab-schema .wbs-wrap { padding-left: 10px !important; padding-right: 10px !important; }
    #tab-schema .wbs-toolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 6px !important;
        align-items: center;
    }
    #tab-schema .wbs-toolbar .btn-primary,
    #tab-schema .wbs-toolbar .btn-secondary {
        padding: 7px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    /* подсказка «Двойной клик / Drag» — десктопная, на мобильном только мешает */
    #tab-schema .wbs-toolbar-hint { display: none !important; }
}

/* ИСР (мобила): убрать шапку «Структура / + Узел» целиком — слово «Структура»
   и весь этот блок. Добавление узлов остаётся через «+ Фаза» в тулбаре. */
@media (max-width: 768px) {
    #tab-schema .wbs-struct-head { display: none !important; }
}

/* ─── Чат (мобила): полноэкранный мессенджер ──────────────────────────────
   Баг: #tab-chat — flex-элемент в .main-area (flex-row) и сжимался до
   intrinsic-ширины колоночного мессенджера (~233px). Тянем на всю ширину и
   высоту (между шапкой 64px и нижним таб-баром). responsive-extras.css уже
   реализует список↔переписку через [data-mobile-view]; здесь только размеры. */
@media (max-width: 768px) {
    #tab-chat {
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;          /* перебивает overlap-audit padding-bottom:84px */
    }
    #tab-chat .messenger {
        width: 100% !important;
        height: calc(100dvh - 64px - 84px) !important;   /* шапка + нижний бар */
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    body.chat-conv-open #tab-chat .messenger { height: calc(100dvh - 64px - 84px) !important; }
    /* строка ввода — над нижним баром, с safe-area */
    #tab-chat .messenger-input-wrap { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ═══ Тёмная тема: убрать тёплые оттенки + светлые иконки (не чёрные) ═══════
   Грузится последним → перебивает дефолты. Только [data-theme="dark"]. */

/* ── Иконки в шапке: светлые, а не чёрные ──
   notification.svg грузится как <img> (currentColor не наследуется) и без
   dark-фильтра оставался чёрным; кнопка заметок имела тёмный muted-цвет. */
[data-theme="dark"] .main-area > header .notif-btn-icon-img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.66;
}
[data-theme="dark"] .notes-header-btn,
[data-theme="dark"] .main-area > header .notes-header-btn svg {
    color: #9CA3AF !important;
}

/* ── Тёплые «горит/срочно» чипы → холодный синий (не амбер/оранж) ──
   Остаётся отличимым от «просрочено» (красный) и «в работе» (фиолетовый). */
[data-theme="dark"] .home-tag.is-hot {
    background: rgba(110, 160, 210, 0.18) !important;
    color: #8FB8E6 !important;
}
[data-theme="dark"] .rmt-chip--urgent {
    background: rgba(110, 160, 210, 0.16) !important;
    color: #8FB8E6 !important;
    border-color: rgba(110, 160, 210, 0.30) !important;
}

/* Тёплый mockup-токен «warn» (амбер #D8A02B / rgba(216,160,43)) → холодный синий.
   Это корень тёплых пятен на Главной: иконка событий (.feed-ico.is-event),
   чипы «горит» и cal-event. Бьём по .home-mockup в dark (специфичнее светлого
   .home-mockup и грузимся позже). */
/* Специфичность как у design-2026 dark-правил (#tab-home .home-mockup …),
   грузимся позже → выигрываем. */
[data-theme="dark"] #tab-home .home-mockup {
    --m-warn: #8FB8E6 !important;
    --m-warn-bg: rgba(110, 160, 210, 0.16) !important;
}
[data-theme="dark"] #tab-home .home-mockup .feed-ico.is-event {
    background: rgba(110, 160, 210, 0.16) !important;
    color: #8FB8E6 !important;
    border-color: rgba(110, 160, 210, 0.28) !important;
}
[data-theme="dark"] #tab-home .home-mockup .home-tag.is-hot,
[data-theme="dark"] #tab-home .home-mockup .cal-event.is-hot {
    background: rgba(110, 160, 210, 0.18) !important;
    color: #8FB8E6 !important;
}

/* ═══ Гант (мобила): компактная плотность — перебить design-2026.css ════════
   design-2026.css грузится после gantt.css и форсит крупные размеры
   (.gantt-v2-bar height:22, .gantt-v2-task-label white-space:normal → перенос
   → высокие строки). Бьём из roadmap-timeline (грузится последним), только
   мобильный, !important. Десктоп не трогаем. */
@media (max-width: 768px) {
    /* Имя задачи — 1 строка с усечением (полное — по тапу/тултипу). */
    #tab-gantt .gantt-v2-task-name .gantt-v2-task-label {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        overflow-wrap: normal !important;
        line-height: 1.2 !important;
    }
    #tab-gantt .gantt-v2-task-name {
        align-items: center !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    /* Строки 30px, бар тонкий 16px (центрирован). */
    #tab-gantt .gantt-v2-row,
    #tab-gantt .gantt-v2-task-name { min-height: 30px !important; }
    #tab-gantt .gantt-v2-timeline { height: 30px !important; }
    #tab-gantt .gantt-v2-bar {
        height: 16px !important;
        top: calc(50% - 8px) !important;
        bottom: auto !important;
        border-radius: 6px !important;
    }
    #tab-gantt .gantt-v2-phase-row { min-height: 34px !important; }
}

/* По просьбе юзера: вернули КРАСНОЕ как было — линия «сегодня» и цвет-маркеры
   фаз в Ганте больше НЕ перекрашиваются (today-line остаётся красной из
   design-2026, маркеры фаз показывают свои цвета из данных, без grayscale). */

/* «Просрочено»/danger — по просьбе юзера возвращён КРАСНЫМ (как было).
   Override снят → токены берут дефолт design-2026 (#D46A6A). Если нужен
   именно красный без оттенков — раскомментировать ниже. */

/* Иконки меню «Основные/Инструменты» (.mnav-pop-item img) — это <img> со
   stroke="currentColor", который у <img> не наследуется → рендерятся ЧЁРНЫМИ.
   Перекрашиваем фильтром: серые в светлой теме, светлые в тёмной. */
.mnav-pop-item img,
.mnav-pop-item svg { filter: brightness(0) saturate(0) opacity(0.55); }
[data-theme="dark"] .mnav-pop-item img,
[data-theme="dark"] .mnav-pop-item svg { filter: brightness(0) invert(1) opacity(0.72); }

/* Анализ конкурентов (мобила): степпер #compSubtabs скроллился по горизонтали
   и шаги 3-4 («Сравнительная таблица», «SWOT») уходили за край — юзер их не
   видел. Форсим перенос: все шаги видны сразу. Высокая специфичность (2 id) +
   грузимся последними. */
@media (max-width: 768px) {
    #tab-competitors #compSubtabs.comp-subtabs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        row-gap: 2px;
    }
    #tab-competitors #compSubtabs .comp-step {
        padding: 9px 10px 11px !important;
        font-size: 12px !important;
    }
}

/* ═══ Календарь: тёмная тема + дубль «+» ═══════════════════════════════════
   В calendar.css захардкожены светлые/тёплые фоны (#fef7f7, #fff5f5, #fff7e6…)
   — в тёмной теме они остаются белыми/тёплыми. Перекрываем на токены (грузимся
   последними). И прячем свою «+» календаря на мобильном — есть центральная «+»
   в нижнем баре. */
[data-theme="dark"] .cal-month-cell.holiday-cell,
[data-theme="dark"] .cal-week-head.holiday-col {
    background: color-mix(in srgb, var(--status-overdue) 12%, var(--surface)) !important;
}
[data-theme="dark"] .cal-month-cell.holiday-cell:hover {
    background: color-mix(in srgb, var(--status-overdue) 18%, var(--surface)) !important;
}
[data-theme="dark"] .cal-day-holiday {
    background: color-mix(in srgb, var(--status-overdue) 14%, var(--surface)) !important;
    color: var(--status-overdue) !important;
}
[data-theme="dark"] .cal-view-member.is-pending {
    background: var(--fill) !important;
    color: var(--text-muted) !important;
}
[data-theme="dark"] .cal-view-member.is-declined {
    background: color-mix(in srgb, var(--status-overdue) 14%, var(--surface)) !important;
    color: var(--status-overdue) !important;
}
/* Дубль «+»: на мобильном прячем собственную кнопку календаря (есть нав-«+»). */
@media (max-width: 768px) {
    #tab-calendar .cal-add-btn { display: none !important; }
}

/* Календарь (dark): выходные/соседний месяц были near-white (#fcfcfd/#fafbfc)
   → оставались белыми в тёмной теме. Делаем тёмными (чуть отличны от будней). */
[data-theme="dark"] .cal-month-cell.weekend-cell {
    background: var(--surface-2, #161A24) !important;
}
[data-theme="dark"] .cal-month-cell.other-month {
    background: var(--bg-subtle, #161A24) !important;
}
[data-theme="dark"] .cal-month-cell.weekend-cell:hover,
[data-theme="dark"] .cal-month-cell:hover:not(.other-month) {
    background: var(--surface-hover, #232838) !important;
}

/* ═══ Мобильный UX батч (CSS-only): §1 шапка/стек, §7 календарь, §4 радиусы ═══ */
@media (max-width: 768px) {
    /* ── §1: navbar не перекрывает контент ──
       Шапка sticky z=30 (ок). Беда: нижний таб-бар z=1500 выше шторки задачи
       (z=1300) → перекрывал её нижние действия. Прячем таб-бар, когда открыта
       шторка задачи (у неё своя кнопка закрытия). Чат уже прячет (chat-conv-open). */
    body.task-drawer-open #mobTabbar { display: none !important; }
    /* Якорный/фокус-скролл не должен прятать контент под липкую шапку (64px). */
    .main-area { scroll-padding-top: 64px; }

    /* ── §4: единые радиусы контролов шторки задачи + убрать «Esc — закрыть» ── */
    .task-drawer-hint { display: none !important; }
    #taskDrawer input:not([type=checkbox]):not([type=radio]),
    #taskDrawer textarea,
    #taskDrawer select,
    #taskDrawer button,
    #taskDrawer .chip,
    #taskDrawer [class*="-btn"] {
        border-radius: var(--radius-md, 10px) !important;
    }
}

/* ── §7: календарь — сегодня = заливка (число), выбранный = тонкая рамка ──
   Сегодня: число в круге --accent + белым (уже есть). Выбранный: только рамка
   --accent, БЕЗ заливки. Совпадение сегодня==выбранный → заливка сегодня в
   приоритете, рамка не дублируется. Токены, табличные цифры. */
.cal-month-cell.selected {
    background: transparent !important;
    box-shadow: inset 0 0 0 2px var(--accent) !important;
}
.cal-month-cell.today.selected {
    box-shadow: none !important;   /* у «сегодня» индикатор — круг числа, рамку не дублируем */
}
.cal-day-num { font-variant-numeric: tabular-nums; }

/* ═══ §4/§5: шторка задачи — крупный заголовок + единая кнопка «Прикрепить» ═══ */
@media (max-width: 768px) {
    /* §4: название задачи крупнее (18–20px, weight 500).
       line-height/height достаточные — иначе на Android текст в input
       обрезается сверху/снизу («сжатая область»). */
    #taskDrawer .task-drawer-title {
        font-size: 19px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        height: auto !important;
        min-height: 40px;
    }
}
/* §5: единая primary-кнопка «+ Прикрепить документ». */
.td-docs-attach-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 11px 14px;
    border: none;
    border-radius: var(--radius-md, 10px);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s;
}
.td-docs-attach-cta:hover { filter: brightness(1.06); }
.td-docs-attach-plus { font-size: 18px; line-height: 1; font-weight: 700; }

/* §5: шторка выбора источника (нижняя, портал через Overlay даёт scrim/z-index). */
/* Модалка «Прикрепить документ»: позиция/анимацию задаёт .ov-sheet (мобильный)
   или .ov-modal (десктоп) из 59-overlay.js; здесь — только наполнение/размер. */
.td-attach-sheet {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
}
.ov-sheet.td-attach-sheet { border-bottom: none; }          /* мобильная шторка */
/* Десктоп — компактная центрированная модалка */
.ov-modal.td-attach-sheet {
    width: min(640px, calc(100vw - 48px)); max-width: 640px;
    max-height: min(720px, 80vh);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 18px 50px rgba(15, 19, 28, 0.28);
}
.td-attach-grip { display: none; }
.ov-sheet .td-attach-grip { display: block; width: 36px; height: 4px; border-radius: 2px;
    background: var(--border); margin: 8px auto 4px; }
.td-attach-sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.td-attach-sheet-title { font-size: 18px; font-weight: 600; color: var(--text); }
.td-attach-sheet-close {
    width: 44px; height: 44px; flex: 0 0 auto; margin: -10px -10px -10px 0;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: 10px;
    color: var(--text-muted); cursor: pointer;
}
.td-attach-sheet-close:hover { color: var(--text); background: var(--fill); }
/* Тулбар: поиск + сегменты */
.td-attach-toolbar { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.td-attach-search { position: relative; display: flex; align-items: center; }
.td-attach-search > svg { position: absolute; left: 12px; color: var(--accent); pointer-events: none; }
.td-attach-search-input {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px 10px 36px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    color: var(--text); font: inherit; font-size: 14px;
}
.td-attach-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.td-attach-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--fill);
    border: 1px solid var(--border); border-radius: 10px; align-self: flex-start; }
.td-attach-tab { cursor: pointer; border: 0; background: transparent; color: var(--text-muted);
    font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 16px; border-radius: 7px; }
.td-attach-tab.is-active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
/* Список: внутренний скролл */
.td-attach-sheet-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
    padding: 0 20px 8px; }
.td-attach-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
    background: var(--surface); color: var(--text);
    font: inherit; text-align: left; cursor: pointer; transition: background .12s, border-color .12s;
}
.td-attach-row:hover { background: var(--accent-tint); border-color: var(--accent); }
.td-attach-row.is-busy { opacity: .5; pointer-events: none; }
.td-attach-row-ic { flex: 0 0 auto; display: flex; color: var(--text-muted); }
.td-attach-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-attach-row-title { font-size: 14.5px; font-weight: 500; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-attach-row-meta { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-attach-chip { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    background: var(--fill); color: var(--text-muted); white-space: nowrap; }
.td-attach-chip--draft { background: color-mix(in srgb, var(--status-idle, #9AA1AE) 18%, var(--surface)); color: var(--text-muted); }
.td-attach-chip--ready, .td-attach-chip--sent {
    background: color-mix(in srgb, var(--status-done, #4E8A6A) 18%, var(--surface)); color: var(--status-done, #4E8A6A); }
/* Футер */
.td-attach-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-top: 1px solid var(--border); }
.td-attach-count { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.td-attach-foot-actions { display: flex; gap: 10px; }
.td-attach-btn { cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; min-height: 44px;
    padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); }
.td-attach-btn:hover { background: var(--fill); }
.td-attach-btn--secondary { border-color: var(--border); background: var(--surface); }
.td-attach-btn--secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
/* Состояния */
.td-attach-empty { padding: 28px 18px; text-align: center; color: var(--text-muted); font-size: 13px; }
.td-attach-retry { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.td-attach-skel { height: 56px; border-radius: var(--radius-md, 10px); border: 1px solid var(--border);
    background: linear-gradient(90deg, var(--surface), var(--fill), var(--surface));
    background-size: 200% 100%; animation: tdAttachSkel 1.2s ease-in-out infinite; }
@keyframes tdAttachSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .td-attach-skel { animation: none; } }

/* ═══ §6: Таблицы — горизонтальные карточки, имя 1–2 строки, «Открыть»/«⋯» ═══ */
@media (max-width: 768px) {
    #tab-tables .tbl-my-row {
        display: flex;
        flex-wrap: wrap;           /* статус+действия уходят на 2-ю строку → имя во всю ширину */
        align-items: center;
        gap: 12px;
        row-gap: 10px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }
    #tab-tables .tbl-my-ico {
        flex: 0 0 auto;
        width: 48px; height: 48px;
        display: flex; align-items: center; justify-content: center;
        border-radius: var(--radius-md, 10px);
        background: var(--fill);
        color: var(--accent);
        font-size: 22px;
    }
    /* min-width:0 — иначе flex-элемент не сжимается и имя рвётся по слову.
       flex-basis 180px → ico+main занимают 1-ю строку, контролы переносятся. */
    #tab-tables .tbl-my-main { flex: 1 1 180px; min-width: 0; }
    #tab-tables .tbl-my-title {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;   /* перенос по словам, не по буквам/одному слову */
        word-break: normal;
    }
    #tab-tables .tbl-my-meta {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
        font-size: 12px;
        margin-top: 2px;
    }
    #tab-tables .tbl-my-actions { order: 4; flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 6px; }
    #tab-tables .tbl-btn--primary {
        background: var(--accent) !important;
        color: #fff !important;
        border: none !important;
        border-radius: var(--radius-md, 10px) !important;
    }
    #tab-tables .tbl-my-menu-btn {
        flex: 0 0 auto;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        border: none; background: transparent;
        color: var(--text-muted); border-radius: 50%;
        cursor: pointer;
    }
    #tab-tables .tbl-my-menu-btn:hover { background: var(--fill); color: var(--text); }
    /* статус-чип компактнее, не толкает действия */
    #tab-tables .tbl-status { order: 3; flex: 0 0 auto; margin-left: 60px; }
}
/* §6: меню «⋯» строки (Overlay порталит + даёт z-index; стилизуем панель). */
.tbl-row-menu {
    /* width:max-content — чтобы при позиционировании (Overlay измеряет offsetWidth
       ДО установки position:fixed) меню не разворачивалось на всю ширину body и
       не «съезжало» в левый край. position:fixed заранее — страховка. */
    position: fixed;
    width: max-content; min-width: 160px; max-width: 240px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    padding: 4px;
}
.tbl-row-menu-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 12px;
    border: none; background: transparent;
    color: var(--text); font: inherit; font-size: 14px;
    border-radius: var(--radius-sm, 8px); cursor: pointer;
}
.tbl-row-menu-item:hover { background: var(--fill); }
.tbl-row-menu-item--danger { color: var(--status-failed, #C0553B); }

/* ═══ §9: Чат — скрепка ghost-иконкой (без «капсулы») + шапка без перекрытий ═══ */
@media (max-width: 768px) {
    /* Скрепка слева от поля ввода: без фона/обводки, нейтральная, на тап — accent. */
    #tab-chat .messenger-attach-btn {
        width: 44px; height: 44px;
        flex: 0 0 auto;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        color: var(--text-muted) !important;
        padding: 0;
        display: flex; align-items: center; justify-content: center;
        transition: color .12s;
    }
    #tab-chat .messenger-attach-btn:hover,
    #tab-chat .messenger-attach-btn:active {
        color: var(--accent) !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #tab-chat .messenger-attach-btn svg { width: 23px; height: 23px; }
    /* Шапка диалога не перекрывает ленту: sticky + тонкая граница-тень. */
    #tab-chat .messenger-conv-header {
        box-shadow: 0 1px 0 var(--border);
    }
}

/* ═══ §3: Workflow — иерархия кнопок (CSS-часть): «Сохранить» primary (уже),
   «Сформировать дорожную карту» — secondary (контур --border, текст --text). ═══ */
@media (max-width: 768px) {
    #tab-diagram .wf-btn--roadmap,
    .wf-toolbar .wf-btn--roadmap {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md, 10px) !important;
    }
    #tab-diagram .wf-btn--roadmap:hover,
    .wf-toolbar .wf-btn--roadmap:hover { background: var(--fill) !important; }
    /* «Сохранить» — единый radius с остальными. */
    .wf-toolbar .wf-btn--primary { border-radius: var(--radius-md, 10px) !important; }
}

/* ═══ §2: Workflow — палитра типов в FAB «+ Блок» + шторка ═══════════════════ */
.wf-fab-block { display: none; }
.wf-block-sheet { display: flex; }
@media (max-width: 768px) {
    /* палитра сверху убрана — добавление через FAB */
    .wf-toolbar .wf-add { display: none !important; }
    /* «← К схемам» остаётся компактной кнопкой-назад слева */
    .wf-toolbar .wf-back { font-size: 13px; }

    .wf-fab-block {
        position: fixed;
        right: 16px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        z-index: 1480;                 /* ниже scrim шторки (1490) — при открытии прячется */
        display: inline-flex; align-items: center; gap: 6px;
        padding: 12px 18px;
        border: none; border-radius: 999px;
        background: var(--accent); color: #fff;
        font: inherit; font-size: 14px; font-weight: 600;
        box-shadow: 0 6px 20px rgba(0,0,0,0.22);
        cursor: pointer;
    }
    .wf-fab-block-plus { font-size: 19px; line-height: 1; font-weight: 700; }
}
/* Шторка «Добавить блок» (портал/scrim даёт Overlay). */
.wf-block-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    max-height: 72vh;
    flex-direction: column;
    background: var(--surface);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
    border: 1px solid var(--border); border-bottom: none;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.wf-block-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; }
.wf-block-sheet-title { font-size: 16px; font-weight: 700; color: var(--text); }
.wf-block-sheet-close { width: 36px; height: 36px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: none; background: var(--fill); border-radius: 50%; color: var(--text-muted); cursor: pointer; }
.wf-block-sheet-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.wf-block-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 13px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer;
    transition: background .12s;
}
.wf-block-row:hover { background: var(--fill); }
.wf-block-row-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.wf-block-row--start .wf-block-row-dot      { background: var(--status-done); }
.wf-block-row--end .wf-block-row-dot         { background: var(--status-overdue); }
.wf-block-row--gateway .wf-block-row-dot     { background: var(--status-progress); border-radius: 2px; transform: rotate(45deg); }
.wf-block-row--event .wf-block-row-dot       { background: transparent; border: 2px solid var(--accent); }
.wf-block-row--subprocess .wf-block-row-dot  { border-radius: 3px; }

/* ═══ §8: Календарь — день → полноэкранная нижняя шторка (×/scrim/свайп) ═══════
   #calDayEventsModal = .modal-overlay (scrim, tap-outside, ×) уже есть. На
   мобильном делаем панель нижней шторкой во всю ширину/почти высоту, выше
   нижнего таб-бара (z над 1500), с drag-handle. JS: выбор дня открывает её. */
@media (max-width: 768px) {
    #calDayEventsModal {
        align-items: flex-end !important;
        justify-content: stretch !important;
        padding: 0 !important;
        z-index: var(--z-nav-sheet, 1510) !important;   /* выше таб-бара (1500) */
    }
    #calDayEventsModal .cal-day-events-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        margin: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        position: relative;
    }
    /* drag-handle сверху (визуальный + зона свайпа) */
    #calDayEventsModal .cal-day-events-modal::before {
        content: "";
        position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
        width: 38px; height: 4px; border-radius: 999px;
        background: var(--border);
    }
    #calDayEventsModal .cal-day-events-head { padding-top: 18px; }
    #calDayEventsModal .cal-day-events-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══ ФИКС: шторки с display:flex перебивали [hidden] → были видны всегда и
   перекрывали контент (шторка прикрепления документа / «+ Блок»). ═══ */
.td-attach-sheet[hidden],
.wf-block-sheet[hidden] { display: none !important; }

/* ФИКС: при тапе на событие/задачу в календаре открывались calEventViewModal /
   kanbanViewModal — они были НИЖЕ нижнего таб-бара (1500), он их перекрывал.
   Поднимаем выше таб-бара на мобильном (как шторку дня). */
@media (max-width: 768px) {
    #calEventViewModal,
    #kanbanViewModal { z-index: var(--z-nav-sheet, 1510) !important; }
}

/* ═══ Документы (мобила): «Мои документы» плитки были в 2 узкие колонки →
   имена рвались в 3 строки. Делаем одну колонку + имя в 2 строки с «…». ═══ */
@media (max-width: 768px) {
    #tab-docs .docs-v2-tiles { grid-template-columns: 1fr !important; }
    #tab-docs .docs-v2-tile-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.3;
    }
}

/* Документы (мобила): полоса «Мои документы» в галерее (.docs-mydocs-row) была
   в 2 колонки → имена в 3 строки. Одна колонка + clamp имени. */
@media (max-width: 768px) {
    #tab-docs .docs-mydocs-row { grid-template-columns: 1fr !important; }
    #tab-docs .docs-mydocs-card-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

/* ═══ Часть 2: «⋯» в шапке экрана (.pcb-more-btn) — ghost, без обводки/капсулы,
   как остальные иконки шапки. Бьём design-2026:5071 (border+bg). ═══ */
@media (max-width: 768px) {
    #pcbMoreBtn,
    .pcb-actions .pcb-more-btn {
        border: none !important;
        background: transparent !important;
        color: var(--text-muted, var(--ink-muted)) !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 0 !important;
        font-size: 20px;
    }
    .pcb-actions .pcb-more-btn:hover,
    .pcb-actions .pcb-more-btn:active {
        background: transparent !important;
        color: var(--accent) !important;
    }
    .pcb-actions .pcb-more-btn:focus-visible {
        outline: 2px solid var(--accent) !important;
        outline-offset: 2px;
        background: transparent !important;
    }
}

/* ═══ Гант (мобила): единая читаемая липкая колонка ════════════════════════
   Ранее поздний override сжимал задачи до 48px и оставлял только точки, тогда
   как фазы сохраняли 240px. Из-за трёх разных ширин съезжали сетка, линия
   «Сегодня» и центрирование. Одна переменная синхронизирует шапку, фазы,
   задачи и служебные слои; названия снова видны без раскрытия поповера. */
@media (max-width: 768px) {
    #tab-gantt {
        --gantt-name-column-width: 120px;
    }
    #tab-gantt .gantt-v2-name-head,
    #tab-gantt .gantt-v2-task-name,
    #tab-gantt .gantt-v2-phase-name {
        position: sticky !important;
        left: 0 !important;
        z-index: 6 !important;
        width: var(--gantt-name-column-width) !important;
        min-width: var(--gantt-name-column-width) !important;
        max-width: var(--gantt-name-column-width) !important;
        flex: 0 0 var(--gantt-name-column-width) !important;
        background: var(--surface) !important;
        border-right: 1px solid var(--border);
        overflow: hidden;
        box-sizing: border-box;
    }
    #tab-gantt .gantt-v2-name-head {
        padding: 0 9px !important;
        align-items: center;
    }
    #tab-gantt .gantt-v2-name-head .gv2-h-task {
        display: block !important;
        overflow: hidden;
        color: var(--text-muted);
        font-size: 10px;
        letter-spacing: .06em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #tab-gantt .gantt-v2-name-head .gv2-h-meta,
    #tab-gantt .gantt-v2-task-name .gv2-meta,
    #tab-gantt .gantt-v2-task-name .gv2-prog,
    #tab-gantt .gantt-v2-phase-name .gv2-meta,
    #tab-gantt .gantt-v2-phase-name .gv2-prog {
        display: none !important;
    }
    #tab-gantt .gantt-v2-task-name {
        min-height: 40px !important;
        justify-content: flex-start;
        gap: 6px !important;
        padding: 0 9px !important;
        cursor: pointer;
    }
    #tab-gantt .gantt-v2-task-name .gantt-v2-task-label {
        display: block !important;
        min-width: 0;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #tab-gantt .gantt-v2-task-name .gantt-v2-phase-stripe {
        position: static !important;
        width: 3px !important;
        height: 18px !important;
        min-height: 18px !important;
        border-radius: 999px !important;
        margin: 0 !important;
        flex: 0 0 3px;
    }
    #tab-gantt .gantt-v2-phase-name {
        min-height: 38px !important;
        gap: 6px !important;
        padding: 0 9px !important;
        background: var(--fill) !important;
    }
    #tab-gantt .gantt-v2-phase-label {
        min-width: 0;
        font-size: 11.5px;
        line-height: 1.2;
    }
    #tab-gantt .gantt-v2-phase-count {
        display: none !important;
    }
    #tab-gantt .gantt-v2-phase-dot {
        width: 7px;
        height: 7px;
    }
    #tab-gantt .gantt-v2-row {
        min-height: 40px !important;
    }
    #tab-gantt .gantt-v2-timeline {
        height: 40px !important;
        min-height: 40px !important;
    }
    #tab-gantt .gantt-v2-bar {
        height: 18px !important;
        top: calc(50% - 9px) !important;
        bottom: auto !important;
    }
    #tab-gantt .gantt-v2-phase-row {
        min-height: 38px !important;
    }
    #tab-gantt .gantt-v2-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-padding-left: var(--gantt-name-column-width);
    }
    /* активная (открытая) строка — подложка accent-tint */
    #tab-gantt .gantt-v2-row.is-name-active .gantt-v2-task-name { background: var(--accent-tint) !important; }
    #tab-gantt .gantt-v2-grid-bg,
    #tab-gantt .gantt-v2-overlay {
        left: var(--gantt-name-column-width) !important;
    }
    /* Старый navy-слой оставлял ПН/ВТ/СР белыми даже после перехода шапки
       на светлый фон. В светлой теме вся дневная шкала использует основной
       цвет текста; тёмную тему это правило намеренно не затрагивает. */
    html:not([data-theme="dark"]) #tab-gantt
        .gantt-v2-card[data-scale="day"] .gantt-v2-day-num,
    html:not([data-theme="dark"]) #tab-gantt
        .gantt-v2-card[data-scale="day"] .gantt-v2-dow {
        color: var(--text, #181B26) !important;
        opacity: 1;
    }
}

/* ═══ Часть 3: «прыжки» (CLS) — безопасные универсальные фиксы ════════════════
   Полный аудит CLS<0.1 требует рабочего браузера (замер) — здесь точечные
   низкорисковые правки, не ломающие высоты вкладок. */
@media (max-width: 768px) {
    /* Скроллбар-гаттер: открытие шторки/модалки не сдвигает контент
       (на десктопе резервирует место; на мобиле overlay-скроллбары — безвредно). */
    html { scrollbar-gutter: stable; }
    .main-area { scrollbar-gutter: stable; overscroll-behavior-y: contain; }
    /* DOM-ре-рендер (лента/сообщения/уведомления) не должен «утаскивать» скролл. */
    .messenger-messages,
    #kbBoard,
    .home-feed,
    .notifications-list { overflow-anchor: none; }
    /* Шторки/модалки — анимация только через transform/opacity (не height/top),
       чтобы не было layout-thrash. (Overlay-компонент уже так делает; страхуем
       общие классы.) */
    .ov-panel, .modal { will-change: transform; }
}

/* Гант (мобила): поповер ПОЛНОГО НАЗВАНИЯ задачи по тапу на узкую колонку
   (не редактирование). Портал в body, fixed, в общем z-стеке. */
.gantt-v2-name-popover {
    position: fixed;
    z-index: var(--z-nav-pop, 1505);
    max-width: min(78vw, 320px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.20);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gantt-v2-name-popover-text {
    font-size: 14px; font-weight: 600; color: var(--text);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.gantt-v2-name-popover-open {
    align-self: flex-start;
    border: none; background: var(--accent); color: #fff;
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: var(--radius-md, 10px);
    cursor: pointer;
}

/* Чеклист (мобила): диск статуса .rmt-stat — 20px, тап-таргет мал («не
   нажимается»). Расширяем невидимую зону тапа до ~44px через ::before,
   визуальный размер диска не меняем. Тап открывает пикер статуса. */
.rmt-stat { position: relative; }
.rmt-stat::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 40px;
    border-radius: 8px;
}

/* Пикер статуса (.ui-popover, z=1000) был НИЖЕ нижнего таб-бара (1500) →
   варианты статусов перекрывались панелью. Поднимаем выше таб-бара. */
@media (max-width: 768px) {
    .ui-popover { z-index: var(--z-nav-sheet, 1520) !important; }
}

/* Чеклист (мобила): чип статуса = триггер пикера (как пилюля в Карточках).
   Курсор-указатель + каретка ▾ + запас под тач. Диск слева остаётся быстрым
   toggle «выполнено», чип меняет на любой статус. */
.rmt-chip-btn { cursor: pointer; padding-top: 4px; padding-bottom: 4px; }
.rmt-chip-btn::after { content: "▾"; margin-left: 5px; font-size: 9px; opacity: 0.7; vertical-align: 1px; }

/* ── Управление выполненными (66-completed-view.js) ─────────────────────── */
/* Скрытые выполненные задачи и свёрнутые этапы. */
#planBody tr.cv-hidden,
#planBody tr.cv-step-collapsed { display: none !important; }
/* То же для карточек: скрытые задачи, а также выполненные этапы/фазы целиком. */
#planCards .rc-task.cv-hidden,
#planCards .rc-task.cv-step-collapsed,
#planCards .rc-stage-group.cv-hidden,
#planCards .rc-phase.cv-hidden { display: none !important; }

/* Строки-сообщения «Все задачи/этапы выполнены». */
#planBody tr.cv-msg-row td { padding: 6px 14px; border: none; background: transparent; }
.cv-msg {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-style: italic; color: var(--text-muted, #6a7180);
    padding: 3px 10px; border-radius: 999px; background: var(--fill, #eef1f5);
}
.cv-phase-msg .cv-msg { font-weight: 600; }

/* Тумблер «Скрыть выполненные» + «Свернуть этапы». */
.cv-bar { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.cv-hide-btn, .cv-collapse-btn {
    display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 500;
    cursor: pointer; padding: 6px 11px; border-radius: 8px; white-space: nowrap;
    border: 1px solid var(--border, #e3e7ee); background: var(--surface, #fff); color: var(--text-muted, #6a7180);
}
.cv-hide-btn:hover, .cv-collapse-btn:hover { color: var(--text, #181b26); border-color: var(--text-muted, #6a7180); }
.cv-hide-btn.is-on, .cv-collapse-btn.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.cv-hide-ic { display: inline-flex; }
.cv-hide-ic svg { width: 16px; height: 16px; display: block; }

@media (max-width: 640px) {
    .cv-bar { margin-left: 0; flex-wrap: wrap; }
}