/* ============================================================
   Task — внутренний таск-менеджер
   Эстетика: индустриально-редакционная. Бумага + чернила +
   сигнальный акцент. IBM Plex Sans / Plex Mono.
   ============================================================ */

:root {
    /* поверхность */
    --paper: #f3f1ea;
    --paper-raised: #fbfaf6;
    --paper-line: #e2ded2;

    /* чернила */
    --ink: #191c26;
    --ink-soft: #3c4152;
    --ink-faint: #8b8fa0;
    --ink-panel: #14161e;
    --ink-panel-line: #262a38;

    /* акценты */
    --signal: #e8501f;          /* срочное, действия */
    --signal-soft: #fbe4da;
    --accent-blue: #3d6bff;     /* в работе */
    --accent-green: #2f9e63;    /* готово */
    --accent-amber: #dd9a26;    /* на проверке */
    --danger: #a33413;          /* опасные действия: удалить, заблокировать */

    --font-ui: 'IBM Plex Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --panel-w: 76px;
    --panel-w-open: 216px;
    --mine-bubble: color-mix(in srgb, var(--accent-blue) 13%, #fff); /* свои сообщения в лентах */
    --mobile-nav-h: 52px; /* высота нижней панели на мобильных */
    /* В установленном iOS PWA системная область жеста уже остаётся за пределами
       доступной высоты. Здесь нужен только небольшой внутренний воздух. */
    --mobile-safe-bottom: 4px;

    /* ---- шкалы дизайн-системы (docs/design-system/tokens.md) ----
       Размеры берём только отсюда: новый экран не заводит свои 13.5px и 9px. */
    --text-3xs: 10px;           /* моно-подписи капсом, бейджи, буквы в мини-аватарах */
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;            /* контролы, подписи, списки */
    --text-md: 14px;            /* основной текст форм */
    --text-body: 15px;          /* текст для чтения, заголовки блоков */
    --text-lg: 16px;
    --text-xl: 18px;            /* заголовки экранов */
    --text-2xl: 20px;
    --text-3xl: 24px;           /* заголовок задачи */

    /* отступы (padding, margin, gap): шаг 4px и половинки 2 / 6 / 10 */
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    --radius-xs: 4px;           /* бейджи, полоски */
    --radius-sm: 6px;
    --radius-md: 8px;           /* поля, кнопки, списки */
    --radius-lg: 12px;          /* карточки, панели */
    --radius-xl: 16px;          /* модалки, шторки, меню */
    --radius-pill: 999px;

    /* контрол = поле, список или кнопка; в одном ряду — одна высота */
    --control-h: 34px;
    --control-h-sm: 30px;       /* компактные кнопки, иконки */
    --control-h-lg: 40px;       /* вход, крупные формы */
    --control-px: 12px;
    --control-bg: #fff;
    --control-border: var(--paper-line);
    --control-border-hover: var(--ink-faint);

    --focus-ring: 0 0 0 3px rgba(25, 28, 38, .08);
    --shadow-pop: 0 18px 44px -16px rgba(20, 22, 30, .52);
    --shadow-modal: 0 24px 80px -20px rgba(0, 0, 0, .5);

    --scroll-thumb: rgba(25, 28, 38, .18);
    --scroll-thumb-hover: rgba(25, 28, 38, .34);

    /* слои: снизу вверх; local — внутри своего блока */
    --z-local: 2;
    --z-local-pop: 8;           /* меню и подсказки внутри панели */
    --z-sticky: 20;             /* кнопки прокрутки доски */
    --z-nav-tip: 30;
    --z-nav: 50;                /* боковая / нижняя панель */
    --z-overlay: 60;            /* карточка задачи, проект */
    --z-modal: 70;
    --z-lightbox: 90;
    --z-banner: 100;            /* «включите уведомления» */
    --z-sheet-backdrop: 105;
    --z-sheet: 110;             /* шторка фильтров */
    --z-picker: 120;
    --z-dialog: 125;            /* подтверждения (ui/dialog.js) — поверх карточек, окон и пикеров */
    --z-menu: 130;              /* меню аккаунта */
    --z-tooltip: 135;           /* подсказки (ui/tooltip.js) — поверх пикеров и меню */
    --z-toast: 138;             /* всплывающие уведомления (ui/dialog.js) */
    --z-refresh: 140;           /* «потяните для обновления» */
    --z-progress: 1000;         /* полоска загрузки */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* атрибут hidden должен побеждать любые display у классов */
[hidden] { display: none !important; }

html, body { height: 100%; overscroll-behavior: none; }

.push-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-banner);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-4);
    padding-top: calc(var(--space-2-5) + env(safe-area-inset-top));
    background: var(--ink-panel);
    color: #fff;
    font-size: var(--text-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.push-banner span { flex: 1; display: flex; align-items: center; gap: var(--space-2); }
.push-banner svg { flex: none; width: 16px; height: 16px; }

.push-banner-close {
    border: none;
    background: none;
    color: #fff;
    opacity: .7;
    display: grid;
    place-items: center;
    flex: none;
}

.push-banner-close:hover { opacity: 1; }

/* iOS в standalone-режиме (добавлено на экран «Домой») с viewport-fit=cover
   растягивает вьюпорт под чёлку/индикатор-полоску, и 100% в этом случае может
   не совпадать с реальной видимой областью — 100dvh считается точнее. */
@supports (height: 100dvh) {
    html, body { height: 100dvh; }
}

/* --app-height из app.js (window.innerHeight) — подстраховка поверх dvh на случай,
   если dvh сам протух между запусками и не совпадает с реальной видимой областью.
   ВАЖНО: raньше сюда добавлялся ещё +env(safe-area-inset-top) — компенсация под
   баг с заниженным innerHeight на iOS. Убрано: нижняя панель теперь position:fixed
   и не зависит от высоты #app/html/body вообще (см. мобильный media-блок ниже),
   а сама компенсация в случаях, когда innerHeight и так был корректным, наоборот
   делала страницу выше экрана и создавала лишний вертикальный скролл всей страницы. */
html, body { height: var(--app-height, 100dvh); }

body {
    font-family: var(--font-ui);
    /* Тёмный фон служит подложкой под системную safe-area в standalone PWA:
       если iOS оставит несколько пикселей вне fixed-панели, они продолжат её
       заливку, а не будут выглядеть светлым зазором. Контент задаёт свой фон. */
    background: var(--ink-panel);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    font-size: var(--text-body);
}

#app { height: 100%; }
@supports (height: 100dvh) {
    #app { height: 100dvh; }
}
#app { height: var(--app-height, 100dvh); }

/* Баннер уведомлений фиксирован к верхнему краю, но не должен закрывать шапку
   приложения. Его реальную высоту (включая перенос текста и safe-area) пишет JS. */
body.push-banner-visible #app {
    padding-top: var(--push-banner-height, 0px);
}

button { font: inherit; cursor: pointer; }
input { font: inherit; }

/* ---------- фон-миллиметровка ---------- */

.grid-bg {
    background-image:
        linear-gradient(var(--paper-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ============================================================
   Экран логина
   ============================================================ */

.login-screen {
    height: 100%;
    display: grid;
    place-items: center;
    padding: var(--space-6);
    position: relative;
    background-color: var(--paper);
    overflow: hidden;
}

/* крупная «кнопка»-tack как декор фона */
.login-screen::after {
    content: '';
    position: absolute;
    right: -140px;
    bottom: -140px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    border: 2px dashed var(--paper-line);
    pointer-events: none;
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-8) var(--space-8);
    box-shadow:
        0 1px 2px rgba(25, 28, 38, .05),
        0 16px 48px -12px rgba(25, 28, 38, .18);
    animation: card-in .45s cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* появление внутри прокручиваемого списка: без сдвига вниз — сдвиг на время анимации
   вылезает за низ колонки, и у неё мигает полоса прокрутки (особенно в Safari) */
@keyframes card-pop {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
}

.login-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.brand-mark {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-lg);
    background: var(--ink);
    display: grid;
    place-items: center;
    color: var(--signal);
}

.brand-mark svg { display: block; }

.brand-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--text-2xl);
    letter-spacing: -.5px;
    text-transform: lowercase; /* фирменное написание: название установки строчными */
}

.brand-sub {
    font-size: var(--text-xs);
    color: var(--ink-faint);
    letter-spacing: .4px;
}

.login-field { margin-bottom: var(--space-4); }

.login-field label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ink-faint);
    margin-bottom: var(--space-1-5);
}

.login-field input {
    width: 100%;
    height: var(--control-h-lg);
    padding: 0 var(--space-3);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    background: var(--control-bg);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-md);
    transition: border-color .15s, box-shadow .15s;
}

.login-field input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: var(--focus-ring);
}

.login-field textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    background: var(--control-bg);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-md);
    line-height: 1.45;
    resize: none;
    transition: border-color .15s, box-shadow .15s;
}

.login-field textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: var(--focus-ring);
}

.login-field select,
.login-field .select-trigger {
    width: 100%;
    height: auto;
    min-height: var(--control-h-lg);
    padding-left: var(--space-3);
    font-size: var(--text-md);
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
    transition: transform .1s, border-color .15s;
}

.color-swatch:hover { transform: scale(1.08); }

.color-swatch.is-default {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 2px var(--paper-line);
}

.color-swatch.is-selected {
    border-color: var(--ink);
}

.color-swatch-custom {
    display: grid;
    place-items: center;
    background: conic-gradient(from 180deg, var(--accent-blue), var(--accent-green), var(--accent-amber), #b04ad1, var(--signal), #1f9e9e, #c23b6d, #6a49d8, var(--accent-blue));
    color: #fff;
}

.color-swatch-custom svg { width: 14px; height: 14px; }

input.color-custom-input {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.login-error {
    background: var(--signal-soft);
    color: var(--danger);
    border-radius: var(--radius-md);
    padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    display: none;
}

.login-error.visible { display: block; animation: card-in .25s both; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-h-lg);
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background: var(--ink);
    color: var(--paper-raised);
    font: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform .12s, background .15s;
}

.btn-primary:hover { background: var(--ink-panel-line); }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .6; cursor: default; }

/* ============================================================
   App shell: панель + контент
   ============================================================ */

.shell {
    display: flex;
    height: 100%;
}

.side-panel {
    width: var(--panel-w);
    flex: none;
    position: relative;
    z-index: var(--z-nav); /* подсказки пунктов должны быть поверх контента */
    background: var(--ink-panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3) 0;
    gap: var(--space-1);
}

.nav-item {
    width: 52px;
    height: 52px;
    flex: none;
    border: none;
    background: transparent;
    border-radius: var(--radius-lg);
    color: #9298ad;
    display: grid;
    place-items: center;
    position: relative;
    transition: background .15s, color .15s;
    animation: nav-in .4s cubic-bezier(.2, .9, .3, 1) both;
}

.nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-md);
    background: var(--signal);
    color: #fff;
    font-size: var(--text-3xs);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.nav-item:nth-child(3) { animation-delay: .03s; }
.nav-item:nth-child(5) { animation-delay: .06s; }
.nav-item:nth-child(6) { animation-delay: .09s; }
.nav-item:nth-child(7) { animation-delay: .12s; }
.nav-item:nth-child(8) { animation-delay: .15s; }

@keyframes nav-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

.nav-item:hover { background: var(--ink-panel-line); color: #e8eaf2; }

.nav-item.active {
    background: var(--ink-panel-line);
    color: #fff;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: var(--signal);
}

.nav-item .nav-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    translate: 0 -50%;
    background: var(--ink);
    color: var(--paper-raised);
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
    z-index: var(--z-nav-tip);
}

.nav-item:hover .nav-label { opacity: 1; }

.nav-divider {
    width: 34px;
    height: 1px;
    background: var(--ink-panel-line);
    margin: var(--space-2) 0;
}

.nav-spacer { flex: 1; }

.nav-user {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    border: none;
    background: var(--accent-blue);
    color: #fff;
    font-weight: 600;
    font-size: var(--text-md);
    display: grid;
    place-items: center;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

.nav-user.has-avatar { background: none; }
.nav-user img { width: 100%; height: 100%; object-fit: cover; }

.nav-user.active {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

/* Меню пользователя хранит второстепенные действия вне постоянной навигации. */
.account-menu {
    position: fixed;
    z-index: var(--z-menu);
    overflow: hidden;
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-xl);
    box-shadow: 0 22px 60px -18px rgba(20, 22, 30, .5);
    animation: card-in .16s cubic-bezier(.2, .9, .3, 1) both;
}

.account-menu::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--signal);
}

.account-menu-head {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--paper-line);
}

.account-menu-avatar {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-weight: 600;
}

.account-menu-avatar.has-avatar { background: none; }
.account-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }

.account-menu-person {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.account-menu-person strong,
.account-menu-person small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-person strong { font-size: var(--text-md); }
.account-menu-person small { color: var(--ink-faint); font-size: var(--text-xs); }
.account-menu-list { padding: var(--space-1-5); }

.account-menu-item {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-2-5);
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--ink-soft);
    text-align: left;
    font-size: var(--text-sm);
    transition: background .12s, color .12s;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
    outline: none;
    background: rgba(25, 28, 38, .055);
    color: var(--ink);
}

.account-menu-icon {
    width: 22px;
    height: 22px;
    flex: none;
    display: grid;
    place-items: center;
}

.account-menu-icon svg { width: 18px; height: 18px; }

.account-menu-status {
    margin-left: auto;
    color: var(--ink-faint);
    font-size: var(--text-2xs);
}

.account-menu-status.is-on { color: var(--accent-green); }
.account-menu-separator { height: 1px; margin: var(--space-1) var(--space-1); background: var(--paper-line); }
.account-menu-item.is-danger { color: var(--signal); }

.main-area {
    flex: 1;
    min-width: 0;
    overflow: auto;
    position: relative;
    background: var(--paper);
}

/* ---------- заглушка этапа 1 ---------- */

.placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--space-6);
}

.placeholder .ph-stamp {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--signal);
    border: 1.5px solid var(--signal);
    border-radius: var(--radius-xs);
    padding: var(--space-1) var(--space-3);
    display: inline-block;
    rotate: -2deg;
    margin-bottom: var(--space-4);
}

.placeholder h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -.4px;
    margin-bottom: var(--space-2-5);
}

.placeholder p {
    color: var(--ink-faint);
    max-width: 400px;
    line-height: 1.55;
}

/* ---------- мобильная раскладка: панель снизу ---------- */

/* развёрнутое меню (кнопка внизу сайдбара, запоминается на пользователя): названия рядом с иконками */
.nav-toggle-icon { display: grid; place-items: center; }
.nav-open { --panel-w: var(--panel-w-open); }
@media (min-width: 641px) {
    .nav-open .side-panel { align-items: stretch; padding: var(--space-3) var(--space-2); }
    .nav-open .nav-item { width: 100%; height: 44px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); }
    .nav-open .nav-item .nav-label {
        position: static; translate: none; opacity: 1; background: none; color: inherit; padding: 0;
        font-size: var(--text-sm); pointer-events: auto;
    }
    .nav-open .nav-item > svg, .nav-open .nav-toggle-icon { flex: none; width: 22px; height: 22px; }
    .nav-open .nav-divider { width: auto; }
    .nav-open .nav-item.active::before { left: calc(var(--space-2) * -1); top: var(--space-2-5); bottom: var(--space-2-5); }
    .nav-open .nav-badge { top: 50%; right: var(--space-3); translate: 0 -50%; }
    .nav-open .nav-user { align-self: flex-start; margin-left: var(--space-1); }
}

@media (max-width: 640px) {
    .nav-toggle { display: none; }
    /* Панель остаётся edge-to-edge и фиксированной к реальному краю вьюпорта. */
    html, body, #app, .shell, .board-wrap { max-width: 100%; overflow-x: hidden; }
    .shell { display: block; }

    .main-area {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        padding-bottom: calc(var(--mobile-nav-h) + var(--mobile-safe-bottom));
    }

    .side-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-nav);
        width: 100%;
        flex-direction: row;
        justify-content: space-evenly;
        padding: var(--space-1) var(--space-2) var(--mobile-safe-bottom);
        gap: var(--space-0-5);
        overflow: visible;
    }

    .nav-divider { display: none; }
    .nav-item { width: 48px; height: 48px; flex: 0 1 58px; }
    .nav-user { width: 40px; height: 40px; flex: none; margin: var(--space-1); }
    .nav-item .nav-label { display: none; }
    .nav-item.active::before {
        left: 15px; right: 15px; top: -4px; bottom: auto;
        width: auto; height: 3px; border-radius: 0 0 var(--radius-xs) var(--radius-xs);
    }
    .nav-spacer { display: none; }

    /* .shell — чтобы перебить общее правило .board-topbar, объявленное ниже по файлу */
    .shell .board-topbar {
        padding: var(--space-2-5) var(--space-3);
        gap: var(--space-1-5);
    }

    .board-topbar .topbar-spacer { display: none; }
    .shell .board-title { margin-right: 0; }
    .board-title {
        margin-right: var(--space-0-5);
        font-size: var(--text-xl);
    }
    .chip-toggle {
        min-height: 34px;
        padding: var(--space-1-5) var(--space-2-5);
        gap: var(--space-1);
        font-size: var(--text-xs);
    }
    /* «Завершённые» — только галочка (название в подсказке), чтобы кнопки не уходили на вторую строку */
    .chip-toggle[data-filter="completed"] .chip-text { display: none; }
    .chip-toggle[data-filter="completed"] { min-width: 34px; justify-content: center; padding: var(--space-1-5); }
    .board-search {
        width: auto;
        min-width: 70px;
        flex: 1 1 70px;
        padding: var(--space-1-5) var(--space-2);
        font-size: var(--text-xs);
    }
    #btn-quick-add {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        justify-content: center;
        gap: 0;
        padding: 0;
        overflow: hidden;
        font-size: 0;
    }
    #btn-full-add {
        min-height: 36px;
        padding: var(--space-1-5) var(--space-2);
        gap: var(--space-1);
        font-size: var(--text-xs);
    }

    /* Масштаб PWA фиксируется viewport meta: поля могут оставаться компактными,
       не вызывая автоматическое увеличение интерфейса при фокусе на iPhone. */
    body .board-search,
    .main-area input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    .main-area textarea,
    .main-area select,
    .overlay input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    .overlay textarea,
    .overlay select,
    .modal input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    .modal textarea,
    .modal select,
    .main-area .select-trigger,
    .overlay .select-trigger,
    .modal .select-trigger { font-size: var(--text-md); }

    .modal-backdrop.modal-backdrop {
        align-items: center;
        padding: max(var(--space-2-5), env(safe-area-inset-top)) var(--space-2-5) max(var(--space-2-5), env(safe-area-inset-bottom));
    }
    .modal.modal {
        max-height: 100%;
        padding: var(--space-4);
        overflow-y: auto;
    }
    .quick-add .quick-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .quick-add .quick-row .quick-picker-button,
    .quick-add .quick-row select,
    .quick-add .quick-row .select-trigger { min-width: 0; width: 100%; }
    .quick-add .quick-row #qa-project { grid-column: 1 / -1; } /* проект пилюлями — во всю строку */
    .quick-add .quick-row select[name="priority"],
    .quick-add .quick-row .select-trigger[data-name="priority"] { grid-column: 1 / -1; }
    .quick-add .quick-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .quick-add .quick-actions .topbar-spacer { display: none; }
    .quick-add .quick-actions button { min-width: 0; justify-content: center; }
    .quick-add .quick-actions #save-template { grid-column: 1 / -1; }
}

/* В установленном iOS PWA нижняя системная область всё равно остаётся видимой.
   Немного опускаем ряд иконок внутрь неё, как это делают нативные tab bar. */
@media (max-width: 640px) and (display-mode: standalone) {
    .shell .board-topbar { padding-top: calc(var(--space-2-5) + env(safe-area-inset-top)); }

    .main-area {
        padding-bottom: calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) - var(--space-3));
    }

    .side-panel { bottom: -12px; }
}

/* ============================================================
   Доска (этап 1)
   ============================================================ */

.board-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.board-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--paper-line);
    background: var(--paper-raised);
    flex-wrap: wrap;
}

/* установленное на iOS приложение (standalone): статус-бар/чёлка перекрывают
   верх экрана — отодвигаем шапку страницы на безопасную область */
@media (display-mode: standalone) {
    .board-topbar { padding-top: calc(var(--space-4) + env(safe-area-inset-top)); }
}

.board-title {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -.3px;
    margin-right: var(--space-2);
}

.topbar-spacer { flex: 1; }

.feed-mine-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-sm);
    color: var(--ink-faint);
    cursor: pointer;
    user-select: none;
}

.feed-mine-toggle input { margin: 0; }

.chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-height: var(--control-h);
    padding: 0 var(--space-3);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}

.chip-toggle input { display: none; }

.chip-toggle.on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper-raised);
}

/* ============================================================
   Базовые контролы (дизайн-система)
   Поле, список и кнопка одного ряда — одной высоты, рамки, скругления
   и шрифта. Новое поле — класс .control (.control-sm / .control-lg),
   список — обычный <select>, кнопка — .btn-primary / .btn-ghost (+ .btn-sm).
   ============================================================ */

.control,
select,
.select-trigger,
.board-search,
.adm-add input[type=text],
.adm-thresholds input {
    height: var(--control-h);
    padding: 0 var(--control-px);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    background-color: var(--control-bg);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    transition: border-color .15s, box-shadow .15s;
}

.control-sm { height: var(--control-h-sm); }
/* Safari рисует type=search своим видом и не слушается высоты и скругления */
.control, .board-search { -webkit-appearance: none; appearance: none; }
.control-lg { height: var(--control-h-lg); font-size: var(--text-md); }

.control:hover,
select:hover:not(:disabled),
.select-trigger:hover:not(:disabled),
.board-search:hover,
.adm-add input[type=text]:hover,
.adm-thresholds input:hover { border-color: var(--control-border-hover); }

.control:focus,
select:focus,
.select-trigger:focus-visible,
.select-trigger[aria-expanded="true"],
.board-search:focus,
.adm-add input[type=text]:focus,
.adm-thresholds input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: var(--focus-ring);
}

.control::placeholder, .board-search::placeholder, .adm-add input::placeholder { color: var(--ink-faint); }

/* список: без системного вида (в Safari он мелкий и серый), своя стрелка */
select,
.select-trigger {
    appearance: none;
    -webkit-appearance: none;
    padding-right: calc(var(--control-px) + var(--space-4));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238b8fa0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    text-overflow: ellipsis;
    cursor: pointer;
}

select:disabled,
.select-trigger:disabled { opacity: .55; cursor: default; }

/* свой Select (ui/select.js): настоящий <select> скрыт в форме, видна кнопка */
.select-enhanced { display: none !important; }
.select-trigger {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    text-align: left;
}
.select-trigger-box { display: grid; flex: 1; min-width: 0; }
.select-trigger-box > * { grid-area: 1 / 1; min-width: 0; }
.select-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-trigger-sizer {
    display: flex;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    white-space: nowrap;
}

/* полосы прокрутки внутри приложения: тонкие, без светлой дорожки, ползунок в тон чернил.
   Chrome и Firefox — стандартные свойства; Safari их не знает — ::-webkit-scrollbar */
@supports (scrollbar-color: auto) {
    :root { scrollbar-color: var(--scroll-thumb) transparent; }
    * { scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--scroll-thumb) padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }

/* числа — без системных стрелок-«крутилок»; стрелки клавиатуры работают */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.project-picker-button,
.quick-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.project-picker-button span,
.quick-picker-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-picker-button { flex: 1; min-width: 120px; padding: var(--space-1-5) var(--space-2-5); }
.project-picker-button svg,
.quick-picker-button svg { flex: none; }

/* поле поиска в строке фильтров (сотрудники, пользователи админки) */
.board-search { width: 220px; }

.btn-signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    min-height: var(--control-h);
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background: var(--signal);
    color: #fff;
    font-weight: 600;
    font-size: var(--text-md);
    transition: transform .12s, filter .15s;
}

.btn-signal:hover { filter: brightness(1.08); }
.btn-signal:active { transform: scale(.97); }

.board-columns {
    flex: 1;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    overflow-x: auto;
    align-items: stretch; /* колонки на всю высоту; переполнение — прокрутка внутри колонки (.col-cards) */
    /* без этого в macOS Safari/установленном PWA доскроллив колонки до края,
       двупальцевый свайп продолжает жест как "назад/вперёд" по истории —
       overscroll-behavior только на html/body тут недостаточно, нужен
       именно на реально скроллящемся элементе */
    overscroll-behavior-x: none;
}

.board-col {
    flex: 1 1 280px;
    min-width: 260px;
    max-width: 360px;
    background: rgba(25, 28, 38, .035);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.col-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-2-5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ink-soft);
}

.col-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.col-count { margin-left: auto; color: var(--ink-faint); font-weight: 500; }

/* «+» в шапке стадии — новая задача сразу в ней */
.col-add {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -4px -4px -4px 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
}
.col-add svg { width: 15px; height: 15px; }
.col-add:hover { color: var(--ink); background: var(--paper-line); }

/* пустая стадия — узкой полосой: «+», число, точка, название сверху вниз */
.board-col.is-collapsed {
    flex: none;
    width: 44px;
    min-width: 0;
    align-self: stretch;
}
.board-col.is-collapsed .col-head {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-3);
    min-height: 0;
}
.board-col.is-collapsed .col-add { order: -2; margin: 0; }
.board-col.is-collapsed .col-count { order: -1; margin-left: 0; }
.board-col.is-collapsed .col-name {
    writing-mode: vertical-rl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 60vh;
}
.board-col.is-collapsed .col-cards { padding: 0; min-height: 60px; }
/* пока тащат карточку — свёрнутые видны как места для броска, и принимает вся полоса,
   а не только низ под названием: список карточек растягивается поверх шапки */
.board-columns.is-dragging .board-col.is-collapsed {
    position: relative;
    border-style: dashed;
    border-color: var(--ink-faint);
    background: var(--signal-soft);
}
.board-columns.is-dragging .board-col.is-collapsed .col-cards {
    position: absolute;
    inset: 0;
    z-index: var(--z-local);
}

.col-cards {
    padding: var(--space-1) var(--space-2-5) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    min-height: 60px;
    flex: 1;
}

.card {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-2-5) var(--space-3);
    cursor: pointer;
    transition: box-shadow .15s, translate .15s, border-color .15s;
    animation: card-pop .25s cubic-bezier(.2,.9,.3,1) both;
}

/* перерисованная по синхронизации карточка уже была на доске — не «въезжает» заново */
.card.card-still { animation: none; }

.card:hover {
    border-color: #c9c4b4;
    box-shadow: 0 6px 18px -8px rgba(25, 28, 38, .25);
    translate: 0 -1px;
}

.card-ghost { opacity: .35; }

.card.prio-urgent { border-left: 3px solid var(--signal); }
.card.prio-important { border-left: 3px solid var(--accent-amber); }

/* новая задача, появившаяся на доске сама (фоновый опрос) — акцент до открытия */
.card-new { box-shadow: 0 0 0 1.5px var(--signal); }

.new-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--signal);
    color: #fff;
}

/* проект — пилюлями своего цвета (этап 8): у подпроекта две — родитель и подпроект (ui/helpers.js, projectPillsHtml) */
.proj-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; max-width: 100%; }
.proj-pills .proj-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-project { display: flex; margin-bottom: var(--space-1-5); }
.quick-picker-button .proj-pills { flex-wrap: nowrap; overflow: hidden; }
.proj-pills .proj-tag:first-child:not(:last-child) { flex: none; } /* родитель короткий — не сжимать, сокращается подпроект */
.proj-pills:has(.proj-pills-sep) { gap: var(--space-0-5); }
.proj-pills-sep { flex: none; color: var(--ink-faint); margin: 0 var(--space-0-5); }

.card-badges {
    display: flex;
    gap: var(--space-1-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-1-5);
}

.card-badges:empty { display: none; }

.prio-badge {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-xs);
}

.prio-badge.prio-urgent { background: var(--signal-soft); color: var(--danger); }
.prio-badge.prio-important { background: #f7ecd4; color: #8a6011; }
.prio-badge.prio-normal { background: rgba(25,28,38,.06); color: var(--ink-soft); }
.prio-badge.prio-low { background: rgba(25,28,38,.05); color: var(--ink-faint); }

.proj-tag {
    font-size: var(--text-2xs);
    font-weight: 600;
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-pill);
    color: var(--tag-ink, #fff);
    background: var(--tag);
}

.card-title {
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: var(--space-2);
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-id {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--ink-faint);
}

.card-assignee {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 600;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.card-assignee.has-avatar { background: none; }

.card-assignee img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* исполнитель + со-исполнители стопкой на карточке доски */
.card-people {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.card-people .card-assignee.is-co {
    width: 20px;
    height: 20px;
    font-size: var(--text-3xs);
    margin-left: -5px;
    box-shadow: 0 0 0 2px var(--paper-raised);
}
.card-people .card-assignee:first-child { margin-left: 0; }
.card-people-more {
    background: var(--paper-line);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
}

/* ============================================================
   Оверлей задачи
   ============================================================ */

.overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(20, 22, 30, .45);
    display: grid;
    place-items: stretch;
    padding: var(--space-4);
    animation: fade-in .2s both;
}

@keyframes fade-in { from { opacity: 0; } }

.overlay-panel {
    background: var(--paper);
    border-radius: var(--radius-xl);
    overflow-y: auto;
    padding: var(--space-5) var(--space-6) var(--space-8);
    box-shadow: var(--shadow-modal);
    animation: card-in .3s cubic-bezier(.2,.9,.3,1) both;
}

.task-head {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.task-secondary-actions { display: contents; }
.btn-ghost.task-more, .task-menu-only { display: none; }

.task-num {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink-faint);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    min-height: var(--control-h);
    padding: 0 var(--control-px);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    background: var(--paper-raised);
    color: var(--ink-soft);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all .15s;
}

.btn-ghost:hover { border-color: var(--control-border-hover); color: var(--ink); }
.btn-ghost:disabled { opacity: .5; cursor: default; pointer-events: none; }
.btn-ghost.btn-sm { min-height: var(--control-h-sm); padding: 0 var(--space-2-5); }
.btn-ghost.btn-icon { min-height: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0 var(--space-2); }
.btn-ghost.btn-danger { color: var(--danger); border-color: rgba(163, 52, 19, .35); }
.btn-ghost.btn-danger:hover { color: var(--danger); border-color: var(--signal); background: var(--signal-soft); }
/* опасное действие иконкой среди обычных (архив в шапке задачи): красное только под курсором */
.btn-ghost.btn-danger-hover:hover { color: var(--danger); border-color: var(--signal); background: var(--signal-soft); }

.task-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.3;
    margin-bottom: var(--space-4);
    cursor: text;
    border-radius: var(--radius-sm);
}

.task-title:hover { background: rgba(25,28,38,.04); }

.task-title-input {
    width: 100%;
    font-family: var(--font-ui);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -.4px;
    padding: var(--space-0-5) var(--space-1-5);
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    background: #fff;
}

.task-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
}

.meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2-5) var(--space-4);
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}

.meta-grid label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-faint);
}

.meta-grid .meta-value {
    font-family: var(--font-ui);
    font-size: var(--text-md);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    padding: var(--space-1-5) 0;
}

.desc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2-5);
}

.desc-head > button { white-space: nowrap; }

.desc-head h2, .task-comments h2 {
    font-size: var(--text-body);
    font-weight: 700;
}

.desc-view {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.desc-view a { color: var(--accent-blue); }

.desc-empty { color: var(--ink-faint); font-style: italic; }

.desc-editor textarea {
    width: 100%;
    font: inherit;
    line-height: 1.6;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--ink);
    border-radius: var(--radius-md);
    resize: none;
    background: #fff;
}

.desc-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2-5); }

.btn-primary.btn-sm { width: auto; min-height: var(--control-h); padding: 0 var(--space-4); font-size: var(--text-sm); }

.task-comments {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
}

@media (max-width: 900px) {
    .task-body { grid-template-columns: 1fr; }
    .meta-grid { grid-template-columns: 1fr; }
    .overlay { padding: var(--space-2) var(--space-2) 0; }
    .overlay-panel { padding: var(--space-4) var(--space-4) var(--space-6); }
}

/* В standalone PWA панель задачи должна начинаться ниже статус-бара. */
@media (max-width: 900px) and (display-mode: standalone) {
    .overlay { padding-top: calc(env(safe-area-inset-top) + var(--space-2)); }
    .overlay-panel.task-panel {
        padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    }
    body.task-overlay-open { background: var(--paper); }
}

/* Индикатор ручного обновления для мобильного PWA. */
.pull-refresh {
    --pull-progress: 0;
    position: fixed;
    top: calc(env(safe-area-inset-top) + 7px);
    left: 50%;
    z-index: var(--z-refresh);
    min-width: 174px;
    padding: var(--space-1-5) var(--space-3) var(--space-2);
    border: 1px solid var(--ink-panel-line);
    border-radius: var(--radius-lg);
    background: var(--ink-panel);
    color: #e8eaf2;
    box-shadow: 0 8px 24px -10px rgba(20, 22, 30, .65);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -58px);
    transition: opacity .12s, transform .12s;
}

.pull-refresh.is-visible { opacity: 1; }
.pull-refresh-label { display: block; }
.pull-refresh-bar {
    display: block;
    height: 3px;
    margin-top: var(--space-1-5);
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: var(--ink-panel-line);
}
.pull-refresh-bar::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--signal);
    transform: scaleX(var(--pull-progress));
    transform-origin: left center;
}
.pull-refresh.is-loading .pull-refresh-bar::after {
    animation: pull-refresh-loading .75s ease-in-out infinite alternate;
}

@keyframes pull-refresh-loading {
    from { transform: scaleX(.28); }
    to { transform: scaleX(1); }
}

@media (min-width: 641px) {
    .pull-refresh { display: none; }
}

/* ============================================================
   Модалка быстрого создания
   ============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(20, 22, 30, .45);
    display: grid;
    place-items: center;
    padding: var(--space-5);
    animation: fade-in .15s both;
}

.modal {
    width: 100%;
    max-width: 460px;
    background: var(--paper-raised);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-modal);
    animation: card-in .25s cubic-bezier(.2,.9,.3,1) both;
}

.modal h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }

/* диалог подтверждения и всплывающие уведомления (ui/dialog.js) */
.dialog-backdrop { z-index: var(--z-dialog); }
.dialog { max-width: 420px; }
.dialog-text { color: var(--ink-soft); line-height: 1.5; margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.btn-primary.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.toast-stack {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(440px, calc(100vw - var(--space-5) * 2));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg, var(--radius-md));
    background: var(--ink);
    color: var(--paper-raised);
    box-shadow: var(--shadow-modal);
    font-size: var(--text-sm);
    line-height: 1.4;
    pointer-events: auto;
    animation: card-in .25s cubic-bezier(.2,.9,.3,1) both;
}
.toast.is-error { border-left: 4px solid var(--signal); }
.toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-x { flex: none; background: transparent; border: 0; color: inherit; opacity: .7; font-size: var(--text-lg); line-height: 1; cursor: pointer; }
.toast-x:hover { opacity: 1; }
@media (max-width: 640px) { .toast-stack { bottom: calc(var(--space-5) + 64px); } } /* над нижней панелью */

.quick-add textarea, .quick-add input[type="text"] {
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    background: var(--control-bg);
    margin-bottom: var(--space-2-5);
    font-size: var(--text-md);
    resize: none;
    transition: border-color .15s, box-shadow .15s;
}

.quick-add input[type="text"] { height: var(--control-h-lg); padding-block: 0; }

.quick-add textarea:focus, .quick-add input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: var(--focus-ring);
}

.quick-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.quick-row select,
.quick-row .select-trigger { flex: 1; min-width: 120px; }

.quick-actions { display: flex; gap: var(--space-2); }

/* ============================================================
   Этап 2: комментарии, файлы, участники, push
   ============================================================ */

/* --- комментарии --- */

.comments-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
    max-height: 55vh;
    padding-right: var(--space-1);
}

/* анимация появления — только у реально новых, не при каждой перерисовке ленты */
.comment-appear { animation: card-in .25s both; }

/* описание редактирует коллега — поле под локом */
.desc-lock {
    font-size: var(--text-xs);
    color: var(--accent-amber);
    border: 1px dashed currentColor;
    border-radius: var(--radius-sm);
    padding: var(--space-0-5) var(--space-2);
    white-space: nowrap;
}

/* пришёл live-опросом, пока карточка открыта: короткая подсветка «новый» */
/* «Новое» как в мессенджерах: разделитель + красное свечение у непросмотренных */
.comments-new-divider {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: opacity .6s;
}
.comments-new-divider::before,
.comments-new-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--signal);
    opacity: .5;
}
.comments-new-divider.is-fading { opacity: 0; }

.comment-text { transition: box-shadow .8s, border-color .8s; }
.comment-unread .comment-text {
    border-color: var(--signal);
    box-shadow: 0 0 0 1px var(--signal), 0 0 14px -2px color-mix(in srgb, var(--signal) 55%, transparent);
}
.comment-system { transition: color .8s; }

/* история изменений в карточке задачи и окне проекта (features/task-history.js) */
.history-meta { font-size: var(--text-xs); color: var(--ink-soft); margin-bottom: var(--space-2); }
.history-item strong { font-style: normal; font-weight: 600; color: var(--ink-soft); }
.project-history-modal { max-width: 560px; }
.feed-item[data-archived] { cursor: default; } /* задачу в архиве из ленты не открыть */
.project-history-modal .history-list { max-height: 70vh; overflow-y: auto; }

/* было / стало у правки текста (версии текстов): ссылка «Показать изменения» и блоки версий */
.history-diff-toggle {
    border: none;
    background: none;
    padding: 0;
    margin-left: var(--space-1-5);
    font: inherit;
    font-style: normal;
    color: var(--accent-blue);
    cursor: pointer;
}
.history-diff-toggle:hover { text-decoration: underline; }
.history-diff { font-style: normal; margin: var(--space-2) 0 var(--space-1); }
.history-diff-field { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.history-diff-field + .history-diff-field { margin-top: var(--space-3); }
.history-diff-label {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ink-faint);
}
.history-version { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1-5); }
.history-version-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.history-version-title { font-weight: 600; color: var(--ink-soft); }
.history-version-who { color: var(--ink-faint); }
.history-version-text {
    align-self: stretch;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
}
.history-version-text.is-secret { border-left: 3px solid var(--accent-amber); }
.history-version-text a { color: var(--accent-blue); }
.comment-system.comment-unread { color: var(--signal); }

.comments-new-pill {
    position: sticky;
    bottom: 4px;
    align-self: center;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--signal);
    color: #fff;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(25, 28, 38, .45);
}

.comment-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
}

.comment-head time { color: var(--ink-faint); font-size: var(--text-xs); }

.comment-head .card-assignee { width: 22px; height: 22px; font-size: var(--text-3xs); }

.draft-mark {
    font-size: var(--text-2xs);
    color: var(--accent-amber);
    border: 1px solid currentColor;
    border-radius: var(--radius-xs);
    padding: 1px var(--space-1-5);
    font-style: normal;
}

.comment-text {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--text-md);
}

.comment-text a { color: var(--accent-blue); }

.comment-system {
    font-size: var(--text-xs);
    color: var(--ink-faint);
    font-style: italic;
    padding-left: var(--space-1);
}

.comment-edit-btn {
    border: none;
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
    padding: var(--space-0-5);
    display: inline-flex;
    margin-left: auto;
}

.comment-edit-btn:hover { color: var(--ink); }

.comment-actions {
    margin-left: auto;
    display: inline-flex;
    gap: var(--space-0-5);
}
.comment-actions .comment-edit-btn { margin-left: 0; }
.comment-delete-btn:hover { color: var(--signal); }

.comment-edit-textarea {
    width: 100%;
    min-height: 70px;
    border: 1px solid var(--paper-line);
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-md);
    line-height: 1.55;
    font-family: inherit;
    resize: none;
}

.comment-edit-actions { display: flex; gap: var(--space-2); margin-top: var(--space-1-5); }

.comment-system time { margin-left: var(--space-1-5); font-size: var(--text-2xs); }

.comment-form { display: flex; flex-direction: column; flex-shrink: 0; gap: var(--space-2); margin-top: var(--space-2-5); }

.comment-form textarea {
    width: 100%;
    max-height: 30vh; /* длинный текст не вытесняет ленту и кнопку «Отправить» */
    font: inherit;
    font-size: var(--text-md);
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    resize: none;
    background: #fff;
}

.comment-form textarea:focus { outline: none; border-color: var(--ink); }

/* «Борис печатает…» над полем ввода (features/comments.js) */
.comments-typing {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    min-width: 0;
    font-size: var(--text-xs);
    color: var(--ink-soft);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comments-typing[hidden] { display: none; }
.typing-dots { display: inline-flex; gap: var(--space-0-5); flex: none; }
.typing-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ink-faint);
    animation: typing-dot 1.2s ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    .typing-dots i { animation: none; opacity: .7; }
}

/* --- файлы --- */

.file-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.file-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2-5);
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: var(--text-sm);
    max-width: 240px;
    transition: border-color .15s;
}

.file-item:hover { border-color: var(--ink-faint); }

.file-item.is-image { padding: var(--space-1); flex-direction: column; align-items: flex-start; }

.file-item.is-image img {
    width: 130px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    display: block;
}

.file-item.is-image .file-name, .file-item.is-image .file-size { padding: 0 var(--space-1); }

.file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.file-size { color: var(--ink-faint); font-size: var(--text-2xs); flex: none; }

.attach-zone { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }

.attach-list { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-xs);
    background: rgba(25,28,38,.06);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2-5);
}

.file-chip.uploading { opacity: .55; }
.file-chip.chip-error { background: var(--signal-soft); color: var(--danger); }

.file-chip.has-thumb { padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1); }
.file-chip.has-thumb img {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex: none;
}
.file-chip-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-x {
    border: none;
    background: none;
    color: var(--ink-faint);
    font-size: var(--text-md);
    line-height: 1;
    padding: 0 var(--space-0-5);
}

.chip-x:hover { color: var(--signal); }

/* --- участники --- */

.watchers-block { margin-bottom: var(--space-5); }

.watchers-block h2 { font-size: var(--text-body); font-weight: 700; margin-bottom: var(--space-2); }

.watcher-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: center; }

.watcher-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    font-size: var(--text-sm);
}

.watcher-chip .card-assignee { width: 24px; height: 24px; }

.watcher-chip em {
    font-style: normal;
    color: var(--ink-faint);
    font-size: var(--text-2xs);
}

.watcher-chip svg { color: var(--ink-faint); }

/* --- бейдж mute в шапке --- */

.muted-badge { color: var(--ink-faint); display: inline-flex; }

/* --- кто открывал задачу и прочитал комментарий (features/views.js) --- */

.task-views, .comment-views { display: inline-flex; }
.task-views:empty, .comment-views:empty, .task-views-menu { display: none; }

.views-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: none;
    background: none;
    padding: var(--space-0-5) var(--space-1);
    border-radius: var(--radius-sm);
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    cursor: pointer;
}
.views-badge svg { width: 14px; height: 14px; }
.views-badge:hover { color: var(--ink); background: var(--paper-line); }

.nav-item.push-on { color: var(--accent-green); }

/* --- лайтбокс --- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    background: rgba(10, 11, 16, .88);
    display: grid;
    place-items: center;
    padding: var(--space-8);
    cursor: zoom-out;
    animation: fade-in .15s both;
}

.lightbox img {
    /* не %-от-родителя: внутри grid с place-items:center строка тянется по
       контенту, поэтому max-height:100% мог не иметь однозначной базы для
       расчёта и не ограничивал реально большие скриншоты (не помещались,
       низ уезжал за экран). Считаем прямо от вьюпорта, минус padding контейнера. */
    max-width: calc(100vw - 60px);
    max-height: calc(100vh - 60px);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 80px rgba(0,0,0,.6);
}

/* --- секция файлов задачи --- */

.task-files { margin-top: var(--space-5); }

.task-files .desc-head { justify-content: flex-start; gap: var(--space-3); }

/* --- шаблоны в быстрой форме --- */

.template-select { width: 100%; margin-bottom: var(--space-2-5); }

.quick-add h2 { display: flex; align-items: center; gap: var(--space-2); }

/* ============================================================
   Правки по фидбеку: карточка 30/70, скролл доски, завершение
   ============================================================ */

/* --- разметка карточки: описание слева, комментарии справа, между ними сплиттер --- */

.task-body { display: flex; align-items: stretch; }

.task-main { flex: 1; min-width: 300px; }

.task-splitter {
    width: 14px;
    margin: 0 var(--space-1-5);
    cursor: col-resize;
    position: relative;
    flex: none;
}

.task-splitter::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--paper-line);
    transition: background .15s;
}

.task-splitter:hover::before { background: var(--ink-faint); }

body.resizing { cursor: col-resize; user-select: none; }

.task-comments {
    flex: none;
    min-width: 300px;
}

/* --- мета: значения-текст, редактирование по клику --- */

.meta-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1-5);
    min-height: 30px;
}

.person-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}

.person-chip .card-assignee { width: 24px; height: 24px; font-size: var(--text-3xs); }
.person-chip .chip-x { opacity: 0; transition: opacity .12s; }
.person-chip:hover .chip-x { opacity: 1; }
.person-chip svg { color: var(--ink-faint); width: 13px; }

.meta-value.editable {
    border: none;
    background: none;
    padding: var(--space-0-5) var(--space-1);
    margin-left: -4px;
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--text-md);
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    text-align: left;
}

.meta-value.editable:hover { background: rgba(25,28,38,.06); }

.meta-edit-btn, .meta-add-btn {
    width: 24px;
    height: 24px;
    border: 1px dashed var(--paper-line);
    border-radius: 50%;
    background: none;
    color: var(--ink-faint);
    font-size: var(--text-sm);
    line-height: 1;
    opacity: .55;
    transition: all .15s;
}

.meta-edit-btn:hover, .meta-add-btn:hover {
    opacity: 1;
    border-color: var(--ink-faint);
    color: var(--ink);
}

/* --- стадия: селект в цвете стадии, порядок как на доске --- */

.stage-select {
    padding: var(--space-1-5) var(--space-2-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--stage-color) 65%, transparent);
    background: color-mix(in srgb, var(--stage-color) 26%, #fff);
}

/* --- завершение задачи --- */

.btn-complete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    min-height: var(--control-h);
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent-green);
    color: #fff;
    font-weight: 600;
    font-size: var(--text-sm);
    transition: filter .15s, transform .12s;
}

.btn-complete:hover { filter: brightness(1.08); }
.btn-complete:active { transform: scale(.97); }

.done-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--accent-green) 15%, transparent);
    color: var(--accent-green);
}

.card-completed { opacity: .62; }
.card-completed .card-title { text-decoration: line-through; text-decoration-color: var(--ink-faint); }

.task-done .task-title { color: var(--ink-faint); }

.warn-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    background: #f7ecd4;
    color: #8a6011;
    border: 1px solid #ecd9a8;
    border-radius: var(--radius-lg);
    padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

/* --- подзадачи --- */

.parent-line {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-sm);
    color: var(--ink-faint);
    margin-bottom: var(--space-2-5);
}

.parent-line a { color: var(--accent-blue); text-decoration: none; }
.parent-line a:hover { text-decoration: underline; }
.parent-line svg { color: var(--ink-faint); }

.subtasks-block { margin-top: var(--space-5); }

.subtasks-block .desc-head { justify-content: flex-start; gap: var(--space-2-5); }

.subtask-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.subtask-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.subtask-list a { color: var(--ink); text-decoration: none; flex: 1; }
.subtask-list a:hover { color: var(--accent-blue); }
.subtask-list li svg { color: var(--accent-green); flex: none; }
.subtask-list li .card-assignee { width: 22px; height: 22px; font-size: var(--text-3xs); }
.subtask-list li.sub-done a { text-decoration: line-through; color: var(--ink-faint); }

.card-subtasks {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--ink-faint);
}

/* непрочитанные комментарии на карточке доски (этап 5) */
.card-unread {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--signal);
}

/* --- прокрутка доски --- */

.board-scroll-area {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    overflow: hidden;
}

.board-columns {
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow-y: hidden;
}

.board-columns.grabbing { cursor: grabbing; user-select: none; }

.board-col { display: flex; flex-direction: column; max-height: 100%; }

.col-cards { overflow-y: auto; }

.board-scroll-btn {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: var(--z-sticky);
    width: 38px;
    height: 64px;
    border: 1px solid var(--paper-line);
    background: var(--paper-raised);
    color: var(--ink-soft);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px -6px rgba(25,28,38,.35);
    transition: all .15s;
}

.board-scroll-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.board-scroll-btn.left { left: 6px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.board-scroll-btn.right { right: 6px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

.hide-narrow { display: inline; }

@media (max-width: 900px) {
    .task-body { flex-direction: column; }
    .task-splitter { display: none; }
    .task-comments { width: 100% !important; }
    .hide-narrow { display: none; }
}

/* ============================================================
   Правки: внутренние скроллы карточки, мета-список, пикеры
   ============================================================ */

/* --- оверлей задачи: модалка фиксированной высоты, скроллы внутри колонок --- */

.overlay-panel.task-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.task-panel .task-body {
    flex: 1;
    min-height: 0;
}

.task-panel .task-main {
    overflow-y: auto;
    padding-right: var(--space-1);
    padding-bottom: var(--space-5);
}

.task-panel .task-comments {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: var(--space-1);
}

.task-panel .comments-list {
    flex: 1;
    min-height: 96px;
    max-height: none;
    overflow-y: auto;
}

/* --- сплиттер: компактнее --- */

.task-splitter { width: 9px; margin: 0; }
.task-splitter::before { left: 3.5px; }

/* --- мета одним столбцом (как в Битриксе): метка слева, значение справа --- */

.meta-list {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-1-5) var(--space-4);
    margin: var(--space-5) 0;
}

.meta-row {
    display: grid;
    grid-template-columns: 128px 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1-5) 0;
    min-height: 38px;
}

.meta-label {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-faint);
}

.meta-val {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    font-size: var(--text-md);
}

.meta-sep {
    height: 1px;
    background: var(--paper-line);
    margin: var(--space-0-5) -16px;
}

.meta-clickable {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    border: none;
    background: none;
    padding: var(--space-1) var(--space-2);
    margin-left: -8px;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-md);
    color: var(--ink);
    cursor: pointer;
    transition: background .15s;
}

.meta-clickable:hover { background: rgba(25,28,38,.06); }
.meta-clickable svg { color: var(--ink-faint); }

/* --- стадия-таблетка в цвете стадии --- */

.stage-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: none;
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    color: color-mix(in srgb, var(--stage-color) 60%, var(--ink));
    background: color-mix(in srgb, var(--stage-color) 20%, #fff);
    border: 1px solid color-mix(in srgb, var(--stage-color) 45%, transparent);
    transition: filter .15s;
}

.stage-pill:hover { filter: brightness(.97); }
.stage-pill svg { opacity: .6; }

/* --- попап-пикер --- */

.picker-pop {
    position: fixed;
    z-index: var(--z-picker);
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 50px -12px rgba(25,28,38,.35);
    padding: var(--space-2);
    animation: card-in .15s cubic-bezier(.2,.9,.3,1) both;
}

.picker-search {
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--control-px);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-1-5);
    font: inherit;
    font-size: var(--text-sm);
}

.picker-search:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus-ring); }

.picker-list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.picker-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    border: none;
    background: none;
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--ink);
    text-align: left;
    transition: background .12s;
}

.picker-item:hover { background: rgba(25,28,38,.05); }
.picker-item:focus { outline: none; }
.picker-item:focus-visible { background: rgba(25,28,38,.08); box-shadow: inset 0 0 0 1px var(--ink-faint); }
.picker-item:disabled { opacity: .45; cursor: default; }
.picker-item.current { background: rgba(61,107,255,.08); }

.picker-item-body {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.picker-person {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    line-height: 1.25;
}
.picker-person > span,
.picker-person small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.picker-person small { color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 400; }
.picker-indent { flex: none; width: var(--space-4); } /* подпроект — под родителем */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.picker-check { color: var(--accent-blue); flex: none; }

.picker-empty-opt { color: var(--ink-faint); font-style: italic; }

/* --- подсказка (ui/tooltip.js): вместо системной по title; место считает Floating UI --- */

.tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-tooltip);
    max-width: 280px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--paper-raised);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.35;
    white-space: pre-line;
    overflow-wrap: anywhere;
    pointer-events: none;
    box-shadow: 0 6px 18px -8px rgba(20, 22, 30, .5);
    opacity: 0;
    transition: opacity .12s;
}
.tooltip.is-shown { opacity: 1; }

/* --- общий поиск (⌘K, features/search.js): окно справа от сайдбара, на телефоне — сверху --- */

.search-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet-backdrop);
}

.search-pop {
    position: fixed;
    z-index: var(--z-sheet);
    top: var(--search-top, var(--space-3)); /* вровень с кнопкой поиска (ставит JS) */
    left: calc(var(--panel-w) + var(--space-2));
    width: min(520px, calc(100vw - var(--panel-w) - var(--space-6)));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    animation: card-in .15s cubic-bezier(.2,.9,.3,1) both;
}

.search-field {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-1-5) var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--paper-line);
    color: var(--ink-faint);
}
.search-field > svg { flex: none; width: 18px; height: 18px; }

.search-input {
    flex: 1;
    min-width: 0;
    height: var(--control-h-lg);
    border: none;
    background: none;
    outline: none;
    font: inherit;
    font-size: var(--text-md);
    color: var(--ink);
    appearance: none;
}
.search-input::placeholder { color: var(--ink-faint); }
.search-input::-webkit-search-cancel-button { display: none; }

.search-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-1) var(--space-2) var(--space-2);
}

.search-section + .search-section { margin-top: var(--space-1); }

.search-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.search-clear {
    flex: none;
    border: none;
    background: none;
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    cursor: pointer;
}
.search-clear:hover { color: var(--ink); background: rgba(25,28,38,.05); }

.search-section-title {
    padding: var(--space-2) var(--space-2-5) var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.search-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    width: 100%;
    border: none;
    background: none;
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.search-row:focus { outline: none; }
.search-row.is-active { background: rgba(25,28,38,.06); }

.search-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}
.search-item-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item.is-done .search-item-title { color: var(--ink-soft); }
.search-parent { color: var(--ink-faint); font-weight: 400; }
.search-item-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--ink-soft);
    line-height: 1.4;
}
.search-item-sub {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--text-2xs);
    color: var(--ink-faint);
}
.search-item-sub .proj-pills { min-width: 0; }
.search-sub-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.search-num { flex: none; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); }
.search-flag {
    flex: none;
    padding: 0 var(--space-1);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.search-item-icon { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-faint); }
.search-item-icon svg { width: 16px; height: 16px; }
.search-item-icon.is-secret { color: var(--accent-amber); }
.search-item .project-logo.search-logo { width: 24px; height: 24px; border-radius: var(--radius-sm); font-size: var(--text-2xs); }

.search-more {
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: var(--space-1-5) var(--space-2-5);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--accent-blue);
    text-align: left;
    cursor: pointer;
}

.search-empty { padding: var(--space-4) var(--space-2-5); color: var(--ink-faint); font-size: var(--text-sm); line-height: 1.45; }
.search-hint { padding: var(--space-1) var(--space-2-5); color: var(--ink-faint); font-size: var(--text-xs); }

.search-pop mark { background: rgba(232, 80, 31, .2); color: inherit; border-radius: var(--radius-xs); }

/* найденное в оверлее (комментарий, запись проекта) — ненадолго обведено */
.search-found { animation: search-found 2.4s ease-out; }
@keyframes search-found {
    0%, 40% { box-shadow: inset 0 0 0 2px var(--signal); } /* внутрь: снаружи её режет край прокручиваемого списка */
    100% { box-shadow: inset 0 0 0 2px transparent; }
}

@keyframes search-drop {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .search-backdrop { background: rgba(20, 22, 30, .38); animation: fade-in .15s both; }
    /* сверху: снизу окно закрыла бы клавиатура; высота — по видимой части экрана (--search-vh из JS) */
    .search-pop {
        top: calc(env(safe-area-inset-top) + var(--space-2));
        left: var(--space-2);
        right: var(--space-2);
        width: auto;
        max-height: min(70dvh, calc(var(--search-vh, 100dvh) - env(safe-area-inset-top) - var(--space-4)));
        border-radius: var(--radius-xl);
        box-shadow: 0 24px 70px -16px rgba(20, 22, 30, .58);
        animation: search-drop .2s cubic-bezier(.2,.9,.3,1) both;
    }
    .search-item { min-height: 44px; }
    .search-more { min-height: 40px; }
}

.stage-swatch {
    width: 22px;
    height: 13px;
    border-radius: var(--radius-xs) var(--radius-sm) var(--radius-sm) var(--radius-xs);
    flex: none;
}

.proj-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
}

/* --- кнопки прокрутки доски: во всю высоту, вплотную к краям --- */

.board-scroll-btn {
    top: 0;
    bottom: 0;
    height: auto;
    translate: none;
    width: 34px;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    background: color-mix(in srgb, var(--paper-raised) 82%, transparent);
    backdrop-filter: blur(2px);
    box-shadow: none;
}

.board-scroll-btn.left { left: 0; border-left: none; }
.board-scroll-btn.right { right: 0; border-right: none; }
.board-scroll-btn:hover { background: var(--paper-raised); }

@media (max-width: 900px) {
    .overlay-panel.task-panel {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding-top: 0;
    }
    /* шапка с кнопками закреплена: закрыть задачу можно с любого места, не мотая вверх;
       фон и вылет на поля панели (--space-4) закрывают текст, уходящий под неё */
    .task-head {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        align-items: flex-start;
        min-height: 36px;
        gap: var(--space-1-5);
        margin: 0 calc(-1 * var(--space-4)) var(--space-3);
        padding: var(--space-4) calc(var(--space-4) + var(--space-10)) var(--space-2) var(--space-4);
        background: var(--paper);
        border-bottom: 1px solid var(--paper-line);
    }
    .task-head > .proj-tag,
    .task-head > .proj-pills { display: none; }
    .task-head .topbar-spacer { display: none; }
    .task-head .task-num { align-self: center; font-size: var(--text-2xs); }
    .task-head > .prio-badge,
    .task-head > .done-badge,
    .task-head > .muted-badge,
    .task-head > .task-views { align-self: center; }
    .task-head > .done-badge {
        padding: var(--space-1) var(--space-1-5);
        font-size: 0;
        letter-spacing: 0;
    }
    .task-head > .btn-complete,
    .task-head > #t-reopen { margin-left: auto; }
    .task-head > #t-reopen {
        padding: var(--space-1-5) var(--space-2);
        font-size: var(--text-xs);
    }
    .task-head #t-close {
        position: absolute;
        top: var(--space-4);
        right: var(--space-4);
        z-index: var(--z-local);
    }
    .task-head .task-more {
        display: inline-grid;
        place-items: center;
        align-self: flex-start;
        min-width: 34px;
        height: 34px;
        padding: 0;
    }
    .task-secondary-actions {
        position: absolute;
        top: calc(var(--space-4) + 40px);
        right: calc(var(--space-4) + 40px);
        z-index: var(--z-local-pop);
        display: none;
        width: min(224px, calc(100vw - 48px));
        padding: var(--space-1-5);
        border: 1px solid var(--paper-line);
        border-radius: var(--radius-lg);
        background: var(--paper-raised);
        box-shadow: var(--shadow-pop);
    }
    .task-secondary-actions.is-open { display: flex; flex-direction: column; }
    .task-secondary-actions .btn-ghost {
        width: 100%;
        min-height: 40px;
        justify-content: flex-start;
        border-color: transparent;
        background: transparent;
    }
    .task-secondary-actions .hide-narrow,
    .task-secondary-actions .task-menu-only { display: inline; }
    .task-secondary-actions #t-archive { color: var(--danger); }
    /* в шапке места нет — «кто открывал» пунктом меню «⋯» */
    .task-head > .task-views { display: none; }
    .task-secondary-actions .task-views-menu { display: contents; }
    .task-title {
        margin-bottom: var(--space-3);
        font-size: var(--text-2xl);
        line-height: 1.25;
        letter-spacing: -.25px;
    }
    .task-files,
    .subtasks-block { margin-top: var(--space-4); }
    .task-panel .task-main { overflow-y: visible; padding-right: 0; }
    .task-panel .task-comments { overflow: visible; }
    .task-panel .comments-list { max-height: 50vh; }
    .meta-row { grid-template-columns: 105px 1fr; }

    .task-files > .file-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1-5);
    }

    .task-files > .file-list .file-item {
        width: 100%;
        max-width: none;
        min-height: 46px;
        padding: var(--space-1-5) var(--space-2);
    }

    .task-files > .file-list .file-item.is-image {
        flex-direction: row;
        align-items: center;
        padding: var(--space-1) var(--space-2);
    }

    .task-files > .file-list .file-item.is-image img {
        width: 64px;
        height: 48px;
        flex: none;
    }

    .task-files > .file-list .file-item.is-image .file-name,
    .task-files > .file-list .file-item.is-image .file-size {
        padding: 0;
    }

    .task-files > .file-list .file-name {
        max-width: none;
        min-width: 0;
        flex: 1;
    }
}

/* ============================================================
   Правки: сплиттер уже, стрелки доски не перекрывают колонки
   ============================================================ */

.task-splitter { width: 7px; margin: 0; }
.task-splitter::before { left: 2.5px; }

/* колонки получают боковой отступ под стрелки — в крайних положениях
   стрелка стоит на отступе, а не на колонке */
.board-columns { padding-left: var(--space-8); padding-right: var(--space-8); }

.board-scroll-btn {
    width: 36px;
    border: none;
    background: linear-gradient(to right, var(--paper) 45%, transparent);
    backdrop-filter: none;
    color: var(--ink-soft);
}

.board-scroll-btn.right {
    background: linear-gradient(to left, var(--paper) 45%, transparent);
}

.board-scroll-btn:hover { color: var(--ink); background-color: transparent; }

/* На телефоне стадии листаются обычным горизонтальным свайпом. Стрелки и
   зарезервированные под них поля только уменьшают полезную ширину доски. */
@media (max-width: 640px) {
    .board-scroll-btn { display: none; }
    .board-columns {
        padding: var(--space-3) var(--space-3) var(--space-1);
    }
    .board-col { height: calc(100% - 6px); }
}

/* ============================================================
   Этап 3: проекты и лента проекта
   ============================================================ */

.projects-grid {
    padding: var(--space-5) var(--space-6);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
    align-content: start;
    overflow-y: auto;
}

.project-card {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    transition: box-shadow .15s, translate .15s, border-color .15s;
    animation: card-in .3s cubic-bezier(.2,.9,.3,1) both;
}

.project-card:hover {
    border-color: #c9c4b4;
    box-shadow: 0 8px 22px -10px rgba(25,28,38,.28);
    translate: 0 -1px;
}

.project-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
}

.project-card-head h3 { font-size: var(--text-body); flex: 1; }

.project-logo {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--tag-ink, #fff);
    background: var(--tag);
}

/* аватарка проекта вместо буквы на цвете */
.project-logo.has-avatar { overflow: hidden; background: var(--paper-line); }
.project-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-logo-lg { width: var(--space-12); height: var(--space-12); font-size: var(--text-2xl); }

/* форма: картинка проекта и предупреждение о тяжёлой картинке */
.project-look { display: flex; align-items: center; gap: var(--space-2); }
.project-look .project-logo { margin-right: var(--space-1); }
.project-look-notice {
    margin-top: var(--space-2);
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: var(--text-sm);
}
.project-look-notice-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.project-look-notice small { display: block; margin-top: var(--space-1-5); color: var(--ink-faint); font-size: var(--text-xs); }

/* подсказка под полем формы */
.field-hint { margin-top: var(--space-1-5); color: var(--ink-faint); font-size: var(--text-xs); }

.pin-btn { color: var(--ink-faint); }
.pin-btn.pinned { color: var(--accent-amber); }

.project-desc {
    margin-top: var(--space-2-5);
    font-size: var(--text-sm);
    color: var(--ink-soft);
    line-height: 1.5;
}

.project-card-foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--ink-faint);
}

.cred-hint { display: inline-flex; align-items: center; gap: var(--space-1); }

/* подпроекты в карточке родителя (список проектов) — строками */
.project-subs { list-style: none; margin-top: var(--space-3); border-top: 1px solid var(--paper-line); }
.project-sub {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-1);
    border-bottom: 1px solid var(--paper-line);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}
.project-sub:hover { background: rgba(25,28,38,.04); }
.project-sub-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-sub .cred-hint { color: var(--accent-amber); }
.project-sub .tasks-link { font-family: var(--font-mono); font-size: var(--text-2xs); }

/* --- лента проекта --- */

.project-title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.3px; }
.project-title-wrap { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.project-crumb { font-size: var(--text-xs); color: var(--ink-soft); text-decoration: none; }
.project-crumb:hover { color: var(--accent-blue); }
.project-props { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--ink-soft); }
.project-props a { color: var(--accent-blue); text-decoration: none; }
.project-props a:hover { text-decoration: underline; }
.project-move-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* подпроекты на странице родителя — карточками */
.project-subprojects { margin-bottom: var(--space-5); }
.subproject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2-5); }
.subproject-card {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-3);
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--proj);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}
.subproject-card:hover { box-shadow: 0 8px 22px -10px rgba(25,28,38,.28); }
.subproject-card .project-logo { width: 32px; height: 32px; }
.subproject-card-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.subproject-card-body h3 { font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subproject-card-meta { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); }
.project-secondary-actions { display: contents; }
.project-more { display: none; }
.project-menu-label { display: none; }

.project-feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-1-5) var(--space-1) var(--space-6) 0;
    max-width: 860px;
}

.entry-group-label {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ink-faint);
    margin: var(--space-5) 0 var(--space-2-5);
}

.entry {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2-5);
    animation: card-in .25s both;
}

.entry-cred { border-left: 3px solid var(--accent-amber); }

.entry-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.entry-head h3 { font-size: var(--text-md); }

.entry-lock { color: var(--accent-amber); display: inline-flex; }
.entry-pin { color: var(--accent-amber); display: inline-flex; }

.entry-meta { font-size: var(--text-xs); color: var(--ink-faint); }

.entry-head .btn-icon { opacity: 0; transition: opacity .12s; }
.entry:hover .entry-head .btn-icon { opacity: 1; }

.entry-content {
    margin-top: var(--space-2);
    line-height: 1.6;
    font-size: var(--text-md);
    white-space: pre-wrap;
    word-break: break-word;
}

.entry-content a { color: var(--accent-blue); }
/* доступ скрыт, пока не нажали «Показать» (каждый показ — в журнал) */
.entry-hidden { color: var(--ink-faint); letter-spacing: 2px; }
.entry-reveal { margin-top: var(--space-2); }

.entry-form {
    background: var(--paper-raised);
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.entry-form input[type=text], .entry-form textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: #fff;
    font: inherit;
    font-size: var(--text-md);
    resize: none;
}

.entry-form input:focus, .entry-form textarea:focus { outline: none; border-color: var(--ink); }

.entry-form-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ссылка «N акт. задач →» на доску с фильтром по проекту */
.tasks-link {
    border: none;
    background: none;
    padding: var(--space-0-5) var(--space-1);
    margin-left: -4px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--ink-faint);
    cursor: pointer;
    transition: color .15s, background .15s;
}

.tasks-link:hover { color: var(--accent-blue); background: rgba(61,107,255,.07); }

.task-head .tasks-link { font-size: var(--text-xs); }

/* ============================================================
   Этап 4: админка и лента активности
   ============================================================ */

.admin-wrap {
    padding: var(--space-5) var(--space-6);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 480px));
    gap: var(--space-4);
    align-content: start;
    align-items: start;
    overflow-y: auto;
}

.admin-wrap-single { grid-template-columns: minmax(340px, 560px); }
.admin-wrap-list { grid-template-columns: minmax(0, 960px); }  /* списки строк: имя и кнопки не разъезжаются */

.admin-tabbar {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-6) 0;
    flex: none; /* с overflow элемент колонки иначе сжимается до нуля */
    overflow-x: auto; /* на узком экране вкладки не переносятся, а прокручиваются */
    scrollbar-width: none;
}
.admin-tabbar::-webkit-scrollbar { display: none; }

.admin-tab {
    flex: none;
    white-space: nowrap;
    border: none;
    background: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--ink-faint);
    cursor: pointer;
}

.admin-tab:hover { color: var(--ink); }

.admin-tab.active {
    color: var(--ink);
    background: var(--paper-raised);
    font-weight: 600;
}

.admin-card {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.admin-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-1-5); }

.admin-hint { font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: var(--space-3); line-height: 1.5; }

/* вкладка «Система»: строки «точка статуса — подпись — значение» и полоса занятого диска */
.sys-rows { list-style: none; display: flex; flex-direction: column; }

.sys-row {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: baseline;
    gap: var(--space-2-5);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--paper-line);
    font-size: var(--text-sm);
}

.sys-row:first-child { border-top: none; }
.sys-label { min-width: 0; }
.sys-label small { display: block; font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--space-0-5); }
.sys-value { text-align: right; font-weight: 600; white-space: nowrap; }
.sys-value code { font-family: var(--font-mono); font-weight: 500; }

.sys-dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.sys-dot.is-ok { background: var(--accent-green); }
.sys-dot.is-warn { background: var(--accent-amber); }
.sys-dot.is-error { background: var(--signal); }
.sys-dot.is-off { background: var(--paper-line); }

.sys-bar { height: 8px; border-radius: var(--radius-xs); background: var(--paper-line); overflow: hidden; margin-bottom: var(--space-2-5); }
.sys-bar span { display: block; height: 100%; background: var(--accent-green); }
.sys-bar.is-warn span { background: var(--accent-amber); }
.sys-bar.is-error span { background: var(--signal); }

.adm-stages, .adm-fields { list-style: none; display: flex; flex-direction: column; gap: var(--space-1-5); }

.adm-stages li, .adm-fields li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: #fff;
}

.drag-handle { cursor: grab; color: var(--ink-faint); font-size: var(--text-body); padding: 0 var(--space-0-5); }

.adm-stages input[type=color] {
    width: 30px;
    height: 26px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.adm-stages input[type=text] {
    flex: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    font-size: var(--text-md);
}

.adm-stages input[type=text]:hover { border-color: var(--paper-line); }
.adm-stages input[type=text]:focus { outline: none; border-color: var(--ink); background: #fff; }

.adm-fields li { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.adm-options { color: var(--ink-faint); font-size: var(--text-xs); }
/* подписи поля переносятся внутри своего блока, кнопка справа не сжимается */
.adm-field-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: var(--space-0-5); }
.adm-fields li > button { flex: none; }
/* выключенное поле: в задачах не показывается, значения хранятся */
.adm-fields li.adm-field-off { background: var(--paper); }
.adm-field-off strong { color: var(--ink-soft); }
.adm-off-mark {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ink-faint);
    white-space: nowrap;
}

.adm-user-filters {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

/* узко — поиск на всю строку, список групп под ним */
.adm-user-filters .board-search { flex: 1 1 240px; width: auto; min-width: 0; }
.adm-user-filters select,
.adm-user-filters .select-trigger { flex: 1 1 180px; max-width: 280px; }

.adm-users { list-style: none; display: flex; flex-direction: column; gap: var(--space-1-5); }

.adm-users li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1-5) var(--space-2-5);
    padding: var(--space-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: #fff;
}

.adm-role-badge, .adm-users li > .btn-ghost { flex: none; }

.adm-users li.is-inactive { opacity: .55; }
.adm-users li.is-inactive .card-assignee { filter: grayscale(1); }

.adm-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
/* узко — имя на всю строку, бейдж и кнопки строкой ниже */
@media (max-width: 640px) { .adm-user-info { flex-basis: calc(100% - var(--space-10)); } }
.adm-user-info strong { font-size: var(--text-sm); }

.adm-user-groups {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.adm-group-badge {
    width: fit-content;
    font-size: var(--text-2xs);
    line-height: 1.35;
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--radius-pill);
    color: var(--ink-muted);
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
}

.adm-role-badge {
    font-size: var(--text-2xs);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--paper-line);
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.adm-role-badge.is-admin { color: var(--accent-orange, var(--signal)); border-color: currentColor; }
.adm-role-badge.is-online { color: var(--accent-green); border-color: currentColor; }

.employee-roster li { cursor: pointer; transition: border-color .15s; }
.employee-roster li:hover { border-color: var(--ink-faint); }

.employees-body { padding: var(--space-5) var(--space-6); overflow-y: auto; }
.employees-body .adm-user-filters { margin-bottom: var(--space-3); }

/* ---------- присутствие («в сети») — видно только тому, кому включено на бэкенде ---------- */

.avatar-presence { position: relative; display: inline-flex; flex: none; }

.presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-green);
    border: 2px solid #fff;
}

/* ---------- карточка сотрудника (модалка из раздела «Сотрудники») ---------- */

.employee-card { max-width: 420px; }

.employee-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.employee-card-head .card-assignee.lg { width: 44px; height: 44px; font-size: var(--text-lg); }

.employee-card-info { flex: 1; min-width: 0; }
.employee-card-info h2 { margin: 0 0 var(--space-0-5); font-size: var(--text-lg); }
.employee-card-sub { margin: 0; font-size: var(--text-xs); color: var(--ink-faint); }

.employee-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    margin-top: var(--space-1-5);
}

.employee-card-meta {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--paper-line);
}

/* главное действие — строкой на всю ширину, остальные — по два в ряд, все одной высоты;
   оставшаяся без пары кнопка — на всю строку */
.employee-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.employee-card-actions > .btn-signal,
.employee-card-actions > :last-child:nth-child(even) { grid-column: 1 / -1; }

/* ---------- статистика онлайна — модалка с графиком ---------- */

.presence-modal { max-width: 780px; width: 100%; }

.presence-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-4);
}

.presence-period-row, .presence-group-row { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.presence-group-row .chip-toggle { font-size: var(--text-xs); }

.presence-chart-wrap { position: relative; }

.presence-svg { display: block; width: 100%; height: auto; }
.presence-svg-xlabels { height: 20px; margin-top: var(--space-0-5); }

.presence-grid { stroke: var(--paper-line); stroke-width: 1; }

.presence-axis-label {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    fill: var(--ink-faint);
}

.presence-bar { fill: var(--accent-blue); cursor: pointer; transition: fill .1s; }
.presence-bar:hover { fill: var(--ink); }

.presence-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--ink-panel);
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transform: translateY(-100%);
    z-index: var(--z-local-pop);
}

.user-editor { display: flex; flex-direction: column; gap: var(--space-3); }

.user-editor .login-field { margin-bottom: 0; }

.user-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 640px) {
    .user-editor-grid { grid-template-columns: 1fr; }
}

.user-editor-avatar-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); }

.user-editor-actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1); }

.user-editor hr { border: none; border-top: 1px solid var(--paper-line); margin: var(--space-0-5) 0; }

.adm-add {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

.adm-add input[type=text] { flex: 1; min-width: 140px; }
.adm-add input[type=color] { width: 32px; height: var(--control-h); border: none; background: none; padding: 0; cursor: pointer; }

.profile-avatar-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }

.profile-avatar-big {
    width: 64px;
    height: 64px;
    font-size: var(--text-2xl);
    overflow: hidden;
}

.profile-avatar-big.has-avatar { background: none; }
.profile-avatar-big img { width: 100%; height: 100%; object-fit: cover; }

.profile-avatar-actions { display: flex; gap: var(--space-2); }

.adm-thresholds { display: flex; flex-direction: column; gap: var(--space-2-5); align-items: flex-start; }

.adm-thresholds label {
    display: grid;
    grid-template-columns: 140px 90px;
    align-items: center;
    gap: var(--space-2-5);
    font-size: var(--text-md);
}

.adm-thresholds input { width: 100%; }

.adm-saved { color: var(--accent-green); font-size: var(--text-sm); }

/* --- настройки установки (вкладка «Настройки») --- */
.settings-form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); }
.settings-form .login-field { margin: 0; }
.settings-form .meta-people { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-bottom: var(--space-2); }
.settings-form [data-add-user] { align-self: flex-start; }
.setting-readonly { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-soft); }
.settings-actions { display: flex; align-items: center; gap: var(--space-3); }

/* --- группы и персональные права --- */

.access-admin {
    grid-template-columns: minmax(420px, 1.15fr) minmax(340px, .85fr);
    max-width: 1180px;
}

.access-group-list,
.access-user-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.access-group-row {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.2fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    background: #fff;
}

.access-group-row.is-system {
    border-color: rgba(232, 80, 31, .28);
    background: linear-gradient(90deg, rgba(232, 80, 31, .045), #fff 42%);
}

.access-group-row.is-system .access-group-main > strong {
    color: var(--accent-orange, var(--signal));
}

.access-group-row.is-system .access-group-main svg {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
}

.access-group-main,
.access-user-row .adm-user-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
}

.access-group-main strong,
.access-user-row strong { font-size: var(--text-sm); }

.access-member-count {
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    text-transform: uppercase;
    letter-spacing: .35px;
}

.access-permission-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.access-permission-chips span {
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--radius-xs);
    background: rgba(61, 107, 255, .08);
    color: var(--accent-blue);
    font-size: var(--text-3xs);
    line-height: 1.25;
}

.access-permission-chips .is-empty {
    background: var(--paper);
    color: var(--ink-faint);
}

.access-row-actions {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.access-user-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2-5);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: #fff;
}

.access-user-row.is-inactive { opacity: .52; }

.access-editor {
    width: min(680px, calc(100vw - 28px));
    max-height: min(820px, calc(100vh - 28px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.access-editor .login-field { margin-bottom: 0; }

.access-permission-fieldset {
    margin: 0;
    padding: var(--space-2-5);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.access-permission-fieldset legend {
    padding: 0 var(--space-1-5);
    color: var(--ink-faint);
    font-size: var(--text-2xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.access-permission-option,
.access-override-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.access-permission-option:hover { background: var(--paper); }
.access-permission-option input { margin-top: var(--space-0-5); }

.access-permission-option span,
.access-override-row > span {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
    flex: 1;
}

.access-permission-option strong,
.access-override-row strong { font-size: var(--text-sm); }

.access-permission-option small,
.access-override-row small {
    color: var(--ink-faint);
    font-size: var(--text-2xs);
    line-height: 1.4;
}

.access-override-row {
    align-items: center;
    cursor: default;
    border-bottom: 1px solid var(--paper-line);
    border-radius: 0;
}

.access-override-row:last-child { border-bottom: 0; }

.access-override-row select,
.access-override-row .select-trigger {
    min-width: 130px;
    height: var(--control-h-sm);
    font-size: var(--text-xs);
}

.access-admin-note {
    padding: var(--space-2) var(--space-2-5);
    border-left: 3px solid var(--signal);
    background: rgba(232, 80, 31, .06);
    color: var(--ink-soft);
    font-size: var(--text-xs);
    line-height: 1.45;
}

@media (max-width: 900px) {
    .access-admin { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .picker-pop {
        top: auto !important;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 12px !important;
        display: flex;
        width: auto !important;
        max-height: min(62dvh, 520px);
        flex-direction: column;
        padding: var(--space-2-5);
        border-radius: var(--radius-xl);
        box-shadow: 0 24px 70px -16px rgba(20, 22, 30, .58);
    }
    .picker-search {
        flex: none;
        min-height: 42px;
        font-size: var(--text-md);
    }
    .picker-list { max-height: none; min-height: 0; }
    .picker-item {
        min-height: 44px;
        padding: var(--space-2) var(--space-2-5);
        font-size: var(--text-md);
    }
    .picker-pop.picker-pop-anchored {
        top: var(--picker-top, 12px) !important;
        right: auto;
        bottom: auto;
        left: var(--picker-left, 12px) !important;
        display: block;
        width: min(260px, calc(100vw - 24px)) !important;
        max-height: min(55dvh, 360px);
        border-radius: var(--radius-lg);
        box-shadow: 0 16px 38px -14px rgba(20, 22, 30, .48);
    }
    .picker-pop.picker-pop-anchored .picker-list { max-height: min(42dvh, 270px); }

    .project-head {
        min-height: 56px;
        align-items: flex-start;
        padding-right: 76px;
    }
    .project-head .project-logo { width: 32px; height: 32px; border-radius: var(--radius-md); font-size: var(--text-sm); }
    .project-head .project-title {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        font-size: var(--text-xl);
        line-height: 32px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* заголовок с крошкой родителя и адресом сайта — растягивается, «N акт. задач» — под ним */
    .project-head .project-title-wrap { flex: 1; min-width: 0; padding-bottom: var(--space-5); }
    .project-head #pr-tasks {
        position: absolute;
        bottom: 0;
        left: 40px;
        margin: 0;
        font-size: var(--text-2xs);
    }
    .project-head .project-more {
        position: absolute;
        top: 0;
        right: 40px;
        display: inline-grid;
        width: 34px;
        height: 34px;
        place-items: center;
        padding: 0;
    }
    .project-secondary-actions {
        position: absolute;
        top: calc(var(--space-4) + 40px);
        right: calc(var(--space-4) + 40px);
        z-index: var(--z-local-pop);
        display: none;
        width: min(224px, calc(100vw - 48px));
        padding: var(--space-1-5);
        border: 1px solid var(--paper-line);
        border-radius: var(--radius-lg);
        background: var(--paper-raised);
        box-shadow: var(--shadow-pop);
    }
    .project-secondary-actions.is-open { display: flex; flex-direction: column; }
    .project-secondary-actions .btn-ghost {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        border-color: transparent;
        background: transparent;
    }
    .project-secondary-actions .project-menu-label { display: inline; }

    .access-group-row { grid-template-columns: 1fr; }
    .access-row-actions { justify-content: flex-end; }
    .access-override-row { align-items: stretch; flex-direction: column; }
    .access-override-row select,
    .access-override-row .select-trigger { width: 100%; }
}

/* --- лента активности --- */

.feed-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    max-width: 780px;
}

.feed-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    background: var(--paper-raised);
    text-align: left;
    font: inherit;
    cursor: pointer;
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}

.feed-item:hover { border-color: #c9c4b4; box-shadow: 0 4px 14px -8px rgba(25,28,38,.25); }

.feed-item.unread { background: #fff; border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--paper-line)); }

.feed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }

.feed-text {
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-text em { color: var(--ink-faint); }

.feed-task {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-item time { font-size: var(--text-2xs); color: var(--ink-faint); flex: none; }

.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-blue);
    flex: none;
}

@media (max-width: 640px) {
    .feed-list { padding: var(--space-2-5) var(--space-3) var(--space-4); gap: var(--space-1-5); }
    .feed-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        gap: var(--space-1) var(--space-2-5);
        padding: var(--space-2-5) var(--space-2-5);
    }
    .feed-item > .card-assignee { grid-row: 1 / span 2; margin-top: 1px; }
    .feed-text {
        display: -webkit-box;
        overflow: hidden;
        font-size: var(--text-md);
        line-height: 1.35;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .feed-task { font-size: var(--text-2xs); }
    .feed-item time { font-size: var(--text-3xs); line-height: 1.4; }
    .feed-item .unread-dot { position: absolute; top: 7px; right: 7px; }
}

/* --- кастомные поля в карточке --- */

.cf-input {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    margin-left: -8px;
    background: transparent;
    font: inherit;
    font-size: var(--text-md);
    min-width: 160px;
}

.cf-input:hover { border-color: var(--paper-line); }
.cf-input:focus { outline: none; border-color: var(--ink); background: #fff; }

.cf-check { width: 17px; height: 17px; accent-color: var(--accent-green); }

.cf-link { color: var(--accent-blue); text-decoration: none; font-size: var(--text-body); }

/* --- попап напоминания --- */

.remind-pop { display: flex; flex-direction: column; gap: var(--space-2-5); padding: var(--space-3); width: 320px; }

.remind-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--ink-soft);
}

.remind-pop input {
    padding: var(--space-1-5) var(--space-2-5);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-sm);
}

/* стек оверлеев: наслоенный — выше и с чуть более глубокой тенью */
.overlay-stacked { z-index: var(--z-modal); background: rgba(20, 22, 30, .55); }

/* финальная стадия в админке */
.stage-final { background: color-mix(in srgb, var(--accent-green) 6%, #fff) !important; }
.final-lock { cursor: default; font-size: var(--text-xs); }
.final-mark {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--accent-green);
    white-space: nowrap;
}

/* кастомные поля в форме создания */
.cf-form-input {
    padding: var(--space-1-5) var(--space-2-5);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: #fff;
    font-size: var(--text-sm);
}

/* ============================================================
   Полная форма создания в дизайне карточки
   ============================================================ */

.fa-extra-row { min-height: 30px; padding: var(--space-1) 0 var(--space-2-5); }

.fa-extra-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    border: 1px dashed var(--paper-line);
    background: none;
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    margin-right: var(--space-1-5);
    transition: all .15s;
}

.fa-extra-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.fa-extra-btn svg { width: 12px; height: 12px; }

.full-add .desc-editor textarea { border-color: var(--paper-line); }
.full-add .desc-editor textarea:focus { border-color: var(--ink); }
.full-add .task-files { margin-top: var(--space-4); }
/* кнопки формы — строкой внизу окна, всегда на виду */
.full-add-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--paper-line);
    background: var(--paper);
}
@media (max-width: 900px) {
    /* на узком экране листается вся панель — строку кнопок держим у нижнего края */
    .overlay-panel.task-panel.full-add { padding-bottom: 0; }
    /* тело формы — во всю свою высоту (иначе оно сжато до экрана, а строка кнопок встаёт посреди полей) */
    .task-panel.full-add .task-body { flex: none; }
    .full-add-foot {
        position: sticky;
        bottom: 0;
        z-index: var(--z-local);
        padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    }
    .full-add-foot .btn-signal { flex: 1; }
}

.comments-locked { position: relative; }

.locked-note {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2-5);
    color: var(--ink-faint);
    font-size: var(--text-sm);
    border: 1.5px dashed var(--paper-line);
    border-radius: var(--radius-lg);
    margin-top: var(--space-2-5);
}

.locked-note svg { width: 22px; height: 22px; opacity: .6; }

/* ---------- фильтры доски (план 2, этап 3) ---------- */

.filter-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}
.filter-button.has-filters { border-color: var(--ink); }
.filter-count {
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-md);
    background: var(--ink);
    color: var(--paper-raised);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* чипы активных фильтров — своей строкой под шапкой */
.board-filter-chips {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1-5);
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: var(--space-0-5) var(--space-1) var(--space-0-5) var(--space-2-5);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--ink-soft);
    font-size: var(--text-xs);
    white-space: nowrap;
}
.filter-chip .proj-dot { flex: none; }
.filter-chip-x {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--ink-faint);
    font-size: var(--text-body);
    line-height: 1;
    cursor: pointer;
}
.filter-chip-x:hover { background: var(--paper); color: var(--ink); }
.filter-reset {
    border: none;
    background: none;
    color: var(--ink-faint);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
}

/* панель: на широком экране — выпадашка под кнопкой, пикеры (z-index 120) — поверх неё */
.filter-panel-backdrop { position: fixed; inset: 0; z-index: var(--z-sheet-backdrop); }
.filter-panel {
    position: fixed;
    z-index: var(--z-sheet);
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 24px));
    max-height: min(70dvh, 560px);
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 50px -12px rgba(25, 28, 38, .35);
    animation: card-in .15s cubic-bezier(.2, .9, .3, 1) both;
}
.filter-panel-head,
.filter-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-3);
}
.filter-panel-head { border-bottom: 1px solid var(--paper-line); }
.filter-panel-foot { border-top: 1px solid var(--paper-line); }
.filter-text { flex: none; padding: var(--space-3) var(--space-3) var(--space-1); }
.filter-text .control { width: 100%; }
.filter-panel-body { overflow-y: auto; padding: var(--space-1-5) var(--space-3); }
.filter-row { padding: var(--space-2-5) 0; border-bottom: 1px solid var(--paper); }
.filter-row:last-child { border-bottom: none; }
.filter-row-label {
    margin-bottom: var(--space-1-5);
    color: var(--ink-faint);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.filter-row-values { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); }
.filter-row .meta-add-btn { opacity: .8; }
.filter-toggle {
    padding: var(--space-1) var(--space-2-5);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--ink-soft);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}
.filter-toggle.on { border-color: var(--ink); background: var(--ink); color: var(--paper-raised); }

@media (max-width: 640px) {
    /* в шапке — только иконка и счётчик, чтобы влезть в 375px */
    #board-filters {
        flex: 0 0 auto;
        min-height: 34px;
        padding: var(--space-1-5) var(--space-2);
        gap: var(--space-1);
        font-size: var(--text-xs);
    }
    #board-filters .filter-button-label { display: none; }

    /* на телефоне панель — шторка снизу, фон затемнён */
    .filter-panel-backdrop { background: rgba(20, 22, 30, .4); }
    .filter-panel {
        top: auto !important;
        right: 0;
        bottom: 0;
        left: 0 !important;
        width: auto;
        max-height: 82dvh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .filter-toggle, .filter-chip { font-size: var(--text-sm); }
    .filter-text .control { height: var(--control-h-lg); font-size: var(--text-md); }
    .filter-row .meta-add-btn { width: 32px; height: 32px; }
}

/* ---------- индикатор долгих запросов (core/api.js) ---------- */
/* полоска вверху экрана, пока запрос пользователя идёт дольше 400 мс;
   под системной строкой PWA — ниже safe-area */
.net-busy {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    height: 3px;
    z-index: var(--z-progress);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.net-busy.on { opacity: 1; }
.net-busy::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: var(--signal);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    animation: net-busy-run 1.1s ease-in-out infinite;
}
.net-busy:not(.on)::before { animation: none; }
@keyframes net-busy-run {
    from { left: -40%; }
    to { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .net-busy::before { animation: none; left: 0; width: 100%; opacity: .7; }
}
.is-net-busy body { cursor: progress; }

/* --- журнал событий (админка → «Журнал») --- */
.log-card { min-width: 0; }
.log-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.log-filters .select-trigger { flex: 0 1 auto; width: auto; min-width: 120px; max-width: 220px; }
.log-filters input[type=search] { flex: 1 1 160px; min-width: 0; height: var(--control-h); }
.log-filters .filter-chip code { font-size: var(--text-2xs); }
.log-list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--paper-line); margin-bottom: var(--space-3); }
.log-row { border-bottom: 1px solid var(--paper-line); }
.log-head {
    display: grid;
    grid-template-columns: 110px 84px 140px minmax(0, 1fr) 120px;
    align-items: baseline;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-1);
    border: none;
    background: none;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--ink);
    cursor: pointer;
}
.log-head:hover { background: var(--paper); }
.log-time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.log-level {
    justify-self: start;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ink-soft);
    background: var(--paper);
}
.log-level.is-info { color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 10%, #fff); }
.log-level.is-warning { color: var(--accent-amber); background: color-mix(in srgb, var(--accent-amber) 14%, #fff); }
.log-level.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, #fff); }
.log-channel { color: var(--ink-soft); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-actor { color: var(--ink-soft); font-size: var(--text-xs); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-details { padding: 0 var(--space-1) var(--space-3); }
.log-meta { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--space-1) var(--space-3); font-size: var(--text-xs); margin-bottom: var(--space-2); }
.log-meta dt { color: var(--ink-faint); }
.log-meta dd { margin: 0; overflow-wrap: anywhere; }
.log-ua { color: var(--ink-soft); }
.log-link { border: none; background: none; padding: 0; color: var(--accent-blue); cursor: pointer; }
.log-json {
    max-height: 320px;
    overflow: auto;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* «Что писать в журнал» (админка → «Настройки» → «Журнал») */
.log-rules { display: flex; flex-direction: column; gap: var(--space-1-5); }
.log-rules > .field-hint { margin: 0 0 var(--space-1); }
.log-rule { border: 1px solid var(--paper-line); border-radius: var(--radius-md); background: #fff; }
.log-rule-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) 0; }
.log-rule-head .select-trigger { flex: none; width: 220px; }
.log-rule-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2);
    border: none;
    background: none;
    text-align: left;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}
.log-rule-caret { color: var(--ink-faint); font-size: var(--text-2xs); }
.log-rule-count { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; }
.log-rule-events { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-2) var(--space-2) var(--space-6); }
.log-rule-events li { display: flex; align-items: center; gap: var(--space-2); }
.log-rule-event { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--ink-soft); }
.log-rule-event code { font-size: var(--text-3xs); color: var(--ink-faint); }
.log-rule-events .select-trigger { flex: none; width: 220px; }

@media (max-width: 640px) {
    .log-head { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "time level channel" "msg msg msg" "actor actor actor"; row-gap: var(--space-0-5); }
    .log-time { grid-area: time; }
    .log-level { grid-area: level; }
    .log-channel { grid-area: channel; text-align: right; }
    .log-msg { grid-area: msg; white-space: normal; }
    .log-actor { grid-area: actor; text-align: left; }
    .log-filters { display: grid; grid-template-columns: 1fr 1fr; }
    .log-filters .select-trigger { width: 100%; max-width: none; min-width: 0; }
    .log-filters input[type=search], .log-filters .filter-chip { grid-column: 1 / -1; }
    .log-meta { grid-template-columns: 70px minmax(0, 1fr); }
    .log-rule-head .select-trigger, .log-rule-events .select-trigger { width: 170px; }
    .log-rule-events { padding-left: var(--space-2); }
    .log-rule-events li { flex-wrap: wrap; }
}

/* --- срок задачи (ui/due.js): метка и выбор срока --- */
.due-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--ink-faint);
    white-space: nowrap;
}
.due-badge.is-soon { color: var(--accent-amber); font-weight: 600; }
.due-badge.is-overdue { color: var(--danger); font-weight: 600; }
.meta-clickable .due-badge { font-size: var(--text-xs); }
.card-foot .due-badge { margin-left: var(--space-2-5); margin-right: auto; } /* рядом с номером, остальное — вправо */

.due-pop { display: flex; flex-direction: column; gap: var(--space-2-5); padding: var(--space-3); }
.due-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1-5); }
.due-quick .chip-toggle { justify-content: center; white-space: nowrap; }
.due-quick [data-clear] { grid-column: 1 / -1; }
.due-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.due-cal-title { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.due-cal-title::first-letter { text-transform: uppercase; }
.due-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-0-5); }
.due-cal-wd { text-align: center; font-family: var(--font-mono); font-size: var(--text-3xs); color: var(--ink-faint); padding: var(--space-1) 0; }
.due-day {
    height: var(--control-h-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    cursor: pointer;
}
.due-day:hover { background: rgba(25,28,38,.06); }
.due-day.is-other { color: var(--ink-faint); }
.due-day.is-today { border-color: var(--paper-line); font-weight: 600; }
.due-day.is-selected { background: var(--ink); border-color: var(--ink); color: #fff; }
.due-pop .chip-toggle { min-height: var(--control-h-sm); padding: 0 var(--space-2-5); background: none; }
.due-pop .chip-toggle.on { background: var(--ink); }
.due-time { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; border-top: 1px solid var(--paper-line); padding-top: var(--space-2-5); }
.due-time label { font-size: var(--text-sm); color: var(--ink-soft); margin-right: var(--space-0-5); }
.due-time input.control { width: 72px; flex: none; text-align: center; font-family: var(--font-mono); }
.due-time-hint { font-size: var(--text-2xs); color: var(--ink-faint); }
.due-time input.control.is-invalid { border-color: var(--danger); }
.due-foot { display: flex; align-items: center; gap: var(--space-2); }
.due-summary { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--ink-soft); }

@media (max-width: 640px) {
    .due-pop { max-height: none; overflow-y: auto; }
    .due-day { height: 40px; font-size: var(--text-md); }
    .due-quick .chip-toggle { min-height: var(--control-h); }
    .due-time input.control { height: var(--control-h); font-size: var(--text-md); }
}

/* --- настройки: чипы (дни недели, флажок) и время «с — до» (features/admin-settings.js) --- */
.settings-chips { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
/* чип внутри .login-field — не подпись поля: вернуть шрифт и раскладку .chip-toggle */
.settings-chips label.chip-toggle { display: inline-flex; font-family: inherit; font-size: var(--text-sm); text-transform: none; letter-spacing: normal; color: var(--ink-soft); margin-bottom: 0; }
.settings-chips label.chip-toggle.on { color: var(--paper-raised); }
@media (max-width: 640px) {
    .settings-chips { gap: var(--space-1); }
    .settings-chips label.chip-toggle { padding: 0 var(--space-2-5); }
}
.settings-time-range { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-soft); }
.settings-time-range input.control { width: 72px; flex: none; text-align: center; font-family: var(--font-mono); }
.settings-time-range input.control.is-invalid { border-color: var(--danger); }

/* --- корзина (features/admin-trash.js) --- */
.trash-kinds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.trash-count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); }
.trash-kinds .chip-toggle.on .trash-count { color: inherit; }
.trash-bulk { margin: var(--space-1) 0 var(--space-2); }
.trash-result { font-size: var(--text-sm); color: var(--accent-green); margin-bottom: var(--space-2); }
.trash-list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--paper-line); margin-bottom: var(--space-3); }
.trash-list > .desc-empty { padding: var(--space-3) var(--space-1); }
.trash-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-1);
    border-bottom: 1px solid var(--paper-line);
}
.trash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.trash-title { font-size: var(--text-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.trash-sub { font-size: var(--text-xs); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-when { font-size: var(--text-2xs); color: var(--ink-faint); }
.trash-actions { display: flex; gap: var(--space-2); flex: none; }

@media (max-width: 640px) {
    .trash-row { flex-direction: column; align-items: stretch; }
    .trash-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .trash-actions .btn-sm { justify-content: center; white-space: nowrap; }
    .trash-actions .btn-sm svg { display: none; } /* в половину ширины телефона «Удалить навсегда» с иконкой не влезает */
}

/* --- постраничная навигация (ui/pager.js) --- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0; }
.pager-info { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.pager-pages { display: flex; align-items: center; gap: var(--space-1); }
.pager-btn { min-width: var(--control-h-sm); justify-content: center; }
.pager-btn.is-current { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.pager-gap { color: var(--ink-faint); padding: 0 var(--space-0-5); }
.pager-size { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; font-size: var(--text-xs); color: var(--ink-soft); }
.pager-size .select-trigger { height: var(--control-h-sm); min-width: 76px; }
.log-actions { display: flex; gap: var(--space-2); }
@media (max-width: 640px) {
    .pager-size { margin-left: 0; }
}

/* --- руководство (/guide, features/guide.js) --- */
.guide-loading { padding: var(--space-8); }
.guide {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--space-10);
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-8) var(--space-16);
}
.guide-toc {
    position: sticky;
    top: var(--space-6);
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    font-size: var(--text-sm);
}
.guide-toc ul { list-style: none; margin: 0; padding: 0; }
.guide-toc > ul > li + li { margin-top: var(--space-3); }
.guide-toc ul ul { margin-top: var(--space-1); }
.guide-toc > ul > li:not(.is-open) > ul { display: none; }
.guide-toc a {
    display: block;
    padding: var(--space-0-5) var(--space-2-5);
    border-left: 2px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
    line-height: 1.4;
}
.guide-toc a:hover { color: var(--ink); }
.guide-toc .guide-toc-section { color: var(--ink); font-weight: 600; }
.guide-toc .guide-toc-link { font-size: var(--text-xs); padding-left: var(--space-4); }
.guide-toc a.is-current { color: var(--ink); border-left-color: var(--signal); }

.guide-head {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0 var(--space-4);
    background: var(--paper);
}
.guide-title { font-size: var(--text-xl); margin: 0; }
.guide-search { position: relative; flex: 1; max-width: 440px; }
.guide-search-icon { position: absolute; left: var(--space-2-5); top: 50%; translate: 0 -50%; color: var(--ink-faint); display: flex; pointer-events: none; }
.guide-search-icon svg { width: 16px; height: 16px; }
.guide-search input.guide-search-input { width: 100%; padding-left: var(--space-8); }
.guide-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--space-1);
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
}
.guide-results[hidden] { display: none; }
.guide-result {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    width: 100%;
    padding: var(--space-2) var(--space-2-5);
    border: none;
    border-radius: var(--radius-md);
    background: none;
    text-align: left;
    cursor: pointer;
}
.guide-result.is-active, .guide-result:hover { background: rgba(25, 28, 38, .06); }
.guide-result-where { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.guide-result-snippet { font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.45; }
.guide-results-empty { padding: var(--space-3); font-size: var(--text-sm); color: var(--ink-faint); }
.guide mark { background: rgba(232, 80, 31, .2); color: inherit; border-radius: var(--radius-xs); }
.btn-ghost.guide-toc-btn { display: none; }

.guide-body { max-width: 760px; font-size: var(--text-body); line-height: 1.65; color: var(--ink); }
.guide-section + .guide-section { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--paper-line); }
.guide-section-title { font-size: var(--text-3xl); line-height: 1.2; margin: 0 0 var(--space-3); }
.guide-body h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); }
/* переход по #якорю (и самим браузером при открытии ссылки) — под закреплённой шапкой с поиском */
.guide-body h2, .guide-section { scroll-margin-top: 80px; }
.guide-body p { margin: 0 0 var(--space-3); }
.guide-body ul, .guide-body ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.guide-body li + li { margin-top: var(--space-1); }
.guide-body code { font-family: var(--font-mono); font-size: var(--text-sm); background: rgba(25, 28, 38, .06); border-radius: var(--radius-xs); padding: 1px var(--space-1); }
.guide-body a { color: var(--accent-blue); }
.guide-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-3) 0 var(--space-5);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px -18px rgba(25, 28, 38, .45);
    cursor: zoom-in;
}
.guide-body h2.search-found, .guide-section-title.search-found { border-radius: var(--radius-sm); }

/* без входа: своя шапка, страница листается целиком */
.guide-public { height: 100%; overflow-y: auto; background: var(--paper); }
.guide-public-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-8);
    background: var(--paper-raised);
    border-bottom: 1px solid var(--paper-line);
}
.guide-public-bar .brand-mark { width: 32px; height: 32px; border-radius: var(--radius-md); }
.guide-public-name { font-size: var(--text-lg); }

@media (max-width: 900px) {
    .guide { grid-template-columns: minmax(0, 1fr); padding: var(--space-4) var(--space-5) var(--space-12); }
    .guide-toc { display: none; }
    .btn-ghost.guide-toc-btn { display: inline-flex; }
}
@media (max-width: 640px) {
    .guide { padding: var(--space-2) var(--space-4) var(--space-10); }
    .guide-head { flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-3); }
    .guide-title { flex: 1; }
    .guide-search { order: 3; flex-basis: 100%; max-width: none; }
    .guide-section-title { font-size: var(--text-2xl); }
    .guide-body h2, .guide-section { scroll-margin-top: 112px; } /* шапка в две строки: заголовок и поиск */
    .guide-public-bar { padding: var(--space-2-5) var(--space-4); }
}

/* ---------- личный кабинет клиента (/portal, план 4) ---------- */
/* успех в той же плашке, что и ошибка формы: «Пароль изменён» */
.login-error.is-ok { background: rgba(46, 160, 98, .12); color: var(--accent-green); }
/* цветная точка проекта в списке кабинета; подпроект сдвинут вправо */
.portal-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.adm-users li.portal-sub { margin-left: var(--space-5); }
.admin-wrap.portal-narrow { grid-template-columns: minmax(0, 560px); }
/* кнопки действий под списком в карточке клиента (раздел «Клиенты») */
.cl-actions { margin-top: var(--space-3); }
/* список клиентов: строка целиком кликабельна; на телефоне стрелка не нужна — иначе падает отдельной строкой под текст */
.adm-users li[data-client] { cursor: pointer; }
@media (max-width: 640px) { .adm-users li[data-client] > .btn-icon { display: none; } }

/* ---------- обращения клиентов, раздел сотрудников (features/requests.js, план 4) ---------- */
.rq-row { cursor: pointer; }
.rq-row.is-unread { border-color: var(--signal); }
.rq-row.is-unread strong { font-weight: 700; }
.rq-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--signal);
    color: #fff;
    font-size: var(--text-3xs);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex: none;
}
.rq-row .adm-user-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; flex: 1 1 0; }
/* связанные задачи — посередине строки, между текстом и статусом: не прибавляют высоту */
.rq-row .rq-task-chips { flex: 1 1 0; min-width: 0; justify-content: center; }
@media (max-width: 640px) { .rq-row { flex-wrap: wrap; } .rq-row .rq-task-chips { order: 5; flex-basis: 100%; justify-content: flex-start; } }
.rq-row-head { display: inline-flex; align-items: center; gap: var(--space-1-5); max-width: 100%; }
.rq-status.is-pill { padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-pill); background: var(--tag); color: var(--tag-ink, #fff); font-weight: 600; font-size: var(--text-2xs); }
.rq-task-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); max-width: 100%; }
.fa-req-files { margin-bottom: var(--space-3); }
/* карточки файлов обращения — как вложения в переписке, но с галочкой внутри и без скачивания; раскладка колонками с переносом */
.fa-req-file { position: relative; cursor: pointer; }
.fa-req-file .fa-req-check { position: absolute; top: var(--space-2); left: var(--space-2); margin: 0; }
.fa-req-file.is-image .fa-req-check { background: var(--paper-raised); }
.fa-req-file:has(.fa-req-check:checked) { border-color: var(--signal); }
.fa-req-file:not(.is-image) { padding-left: var(--space-8); }
.rq-note { white-space: pre-line; overflow-wrap: anywhere; }
.rq-docs { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.rq-doc.is-bad { color: var(--accent-amber); }
.rq-stats { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.rq-stats th, .rq-stats td { text-align: left; padding: var(--space-1-5) 0; border-bottom: 1px solid var(--paper-line); font-weight: 400; }
.rq-stats th { color: var(--ink-soft); }
.rq-stats td { text-align: right; font-variant-numeric: tabular-nums; }
.rq-summary-text { line-height: 1.5; margin-bottom: var(--space-4); }
.rq-only-toggle { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-soft); cursor: pointer; }
.rq-pick-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); }
.rq-pick-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: 1px solid var(--paper-line); border-radius: var(--radius-md); background: transparent; color: var(--ink); cursor: pointer; }
.rq-pick-item:hover:not(:disabled), .rq-pick-item:focus-visible { border-color: var(--ink-faint); background: var(--paper-dim, var(--paper)); }
.rq-pick-title { flex: 1 1 12rem; min-width: 0; }
.rq-pick-title.is-done { text-decoration: line-through; opacity: .7; }
.card .rq-task-chips { margin-bottom: var(--space-2); }
.rq-task-chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--space-0-5) var(--space-2); border: 1px solid var(--paper-line); border-radius: var(--radius-pill); font-size: var(--text-2xs); color: var(--ink-soft); text-decoration: none; }
.rq-task-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.rq-task-chip.is-done { text-decoration: line-through; opacity: .7; }
.rq-status { display: inline-flex; align-items: center; gap: var(--space-1-5); flex: none; font-size: var(--text-xs); color: var(--ink-soft); }
.adm-role-badge.is-warn { color: var(--accent-amber); border-color: currentColor; }
.adm-role-badge.is-ok { color: var(--accent-green); border-color: currentColor; }

.rq-layout {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-4) var(--space-5);
}
.rq-main { display: flex; flex-direction: column; gap: var(--space-2-5); min-width: 0; }
.rq-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rq-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rq-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 200px; max-width: 320px; }
.rq-field select, .rq-field .select-trigger { width: 100%; }
.rq-label { font-family: var(--font-mono); font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.rq-facts { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-soft); }
.rq-facts a { color: var(--accent-blue); }
.rq-hint { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--signal-soft); font-size: var(--text-xs); }
.rq-thread-bar { display: flex; align-items: center; gap: var(--space-2); }
.rq-h { font-size: var(--text-lg); }
.rq-thread { max-height: 60vh; }
/* карточка обращения в две колонки (как у задачи): слева описание и управление, справа переписка во всю высоту */
.rq-layout.rq-two { grid-template-columns: minmax(0, 1fr) 440px; overflow: hidden; align-items: stretch; }
.rq-left { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; min-height: 0; overflow-y: auto; padding-right: var(--space-1); }
.rq-chat { display: flex; flex-direction: column; gap: var(--space-2-5); min-width: 0; min-height: 0; } /* карточкой, как «Описание» */
.rq-chat .rq-thread { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.rq-chat .rq-thread:empty { display: none; } /* пустой чат не даёт второй flex-gap между заголовком и полем ввода */
.rq-left .meta-list { margin: 0; }
.rq-desc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.rq-desc-head h2 { margin: 0; }
.rq-desc-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.rq-desc-text:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; }
.rq-desc-more { margin-top: var(--space-2); }
.rq-desc .file-list { margin-top: var(--space-3); }
/* шапка обращения в кабинете: заголовок правится на месте (карандаш при наведении), под ним номер, статус, проект, даты */
.rq-top { flex-direction: column; align-items: stretch; gap: var(--space-2); } /* первая строка — кнопки, ниже на всю ширину заголовок и данные */
.rq-bar { display: flex; align-items: center; gap: var(--space-2); }
.rq-bar > :nth-child(2) { margin-left: auto; } /* кнопки справа от «назад»: общий .topbar-spacer на телефоне в шапках скрыт */
.rq-head { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.rq-title-row { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
.rq-title { margin-right: 0; min-width: 0; overflow-wrap: anywhere; border-radius: var(--radius-sm); }
.rq-title.is-editable { cursor: text; }
.rq-title.is-editable:hover { background: rgba(25, 28, 38, .04); }
.rq-title-edit { flex: none; opacity: 0; transition: opacity .12s; }
.rq-title-row:hover .rq-title-edit, .rq-title-edit:focus-visible { opacity: 1; }
@media (hover: none) { .rq-title-edit { opacity: 1; } }
.rq-title-input { flex: 1; min-width: 0; font: inherit; font-size: var(--text-xl); font-weight: 700; letter-spacing: -.3px; padding: var(--space-0-5) var(--space-1-5); border: 1px solid var(--ink); border-radius: var(--radius-sm); background: #fff; }
.rq-head .rq-facts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.rq-dot { color: var(--ink-faint); }
.rq-link { padding: 0; border: 0; background: none; font: inherit; color: var(--accent-blue); cursor: pointer; text-align: left; }
.rq-link:hover { text-decoration: underline; }
.rq-history { max-height: 40vh; }
.rq-tag { font-style: normal; font-size: var(--text-3xs); font-family: var(--font-mono); text-transform: uppercase; color: var(--ink-faint); }
.rq-pick { margin-right: var(--space-1); }
@media (max-width: 900px) {
    .rq-layout { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
    .rq-thread { max-height: 50vh; }
    /* телефон: описание, переписка, потом управление (статус, задачи, история) */
    /* колонкой (flex), а не сеткой: сетка с display: contents у детей .rq-left не пересчитывала высоту строки, когда чат вырастал, и кнопки
       наползали на поле сообщения (Safari и Chrome) */
    .rq-layout.rq-two { display: flex; flex-direction: column; overflow-y: auto; align-items: stretch; }
    .rq-left { display: contents; }
    .rq-left > * { order: 3; flex: none; }
    .rq-left > .rq-desc { order: 1; }
    .rq-chat { order: 2; flex: none; min-height: auto; }
    .rq-chat .rq-thread { flex: none; max-height: 55vh; }
    .rq-desc-text:not(.is-open) { -webkit-line-clamp: 5; line-clamp: 5; }
}

/* вкладка «Статусы обращений»: строка статуса и под ней — действия клиента */
.rq-statuses > li { flex-direction: column; align-items: stretch; }
.rq-status-line { display: flex; align-items: center; gap: var(--space-2); }
.rq-moves { display: flex; flex-wrap: wrap; gap: var(--space-2-5); padding-left: var(--space-6); }
.rq-statuses .rq-field { flex: 1 1 180px; max-width: none; }
.adm-add select { flex: none; }

/* кабинет клиента: одна колонка обращения и кнопки действий над перепиской */
.rq-layout-single { grid-template-columns: minmax(0, 860px); }
.rq-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rq-actions:empty { display: none; }

/* ---------- ленты сообщений «как в мессенджерах» (ui/chat.js): комментарии задач и переписка обращений ---------- */
.msg-list { gap: var(--space-0-5); }
.msg { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 100%; }
.msg.is-first { margin-top: var(--space-2); }
.msg.is-mine { justify-content: flex-end; }
.msg-ava { flex: none; width: 28px; align-self: flex-end; }
.msg-ava .card-assignee { width: 28px; height: 28px; font-size: var(--text-2xs); }
.msg.is-mine .msg-ava { display: none; }
.msg-col { display: flex; flex-direction: column; min-width: 0; max-width: 78%; }
.msg.is-mine .msg-col { align-items: flex-end; }
.msg-name { display: flex; align-items: center; gap: var(--space-1-5); margin: 0 var(--space-1) var(--space-0-5); font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.msg-bubble {
    background: #fff;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: var(--space-1-5) var(--space-3);
    line-height: 1.5;
    word-break: break-word;
    font-size: var(--text-md);
    white-space: normal;
}
.msg.is-first .msg-bubble { border-top-left-radius: var(--radius-xs); }
.msg.is-mine .msg-bubble { background: var(--mine-bubble); border-color: transparent; }
.msg.is-mine.is-first .msg-bubble { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-xs); }
.msg-text { white-space: pre-wrap; }
.msg-bubble .file-list { margin-top: var(--space-1-5); }
.msg-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1-5);
    margin-top: var(--space-0-5);
    font-size: var(--text-2xs);
    color: var(--ink-faint);
}
.msg-foot time { color: inherit; font-size: inherit; }
.msg-foot .comment-edit-btn { margin-left: 0; opacity: .55; }
.msg-foot .comment-edit-btn:hover { opacity: 1; }
.msg-foot .draft-mark { font-size: var(--text-3xs); }
.msg-list .comment-system { align-self: center; text-align: center; padding: 0; margin-top: var(--space-2); }
.msg-list .comment-editing { width: 100%; }
.msg.comment-editing .msg-col { max-width: 100%; width: 100%; }
.msg .rq-pick { align-self: center; flex: none; }
.rq-from-client .msg-bubble { background: var(--paper-raised); }

/* ---------- переключатель «список / доска» и доска-колонки (ui/view-switch.js, ui/kanban.js) ---------- */
.view-switch { display: inline-flex; border: 1px solid var(--control-border); border-radius: var(--radius-md); overflow: hidden; background: var(--control-bg); flex: none; }
.view-switch-btn {
    height: calc(var(--control-h) - 2px);
    min-width: var(--control-h);
    border: none;
    background: transparent;
    color: var(--ink-soft);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}
.view-switch-btn + .view-switch-btn { border-left: 1px solid var(--control-border); }
.view-switch-btn:hover { color: var(--ink); }
.view-switch-btn.is-active { background: var(--ink); color: #fff; }

/* обращения: строка фильтров над доской/списком, карточка доски — на классах карточки задач */
.rq-filterbar { padding: var(--space-4) var(--space-6) 0; }
.rq-filterbar .adm-user-filters { margin-bottom: var(--space-3); }
.rq-list-wrap { flex: 1; min-height: 0; padding-top: var(--space-1); }
.card.is-unread { border-color: var(--signal); }
.card .card-foot .rq-when { color: var(--ink-faint); font-size: var(--text-xs); }
.card .card-foot .rq-unread { margin-left: auto; }

.rq-contents { display: contents; }

/* личный кабинет как приложение: блок «Приложение и уведомления» в профиле контакта (план 4, этап 4.7) */
#portal-app .user-editor-actions + .login-field { margin-top: var(--space-4); }
#portal-app .login-field .settings-chips { margin-bottom: var(--space-2); }