/* Утилиты display (29.08.2026). Alpine x-show при показе делает removeProperty("display") —
   инлайновый display:grid/flex терялся и контейнер становился block (карточки «Сводки» шли
   столбиком). display держим классом; x-show по-прежнему прячет инлайновым display:none.
   Блок стоит в начале файла: более поздние правила той же специфичности (медиа-запросы) выигрывают. */
.u-grid { display: grid; }
.u-flex { display: flex; }
.u-iflex { display: inline-flex; }
.u-iblock { display: inline-block; }

/* Inter — локальный бренд-шрифт (public/fonts, @fontsource v5). latin + cyrillic сабсеты. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-cyrillic-400.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-cyrillic-500.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-cyrillic-600.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* 700 (13.08, аудит внешнего вида Т5): начертание запрашивается 81 раз плюс во
   всех голых <th>, <b> и <h3> модалок, а файла не было — браузер рисовал
   СИНТЕТИЧЕСКИЙ жирный, размазывая буквы. Это и есть «чуть замыленные»
   заголовки по всей системе. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-cyrillic-700.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Sidebar */
  --sidebar-bg: #ffffff;
  --sidebar-active: #EEEDFE;
  --sidebar-hover: #f5f5f7;
  --sidebar-text: #64748b;
  --sidebar-text-hover: #1e293b;
  --sidebar-text-active: #534AB7;
  --sidebar-section: #94a3b8;
  --sidebar-width: 220px;
  --sidebar-border: #e8e8ed;

  /* Accent */
  --accent: #7F77DD;
  --accent-hover: #6B63C7;
  --accent-light: rgba(127,119,221,.08);
  /* Тона от акцента (21.09): заливки «цветного пятна» (полоса «Сегодня») считаются от
     бренда, а не хардкодятся hex'ами — перекрасил --accent, перекрасилось всё. */
  --accent-tint-1: color-mix(in srgb, var(--accent) 14%, var(--card));
  --accent-tint-2: color-mix(in srgb, var(--accent) 8%, var(--card));
  --accent-tint-3: color-mix(in srgb, var(--accent) 3%, var(--card));
  --accent-tint-line: color-mix(in srgb, var(--accent) 36%, var(--card));
  /* Белый текст на цветной заливке (кнопка, счётчик, чип статуса). Раньше писали var(--card) —
     совпадало, пока карточка белая; в тёмной теме карточка тёмная (21.10). */
  --on-color: #ffffff;

  /* Content */
  --content-bg: #f4f5f7;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-secondary: #475569;
  --muted: #475569;
  /* DESIGN (2026-07-02): два канонических уровня приглушённого ТЕКСТА — свели 4 разных
     серых (#6b7280/#9ca3af/#64748b/#94a3b8, разъехавшиеся) к --muted (вторичный текст)
     и --muted-light (подсказки/таймстемпы). Задумывались только под color:, но по факту
     --muted-light используется и как фон/рамка в нескольких местах (disabled-кнопка входа,
     полосы «отменено» в планировании, легенды) — правка значения задевает и их.
     Аудит цвета 14.08: оба уровня были СЛИШКОМ светлыми. --muted-light #9ca3af давал
     контраст 2.5:1 при норме 4.5:1 — подписи и таймстемпы физически плохо читались.
     Сдвинули обе ступени на одну вниз: #475569 (7.5:1) и #64748b (4.8:1). Иерархия
     «текст → вторичный → третичный» сохранена, оба уровня теперь проходят норму. */
  --muted-light: #64748b;

  /* Semantic */
  --success: #10b981;
  --success-bg: #d1fae5;
  --success-text: #065f46;
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --warning-text: #92400e;
  --danger: #ef4444;
  --danger-bg: #fee2e2;
  --danger-text: #991b1b;
  --info: #3b82f6;
  --info-bg: #dbeafe;
  --info-text: #1e40af;
  --info-line: #93c5fd;      /* рамка полосы «планируется» в ганте (T6) */

  /* Shapes */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 2px rgba(31,36,48,.05), 0 4px 12px -4px rgba(31,36,48,.10);
  --shadow-md: 0 2px 4px rgba(31,36,48,.06), 0 8px 20px -6px rgba(31,36,48,.14);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04);

  /* Typography */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;

  /* BUG-FIX-11 (2026-07-02): вторая система токенов --color-* использовалась в ~76 местах,
     но НИГДЕ не была объявлена → var() резолвился в invalid, фон становился прозрачным,
     границы/текст наследовались случайно (Задачи, Монитор красились неверно). Алиасим
     новые имена на канонические токены — до общего перехода на единую систему. */
  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-secondary);
  --color-background-primary: var(--card);
  --color-background-secondary: var(--content-bg);
  --color-background-tertiary: var(--sidebar-hover);
  --color-border-secondary: var(--border);
  --color-border-tertiary: var(--border);

  /* DESIGN-FIX-21 (2026-07-02): фундамент дизайн-токенов (add-only, без визуальных изменений).
     Статус-пары вынесены из .status-* правил ниже — единое имя, значения идентичны прежним.
     Массовая миграция инлайн-цветов/серых/приоритетов — отдельными review-задачами. */
  --status-neutral-bg: #F1EFE8;   --status-neutral-text: #5F5E5A;
  --status-progress-bg: #E6F1FB;  --status-progress-text: #185FA5;
  --status-warn-bg: #FAEEDA;      --status-warn-text: #854F0B;
  --status-accepted-bg: #EAF3DE;  --status-accepted-text: #3B6D11;
  --status-returned-bg: #FCEBEB;  --status-returned-text: #A32D2D;
  /* accent: канон --accent (#7F77DD). --accent-strong — тёмный (= sidebar-text-active).
     --accent-legacy-indigo — «карантин»: off-brand #6366f1, гуляет по проекту, свести к --accent. */
  --accent-strong: #534AB7;
  --accent-legacy-indigo: var(--accent); /* карантин закрыт 2026-07-11: индиго сведён к бренду (решение Вани) */

  /* CLEANUP Пачка A (2026-07-09): 6 нейтральных токенов. Сводят «разъехавшиеся» серые —
     10 оттенков текста и 4 почти-одинаковых светлых фона — к единой шкале. Микросдвиг ≤6 ед.
     яркости (glазом неразличим), утверждено Ваней (L2). НЕ трогают: приоритеты П1/П2/П3,
     LE-цвета (legal_entities.color), СЭД status-*, графики, палитру занятости. */
  --surface: #f9fafb;        /* read-only поля, zebra, шапки таблиц; свёл #f9fafb/#f8fafc/#f8f9fa/#fafafa */
  --hover: #f3f4f6;          /* наведение на пункты/дни/кнопки */
  --divider: #f1f5f9;        /* тонкие разделители строк (slate-100) */
  --border-strong: #e5e7eb;  /* заметные рамки секций/карточек (gray-200) */
  --border-input: #d1d5db;   /* рамки полей/select/textarea (gray-300) */
  --text-strong: #1e293b;    /* тёмные заголовки, крупные цифры; свёл #1e293b/#1f2937/#334155 */

  /* Аудит цвета 14.08. Сетка часов в расписании была #f4f7fb — линии почти
     невидимы, час глазом не отсчитать. «Сегодня» отличался фоном #faf9ff,
     различие было на грани заметности. */
  --grid-line: #e6ebf2;      /* линии сетки календаря и таблиц-расписаний */
  --today-bg: #f4f1ff;       /* заливка сегодняшнего столбца/строки */
  --zebra: #f6f8fb;          /* чётные строки таблиц */
}

/* Тёмная тема (Ваня 21.10; план tmp/plans/2026-10-21-dark-theme-plan.md). Включает каждый сам:
   ЛК → «Основное» → «Оформление», выбор хранится в браузере, атрибут ставит js/theme-init.js до отрисовки.
   Только @media screen — печать всегда светлая.
   Правила: у каждого цветового токена светлой темы — пара здесь (гейт tests/dark-theme-2026-10-21.test.js).
   Где светлой теме токен не нужен, а тёмной нужен — роль --dk-* объявлена ТОЛЬКО здесь и берётся
   с запасным значением: var(--dk-роль, <как было>). Светлая тема при этом не меняется ни на пиксель. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --sidebar-bg: #15181f;
    --sidebar-active: rgba(124,118,214,.18);
    --sidebar-hover: #1e222b;
    --sidebar-text: #9aa4b2;
    --sidebar-text-hover: #e6e8ec;
    --sidebar-text-active: #b8b3e6;
    --sidebar-section: #6f7a89;
    --sidebar-border: #252a34;

    /* Приглушённая палитра (Ваня 21.10: «много неона»): насыщенность ~40–50 %, без кислотных оттенков. */
    --accent: #7c76d6;
    --accent-hover: #8984de;
    --accent-light: rgba(124,118,214,.16);
    --accent-strong: #b3aee6;
    --on-color: #ffffff;

    --content-bg: #0f1116;
    --card: #181b22;
    --border: #2b313c;
    --text: #e7e9ee;
    --text-secondary: #a9b2bf;
    --muted: #a9b2bf;
    --muted-light: #8a95a4;

    --success: #5fb48c;  --success-bg: rgba(80,165,115,.16);  --success-text: #93c9ae;
    --warning: #d9a84a;  --warning-bg: rgba(200,155,60,.16);  --warning-text: #dcc08a;
    --danger: #d9777a;   --danger-bg: rgba(200,90,90,.16);    --danger-text: #e0a3a3;
    --info: #6f9bd6;     --info-bg: rgba(85,130,200,.16);     --info-text: #a6bfe0;
    --info-line: #5584c4;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px -4px rgba(0,0,0,.5);
    --shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 8px 20px -6px rgba(0,0,0,.6);
    --shadow-lg: 0 10px 25px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.35);

    --status-neutral-bg: #262932;               --status-neutral-text: #c4c2ba;
    --status-progress-bg: rgba(85,130,200,.18);  --status-progress-text: #a6bfe0;
    --status-warn-bg: rgba(200,155,60,.18);      --status-warn-text: #dcc08a;
    --status-accepted-bg: rgba(120,160,70,.20);  --status-accepted-text: #b0cc92;
    --status-returned-bg: rgba(200,90,90,.20);   --status-returned-text: #e0a3a3;

    --surface: #1c2028;
    --hover: #232833;
    --divider: #232833;
    --border-strong: #2f3541;
    --border-input: #3a4150;
    --text-strong: #f1f3f6;
    --grid-line: #262b35;
    --today-bg: rgba(124,118,214,.12);
    --zebra: #1b1e26;

    --st-goal: #a9a3e0;    --st-goal-soft: rgba(124,118,214,.20);
    --st-proj: #86a8d4;    --st-proj-soft: rgba(85,130,200,.20);
    --st-ini: #82b89a;     --st-ini-soft: rgba(80,165,115,.20);
    --st-risk: #d6a06a;    --st-risk-soft: rgba(205,125,75,.20);
    --st-risk-hi: #dc9393; --st-risk-hi-soft: rgba(200,90,90,.20);

    /* Роли только тёмной темы (см. правило выше) */
    --dk-badge-bg: var(--accent);          /* счётчик в меню: --accent-strong здесь светлый */
    --dk-accepted-strong: #3B6D11;         /* заливка «Принять» при наведении — как в светлой */
    --dk-warn-strong: #854F0B;
    --dk-on-strong-bg: #3a4150;            /* кружок «×» на картинке: фон --text-strong здесь светлый */
    --dk-info-strong: #3f6fb8;             /* заливка под белым текстом там, где светлая берёт --info-text */
    --dk-success-strong: #2f7a5c;          /* то же для --success-text */

    /* Палитра для цветов, вписанных прямо в стиль (шаг 1, 21.10): var(--dk-роль, #как-было).
       Нейтральные — по светлоте исходного цвета: */
    --dk-n-page: var(--content-bg);        /* фон всей страницы (вход) */
    --dk-n-card: var(--card);              /* белый фон */
    --dk-n-surface: var(--surface);        /* почти белый фон (#f8f9fa, #f1f5f9) */
    --dk-n-hover: var(--hover);            /* светло-серый фон, плашки (#eef0f2, #e2e8f0) */
    --dk-n-strong: #3d4452;                /* серый фон точек и полосок (#cbd5e1) */
    --dk-n-line: var(--border);            /* светлая рамка (#e2e8f0, #eef0f2) */
    --dk-n-line2: var(--border-input);     /* рамка потемнее (#cbd5e1, #d1d5db) */
    --dk-n-text: var(--text);              /* почти чёрный текст (#1e293b, #1f2937) */
    --dk-n-text2: var(--text-secondary);   /* тёмно-серый текст (#374151, #4b5563) */
    --dk-n-muted: var(--muted-light);      /* серый текст (#6b7280, #888780) */
    /* Цветные — по оттенку: bg — бледная заливка, bg2 — заливка насыщеннее,
       line — рамка, text — тёмный цветной текст. */
    --dk-red-bg: rgba(200,90,90,.16); --dk-red-bg2: rgba(200,90,90,.28); --dk-red-line: rgba(200,90,90,.38); --dk-red-text: #dc9a9a;
    --dk-orange-bg: rgba(205,125,75,.16); --dk-orange-bg2: rgba(205,125,75,.28); --dk-orange-line: rgba(205,125,75,.38); --dk-orange-text: #d6ad90;
    --dk-amber-bg: rgba(200,155,60,.16); --dk-amber-bg2: rgba(200,155,60,.28); --dk-amber-line: rgba(200,155,60,.38); --dk-amber-text: #d4bd88;
    --dk-green-bg: rgba(80,165,115,.16); --dk-green-bg2: rgba(80,165,115,.28); --dk-green-line: rgba(80,165,115,.38); --dk-green-text: #93c4a6;
    --dk-teal-bg: rgba(70,160,150,.16); --dk-teal-bg2: rgba(70,160,150,.28); --dk-teal-line: rgba(70,160,150,.38); --dk-teal-text: #8cc2ba;
    --dk-blue-bg: rgba(85,130,200,.16); --dk-blue-bg2: rgba(85,130,200,.28); --dk-blue-line: rgba(85,130,200,.38); --dk-blue-text: #9db6d9;
    --dk-violet-bg: rgba(124,118,214,.16); --dk-violet-bg2: rgba(124,118,214,.28); --dk-violet-line: rgba(124,118,214,.38); --dk-violet-text: #b5b0e3;
    --dk-pink-bg: rgba(200,100,150,.16); --dk-pink-bg2: rgba(200,100,150,.28); --dk-pink-line: rgba(200,100,150,.38); --dk-pink-text: #d6a3bd;

    /* Helpdesk (08.11): тёмные пары токенов раздела */
    --hd-col-new: rgba(124,118,214,.06);   --hd-col-new-bg: rgba(124,118,214,.16);   --hd-col-new-t: #b5b0e3;   --hd-col-new-line: #7c76d6;
    --hd-col-work: rgba(85,130,200,.06);   --hd-col-work-bg: rgba(85,130,200,.16);   --hd-col-work-t: #9db6d9;  --hd-col-work-line: #5582c8;
    --hd-col-check: rgba(200,155,60,.06);  --hd-col-check-bg: rgba(200,155,60,.16);  --hd-col-check-t: #d4bd88; --hd-col-check-line: #c89b3c;
    --hd-col-done: rgba(80,165,115,.06);   --hd-col-done-bg: rgba(80,165,115,.16);   --hd-col-done-t: #93c4a6;  --hd-col-done-line: #50a573;
    --hd-topic-0: #8fb0da; --hd-topic-1: #78bfa9; --hd-topic-2: #a9a4e0; --hd-topic-3: #d49479; --hd-topic-4: #d493ae; --hd-topic-5: #d4b070; --hd-chip-on-text: #12161f;
    --hd-v-bg: rgba(124,118,214,.16);  --hd-v-t: #b5b0e3;
    --hd-pg-bg: rgba(85,130,200,.16);  --hd-pg-t: #9db6d9;
    --hd-w-bg: rgba(200,155,60,.16);   --hd-w-t: #d4bd88;
    --hd-ok-bg: rgba(80,165,115,.16);  --hd-ok-t: #93c4a6;
    --hd-r-bg: rgba(200,90,90,.16);    --hd-r-t: #e0a3a3;
    --hd-n-bg: rgba(150,155,165,.16);  --hd-n-t: #b0b5bf;
  }
}
body { font-family: var(--font); background: var(--content-bg); color: var(--text); margin: 0; padding: 0; font-size: 15px; line-height: 1.6; }
html { margin: 0; padding: 0; }

/* Layout */
.app { display: flex !important; height: 100vh; width: 100vw; overflow: hidden; }
/* Полоса администратора висит fixed поверх всего, а .app сжимается на её высоту:
   иначе объявление накрыло бы шапку раздела. Переменную ставит public/js/system-banner.js
   (box-sizing: border-box глобально, поэтому padding внутри 100vh, без скролла). */
.app { padding-top: var(--sysbanner-h, 0px); }
/* Объявление в ленте новостей: видно с первого взгляда, что жанр другой.
   Полоса слева + тёплый фон — раньше отличие читалось только мелким чипом
   (замечание Вани 10.08: «непонятно, что это локальная новость»). */
.news-card--announcement {
  border-left: 3px solid var(--warning) !important;
  background: linear-gradient(90deg, var(--warning-bg) 0%, var(--card) 60%) !important;
}

/* Мини-подсказка по разделу: значок «?» в шапке и всплывающая карточка под ним
   (спека 2026-08-10-section-help-design.md). Поповер, а не полоса под шапкой:
   не сдвигает содержимое раздела и не ломает flex-раскладку .topbar. */
.section-help { position: relative; display: inline-flex; align-items: center; }
.section-help__btn {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); cursor: pointer;
  font-size: 12px; font-weight: 600; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.section-help__btn:hover { color: var(--accent); border-color: var(--accent); }
.section-help__pop {
  position: absolute; top: 28px; left: 0; z-index: 120; width: 380px; max-width: 90vw;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: 14px 16px;
  font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text);
  white-space: normal;
}
.section-help__title { font-weight: 600; margin-bottom: 8px; font-size: 13px; }
.section-help__pop p { margin-bottom: 8px; }
.section-help__pop p:last-child { margin-bottom: 0; }
.section-help__start { color: var(--muted); }
/* Сценарии «как сделать»: свёрнуты в строку, раскрываются по клику. */
.section-help__howto { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.section-help__howto-title {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; padding: 5px 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--accent); text-align: left; font-family: inherit;
}
.section-help__howto-title:hover { text-decoration: underline; }
.section-help__steps { margin: 2px 0 8px 22px; padding: 0; color: var(--text); }
.section-help__steps li { margin-bottom: 5px; padding-left: 2px; }
.section-help__steps li:last-child { margin-bottom: 0; }
/* Телефон: окно открывалось от кнопки вправо и уходило за край — текст и «как сделать»
   обрезаны (аудит экрана 02.10, №2). Ставим его во всю ширину под шапкой, длинное
   листается внутри. */
@media (max-width: 600px) {
  .section-help__pop {
    position: fixed; left: 12px; right: 12px; top: calc(56px + var(--sysbanner-h, 0px));
    width: auto; max-width: none; max-height: 70vh; overflow-y: auto;
  }
}

.system-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 14px; font-weight: 500; line-height: 1.35;
  background: var(--warning-bg); color: var(--warning-text);
  border-bottom: 1px solid var(--warning);
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
/* «Нельзя закрыть» — про остановку работы, поэтому красным, а не янтарным. */
.system-banner--locked { background: var(--danger-bg); color: var(--danger-text); border-bottom-color: var(--danger); }
.system-banner__icon { flex-shrink: 0; font-size: 15px; }
.system-banner__text { flex: 1; min-width: 0; }
.system-banner__close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 4px; color: inherit; opacity: .65;
}
.system-banner__close:hover { opacity: 1; }
.sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); flex-shrink: 0; background: var(--sidebar-bg); display: flex; flex-direction: column; border-right: 0.5px solid var(--sidebar-border); z-index: 10; }
.main { flex: 1; min-width: 0; display: grid; grid-template: 1fr / 1fr; overflow: hidden; }
.main > div { grid-area: 1 / 1; display: flex; flex-direction: column; overflow: auto; min-height: 0; }
/* min-height + flex-wrap: при узком экране/зуме контролы переносятся на 2-й ряд, а не
   обрезаются/наезжают (фикс «наплыва кнопок»). На обычных экранах — тот же вид (52px). */
.topbar { background: var(--card); border-bottom: 0.5px solid var(--border); padding: 6px 20px; min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; row-gap: 8px; font-weight: 500; font-size: 16px; flex-shrink: 0; }
.topbar-date { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: auto; }
.page { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.page-scroll { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.content { flex: 1; padding: 16px 20px; overflow: auto; min-height: 0; }

/* Sidebar */
.sidebar-logo { padding: 16px; font-weight: 500; font-size: 15px; color: var(--text); border-bottom: 0.5px solid var(--sidebar-border); display: flex; align-items: center; gap: 10px; letter-spacing: -.2px; }
.sidebar-logo .icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--accent); border-radius: 8px; font-size: 14px; color: var(--on-color); font-weight: 700; }
/* Крестик «свернуть меню»: на десктопе скрыт, показывается в мобильном @media 768px.
   Специфичность .sidebar-logo .sidebar-close — чтобы перебить .btn-icon (display:inline-flex). */
.sidebar-logo .sidebar-close { display: none; }
.sidebar-menu { flex: 1; padding: 6px 0; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar-menu::-webkit-scrollbar { width: 4px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,.08); border-radius: 4px; }
.menu-section { padding: 10px 12px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sidebar-section); font-weight: 500; }
.menu-section:first-child { padding-top: 8px; }
.menu-item { display: flex; align-items: center; gap: 9px; padding: 6px 12px; color: var(--sidebar-text); cursor: pointer; font-size: 13px; transition: all .15s; border-left: none; border-radius: 8px; margin: 1px 6px; }
.menu-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.menu-item.active { background: var(--sidebar-active); color: var(--sidebar-text-active); font-weight: 500; }
.menu-item .icon { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }
/* Единые контурные иконки (Lucide-спрайт #ic-*): наследуют цвет пункта через currentColor. */
svg.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
.menu-item .icon svg.ic { width: 18px; height: 18px; display: block; margin: 0 auto; }
.btn svg.ic { width: 14px; height: 14px; vertical-align: -2px; }
/* Бейдж справа в пункте меню — счётчик активных назначений мне (sidebarBadges). */
.menu-badge {
  margin-left: auto;
  background: var(--dk-badge-bg, var(--accent-strong));
  color: var(--on-color);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.4;
  flex-shrink: 0;
  min-width: 18px;
  text-align: center;
}
.menu-item.active .menu-badge { background: var(--card); color: var(--accent-strong); }
.badge { margin-left: auto; background: var(--status-returned-bg); color: var(--status-returned-text); border-radius: 10px; padding: 2px 6px; font-size: 10px; font-weight: 500; }
.sidebar-bottom { margin-top: auto; }
.sidebar-user { padding: 12px 14px; border-top: 0.5px solid var(--sidebar-border); display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; background: var(--sidebar-active); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--accent-strong); font-weight: 700; flex-shrink: 0; }

/* Аудит дизайна 30.08: кнопки рисовались системным Arial среди Inter — у .btn не было font-family,
   глобального reset нет. Наследуем шрифт у всех контролов. */
button, input, select, textarea { font-family: inherit; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1.4;
       transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .08s ease; }
/* Тактильный отклик и доступный фокус — на всех кнопках (дизайн-проход 24.08). */
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Primary: мягкая глубина в покое, приподнимается на hover, вдавливается при нажатии —
   ключевое действие «читается» пальцем и глазом, но без крикливости. */
.btn-primary { background: var(--accent); color: var(--on-color); box-shadow: 0 2px 6px -1px rgba(127,119,221,.45); border: 0.5px solid var(--accent); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 5px 14px -3px rgba(127,119,221,.55); }
.btn-primary:active { box-shadow: 0 1px 3px rgba(127,119,221,.4); }
.btn-secondary { background: var(--card); color: var(--text); border: 0.5px solid var(--border); padding: 6px 12px; }
.btn-secondary:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }

/* Cards */
.card { background: var(--card); border-radius: 12px; border: 0.5px solid var(--border); box-shadow: var(--shadow); transition: box-shadow .15s; }
.card:hover { box-shadow: var(--shadow-md); }
.card-header { padding: 14px 18px; font-weight: 600; font-size: var(--font-size-md); border-bottom: 0.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; }

/* Dashboard grid */
.dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }

/* Status badges (pills) */
.status { display: inline-flex; align-items: center; font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 500; letter-spacing: .2px; white-space: nowrap; }
/* DESIGN-FIX-21: значения из токенов :root (--status-*), идентичны прежним hex. */
.status-planned { background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.status-new { background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.status-held { background: var(--success-bg); color: var(--success-text); }
.status-done { background: var(--success-bg); color: var(--success-text); }
.status-in_progress { background: var(--status-progress-bg); color: var(--status-progress-text); }
.status-review { background: var(--status-warn-bg); color: var(--status-warn-text); }
.status-accepted { background: var(--status-accepted-bg); color: var(--status-accepted-text); }
.status-returned { background: var(--status-returned-bg); color: var(--status-returned-text); }
.status-not_actual { background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.status-postponed { background: var(--status-warn-bg); color: var(--status-warn-text); }
.status-cancelled { background: var(--danger-bg); color: var(--danger-text); }

/* Deadline colors */
.deadline-late { background: var(--danger-bg); color: var(--danger-text); }
.deadline-soon { background: var(--warning-bg); color: var(--warning-text); }
.deadline-ok { background: var(--success-bg); color: var(--success-text); }

/* Modal */
/* z-index 350 (было 200): модалка обязана лежать ПОВЕРХ карточки-дровера
   (.center-modal-panel 300 + .center-modal-scrim 299) — из карточки задачи создают
   подзадачу, из карточки встречи поручение, и форма открывалась под ними.
   Жалоба Вани 31.07: «нажимаю подзадачу — она скрыта окном задачи». Гейт:
   tests/frontend-conventions.test.js. Ниже дровера настроек (400) и модалок 1000+. */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(4px); z-index: 350; display: flex; align-items: center; justify-content: center; }
/* Диалоги, заданные шириной в пикселях, на узком экране вылезали за край и
   уносили кнопки за пределы видимости (аудит М1). Одно правило страхует все
   самодельные модалки разом — ширину каждой по отдельности не трогаем. */
.modal-overlay > div { max-width: 95vw; }

/* Централизованные окна-карточки (Волна 2.5): встреча/задача/стратегия открываются
   по центру как модалки, а не выезжают сбоку. Панель — flex-колонка с max-height,
   внутренний body сам скроллится (flex:1;overflow-y:auto). */
.center-modal-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); z-index: 299; }
.center-modal-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 480px; max-width: calc(100vw - 32px); max-height: 90vh;
  background: var(--card); border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
  z-index: 300; display: flex; flex-direction: column; overflow: hidden;
}
/* Карточка поверх карточки (28.09): поручение из встречи открывает задачу — она и её шторка выше встречи
   (300), но ниже модалок (.modal-overlay 350): подзадача и вопросы из задачи по-прежнему поверх.
   Класс ставит taskDrawer (stacked). Гейт: tests/meeting-card-wave4-2026-09-28.test.js. */
.center-modal-scrim.cm-stack { z-index: 319; }
.center-modal-panel.cm-stack { z-index: 320; }
.modal { background: var(--card); border-radius: var(--radius-lg); padding: 24px; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal h3 { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: 18px; color: var(--text); }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: var(--font-size-xs); font-weight: 600; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 9px 12px; border: 0.5px solid var(--border); border-radius: var(--radius); font-size: var(--font-size-base); outline: none; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.form-textarea { min-height: 72px; resize: vertical; }
/* Компактное поле (UI-волна 2026-07-11): вид .form-input, но без width:100% —
   для фильтров в топбарах и инлайн-форм. */
.input-inline { width: auto; padding: 7px 12px; border: 0.5px solid var(--border); border-radius: var(--radius); font-size: var(--font-size-sm); outline: none; font-family: inherit; background: var(--card); transition: border-color .15s, box-shadow .15s; }
/* Кнопка «Фильтры» для сворачивания селектов — только телефон (см. медиа ≤768). */
.mobile-filters-toggle { display: none; }
.input-inline:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
/* Единый бейдж-чип (UI-волна 2026-07-11): вместо самопальных инлайн-пилюль.
   Тон — модификатором на токенах; семантические палитры (приоритеты, ЮЛ, статусы задач) НЕ сюда. */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.chip--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.chip--info { background: var(--info-bg); color: var(--info-text); }
.chip--success { background: var(--success-bg); color: var(--success-text); }
.chip--warning { background: var(--warning-bg); color: var(--warning-text); }
.chip--danger { background: var(--danger-bg); color: var(--danger-text); }
.chip--accent { background: var(--accent-light); color: var(--accent-strong); }

/* Дизайн-волна 30.08 (Б): три роли заголовков вместо восьми инлайн-размеров.
   .h-kpi — крупная цифра, .h-card — заголовок карточки/блока, .h-label — подпись. */
.h-kpi { font-size: 22px; font-weight: 600; }
.h-card { font-size: 15px; font-weight: 600; }
.dash-col__title, .h-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Окна, заход 1 (26.09): низ окна прилипает к краю — кнопка «Сохранить» видна, даже когда форма длиннее экрана.
   Поля и bottom −24 px = отступ .modal (у всех 25 окон с общим низом он 24 — проверено): sticky в Chrome
   считается от внутренней границы отступа — при bottom:0 низ висел на 24 px выше края, под ним просвечивали поля. */
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin: 20px -24px -24px; padding: 14px 24px; border-top: 1px solid var(--border); position: sticky; bottom: -24px; z-index: 2; background: var(--card); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }

/* Финансовые таблицы Сводки: единый вид числовых таблиц (спека 2026-07-08 §2).
   --fixed + colgroup — одинаковые ширины денежных колонок между блоками;
   .no-fact прячет колонки факта одной точкой (вместо инлайна на каждой ячейке). */
.fin-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fin-table--fixed { table-layout: fixed; }
.fin-table .num { text-align: right; white-space: nowrap; }
.fin-table .name-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-table.no-fact .col-fact { display: none; }
.fin-table col.col-money { width: 150px; }
.fin-table col.col-delta { width: 120px; }
.fin-table col.col-pct { width: 70px; }
.fin-table col.col-marker { width: 28px; }

/* «Сводка» v6, «Показатели» (F1a 14.10): карточки долей ФОТ и административных расходов —
   крупно факт, сбоку план и утверждено, три тонкие полосы (утверждено / план / факт). */
.ind-block { margin-bottom: 24px; }
.ind-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.ind-ver { align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--muted); }
.ind-ver select { padding: 4px 8px; font-size: 12px; }
.ind-note { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.ind-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ind-card { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ind-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.ind-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 24px; }
.ind-hero { display: flex; align-items: center; gap: 10px; font-size: 30px; line-height: 1.1; color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ind-sub { font-size: 12px; color: var(--muted); }
.ind-side { display: grid; gap: 2px; padding-bottom: 3px; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ind-side b { font-weight: 600; color: var(--text-strong); }
.ind-vac { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* F1b: подпись полосы — выбранная версия («корректировка 13.10»), колонка подписей общая на все полосы
   карточки: сетка — у .ind-bars, строки (.ind-bar с x-show) — display: contents. */
.ind-bars { display: grid; grid-template-columns: max-content minmax(0, 1fr) 40px; align-items: center; gap: 7px 10px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ind-bar { display: contents; }
.ind-bar > :last-child { text-align: right; font-weight: 600; }
.ind-bar--fact { color: var(--text-strong); font-weight: 600; }
.ind-track { position: relative; height: 8px; border-radius: 4px; background: var(--border); }
.ind-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); opacity: .45; }
.ind-bar--fact .ind-fill { opacity: 1; }
.ind-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--muted-light); }
.ind-axis { position: relative; height: 14px; font-size: 11px; color: var(--muted-light); }
.ind-axis > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ind-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.ind-legend > span { display: inline-flex; align-items: center; }
.ind-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.ind-dot--ok { background: var(--success); } .ind-dot--warn { background: var(--warning); } .ind-dot--bad { background: var(--danger); }
.ind-le { margin-top: 8px; }
.btn.ind-more { padding: 4px 0; font-size: 13px; color: var(--accent-strong); }
.ind-le .table-wrap { max-width: 760px; margin-top: 4px; border: 0.5px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.ind-table th, .ind-table td { padding: 7px 10px; }
.ind-table th.ind-grp { text-align: center; }
.ind-table .ind-total td { font-weight: 600; background: var(--surface); }
.ind-muted { margin-left: 6px; font-size: 11px; color: var(--muted); }

/* «Сводка» v6, «Деньги до конца года» и «Остаток по месяцам» (F1b 14.10): таблица-формула по юрлицам
   и мини-графики. Цвета линий — как у графика «Поступлений» (analytics-year.js), легенда — те же. */
.cash-block { margin-bottom: 24px; }
.cash-wrap { border: 0.5px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.cash-table th, .cash-table td { padding: 8px 10px; }
.cash-table thead th { vertical-align: bottom; }
.cash-table th.num { text-align: right; }
.cash-table th.cash-grp { text-align: center; border-bottom: 0.5px solid var(--border); }
.cash-table .cash-le { position: sticky; left: 0; z-index: 1; background: var(--card); }
.cash-table thead .cash-le { background: var(--surface); }
.cash-sub { font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.cash-mini-h .cash-sub { margin-top: 0; }
.cash-strong { font-weight: 600; color: var(--text-strong); }
.cash-table .cash-bad { color: var(--danger-text); }
.cash-res-view { align-items: center; gap: 2px; }
.cash-res-edit { display: grid; gap: 6px; min-width: 150px; text-align: left; }
.cash-res-edit .form-input { font-size: 12px; padding: 5px 8px; }
.cash-res-btns { display: flex; gap: 6px; }
.cash-res-btns .btn { padding: 4px 10px; font-size: 12px; }
.cash-table tr.cash-m { display: none; }
.cash-empty { text-align: center; color: var(--muted); }
.cash-meta { font-size: 12px; color: var(--muted); margin-top: 8px; }
.cash-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.cash-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cash-ln { display: inline-block; width: 16px; height: 0; border-top: 2px solid #378ADD; }
.cash-ln--plan { border-top: 2px dashed #94a3b8; }
.cash-ln--forecast { border-top: 3px dotted #C27512; }
.cash-ln--reserve { width: 14px; border-top: 1.5px dashed #E24B4A; }
.cash-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #E24B4A; }
.cash-minis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cash-mini { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; min-width: 0; }
.cash-mini-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 6px; }
.cash-mini-c { position: relative; height: 160px; }
@media (max-width: 768px) {
  /* Телефон: статус — строкой под юрлицом, колонка статуса прячется. */
  .cash-table .cash-st { display: none; }
  .cash-table tr.cash-m { display: table-row; }
  .cash-table tbody tr:first-child td { border-bottom: 0; padding-bottom: 2px; }
  .cash-table tr.cash-m td { padding-top: 2px; }
  .cash-table th, .cash-table td { padding-left: 4px; padding-right: 4px; font-size: 12px; }
  .cash-table thead th, .cash-table thead th.num { font-size: 10px; letter-spacing: 0; white-space: normal; }
}

/* «Сводка» v6, «Деньги программ» (F1c 14.10): полоса денег программы — целевые пришло (тёмная) ·
   целевые прогноз (светлая) · уставные (серая) · не хватает (розовая), риска — расходы за год; масштаб
   общий на все строки. Имя программы закреплено при прокрутке таблицы; на телефоне разница — ещё и у полосы.
   Сегменты идут после <template x-for> — первый из них ловим :first-of-type, а не :first-child. */
.prog-block { margin-bottom: 24px; }
.split-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.split-line .split-text { flex: 0 1 auto; min-width: 0; }
.split-btn { font-size: 12px; padding: 4px 10px; }
.split-modal { width: 480px; }
.split-h { margin: 0 0 10px; }
.split-p { font-size: 14px; color: var(--text); line-height: 1.5; margin-bottom: 8px; }
.split-sub { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.split-ul { margin: 0; padding-left: 18px; font-size: 13px; }
.split-ul li { margin-bottom: 3px; overflow-wrap: anywhere; }
.split-err { margin-top: 10px; font-size: 13px; color: var(--danger-text); }
.split-note { margin-top: 8px; font-size: 12px; color: var(--muted); }
.split-note--warn { color: var(--warning-text); }
.prog-table th, .prog-table td { padding: 8px 10px; }
.prog-table thead th { vertical-align: bottom; }
.prog-table th.num { text-align: right; }
/* Шапки колонок переносятся («расходы за год» — в две строки): иначе 10 колонок не влезают в 1366 px. */
.prog-table thead th.num { white-space: normal; min-width: 64px; }
.prog-table th.prog-grp { text-align: center; border-bottom: 0.5px solid var(--border); }
.prog-table .prog-name { position: sticky; left: 0; z-index: 1; background: var(--card); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.prog-table thead .prog-name { background: var(--surface); }
.prog-table .prog-bar-c { width: 28%; min-width: 170px; }
.prog-bw { display: flex; align-items: center; gap: 8px; }
.prog-bar { position: relative; display: block; flex: 1; height: 14px; min-width: 150px; }
.prog-seg { position: absolute; top: 0; bottom: 0; border-right: 2px solid var(--card); }
.prog-seg:first-of-type { border-radius: 3px 0 0 3px; }
.prog-seg--fact { background: #378ADD; }
.prog-seg--rest { background: var(--dk-blue-bg2, #B5D4F4); }
.prog-seg--stat { background: #C3CAD4; }
.prog-seg--gap { background: var(--dk-red-bg2, #F6CACA); }
.prog-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text-strong); }
.prog-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.prog-sw-tick { display: inline-block; width: 2px; height: 12px; border-radius: 1px; background: var(--text-strong); }
.prog-unit { color: var(--muted-light); }
.prog-none { font-size: 12px; color: var(--muted-light); white-space: nowrap; }
.prog-sub { font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.prog-diff { font-weight: 600; }
.prog-bad { color: var(--danger-text); }
.prog-ok { color: var(--success-text); }
.prog-table tr.prog-gray td { color: var(--muted-light); font-size: 12px; }
.prog-d { display: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
@media (max-width: 768px) {
  .prog-d { display: inline; }
  .prog-table .prog-bar-c { min-width: 0; }
  .prog-bar { min-width: 110px; }
  .prog-table .prog-name { max-width: 130px; }
  .prog-table th, .prog-table td { padding-left: 4px; padding-right: 4px; font-size: 12px; }
  .prog-table thead th, .prog-table thead th.num { font-size: 10px; letter-spacing: 0; white-space: normal; }
}
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
thead th { background: var(--surface); padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border-bottom: 2px solid var(--border); }
tbody td { padding: 10px 12px; border-bottom: 0.5px solid var(--divider); vertical-align: middle; color: var(--text); }
tbody tr { min-height: 44px; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--accent-light); }
tbody tr:last-child td { border-bottom: none; }

/* Зебра (аудит цвета 14.08). На таблице в семь колонок и полсотни строк глаз
   теряет строку на полпути — в справочнике сотрудников это видно особенно.
   Фон вешаем на td, а не на tr: у tr его перебивают собственные фоны ячеек.
   Класс ставится ЯВНО, а не глобально по table: в разделах есть таблицы, где
   строки уже красятся своей логикой (уровни бюджета, статусы СЭД), и полоска
   поверх такой заливки читалась бы как сбой. */
.table-zebra tbody tr:nth-child(even) td { background: var(--zebra); }
/* Наведение должно перебивать зебру, поэтому та же специфичность и свой тон. */
.table-zebra tbody tr:hover td { background: var(--accent-light); }
/* 30.09 (мосты СЭД ↔ Штат): строка вакансии, на которую пришли из документа или карточки сотрудника. */
.table-zebra tbody tr.vacancy-row--focus td { background: var(--sidebar-active); }
.table-zebra tbody tr.vacancy-row--focus td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* 30.09: у карточки сотрудника до пяти вкладок — отступы уже, чтобы ряд влез в 600 px без полосы
   прокрутки; на телефоне ряд листается пальцем, полосу не показываем. */
.staff-card-tabs { scrollbar-width: none; }
.staff-card-tabs::-webkit-scrollbar { display: none; }
.staff-card-tabs .card-tab { padding: 10px 14px; flex: 0 0 auto; }

/* Loading / empty states */
.empty-state { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }

/* Alpine x-cloak */
[x-cloak] { display: none !important; }

/* Danger button */
.btn-danger { background: var(--danger-bg); color: var(--danger-text); border: 1px solid #fca5a5; }
.btn-danger:hover { background: var(--dk-red-bg2, #fecaca); border-color: #f87171; }

/* Аудит 05.08 (E3/D19): .btn-success и .btn-warning стояли на живых кнопках
   («Принять» и «Вернуть на доработку» в карточке задачи), но правил в CSS не было
   вовсе — обе рисовались дефолтно-серыми, и два действия с противоположными
   последствиями были неразличимы. При этом в списке «Принять» зелёная, в карточке —
   нет: один и тот же поступок выглядел по-разному.
   Тон берём у статусов, которые эти кнопки и проставляют: принято → зелёный
   --status-accepted-*, возврат на доработку → янтарный --status-warn-*. Форма — как
   у .btn-danger (мягкая заливка + рамка), hover заливает акцентом. Новых цветов не
   заводим. В тёмной теме (21.10) --status-*-text светлые — заливку при наведении берём из --dk-*. */
.btn-success { background: var(--status-accepted-bg); color: var(--status-accepted-text); border: 1px solid var(--status-accepted-text); }
.btn-success:hover { background: var(--dk-accepted-strong, var(--status-accepted-text)); color: var(--on-color); }
.btn-warning { background: var(--status-warn-bg); color: var(--status-warn-text); border: 1px solid var(--status-warn-text); }
.btn-warning:hover { background: var(--dk-warn-strong, var(--status-warn-text)); color: var(--on-color); }

/* Tree action buttons */
.tree-row-actions {
  display: flex;
  gap: 3px;
  margin-left: 6px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
.tree-row:hover .tree-row-actions { opacity: 1; }
.btn-tree {
  padding: 1px 6px;
  font-size: 10px;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  line-height: 1.5;
  white-space: nowrap;
}
.btn-tree:hover { background: var(--hover); color: var(--text-secondary); }
.btn:disabled, .btn-icon:disabled { opacity: .5; cursor: not-allowed; }
/* Кнопка-иконка (заход 1 автономной UI-сессии): квадрат под svg.ic, цвет через currentColor. */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: none; background: none; cursor: pointer;
  border-radius: var(--radius);
  color: var(--muted); font-size: 15px; line-height: 1;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--hover); color: var(--text); }
.btn-icon svg.ic { width: 16px; height: 16px; vertical-align: 0; }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-icon--danger:hover { background: var(--danger-bg); color: var(--danger-text); }
.btn-icon--accent { color: var(--accent); }
.btn-icon--accent:hover { background: var(--accent-light); color: var(--accent-hover); }
.btn-icon--sm { width: 22px; height: 22px; font-size: 13px; }
.btn-icon--sm svg.ic { width: 13px; height: 13px; }
/* Аудит доступности 14.08: 22×22 — меньше минимальной цели 24×24, а пальцем
   в такую кнопку в таблице попасть тяжело (их 98 штук по разделам).
   Расширяем ОБЛАСТЬ ПОПАДАНИЯ невидимым слоем, а не саму кнопку: увеличение
   размера сдвинуло бы вёрстку в плотных строках таблиц.
   По горизонтали добавляем всего по 1px: соседние кнопки стоят через gap:4px,
   и более широкий слой перекрывал бы соседа. По вертикали место есть. */
.btn-icon--sm { position: relative; }
.btn-icon--sm::after { content: ''; position: absolute; inset: -5px -1px; }
.btn-icon--bordered { border: 1px solid var(--border-input); background: var(--card); }
/* Использовались в разметке, но не были определены — доопределяем под систему .btn. */
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-ghost { background: none; border: none; color: var(--muted); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.tree-amount {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
  min-width: 90px;
  text-align: right;
}

/* Expense tabs */
.expense-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 0; }
/* Один underline-таб (21.09): раньше четыре клона (.expense-tab, .card-tab, .subtab-btn,
   .tasktab) держали одно и то же подчёркивание по-разному. Общее — здесь; частные
   отличия (мелкий кегль у Бюджета/Сводки, счётчик и свои токены у .tasktab) — у себя. */
.card-tab, .subtab-btn, .expense-tab, .tasktab { background: none; border: none; border-radius: 0; padding: 10px 18px; font-size: var(--font-size-base); font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; }
.card-tab:hover, .subtab-btn:hover, .expense-tab:hover { color: var(--accent); }
.card-tab.active, .subtab-btn.active, .expense-tab.active, .tasktab.active { color: var(--accent); border-bottom-color: var(--accent); }
.expense-tab { font-size: var(--font-size-sm); margin-bottom: -2px; }
/* «Настройки» (04.10, макет 2026-10-04-settings-tabs): 8 групп — underline-табы, разделы группы — чипы
   .filter-btn под ними, «Первые шаги» — плашка над «Организацией». Телефон: группы сеткой 4×2, без прокрутки. */
.settings-groups { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--border); margin-bottom: 14px; }
.settings-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.first-steps-tip { max-width: 780px; border: 1px solid var(--accent); background: var(--accent-light); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
@media (max-width: 520px) {
  .settings-groups { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .settings-groups .card-tab { padding: 9px 3px; font-size: 11.5px; text-align: center; }
}
/* 24.09: переключатель периода в Бюджете (Год / С начала года / Месяц) — сегменты одной рамкой. */
.seg-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.seg-switch button { background: var(--card); border: none; border-right: 1px solid var(--border-strong); padding: 5px 12px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.seg-switch button:last-child { border-right: none; }
.seg-switch button:hover { color: var(--accent); }
.seg-switch button.active { background: var(--accent); color: #fff; font-weight: 600; }
/* В режимах «С начала года»/«Месяц» карточек до пяти — ужимаем, чтобы влезли в строку на 1366. */
.kpi-compact { gap: 8px !important; }
.kpi-compact > div { padding: 8px 12px !important; min-width: 0 !important; }
.kpi-compact .h-kpi { font-size: 19px; }

/* === Dashboard === */

/* Topbar фильтры */
.filter-btn { padding: 6px 14px; border-radius: 20px; border: 0.5px solid var(--border); background: var(--card); cursor: pointer; font-size: var(--font-size-sm); color: var(--muted); transition: all .15s; font-weight: 500; }
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { background: var(--accent); color: var(--on-color); border-color: var(--accent); box-shadow: 0 1px 3px rgba(127,119,221,.25); }

/* Активная страница пагинации: primary не значит «текущая» (дизайн-волна 30.08). */
.btn.pager-active { background: var(--sidebar-active); color: var(--accent-strong); border: 1px solid transparent; font-weight: 600; }

/* Двухколоночный лейаут дашборда */
.dashboard-layout { display: grid; grid-template-columns: 55fr 45fr; gap: 20px; align-items: start; }

/* Календарь */
.calendar-wrap { background: var(--card); border-radius: 12px; border: 0.5px solid var(--border); padding: 16px; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar-nav-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; padding: 4px 8px; border-radius: 4px; }
.calendar-nav-btn:hover { background: var(--border); }
.calendar-month-title { font-weight: 600; font-size: 14px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-dow { text-align: center; font-size: 10px; color: var(--muted); padding: 4px 0; font-weight: 600; text-transform: uppercase; }
.calendar-day { min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 4px 2px; border-radius: 6px; cursor: pointer; transition: background .1s; font-size: 13px; }
.calendar-day:hover { background: var(--hover); }
.calendar-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.calendar-day.selected { background: var(--accent); color: var(--on-color); }
.calendar-day.selected:hover { background: var(--accent-hover); }
.calendar-day.empty { cursor: default; }
.calendar-day.empty:hover { background: transparent; }
.cal-dots { display: flex; gap: 2px; margin-top: 2px; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.calendar-day.selected .cal-dot { opacity: 0.9; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Виджеты 2×2 */
.widgets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
/* ── Главная, вариант В «личное сверху» (16.09.2026) — всё на токенах ── */
.dash-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.dash-left, .dash-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dash-deals, .dash-docs, .dash-meetings, .dash-ann { padding: 12px 14px 8px; }
/* 21.09: колонки одной высоты — «Мои дела» и «Встречи» тянутся до низа соседа (контент
   остаётся сверху), «Ждут решения»/«Для вас» — по содержимому. Убирает «разный горизонт». */
.dash-deals, .dash-meetings { flex: 1 1 auto; }
.dash-docs, .dash-ann { flex: 0 0 auto; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dash-head a { font-size: 12px; color: var(--accent); font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.dash-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-col { padding: 0 14px; border-left: 0.5px solid var(--divider); min-width: 0; }
.dash-col:first-child { padding-left: 0; border-left: 0; }
.dash-col__head { display: flex; align-items: baseline; gap: 8px; cursor: pointer; border-radius: 6px; }
.dash-col__head:hover .dash-col__title { color: var(--accent-strong); }
.dash-col .widget-number { font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
/* .dash-col__title — алиас .h-label (см. роли заголовков выше) */
.dash-col__chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 6px; min-height: 18px; }
.dash-chip-link { cursor: pointer; }
.dash-chip-link .widget-number { font-size: inherit; font-weight: inherit; color: inherit; }
.dash-rows { list-style: none; margin: 0; padding: 0; }
.dash-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; padding: 4px 0; border-top: 0.5px solid var(--divider); font-size: 12px; line-height: 1.4; cursor: pointer; min-width: 0; }
.dash-row:hover .dash-row__ttl { color: var(--accent-strong); }
.dash-row__ttl { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row__sub { grid-column: 1 / -1; font-size: 11px; color: var(--muted-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row__sub--review { color: var(--info-text); font-weight: 500; }
.dash-row__dl { font-size: 11px; color: var(--muted-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-row__dl--over { color: var(--danger-text); font-weight: 600; }
.dash-row__dl--soon { color: var(--warning-text); font-weight: 600; }
.dash-row__act { font-size: 12px; color: var(--accent); font-weight: 500; text-decoration: none; white-space: nowrap; }
.dash-doc .chip { justify-self: end; }
.dash-more { display: inline-block; padding-top: 6px; font-size: 12px; color: var(--accent); font-weight: 500; text-decoration: none; cursor: pointer; }
.dash-col__empty { font-size: 12px; color: var(--muted-light); padding: 8px 0 4px; border-top: 0.5px solid var(--divider); }
.dash-dim { color: var(--muted-light); font-weight: 400; font-size: 11px; }
.dash-mrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding: 5px 0; border-top: 0.5px solid var(--divider); font-size: 12px; align-items: center; }
.dash-mrow:first-of-type { border-top: 0; }
.dash-mrow--dim { opacity: .65; }
.dash-mrow__when { text-align: right; line-height: 1.2; }
.dash-mrow__when small { display: block; font-size: 10px; color: var(--muted); font-weight: 500; }
.dash-mrow__when b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-mrow__when b.dash-mrow__allday { color: var(--muted-light); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dash-mrow__body { min-width: 0; }
.dash-mrow__ttl { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-mrow__typ { font-size: 10px; color: var(--muted); }
.dash-mrow__video { margin-left: 6px; color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dash-mrow__video:hover { text-decoration: underline; }
.dash-org { padding: 6px 14px; background: var(--surface); border-style: dashed; box-shadow: none; margin-bottom: 12px; }
.dash-org__line { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.dash-org__lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted-light); }
.dash-org__k { font-weight: 600; color: var(--text); }
.dash-org__link { font-size: 12px; color: var(--accent); font-weight: 500; text-decoration: none; }
.dash-org__link:first-of-type { margin-left: auto; }
.dash-org__exp { font-size: 12px; color: var(--accent); font-weight: 500; }
.dash-org__exp .ic { width: 12px; height: 12px; vertical-align: -2px; }
.dash-org__detail { margin-top: 8px; padding-top: 8px; border-top: 0.5px solid var(--border); display: grid; gap: 10px; }
.dash-org__h { margin-bottom: 4px; }
.dash-org__h--danger { color: var(--danger); }
.dash-news-head { margin: 2px 0 -4px; }
.dash-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* три одинаковые карточки — вариант Б, Ваня 30.10 */
.dash-news__stack { display: contents; }
.dash-news__big, .dash-news__small { display: flex; flex-direction: column; }
.card.dash-news__item { padding: 0; overflow: hidden; border-radius: 14px; cursor: pointer; text-align: left; }
.dash-news__body { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dash-news__body > .dash-news__meta:last-child { margin-top: auto; }
.dash-news__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.dash-news__big .dash-news__ttl { font-size: 14px; }
.dash-news__cover { position: relative; overflow: hidden; background: var(--content-bg); height: 120px; flex: none; }
.dash-news__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dash-news__cover--video { background: color-mix(in srgb, var(--accent) 35%, black); color: var(--on-color); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.dash-news__play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, black 55%, transparent); padding-left: 3px; }
.dash-news__small .dash-news__play { width: 40px; height: 40px; font-size: 16px; }
.dash-news__src { font-size: 11px; font-weight: 600; opacity: .85; }
.dash-news__drawn { position: absolute; inset: 0; padding: 12px 16px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.dash-news__drawn-k { font-size: 12px; font-weight: 600; opacity: .85; }
.dash-news__drawn-big { font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dash-news__drawn-s { font-size: 12px; font-weight: 600; opacity: .85; }
.dash-news__drawn--sm { align-items: center; justify-content: center; text-align: center; padding: 8px; gap: 4px; }
.dash-news__drawn--sm .dash-news__drawn-big { display: block; font-size: 34px; line-height: 1; }
.dash-news__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* окно новости на главной: картинки и таблицы не шире окна. Карточку видео и разделы отчёта рисуют общие .news-video-card / .news-sec* (блок «Новости, вид Б» ниже) — одно оформление в разделе и на Главной. */
.dash-news-view img { max-width: 100%; height: auto; }
.dash-news-view table, .dash-news-view pre { display: block; max-width: 100%; overflow-x: auto; }
.dash-news__item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.dash-news__ttl { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.dash-news__meta { font-size: 11px; color: var(--muted-light); margin: 2px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dash-news__excerpt { margin: 2px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) {
  .dash-main, .dash-cols { grid-template-columns: 1fr; }
  .dash-col { padding: 0; border-left: 0; }
  .dash-col + .dash-col { margin-top: 10px; padding-top: 10px; border-top: 0.5px solid var(--border); }
}
@media (max-width: 820px) {
  .dash-news { grid-template-columns: 1fr; }
}
.widget-preview { margin-top: 8px; font-size: 12px; color: var(--muted); }
.widget-preview-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-by-type { margin-top: 8px; }
.widget-by-type-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 1px 0; }
.widget-progress-wrap { margin-top: 8px; background: var(--hover); border-radius: 4px; height: 6px; overflow: hidden; }
.widget-progress-bar { height: 100%; background: var(--success); border-radius: 4px; transition: width .3s; }
.widget-sub { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* Панель деталей встречи */
.meeting-detail { background: var(--card); border-radius: 12px; border: 0.5px solid var(--border); padding: 16px; min-height: 300px; }
.meeting-detail-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--muted); font-size: 13px; gap: 8px; text-align: center; }
.meeting-select-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.meeting-select-item { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.meeting-select-item:hover { background: var(--hover); }
/* Банк вопросов (Б3, 07.11): короткий список встреч под «В повестку» / «Перенести» (partials/agenda-bank-picker.html). */
.bank-pick { flex: 1 1 100%; max-width: 440px; min-width: 0; border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; font-size: 13px; }
.bank-pick__bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.bank-pick__row { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--divider); background: none; padding: 7px 10px; font: inherit; color: var(--text); cursor: pointer; }
.bank-pick > template + .bank-pick__row { border-top: 0; }
.bank-pick__row:hover:not(:disabled) { background: var(--accent-light); }
.bank-pick__row:disabled { cursor: default; color: var(--muted-light); }
.bank-pick__when { flex: 0 0 auto; font-weight: 600; font-size: 12px; white-space: nowrap; }
.bank-pick__foot { padding: 6px 10px; border-top: 1px solid var(--divider); font-size: 12px; color: var(--muted-light); }
.meeting-detail-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.meeting-detail-meta { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.detail-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.detail-section-title span { font-size: 11px; background: var(--hover); padding: 1px 6px; border-radius: 4px; text-transform: none; letter-spacing: 0; }
.detail-proposal { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); margin-bottom: 6px; font-size: 13px; }
.detail-proposal-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.detail-task { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; font-size: 13px; }
.detail-task.task-overdue { background: var(--danger-bg); }
.detail-task.task-inprogress { background: var(--dk-amber-bg, #fef9c3); }
.detail-task.task-done { background: var(--dk-green-bg, #dcfce7); }
.detail-task.task-new { background: var(--surface); border: 1px solid var(--border); }
.detail-task-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Модалка просрочки */
.overdue-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.overdue-modal { background: var(--card); border-radius: var(--radius); padding: 24px; width: 640px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; }
.overdue-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.overdue-modal-title { font-size: 16px; font-weight: 600; }
.overdue-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.overdue-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--border); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.overdue-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.overdue-table tr:hover td { background: var(--surface); cursor: pointer; }
.overdue-days { color: var(--dk-red-text, #dc2626); font-weight: 600; }

/* Аналитика — гриды */
.analytics-kpi { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.analytics-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin-bottom: 14px; }

/* ===== Responsive / Адаптивность ===== */

/* Ноутбуки и маленькие экраны (< 1280px) */
@media (max-width: 1400px) {
  /* Дашборд: 2 колонки → 1 колонка */
  .dashboard-layout { grid-template-columns: 1fr; }
  .meeting-detail { min-height: auto; }

  /* Виджеты: 2×2 → 4 в ряд (один ряд) */
  .widgets-grid { grid-template-columns: repeat(4, 1fr); }

  /* Аналитика: KPI 4 → 2×2 */
  .analytics-kpi { grid-template-columns: 1fr 1fr; }
  /* Аналитика: ряды 2 колонки → 1 колонка */
  .analytics-row { grid-template-columns: 1fr; }
}

/* Узкие экраны (< 900px) */
@media (max-width: 900px) {
  /* Сайдбар компактнее */
  .sidebar { width: 180px; min-width: 180px; }

  /* Виджеты: 4 → 2 */
  .widgets-grid { grid-template-columns: 1fr 1fr; }

  /* Topbar переносится */
  .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
}

/* Планшеты (< 768px) */
@media (max-width: 768px) {
  .sidebar {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 260px; height: 100vh;
    z-index: 100;
    background: var(--sidebar-bg);
    border-right: 0.5px solid var(--sidebar-border);
    box-shadow: 4px 0 16px rgba(0,0,0,.1);
  }
  .sidebar.open { display: flex; flex-direction: column; }
  .main { margin-left: 0 !important; }
  .content { padding: 12px; }
  .dashboard-grid, .dashboard-layout { grid-template-columns: 1fr !important; }
  .widgets-grid { grid-template-columns: 1fr 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .analytics-kpi { grid-template-columns: 1fr 1fr; }
  .analytics-row { grid-template-columns: 1fr; }
  .dept-split { flex-direction: column; }
  .dept-tree-panel { width: 100%; max-width: none; border-right: none; border-bottom: 0.5px solid var(--border); max-height: 40vh; }
  .hide-mobile { display: none !important; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .burger-btn { display: flex !important; }
  /* MOBILE-FIX (2026-07-11): крестик «свернуть» в шапке открытого меню */
  .sidebar-close { display: inline-flex !important; margin-left: auto; }
  /* дашборд: инлайн-гриды с жёсткими колонками складываем в одну */
  .dash-row2, .dash-summary { grid-template-columns: 1fr !important; }
}

/* Телефоны (< 480px) */
@media (max-width: 480px) {
  body { font-size: 14px; }
  .card { padding: 12px; border-radius: 10px; }
  .topbar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .widgets-grid { grid-template-columns: 1fr; }
  .modal { width: 95vw; padding: 16px; }
  .modal-footer { margin: 16px -16px -16px; padding: 12px 16px; bottom: -16px; }   /* = отступ .modal на телефоне */
}

/* Очень узкие (< 640px — между 480 и 768) */
@media (min-width: 481px) and (max-width: 767px) {
  .widgets-grid { grid-template-columns: 1fr 1fr; }
}

/* Strategy */
.priority-badge { border-radius: 6px; padding: 3px 8px; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--border); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
/* hover для .data-table задан ниже вместе с зеброй (аудит цвета 14.08) */


/* ===== Departments split-panel ===== */
.dept-split { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.dept-tree-panel { width: 35%; min-width: 220px; max-width: 360px; flex-shrink: 0; border-right: 0.5px solid var(--border); overflow-y: auto; background: var(--card); display: flex; flex-direction: column; }
.dept-detail-panel { flex: 1; overflow-y: auto; padding: 20px; }
.dept-tree-node { display: flex; align-items: center; padding: 7px 12px; cursor: pointer; font-size: 13px; color: var(--muted); border-radius: 8px; margin: 1px 6px; transition: background .1s; gap: 4px; }
.dept-tree-node:hover { background: var(--sidebar-hover); color: var(--text); }
.dept-tree-node.selected { background: var(--sidebar-active); color: var(--accent-strong); font-weight: 500; }
.dept-tree-toggle { width: 16px; flex-shrink: 0; color: var(--muted); font-size: 10px; text-align: center; cursor: pointer; user-select: none; }
.dept-tree-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dept-tree-badge { background: var(--border-strong); color: var(--text-secondary); border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.dept-breadcrumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 12px; flex-wrap: wrap; }
.dept-breadcrumbs a { color: var(--accent); cursor: pointer; text-decoration: none; }
.dept-breadcrumbs a:hover { text-decoration: underline; }
.dept-breadcrumbs span { color: var(--muted); }
.dept-badge-le { display: inline-block; background: var(--dk-violet-bg2, #ede9fe); color: var(--dk-violet-text, #6d28d9); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; margin-right: 4px; }
.dept-staff-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.dept-staff-table th { background: var(--hover); padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border-bottom: 1px solid var(--border); }
.dept-staff-table td { padding: 8px 10px; border-bottom: 1px solid var(--surface); }
.dept-staff-table tr:hover td { background: rgba(99,102,241,.03); }
.dept-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 16px 0 8px; }
.dept-inline-edit { display: flex; gap: 6px; align-items: center; }
.dept-inline-edit input { flex: 1; padding: 5px 8px; border: 1px solid var(--accent); border-radius: 6px; font-size: 14px; font-weight: 600; outline: none; }

/* ===== Profile page ===== */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-field { margin-bottom: 14px; }
.profile-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.profile-value { font-size: 13px; color: var(--text); padding: 6px 0; }
.profile-saved { display: inline-block; background: var(--dk-green-bg, #dcfce7); color: #16a34a; border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 600; }

/* ===== Login ===== */
.login-card { background:var(--card); border-radius:12px; box-shadow:0 4px 24px rgba(0,0,0,0.1); padding:40px; width:100%; max-width:400px; }
.login-field { margin-bottom:16px; }
.login-field label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:4px; }
.login-field input { width:100%; padding:10px 12px; border:1px solid var(--border-input); border-radius:8px; font-size:14px; box-sizing:border-box; outline:none; transition:border-color 0.2s; }
.login-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,119,221,0.15); }
.login-btn { width:100%; padding:12px; background:var(--accent); color:var(--on-color); border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; }
.login-btn:hover { background:var(--accent-hover); }
.login-btn:disabled { background:var(--muted-light); cursor:wait; }
.login-error { background:var(--dk-red-bg, #fef2f2); color:var(--dk-red-text, #dc2626); padding:8px 12px; border-radius:8px; font-size:13px; margin-bottom:16px; text-align:center; }

/* ===== x-cloak ===== */
[x-cloak] { display: none !important; }

/* Card tabs */
/* .card-tab — общее правило underline-таба выше (рядом с .expense-tab), частных отличий нет */

/* ===== Departments ===== */
.dept-item { background:var(--card); border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
.dept-level-1 { margin:8px 0 0 24px; border-radius:6px; }
.dept-level-2 { margin:8px 0 0 24px; border-radius:6px; }
.dept-row { display:flex; align-items:center; gap:12px; padding:10px 14px; }
.dept-name { flex:2; display:flex; align-items:center; gap:8px; font-weight:500; font-size:13px; }
.dept-meta { flex:2; display:flex; gap:16px; align-items:center; }
.dept-actions { display:flex; gap:6px; margin-left:auto; }
.dept-badge { border-radius:4px; padding:2px 7px; font-size:10px; font-weight:700; color:var(--on-color); }
.dept-badge-prog { background:var(--accent); }
.dept-badge-ops { background:var(--success); }

/* ===== Витрина оргструктуры (макет 2026-08-21) ===== */
.orgv-canvas { overflow-x:auto; padding:28px 24px 20px; }
.orgv-canvas::-webkit-scrollbar { height: 4px; }
.orgv-canvas::-webkit-scrollbar-track { background: transparent; }
.orgv-canvas::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.orgv-chart { width:max-content; margin:0 auto; min-width:100%; }
.orgv-root { width:340px; margin:0 auto; background:var(--accent-dark, #534AB7); color:#fff; border-radius:13px; padding:16px 20px; text-align:center; box-shadow:0 8px 22px -10px rgba(83,74,183,.55); }
.orgv-root-name { font-size:17px; font-weight:700; }
.orgv-root-total { margin-top:8px; font-size:12px; color:#DDDAF8; }
.orgv-trunk { width:2px; height:24px; background:var(--border); margin:0 auto; }
.orgv-rail { height:2px; background:var(--border); }
.orgv-row { display:flex; gap:16px; justify-content:center; align-items:stretch; padding-top:22px; }
.orgv-box { position:relative; width:250px; flex:none; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:13px 15px 11px; cursor:pointer; text-align:left; transition:border-color .15s ease-out, box-shadow .15s ease-out; }
.orgv-box::before { content:''; position:absolute; top:-22px; left:50%; margin-left:-1px; width:2px; height:22px; background:var(--border); }
.orgv-box:hover, .orgv-box:focus-visible { border-color:var(--accent); box-shadow:0 6px 18px -10px rgba(127,119,221,.5); outline:none; }
.orgv-box:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.orgv-box-name { font-size:14px; font-weight:700; line-height:1.3; }
.orgv-person { display:flex; align-items:center; gap:9px; margin-top:9px; }
.orgv-ava { width:32px; height:32px; border-radius:50%; background:var(--dk-violet-bg, #F1EFFC); color:var(--dk-violet-text, #534AB7); font-size:11px; font-weight:700; line-height:32px; text-align:center; letter-spacing:.02em; flex:none; }
.orgv-person-name { font-size:13px; font-weight:600; line-height:1.25; }
.orgv-person-role { font-size:12px; color:var(--muted); }
.orgv-vacant { color:var(--muted); font-weight:500; }
.orgv-meta { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
.orgv-meta b { color:var(--text-strong); font-weight:700; }
.orgv-les { margin-left:auto; display:flex; gap:4px; }
.orgv-more { font-size:12px; color:var(--dk-violet-text, #534AB7); margin-top:7px; font-weight:600; }
.orgv-legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--border); background:var(--surface); font-size:12px; color:var(--muted); }
.dept-le-badge { display:inline-block; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:500; margin-right:4px; }
.orgv-box-hit { border-color:var(--accent); box-shadow:0 0 0 3px var(--dk-violet-line, #F1EFFC); }
.dept-staff-hit td { background:var(--dk-violet-bg, #F1EFFC); }

/* Burger menu button (mobile) */
.burger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: none;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.burger-btn:hover { background: var(--hover); }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 99;
}
@media (max-width: 768px) {
  .sidebar-backdrop.open { display: block; }
}

/* Toast notifications */
#toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 12px 20px; border-radius: 8px; color: #fff;
  font-size: 14px; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,.15);
  animation: toast-in .3s ease;
  display: flex; align-items: center; gap: 8px;
}
.toast svg.ic { width: 16px; height: 16px; flex-shrink: 0; }
.toast-error { background: var(--danger); }
.toast-success { background: #22c55e; }
.toast-warning { background: var(--warning); }
.toast-hide { opacity: 0; transition: opacity .4s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .app { height: auto !important; overflow: visible !important; }
  .main { overflow: visible !important; }
  .main > div[x-show] { overflow: visible !important; }
  .page { overflow: visible !important; }
  .content { overflow: visible !important; padding: 0 !important; }
  #toast-container { display: none !important; }
}

.hover-highlight:hover { background: var(--divider); }

/* Income row actions — show on hover */
.income-row:hover .income-row-actions { opacity: 1 !important; }

/* Priority badge — visual hint что бейдж кликабелен (cyclePriority) */
.priority-badge:not(:disabled):hover {
  outline: 1px dashed currentColor;
  outline-offset: 1px;
}
.priority-badge:disabled {
  cursor: default;
  opacity: 0.65;
}

/* Chart skeleton — пульсирующий placeholder пока загружаются данные */
.chart-skeleton {
  position: relative;
  background: linear-gradient(90deg, var(--dk-n-surface, #f1f5f9) 0%, var(--dk-n-hover, #e2e8f0) 50%, var(--dk-n-surface, #f1f5f9) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.vacancy-row:hover .vacancy-row-actions { opacity: 1 !important; }
.news-card:hover .news-card-actions { opacity: 1 !important; }

/* Subtabs (underline style) */
.subtabs-container {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  background: transparent;
  padding: 0 4px;
  margin-bottom: 16px;
}

/* .subtab-btn — общее правило underline-таба у .expense-tab; здесь только частное */
.subtab-btn { font-size: var(--font-size-sm); margin-bottom: -2px; white-space: nowrap; }

/* Tasks sidebar */
.task-sidebar-section {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-secondary);
  padding: 12px 12px 4px;
}
.task-sidebar-divider {
  height: 0.5px; background: var(--color-border-tertiary); margin: 8px 12px;
}
.task-sidebar-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; margin: 1px 6px; border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: all .1s;
  color: var(--color-text-primary);
}
.task-sidebar-item:hover { background: var(--sidebar-hover); }
.task-sidebar-item.active { background: var(--sidebar-active); color: var(--accent-strong); font-weight: 500; }
.task-sidebar-item span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.task-sidebar-badge {
  margin-left: auto; font-size: 10px; padding: 1px 6px;
  border-radius: 8px; font-weight: 500; flex-shrink: 0;
  background: var(--status-neutral-bg); color: var(--status-neutral-text);
}
.task-sidebar-badge.red { background: var(--status-returned-bg); color: var(--status-returned-text); }
.task-sidebar-badge.amber { background: var(--warning-bg); color: var(--warning-text); }

/* ===== Боковая панель раздела — ВТОРОЙ уровень навигации ===================
   Фильтры «Задач» и журналы СЭД. E4 (аудит 05.08): на 375px эта панель занимала
   240 из 375 px и не сворачивалась — контенту оставалось ~120 px, кнопка
   «+ Новая задача» обрезалась, названия журналов срезались («Заявление на отпус»).
   Здесь — ДЕСКТОПНЫЙ вид, ровно то, что раньше стояло inline в партиалах.
   Мобильное поведение (шторка) — в @media (max-width: 768px) ниже. */
.section-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--color-background-primary);
  border-right: 0.5px solid var(--color-border-tertiary);
  padding: 8px 0;
  overflow-y: auto;
}
/* Панель журналов СЭД исторически на 20px уже — сохраняем десктоп байт-в-байт. */
.section-sidebar-narrow { width: 220px; min-width: 220px; }

/* Основная область раздела рядом с панелью. Отдельный класс нужен ещё и гейту
   flow-mobile.spec.js: он меряет, сколько ширины реально досталось контенту. */
.section-content { flex: 1; overflow-y: auto; }

/* Кнопка «Фильтры»/«Журналы» и затемнение под шторкой существуют только на узких
   экранах. Селектор с .topbar — чтобы перебить `.btn { display: inline-flex }`,
   которое объявлено выше по файлу. */
.topbar .section-sidebar-toggle { display: none; }
.section-sidebar-scrim { display: none; }
.budget-nav-scrim { display: none; }

@media (max-width: 768px) {
  /* Панель уходит из потока и выезжает поверх контента — контенту достаётся вся
     ширина экрана, а не 120 px. position: absolute (не fixed): перекрывать надо
     только тело раздела, а не топбар и не главное меню. Обёртке в партиале
     проставлен position: relative. */
  .section-sidebar,
  .section-sidebar-narrow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: 280px;
    min-width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .12);
  }
  .section-sidebar.is-open { transform: translateX(0); }

  .topbar .section-sidebar-toggle { display: inline-flex; }

  /* Затемнение под шторкой: тап по нему закрывает панель. */
  .section-sidebar-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 55;
    background: rgba(15, 23, 42, .35);
  }

  /* «Бюджет»: дерево узлов — шторка (аудит 30.08, топ-4: на 390px дерево 260px
     оставляло панели проекта ≈70px). Тот же приём, что у .section-sidebar:
     обёртка .budget-master получает position: relative, навигатор уходит из
     потока и выезжает по .is-open. Инлайновые width/flex навигатора остаются
     для десктопа — здесь перебиваем их !important, чтобы не трогать разметку. */
  .budget-master { position: relative; }
  .budget-nav {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: 280px !important;
    min-width: 280px;
    max-width: 85vw;
    flex: none !important;
    border-radius: 0 !important;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .12);
  }
  .budget-nav.is-open { transform: translateX(0); }
  .budget-nav-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 55;
    background: rgba(15, 23, 42, .35);
  }
}

/* Секция «Требует внимания» (волна 1.2) — actionable-срезы выделены */
.attn-box { margin: 4px 10px; background: var(--dk-amber-bg, #fff8ef); border: 1px solid var(--dk-amber-line, #f6e2c2); border-radius: 10px; padding: 2px 0; }
.attn-box .attn-sec { color: var(--dk-amber-text, #b9791a); }
.attn-box .attn-it { color: var(--dk-amber-text, #7a5512); }

/* Полоса срочности (волна 1.1) — заменила KPI-дашборд */
.task-pulse { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.task-pulse-c {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-radius: 10px;
  padding: 8px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  background: var(--color-background-secondary); color: var(--color-text-secondary);
}
.task-pulse-c b { font-size: 15px; font-weight: 700; }
/* Дизайн-волна 30.08: цветной индикатор — CSS-точка вместо эмодзи (системные
   эмодзи рисуются по-разному на Windows/Mac). Цвет — от класса .over/.today/.week. */
.task-pulse-c::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.task-pulse-c.over  { background: var(--dk-red-bg, #fdecec); color: var(--dk-red-text, #c0392b); }
.task-pulse-c.today { background: var(--dk-amber-bg, #fef4e6); color: var(--dk-amber-text, #b9791a); }
.task-pulse-c.week  { background: var(--dk-blue-bg, #eef2fb); color: var(--dk-blue-text, #3b5bdb); }
.task-pulse-c.active { border-color: currentColor; }
.task-pulse-hint { color: var(--color-text-secondary); font-size: 11.5px; cursor: pointer; margin-left: 4px; }

/* Task KPI cards */
.task-kpi-card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 0 0 12px 12px; padding: 14px 16px;
  cursor: pointer; text-align: center; transition: all .15s;
  border-top: 3px solid var(--accent);
}
.task-kpi-card:nth-child(2) { border-top-color: #E24B4A; }
.task-kpi-card:nth-child(3) { border-top-color: #BA7517; }
.task-kpi-card:nth-child(4) { border-top-color: #378ADD; }
.task-kpi-card:hover { border-color: var(--color-border-secondary); border-top-width: 3px; }
.task-kpi-card.active { border-color: var(--accent); border-top-width: 3px; }
.task-kpi-label {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-text-secondary); margin-bottom: 6px;
}
.task-kpi-number {
  font-size: 28px; font-weight: 500; line-height: 1; color: var(--color-text-primary);
}

/* Task list container */
.task-list-container {
  background: transparent;
}
.task-list-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid #94a3b8;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s, transform .05s;
}
.task-list-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.task-list-item:active { transform: scale(0.998); }
/* Цветная полоса слева — общие классы (используются и в .task-row, и в .task-list-item) */
.task-list-item.lane-new        { border-left-color: #94a3b8; }
.task-list-item.lane-in_progress { border-left-color: var(--info); }
.task-list-item.lane-review     { border-left-color: var(--warning); }
.task-list-item.lane-accepted   { border-left-color: var(--success); }
.task-list-item.lane-done       { border-left-color: var(--success); }
.task-list-item.lane-returned   { border-left-color: var(--danger); }
.task-list-item.lane-postponed  { border-left-color: var(--warning); }
.task-list-item.lane-not_actual { border-left-color: var(--dk-n-line2, #cbd5e1); }
.task-list-item.lane-overdue    { border-left-color: var(--danger); }
.task-card-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.task-card-meta {
  font-size: 12px; color: var(--color-text-secondary);
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.task-meta-tag {
  background: var(--color-background-secondary); padding: 1px 6px; border-radius: 4px;
}
.task-meta-tag.kt { background: var(--status-accepted-bg); color: var(--status-accepted-text); }

/* Колоночная таблица задач (Срез 1 v2: выровненные колонки + кнопки действий).
   ВАЖНО: класс .tlist-row (НЕ .task-row — тот занят гридом реестра Поручений). */
/* Вкладки разделов (волна 1.1) — иконка + счётчик + подсказка */
.tasktabs { display: flex; gap: 22px; border-bottom: 2px solid var(--color-border-tertiary); margin-bottom: 14px; overflow: visible; }
/* .tasktab — общее подчёркивание в правиле underline-таба (у .expense-tab); здесь свои токены,
   плотная посадка без боковых отступов (gap у .tasktabs) и счётчик. */
.tasktab { font-size: 14px; color: var(--color-text-secondary); padding: 0 0 9px; display: flex; align-items: center; gap: 6px; margin-bottom: -2px; }
.tasktab.active { color: var(--color-text-primary); font-weight: 600; }
.tasktab em { background: var(--color-border-tertiary); color: var(--color-text-secondary); border-radius: 9px;
  padding: 0 7px; font-size: 11px; font-style: normal; font-weight: 600; }
.tasktab.active em { background: var(--sidebar-active); color: var(--accent-strong); }

/* Заголовок текущего среза */
.tlist-slice { margin: 4px 0 10px; }
.tlist-slice h3 { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin: 0; }
.tlist-slice p { font-size: 11.5px; color: var(--color-text-secondary); margin: 2px 0 0; }

.tlist-head { display: flex; align-items: center; gap: 12px; padding: 2px 14px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--color-text-secondary); font-weight: 600; }
.tlist-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-left: 4px solid #94a3b8; border-radius: 10px; padding: 9px 14px; margin-bottom: 6px; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
.tlist-row:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
.tlist-row.lane-new        { border-left-color: #94a3b8; }
.tlist-row.lane-in_progress { border-left-color: var(--info); }
.tlist-row.lane-review     { border-left-color: var(--warning); }
.tlist-row.lane-accepted   { border-left-color: var(--success); }
.tlist-row.lane-returned   { border-left-color: var(--danger); }
.tlist-row.lane-postponed  { border-left-color: var(--warning); }
.tlist-row.lane-not_actual { border-left-color: var(--dk-n-line2, #cbd5e1); }
.tlist-row.lane-overdue    { border-left-color: var(--danger); }
.trc-task { flex: 1; min-width: 160px; }
.trc-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trc-sub { margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }
/* Плашка статуса в строке списка: размер — здесь, цвет и фон — от .status-* (тёмная пара в токенах). */
.trc-status { padding: 1px 8px; font-size: 11px; }
.trc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.trc-proj { width: 150px; flex-shrink: 0; overflow: hidden; }
.trc-who { width: 130px; flex-shrink: 0; font-size: 13px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trc-due { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.trc-act { width: 150px; flex-shrink: 0; display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.task-act-btn { border: 1px solid var(--border); background: var(--card); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--color-text-primary); white-space: nowrap; }
.task-act-btn.primary { background: var(--accent); color: var(--on-color); border-color: var(--accent); }
.task-act-btn.success { background: #3E9B6B; color: var(--on-color); border-color: #3E9B6B; }
.task-act-more { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 15px; color: var(--color-text-secondary); flex-shrink: 0; line-height: 1; }
.task-act-more:hover { background: var(--color-background-secondary); }

/* Метка приоритета в строке задачи (только high/low; обычный — без метки) */
.task-prio { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; flex-shrink: 0; }
.task-prio.hi { background: var(--dk-red-bg, #FCEBEB); color: var(--dk-red-text, #E24B4A); }
.task-prio.lo { background: var(--dk-n-hover, #F0F0EE); color: var(--dk-n-muted, #888780); }

/* Относительная плашка срока */
.task-due-pill { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 20px; }
.task-due-pill.over { background: var(--dk-red-bg, #FCEBEB); color: var(--dk-red-text, #E24B4A); }
.task-due-pill.soon { background: var(--dk-amber-bg, #FBF1E2); color: var(--dk-amber-text, #BA7517); }
.task-due-pill.ok   { background: var(--dk-n-hover, #F0F0EE); color: var(--dk-n-muted, #888780); }
.task-due-pill.none { color: #C4C3BF; }
/* Цветная полоска срочности под сроком (волна 1.1) */
.task-due-bar { height: 3px; border-radius: 2px; margin-top: 5px; width: 64px; background: var(--dk-n-strong, #cbd5e1); }
.task-due-bar.due-over { background: #e24b4a; }
.task-due-bar.due-soon { background: #e8a13a; }
.task-due-bar.due-ok   { background: var(--dk-n-strong, #cbd5e1); }
.task-due-bar.due-none { background: transparent; }

/* Drawer задачи — единая лента активности (Срез 2) */
.dr-feed-filter { display:flex; gap:6px; margin-bottom:14px; }
.dr-ff { border:1px solid var(--border); background:var(--card); border-radius:7px; padding:5px 12px; font-size:12.5px; color:var(--color-text-secondary); cursor:pointer; font-weight:500; }
.dr-ff.on { background:var(--sidebar-active); color:var(--accent-strong); border-color:transparent; }
.dr-feed-dot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; background:var(--dk-n-strong, #cbd5e1); }
.dr-feed-dot.comment { background:var(--accent); }
.dr-commentbar { display:flex; align-items:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--border-strong); background:var(--card); }
/* @упоминания в строке комментария (спека 2026-09-03) */
.dr-mention-pop { position:absolute; bottom:100%; left:20px; right:120px; background:var(--card); border:1px solid var(--border-input); border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.12); z-index:20; max-height:180px; overflow-y:auto; }
.dr-mention-item { padding:6px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--hover); }
.dr-mention-item:hover { background:var(--surface); }
.mention { color:var(--accent); font-weight:600; }
.dr-result-banner { border:1px solid var(--border-strong); border-radius:10px; padding:12px 14px; margin-bottom:16px; background:var(--surface); }

/* ── Окна, заход 1 (26.09.2026): карточка задачи «шапка · тело · низ» ──
   Макет tmp/mockups/2026-09-26-windows.html (одобрен Ваней). Шапка ужата до ~130 px, тело — одна прокрутка,
   главное действие — в закреплённом низу. Ширина 720 и постоянная высота: окно не прыгает при смене вкладок. */
@media (min-width: 769px) {
  .center-modal-panel.cm-wide { width: 720px; height: min(90vh, 860px); }
}
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.dr-head { padding: 14px 20px 0; border-bottom: 1px solid var(--border-strong); }
.dr-head__top { display: flex; align-items: flex-start; gap: 8px; }
.dr-head__title { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.dr-link { background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-size: 12px; font-weight: 400; cursor: pointer; }
.dr-link:hover { text-decoration: underline; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; }
.dr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: none; border-radius: 10px; font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.dr-chip .ic { width: 12px; height: 12px; }
/* Видеосвязь в карточке встречи (13.10): «Подключиться» · ссылка · «Скопировать»; ошибка — янтарём. */
.dr-video { margin: 8px 0 2px; padding: 7px 10px; border-radius: 8px; background: var(--accent-light); }
.dr-video--err { background: var(--warning-bg); color: var(--warning-text); }
.dr-video a.btn { text-decoration: none; }
.dr-video__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; min-width: 0; }
.dr-video__url { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 140px; }
.dr-chip--long { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.dr-chip--status { color: var(--on-color); }
.dr-chip--grey { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.dr-chip--grey a { color: var(--accent); }
.dr-chip--acc { background: var(--sidebar-active); color: var(--accent-strong); }
button.dr-chip { cursor: pointer; }
.dr-chip--warn { background: var(--warning-bg); color: var(--warning-text); }
.dr-chip--lock { background: var(--warning-bg); color: var(--warning-text); }
.dr-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-top: 4px; }
.dr-tabs .card-tab { padding: 8px 14px; white-space: nowrap; }
.dr-more { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 240px; padding: 4px; background: var(--card); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 2px; font-weight: 400; }
.dr-more button { display: flex; align-items: center; gap: 8px; border: none; background: none; text-align: left; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.dr-more button:hover { background: var(--hover); }
.dr-more .dr-more__danger { color: var(--danger-text); }
.dr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.dr-panel { padding: 12px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; }
.dr-grid { display: grid; grid-template-columns: 110px 1fr 110px 1fr; gap: 6px 12px; font-size: 13px; margin-bottom: 16px; }
.dr-grid__wide { grid-column: 2 / -1; }
/* Текст с «Показать всё»: рамка снаружи, обрезка на внутреннем блоке — иначе в нижний отступ
   проглядывает половина 7-й строки. */
.dr-textbox { font-size: 13px; line-height: 1.5; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.dr-textbox--card { background: var(--card); }
.dr-textbox > div { white-space: pre-wrap; }   /* pre-wrap только на тексте: иначе отступы разметки рисуются пустыми строками */
.dr-foot { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-top: 1px solid var(--border-strong); background: var(--card); }
.dr-foot > .action-bar { flex: 1; }
.dr-foot__main { order: 2; margin-left: auto; font-weight: 600; }
.dr-foot__hint { flex: 1; font-size: 11px; color: var(--muted-light); }
.dr-foot .action-menu { top: auto; bottom: calc(100% + 4px); left: 0; right: auto; }
.dr-commentbar__row { display: flex; align-items: flex-end; gap: 8px; }
.dr-commentbar .dr-pending { margin: 0 0 8px; }
/* Окна, заход 3 (26.09): ошибка проверки и «чего не хватает» — у кнопки, слева в низу окна. */
.form-error { margin-right: auto; font-size: 12.5px; color: var(--danger-text); font-weight: 500; }
.form-hint-missing { margin-right: auto; font-size: 12px; color: var(--muted-light); }
/* Окна, заход 2 (26.09): закреплённый ряд кнопок в окнах без .modal-footer (вакансии, карточка сотрудника).
   --sf-pad = отступ прокручиваемой области (sticky считается от внутренней границы отступа). */
.sticky-foot { position: sticky; bottom: calc(-1 * var(--sf-pad, 24px)); z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin: 16px calc(-1 * var(--sf-pad, 24px)) calc(-1 * var(--sf-pad, 24px)); padding: 12px var(--sf-pad, 24px); background: var(--card); border-top: 1px solid var(--border); }
/* Сетки форм в окнах: minmax(0,…) — поле не распирает колонку; на телефоне — одна колонка (дата встречи — отдельной строкой). */
.form-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) {
  .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .form-grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-grid-3 > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .staff-card-modal { width: 100vw; max-width: 100vw !important; max-height: 100dvh !important; height: 100dvh; border-radius: 0; }
  .staff-card-modal .card-header { flex-wrap: wrap; gap: 8px; }
}
/* Окна, заход 2 (26.09): шапка карточки встречи — кто ведёт/дата/место строкой, «Вы будете?» чипами. */
.dr-head__meta { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-head__meta b { font-weight: 500; color: var(--text); }
.dr-head__hint { font-size: 11.5px; color: var(--muted-light); }
.dr-rsvp { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; flex-wrap: wrap; }
.dr-rsvp .btn-sm { padding: 3px 10px; font-size: 11.5px; }
.dr-rsvp__no:not(.btn-primary) { color: var(--danger-text); }
.dr-tab-n { color: var(--muted-light); font-weight: 400; }
.dr-more__note { padding: 6px 10px; font-size: 11.5px; color: var(--muted-light); white-space: normal; max-width: 260px; }
@media (max-width: 768px) {
  .center-modal-panel.cm-wide { width: 100vw; height: 100dvh; max-height: 100dvh; }
  .dr-head { padding: 10px 14px 0; }
  .dr-body { padding: 12px 14px; }
  .dr-foot { padding: 10px 14px 14px; }
  .dr-grid { grid-template-columns: 104px 1fr; }
  .dr-foot__hint { display: none; }
  .dr-head__top .btn-icon, .dr-head__top .btn { min-width: 44px; min-height: 44px; }
  .dr-foot .btn { min-height: 44px; }
  /* ✕ во всех окнах — под палец (аудит окон, 26.09): раньше 28 px у всех, кроме карточек задачи/встречи */
  .btn-icon[aria-label="Закрыть"] { min-width: 44px; min-height: 44px; }
  .dr-chip--long { max-width: 100%; }
  .dr-sm-hide { display: none; }   /* «Принять» / «Вернуть» без хвоста — обе кнопки влезают в 390 px */
  .dr-head__meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* дата и место не обрезаются на фамилии */
  .dr-tabs .card-tab { padding: 8px 10px; }
}

/* Пустое состояние списка задач */
.task-empty { text-align: center; padding: 54px 20px; color: var(--color-text-secondary); }
.task-empty-ico { font-size: 40px; margin-bottom: 12px; opacity: .6; }
.task-empty-t { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 5px; }
.task-empty-d { font-size: 13px; }

/* Plashka «Главная задача / Назад к задаче» сверху drawer'а карточки. */
.task-parent-crumb:hover { background: var(--dk-violet-bg2, #ede9fe) !important; border-color: #c4b5fd !important; }

/* Task group headers */
.task-group-header {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 12px 0 6px;
}

/* Task content area */
.task-content-area {
  flex: 1; overflow-y: auto; padding: 16px;
  background: var(--color-background-tertiary);
}

/* Task activity card */
.task-activity-card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 12px; padding: 14px 16px; margin-top: 8px;
}

/* Task tab pills */
.task-tab-pills {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--color-background-secondary);
  border-radius: 10px; margin-bottom: 16px;
}
.task-tab-pill {
  padding: 6px 14px; border-radius: 8px; font-size: 13px;
  cursor: pointer; border: none; transition: all .1s;
  background: transparent; color: var(--color-text-secondary);
}
.task-tab-pill.active {
  background: var(--color-background-primary); color: var(--accent-strong);
  font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Strategy focus — централизовано (Волна 2.5): по центру как модалка, шире 480px. */
.strategy-drawer-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* min-width в пикселях делал панель шире экрана на узких окнах (аудит М2):
     520px не помещались, и правый край с кнопками уезжал. */
  width: 50vw; min-width: min(520px, 100vw - 32px); max-width: 800px; max-height: 90vh;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 300ms ease, opacity 300ms ease;
}
.strategy-drawer-enter { transform: translate(-50%, -48%) scale(0.98); opacity: 0; }
.strategy-drawer-leave { transform: translate(-50%, -48%) scale(0.98); opacity: 0; }

/* === Notifications bell (sidebar) === */
.notification-wrapper {
  position: relative;
  display: inline-block;
}
.notification-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  position: relative;
  line-height: 1;
}
.notification-btn:hover { opacity: 0.8; }
.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #E24B4A;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.notification-dropdown {
  /* Раньше было position:absolute + left:-260px от кнопки в sidebar —
     на узких экранах вылазило за левый край viewport. Привязываем
     к viewport через position:fixed, чтобы panel всегда помещалась. */
  position: fixed;
  bottom: 60px;
  left: 76px;
  width: min(360px, calc(100vw - 92px));
  max-height: min(480px, calc(100vh - 80px));
  background: var(--card);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 600px) {
  .notification-dropdown { left: 8px; bottom: 60px; }
}
.notification-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification-link {
  background: none;
  border: none;
  color: var(--accent-strong);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.notification-link:hover { text-decoration: underline; }
.notification-list {
  flex: 1;
  overflow-y: auto;
  max-height: 420px;
}
.notification-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted, #94a3b8);
  font-size: 13px;
}
.notification-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: background 0.1s;
}
.notification-item:hover { background: var(--surface); }
.notification-item:last-child { border-bottom: none; }
.notification-unread {
  background: var(--dk-violet-bg, #f5f4ff);
  border-left: 3px solid var(--accent);
  padding-left: 13px;
}
.notification-unread:hover { background: var(--dk-violet-bg, #efedff); }
.notification-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  margin-bottom: 2px;
}
.notification-body {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification-time {
  font-size: 11px;
  color: var(--muted-light);
}
/* 16.10: внизу всплывашки — переход на страницу «Уведомления» в Личном кабинете. */
.notification-footer { border-top: 1px solid var(--border); }
.notification-footer .notification-link { display: block; width: 100%; min-height: 44px; padding: 12px 16px; font-weight: 600; }

/* === Страница «Уведомления» в Личном кабинете (16.10) === */
.notif-tab-count { display: inline-block; margin-left: 6px; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--accent-light); color: var(--accent-strong); font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; }
.notif-page { padding: 16px 20px; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.notif-readall { color: var(--accent-strong); font-size: 13px; font-weight: 600; cursor: pointer; }
.notif-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.notif-chip-n { margin-left: 6px; font-weight: 700; }
.notif-day { padding: 16px 4px 6px; }
.notif-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 44px; gap: 10px; align-items: start; padding: 10px 4px; border-bottom: 1px solid var(--divider); cursor: pointer; border-radius: 6px; }
.notif-row:hover { background: var(--hover); }
.notif-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.notif-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.notif-row--new .notif-dot { background: var(--accent); }
.notif-title { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.notif-row--new .notif-title { font-weight: 600; color: var(--text-strong); }
.notif-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.notif-meta { font-size: 12px; color: var(--muted-light); text-align: right; white-space: nowrap; line-height: 1.6; }
.notif-check { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px 0; border: none; border-radius: 8px; background: none; color: var(--muted-light); cursor: pointer; }
.notif-check:hover { background: var(--accent-light); color: var(--accent-strong); }
.notif-empty { padding: 28px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.notif-more { padding-top: 14px; text-align: center; }
.notif-foot { padding-top: 14px; font-size: 12px; color: var(--muted-light); }
@media (max-width: 768px) {
  .notif-page { padding: 12px; }
  .notif-row { grid-template-columns: 8px minmax(0, 1fr) auto 44px; gap: 8px; }
  .notif-page .seg-switch button, .notif-page .filter-btn, .notif-page .notif-readall, .notif-page .notif-more .btn { min-height: 44px; }
}

/* ========== Реестр задач — карточки-строки (V1) ========== */
.tasks-list { display: flex; flex-direction: column; gap: 8px; }
.tasks-head, .task-row {
  display: grid;
  grid-template-columns: 24px minmax(180px, 2fr) 100px 100px 130px minmax(100px, 1fr) minmax(90px, 1fr) 90px 120px 36px;
  gap: 6px;
  align-items: center;
}
.tasks-head {
  padding: 8px 16px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .3px;
  /* Компенсируем border-left: 4px и border: 1px у .task-row,
     чтобы колонки заголовка точно совпадали с колонками карточек. */
  border: 1px solid transparent;
  border-left: 4px solid transparent;
}
.task-row {
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid #94a3b8;
  font-size: 13px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .05s;
}
.task-row:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.task-row:active { transform: scale(0.998); }
/* Цветная полоса слева — по статусу */
.task-row.lane-new       { border-left-color: #94a3b8; }
.task-row.lane-in_progress { border-left-color: var(--info); }
.task-row.lane-review    { border-left-color: var(--warning); }
.task-row.lane-accepted  { border-left-color: var(--success); }
.task-row.lane-done      { border-left-color: var(--success); }
.task-row.lane-returned  { border-left-color: var(--danger); }
.task-row.lane-postponed { border-left-color: var(--warning); }
.task-row.lane-not_actual { border-left-color: var(--dk-n-line2, #cbd5e1); }
.task-row.lane-overdue   { border-left-color: var(--danger); }
/* Ключевая задача — фон-маркер на названии */
.task-row .key-flag {
  display: inline-block;
  font-size: 13px;
  margin-right: 4px;
}
.task-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.task-cell.muted { color: var(--text-secondary); }
.task-cell.deadline { white-space: nowrap; color: var(--text-secondary); }
.task-cell.deadline.overdue { color: var(--danger); font-weight: 600; }
.task-cell.title-cell { white-space: normal; }
.task-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }

/* Подзадачи — мягче, без рамки, тонкий отступ слева */
.subtasks-block {
  margin: 4px 0 4px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 2px dashed var(--border);
}
.subtask-row {
  display: grid;
  grid-template-columns: 16px minmax(180px, 2fr) 100px 100px 130px minmax(100px, 1fr) minmax(90px, 1fr) 90px 120px 36px;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  background: var(--surface);
  border-radius: 6px;
  font-size: 12px;
}
.subtask-row:hover { background: var(--divider); }
.subtask-arrow { color: #cbd5e1; }

.tasks-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted-light);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

/* На узких экранах — 1 колонка с inline meta */
@media (max-width: 900px) {
  .tasks-head { display: none; }
  .task-row {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
  }
  .task-row .task-cell.muted,
  .task-row .task-cell.deadline,
  .task-row .task-cell:nth-child(n+3) {
    grid-column: 2;
    font-size: 12px;
  }
  /* Подзадачи забыли перевести вместе с задачами (аудит М4): десять колонок
     фиксированной ширины на узком экране распирали список наружу. */
  .subtask-row {
    grid-template-columns: 16px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 6px;
  }
  .subtask-row > *:nth-child(n+3) { grid-column: 2; }
}

/* Tooltip — управляется через public/js/tooltip.js (position:fixed, не обрезается
   границами drawer/modal). На .has-tooltip ставится data-tooltip="...".
   Использование:
     <span class="help-hint" data-tooltip="Описание...">текст</span>
     <span class="help-icon has-tooltip" data-tooltip="...">ⓘ</span> */
.has-tooltip { cursor: help; }
#global-tooltip {
  position: fixed;
  z-index: 10000;
  background: #1e293b;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 6px;
  max-width: 320px;
  width: max-content;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease-out, transform .12s ease-out;
}
#global-tooltip.visible { opacity: 1; transform: translateY(0); }
#global-tooltip::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
  left: calc(var(--arrow-x, 50%) - 6px);
}
#global-tooltip[data-side="top"]::after {
  bottom: -12px;
  border-top-color: #1e293b;
}
#global-tooltip[data-side="bottom"]::after {
  top: -12px;
  border-bottom-color: #1e293b;
}
.help-hint { border-bottom: 1px dotted var(--muted-light); }
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
  border: 1px solid var(--muted-light);
  border-radius: 50%;
  background: var(--surface);
}
.help-icon:hover { background: var(--border); border-color: var(--text-secondary); color: var(--text-strong); }

/* Бейдж занятости участника встречи (free/busy) */
.avail-badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 12px; white-space: nowrap; }
.avail-badge.av-free    { background: var(--dk-green-bg, #e6f4ea); color: var(--dk-green-text, #1f7a3f); }
.avail-badge.av-busy    { background: var(--dk-red-bg, #fdeaea); color: var(--dk-orange-text, #b3471a); }
.avail-badge.av-absent  { background: var(--dk-amber-bg, #fef3e0); color: var(--dk-amber-text, #9a6a00); }
.avail-badge.av-unknown { background: var(--dk-n-hover, #eef0f2); color: var(--dk-n-muted, #667085); }
/* 07.11 (ТЗ 06.11 п. 5.В.4): «🏠 удалённо» у участника встречи — не отсутствие; цвет как 🏠 в «Моей команде». */
.avail-badge.av-remote  { background: var(--success-bg); color: var(--success-text); }

/* Сетка «Подобрать время» (в центрированной модалке) */
.tf-grid { display: grid; gap: 3px; align-items: center; }
.tf-hour { text-align: center; font-weight: 600; font-size: 12px; }
.tf-name { font-size: 13px; white-space: nowrap; padding-right: 6px; }
.tf-cell { height: 24px; border-radius: 4px; }
.tf-free { background: var(--dk-green-bg, #e6f4ea); }
.tf-busy { background: var(--dk-red-bg, #fdeaea); }
.tf-sum { text-align: center; font-weight: 700; font-size: 13px; }
.tf-ok { background: var(--dk-green-bg2, #cdeccf); color: var(--dk-green-text, #1f7a3f); cursor: pointer; }
.tf-no { color: var(--dk-orange-text, #b3471a); }

/* A11y-FIX-22 (2026-07-02): видимый фокус клавиатуры. Раньше в CSS было только 2 :focus
   на инпутах, :focus-visible не было нигде → таб-навигация по кнопкам/меню/карточкам
   невидима. :focus-visible срабатывает только при клавиатурном фокусе (не при клике мышью),
   поэтому не мешает существующим box-shadow-рингам инпутов. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.menu-item:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ============================================================================
   УЗКИЕ РАБОЧИЕ ЭКРАНЫ (аудит адаптива 19.08.2026)

   Замер на 18 разделах: на ноутбуке 1163px контент не помещался в пяти
   разделах (Бюджет −869px, Настройки −441, Оргструктура −365, Штат −333),
   на 1025px — в двенадцати. Три причины: меню держало 220px и умело прятаться
   только ниже 768px; между 900 и 1400 не было ни одной точки перестройки;
   колонки таблиц делили ширину по длине текста без потолка.

   Здесь лечатся все три. Состояние меню живёт классом .nav-collapsed на .app —
   ставит его app-shell.js (авто по ширине + ручной выбор человека).
   ========================================================================= */

/* --- Свёрнутое меню: полоса иконок вместо 220px --- */
.app.nav-collapsed .sidebar { width: 62px; min-width: 62px; }
.app.nav-collapsed .sidebar-logo { padding: 16px 0; justify-content: center; gap: 0; }
/* Название продукта прячем, эмодзи-логотип оставляем как якорь */
.app.nav-collapsed .sidebar-logo > span:last-of-type { display: none; }
.app.nav-collapsed .menu-section { display: none; }
/* Текст пункта — прямой текстовый узел, поэтому гасим размером шрифта,
   иконка внутри .icon имеет собственные размеры и переживает это. */
.app.nav-collapsed .menu-item { font-size: 0; justify-content: center; padding: 9px 0; margin: 1px 8px; gap: 0; }
.app.nav-collapsed .menu-item .icon { width: auto; }
/* Счётчик превращается в точку: цифра в 62px не читается всё равно */
.app.nav-collapsed .menu-badge {
  position: absolute; margin: 0; min-width: 8px; width: 8px; height: 8px;
  padding: 0; font-size: 0; border-radius: 50%; transform: translate(12px, -10px);
}
.app.nav-collapsed .sidebar-user { padding: 12px 0; justify-content: center; flex-wrap: wrap; gap: 6px; }
.app.nav-collapsed .sidebar-user > div:nth-child(2) { display: none; }
.app.nav-collapsed .external-links-title { display: none; }

/* Кнопка «свернуть меню» — только на десктопе: ниже 768px меню и так шторка */
.sidebar-collapse-btn { display: none; }
@media (min-width: 769px) {
  .sidebar-collapse-btn { display: inline-flex; margin-left: auto; flex-shrink: 0; }
  .app.nav-collapsed .sidebar-collapse-btn { margin: 0; }
}

/* --- Точка перестройки 1200: яма между 900 и 1400 --- */
@media (max-width: 1200px) {
  /* Боковые панели двухпанельных экранов ужимаются, но не исчезают */
  .dept-tree-panel { width: 28%; min-width: 190px; max-width: 260px; }
  /* Плотнее поля: на узком каждый пиксель по краям — это колонка таблицы */
  .content { padding: 14px 14px; }
  .topbar { padding: 6px 14px; }
  /* Длинные значения переносятся ПО СЛОВАМ и распирают колонку только когда
     одно слово длиннее её самой. `anywhere` пробовали — он рвал посреди слова
     («Алексан|др Павлови|ч», «Работ|ает»): метрика становилась лучше, экран хуже. */
  .table-zebra td, .table-zebra th { overflow-wrap: break-word; }
  .table-zebra td { max-width: 260px; }
  /* Колонке с ФИО нужен пол, иначе имя рассыпается на три строки */
  .table-zebra td:first-child, .table-zebra th:first-child { min-width: 190px; }
}

/* --- Планшет лёжа (1024) --- */
@media (max-width: 1024px) {
  .dept-tree-panel { width: 100%; max-width: none; max-height: 34vh;
                     border-right: none; border-bottom: 0.5px solid var(--border); }
  .dept-split { flex-direction: column; }
  .table-zebra td { max-width: 200px; }
  .analytics-kpi { grid-template-columns: 1fr 1fr; }
}

/* --- Бюджет на узком экране (аудит 19.08.2026) ---
   В таблице года описание слева и «Итого» справа закреплены (sticky), месяцы
   скроллятся между ними — задумано так. Но на ноутбуке 1163px закреплённые края
   съедали 430px из 777, и на месяцы оставалось три колонки из двенадцати.
   Разметка projects.html берёт ширины отсюда через var() — правим в одном месте. */
@media (max-width: 1300px) {
  :root { --budget-col-desc: 210px; --budget-col-total: 120px; }
}
@media (max-width: 1100px) {
  :root { --budget-col-desc: 168px; --budget-col-total: 104px; }
}

/* ============================================================================
   ДВИЖЕНИЕ ВМЕСТО РЫВКА + ПАНЕЛИ ДЕЙСТВИЙ БЕЗ ПЕРЕНОСА
   (реакция Вани 19.08 на выкатку адаптива: «сразу плывут кнопки взять задачу,
   выглядит дёшево, не адаптируется как взрослые системы»)

   Причин было две. Первая: ширина меню менялась за один кадр — 220px в 62px
   мгновенно, и это читается как дёрганье. Вторая: панели действий переносили
   кнопки на второй ряд, карточка меняла высоту, соседние блоки съезжали.
   ========================================================================= */

/* --- 1. Панель меню едет, а не телепортируется --- */
.sidebar {
  transition: width .22s cubic-bezier(.4, 0, .2, 1),
              min-width .22s cubic-bezier(.4, 0, .2, 1);
}
/* Подписи гаснут чуть быстрее, чем схлопывается панель: иначе текст успевает
   некрасиво сжаться о край. */
.menu-item, .sidebar-logo, .sidebar-user { transition: opacity .14s ease; }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .menu-item, .sidebar-logo, .sidebar-user { transition: none; }
}

/* --- 2. Панель действий: один ряд всегда --- */
/* Кнопки не переносятся; те, что помечены второстепенными, при нехватке места
   прячутся и уходят в меню «···» (public/js/action-bar.js). Высота панели
   постоянна, поэтому карточка не скачет и взгляд не теряет место. */
.action-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;      /* ключевое: ряд не ломается никогда */
  min-width: 0;
  position: relative;
}
.action-bar > .is-hidden { display: none; }
/* Кнопки не сжимаются и не рвут подпись на две строки: иначе панель растёт в
   высоту — то же «плавание», только внутри самой кнопки (замерено: 28px → 44px
   при ширине 320). Лишнее уходит под «···», а не корёжится. */
.action-bar > button { white-space: nowrap; flex-shrink: 0; }

.action-more {
  border: 0.5px solid var(--border-input, var(--border));
  background: var(--card);
  color: var(--muted);
  border-radius: var(--radius, 8px);
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.action-more:hover { border-color: var(--accent); color: var(--accent); }
.action-more[hidden] { display: none; }

.action-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  min-width: 180px;
  padding: 4px;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.action-menu[hidden] { display: none; }
.action-menu button {
  border: none;
  background: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.action-menu button:hover { background: var(--hover, var(--surface)); }

/* --- Строка задачи: подложка не отрывается от кнопок (жалоба Вани 19.08) ---
   Скриншот 13:22: белая карточка обрывалась по правому краю видимой области,
   а «Взять в работу» и «···» висели за ней на сером фоне.

   Причина: .tlist-row — блочный элемент, его ширина равна ширине контейнера,
   а содержимое (пять колонок с фиксированными ширинами) при масштабировании
   в неё не влезает и вылезает наружу вместе с кнопками. Фон при этом рисуется
   по ширине элемента, то есть по видимой области — отсюда «подложка живёт
   отдельно от кнопок».

   Лечение из двух частей: подложка растягивается по СОДЕРЖИМОМУ, и сами
   колонки ужимаются, чтобы прокрутка на рабочих ноутбуках не появлялась вовсе. */
.tlist-row, .tlist-head {
  width: 100%;               /* на широком — во всю ширину, кнопки прижаты вправо */
  min-width: 806px;          /* сумма колонок + отступы: уже этого строка не сжимается,
                                поэтому подложка всегда доходит до кнопок */
  box-sizing: border-box;
}
/* Две попытки мимо, чтобы не повторять:
   • width:max-content + min-width:100% — кнопки переставали прижиматься к правому
     краю, внутри карточки зияли 163 пустых пикселя;
   • min-width:max-content — длинное НАЗВАНИЕ задачи начинало распирать строку
     (285px вместо 140), и прокрутка появлялась там, где раньше работало
     многоточие. Поэтому минимум задан числом, а не содержимым. */

@media (max-width: 1400px) {
  .trc-proj { width: 118px; }
  .trc-who  { width: 104px; }
  .trc-due  { width: 122px; }
  .trc-act  { width: 132px; }
  .trc-task { min-width: 140px; }
  .tlist-row, .tlist-head { min-width: 692px; }   /* 616 колонок + 48 зазоров + 28 полей */
}
@media (max-width: 1100px) {
  .trc-proj { width: 96px; }
  .trc-who  { width: 92px; }
  .trc-due  { width: 112px; }
  .trc-act  { width: 124px; }
  .trc-task { min-width: 120px; }
  .tlist-row, .tlist-head { min-width: 620px; }
}
/* Агенда недели видна только на телефоне (десктоп — сетка часов).
   ВАЖНО: базовое display:none объявлено ДО @media, иначе перебило бы display:block. */
.cal-agenda { display: none; }

/* Телефон: строка задачи из таблицы становится КАРТОЧКОЙ (решение Вани 24.08,
   вариант «Б»): заголовок целиком сверху, под ним проект · ответственный · срок
   в один переносимый ряд; действие — по тапу в саму карточку (drawer), поэтому
   колонку действий и шапку таблицы прячем. Разметку не трогаем — только раскладка. */
@media (max-width: 768px) {
  .tlist-head { display: none; }
  .tlist-row {
    flex-wrap: wrap;
    min-width: 0;            /* снять табличный минимум — из-за него колонки уезжали */
    row-gap: 8px;
    padding: 12px 14px;
    align-items: center;
  }
  .trc-task { flex: 1 1 100%; min-width: 0; }
  .trc-title { white-space: normal; }   /* заголовок в несколько строк, без обрезки */
  .trc-proj { width: auto; flex: 0 1 auto; }
  .trc-who  { width: auto; flex: 0 1 auto; font-size: 12.5px; color: var(--muted); }
  .trc-due  { width: auto; flex: 0 0 auto; margin-left: auto; flex-direction: row; align-items: center; gap: 6px; }
  .trc-due .task-due-bar { display: none; }  /* полоска-индикатор в ряд не нужна */
  .trc-act { display: none; }
  /* Карточка задачи и любая center-modal — во весь экран телефона */
  .center-modal-panel {
    top: 0; left: 0; transform: none;
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
    border-radius: 0;
  }
  /* Календарь: на телефоне вместо сетки часов — агенда по дням */
  .cal-week-grid { display: none; }
  .cal-agenda { display: block; }

  /* Тап-таргеты по пальцу (аудит М-4): на телефоне мелкие кнопки/вкладки
     дорастают до ~40px, чтобы попадать без промаха. */
  .filter-btn { min-height: 38px; display: inline-flex; align-items: center; }
  .tasktab { padding-top: 8px; padding-bottom: 10px; }
  .section-help__btn { width: 32px; height: 32px; font-size: 15px; }
  .nav-arrow { min-width: 42px; min-height: 40px; font-size: 18px; }
  .dash-quick .btn { min-height: 40px; font-size: 13px; padding: 8px 14px; }
  /* Дубль «+ Встреча»: в топбаре раздела кнопка уже есть — тулбарную прячем */
  .cal-toolbar-add { display: none; }
}
/* Агенда недели — оформление карточек (display управляется выше и в @media) */
.cal-agenda-day { margin-bottom: 14px; }
.cal-agenda-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-strong); padding: 4px 2px 8px; border-bottom: 1px solid var(--border); text-transform: capitalize; }
.cal-agenda-head.today { color: var(--accent); }
.cal-agenda-today { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--sidebar-active); border-radius: 999px; padding: 1px 8px; }
.cal-agenda-empty { font-size: 12.5px; color: var(--muted-light); padding: 8px 2px; }
.cal-agenda-plan { font-size: 12.5px; padding: 8px 10px; margin-top: 8px; border-radius: 8px; background: var(--dk-blue-bg, #eef2ff); color: var(--dk-violet-text, #4338ca); cursor: pointer; }
  /* Событие из неутверждённого плана — пунктиром (02.10): видят только ведущие план. */
  .cal-agenda-plan.is-pending { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }
.cal-agenda-mtg { display: flex; gap: 10px; padding: 10px 12px; margin-top: 8px; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; cursor: pointer; }
.cal-agenda-mtg:active { background: var(--hover); }
.cal-agenda-time { font-size: 13px; font-weight: 700; color: var(--text-strong); white-space: nowrap; flex: none; min-width: 44px; }
.cal-agenda-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cal-agenda-meta { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cal-agenda-type { background: var(--sidebar-active); color: var(--accent-strong); border-radius: 999px; padding: 1px 9px; font-weight: 500; }
.cal-agenda-who { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* === Диск (спека 2026-08-26-disk-design.md) === */
.disk-th { padding: 8px 16px; font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: left; border-bottom: .5px solid var(--border); }
.disk-td { padding: 10px 16px; border-bottom: .5px solid var(--divider); vertical-align: middle; }
.disk-tr:hover td { background: var(--sidebar-hover); }
.disk-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--divider); cursor: pointer; }
.disk-row:hover { background: var(--sidebar-hover); }
.disk-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.disk-ico--pdf { background: var(--danger); } .disk-ico--doc { background: var(--dk-info-strong, var(--info-text)); } .disk-ico--xls { background: var(--success); }
.disk-ico--ppt { background: var(--warning); } .disk-ico--html { background: var(--accent); } .disk-ico--link { background: var(--accent); } .disk-ico--file { background: var(--muted-light); }


/* =========================================================================
   Мобильный аудит 30.08 (П1). Блок в конце файла — побеждает по каскаду.
   ========================================================================= */
@media (max-width: 768px) {
  /* меню-шторка: листается, и никогда не «свёрнутое до иконок» (nav-collapsed — десктопная логика) */
  .sidebar { height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .app.nav-collapsed .sidebar { width: 260px; min-width: 260px; }
  .app.nav-collapsed .sidebar-logo { padding: 16px 14px; justify-content: flex-start; gap: 8px; }
  .app.nav-collapsed .sidebar-logo > span:last-of-type { display: inline; }
  .app.nav-collapsed .menu-section { display: block; }
  .app.nav-collapsed .menu-item { font-size: 13px; justify-content: flex-start; padding: 6px 12px; margin: 1px 6px; gap: 9px; }
  .app.nav-collapsed .menu-badge { position: static; transform: none; width: auto; height: auto; min-width: 18px; padding: 0 6px; font-size: 11px; border-radius: 9px; }
  .app.nav-collapsed .sidebar-user { padding: 12px 14px; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; }
  .app.nav-collapsed .sidebar-user > div:nth-child(2) { display: block; }
  /* ряды вкладок переносятся, а не режутся */
  .tasktabs, .subtabs-container { flex-wrap: wrap; gap: 12px; }
  /* iOS зумит страницу на полях мельче 16px */
  .form-input, .form-select, .form-textarea, .input-inline, input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  /* П2: тап-таргеты не мельче 38px и таблицы, которые уводили в скролл весь раздел */
  .btn, .filter-btn, .subtab-btn, .card-tab, .tasktab { min-height: 38px; }
  .btn-icon--sm { width: 32px; height: 32px; }
  .content > .data-table { display: block; overflow-x: auto; }
  /* Мобильная волна №2 (02.09, docs/audits/2026-09-02-mobile-audit-2.md):
     селект берёт ширину самого длинного пункта и вылезал за экран (Штат, Справочник,
     Бюджет, Сводка, Новости) — режем контейнером; ФИО в таблицах с inline nowrap
     наезжало на соседнюю колонку (Справочник) — переносим. */
  .input-inline { max-width: 100%; }
  select.input-inline { min-width: 0; }
  /* группы в топбаре сделаны inline display:flex без wrap и с margin-left:auto —
     на телефоне переносим и не даём группе быть шире экрана (flex-item min-width:auto) */
  .topbar > div { flex-wrap: wrap; max-width: 100%; min-width: 0; margin-left: 0 !important; }
  /* Штат и Задачи: селекты фильтров свёрнуты за кнопкой, поиск виден всегда */
  .mobile-filters-toggle { display: inline-flex; }
  .mobile-filters:not(.is-open) .mf-collapsible { display: none !important; }
  .mobile-filters.is-open .mf-collapsible { width: 100%; }
  .staff-pager { margin-left: 0 !important; flex-wrap: wrap; width: 100%; }
  .staff-pager button { min-height: 38px; min-width: 38px; }
  .table-zebra td { white-space: normal !important; }
}

/* ---- Полоса «Сегодня» на главной (09.09.2026): единственное цветное пятно на белой
   главной — сиреневая заливка + бордюр слева как у плиток (выбор Вани: оформление 1).
   Три состояния: развёрнута / --min (свёрнута до завтра) / --empty (пустой день). ---- */
.today-strip { background: linear-gradient(120deg, var(--accent-tint-1) 0%, var(--accent-tint-2) 55%, var(--accent-tint-3) 100%); border: 1px solid var(--accent-tint-line); border-left: 6px solid var(--accent); box-shadow: 0 6px 18px -8px rgba(83,74,183,.35); padding: 14px 18px 14px 20px; margin-bottom: 16px; position: relative; }
/* padding-right у шапки — место под крестик (.today-strip__x, right:10px): на 400px он наезжал на заголовок */
.today-strip__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 32px; }
.today-strip__title { font-weight: 700; font-size: 16px; color: var(--accent-strong); letter-spacing: -.01em; }
.today-strip__title b { color: var(--text); font-weight: 700; }
.today-strip__sub { font-size: 12px; color: var(--muted); }
.today-strip__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.today-strip__ack { border: 1px solid var(--accent); color: var(--accent-strong); font-weight: 600; background: var(--card); }
.today-strip__ack:hover { background: var(--sidebar-active); color: var(--accent-strong); }
.today-strip__x { position: absolute; top: 10px; right: 10px; }
.today-strip__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; margin-top: 12px; }
.today-strip__col { background: color-mix(in srgb, var(--card) 72%, transparent); border: 1px solid var(--accent-tint-1); border-radius: 10px; padding: 10px 14px; min-width: 0; }
.today-strip__h { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-strong); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.today-strip__cnt { background: var(--accent); color: var(--on-color); border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; line-height: 1.6; }
.today-strip__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.today-strip__row { font-size: 13px; display: flex; gap: 8px; align-items: baseline; min-width: 0; flex-wrap: wrap; }
.today-strip__row a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.today-strip__row a:hover { color: var(--accent-hover); text-decoration: underline; }
.today-strip__t { color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 40px; flex-shrink: 0; font-weight: 600; font-size: 12px; }
.today-strip__txt { flex: 1 1 0; min-width: 160px; }
.today-strip__num { font-weight: 700; font-variant-numeric: tabular-nums; }
.today-strip__dim { color: var(--muted-light); font-weight: 400; }
.today-strip--min { padding: 10px 18px 10px 20px; box-shadow: none; background: var(--accent-tint-2); }
.today-strip__min { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.today-strip--min .today-strip__title { font-size: 14px; }
.today-strip__sum { font-size: 13px; color: var(--text-secondary); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.today-strip__part { display: inline-flex; gap: 6px; align-items: center; }
.today-strip__sum a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.today-strip__sum a:hover { text-decoration: underline; }
.today-strip__sep { color: var(--accent-tint-line); }
.today-strip__expand { margin-left: auto; font-size: 12px; color: var(--accent-strong); font-weight: 500; text-decoration: none; }
.today-strip--empty { padding: 12px 18px 12px 20px; box-shadow: none; background: var(--accent-tint-2); border-color: var(--accent-tint-1); border-left-color: var(--accent-tint-line); }
.today-strip__empty { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.today-strip--empty .today-strip__title { font-size: 14px; }
/* Мобилка (≤768px): три колонки → одна, «Ознакомился» отдельной строкой во всю ширину.
   Блок стоит ПОСЛЕ базовых правил полосы нарочно: при равной специфичности побеждает
   последнее объявление, и медиа-правило выше по файлу проигрывало бы базовому. */
@media (max-width: 768px) {
  .today-strip { padding: 12px 14px 12px 16px; }
  .today-strip__grid { grid-template-columns: 1fr; gap: 8px; }
  .today-strip__actions { margin-left: 0; padding-right: 0; width: 100%; }
  .today-strip__actions .btn { width: 100%; }
  .today-strip__expand { margin-left: 0; }
}

/* === Зона перетаскивания файлов (15.09) — одна на все разделы, директива x-dropzone === */
.dropzone { border: 1.5px dashed var(--border-input); border-radius: 8px; padding: 14px; text-align: center; color: var(--muted-light); font-size: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone b { color: var(--accent-strong); font-weight: 500; }
.dropzone .dropzone__hint { font-size: 11px; margin-top: 3px; color: var(--muted-light); }
.dropzone.dz-over { border-color: var(--accent); border-style: solid; background: var(--accent-light); color: var(--accent-strong); }
.dropzone--compact { padding: 8px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.dropzone--compact .dropzone__hint { margin: 0; }
.dropzone input[type=file] { display: none; }

/* файлы в комментариях задачи (15.09, v159) */
.dr-cfiles { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.dr-cfile { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border: 0.5px solid var(--border); border-radius: 14px; background: var(--card); color: var(--accent-strong); font-weight: 500; text-decoration: none; }
.dr-cfile:hover { border-color: var(--accent); }
.dr-cfile__meta { color: var(--muted-light); font-weight: 400; font-size: 11px; }
.dr-cfile--pending { border-style: dashed; }
.dr-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dr-commentbar.dz-over textarea { border-color: var(--accent); border-style: dashed; background: var(--accent-light); }

/* ── «Моя команда» (26.09.2026): таблица людей в «Задачах» + карточка на Главной ── */
.team-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.team-bar input { min-width: 200px; }
/* 07.11: + колонка «пн–пт» (122px = 5 значков по 22 + зазоры 3). Узкий ноутбук — таблица листается в своей рамке, а не режется. */
.team-table { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; margin-bottom: 8px; }
.team-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 122px repeat(4, minmax(64px, .7fr)) minmax(110px, 1fr); gap: 0 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--divider); font-size: 13px; cursor: pointer; }
.team-row, .team-grp { min-width: 680px; }
.team-row:hover { background: var(--accent-light); }
.team-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.team-row--head { border-top: 0; background: var(--surface); font-size: 12px; font-weight: 600; color: var(--muted-light); cursor: default; }
.team-row--head:hover { background: var(--surface); }
.team-row--nested .team-who { padding-left: 20px; border-left: 2px solid var(--border); margin-left: 6px; }
.team-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.team-row .n0 { color: var(--muted-light); opacity: .6; }
.team-grp { display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; background: var(--surface); border-top: 1px solid var(--divider); font-size: 12.5px; font-weight: 600; color: var(--text); }
.team-grp small { font-weight: 400; color: var(--muted-light); }
.team-who { min-width: 0; }
.team-who b { font-weight: 600; }
.team-who small { display: block; font-size: 12px; color: var(--muted-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-lead { font-size: 10.5px; font-weight: 700; color: var(--accent-strong); background: var(--sidebar-active); border-radius: 8px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }
.team-away { font-size: 11.5px; border-radius: 8px; padding: 0 7px; margin-left: 6px; white-space: nowrap; background: var(--hover); color: var(--muted-light); }
.team-away--vacation { background: var(--status-warn-bg); color: var(--status-warn-text); }
.team-away--business_trip { background: var(--status-progress-bg); color: var(--status-progress-text); }
/* 28.09: отсутствие при выборе людей (задача, встреча, справочник) — та же тёплая метка, что у отпуска в команде */
.away-chip { display: inline-block; font-size: 11.5px; border-radius: 8px; padding: 0 7px; margin-left: 6px; white-space: nowrap; background: var(--status-warn-bg); color: var(--status-warn-text); }
.away-warn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: var(--status-warn-bg); color: var(--status-warn-text); }
.team-over { display: inline-block; min-width: 26px; text-align: center; font-weight: 700; color: var(--danger-text); background: var(--danger-bg); border-radius: 10px; padding: 0 8px; }
.team-rev { display: inline-block; min-width: 26px; text-align: center; font-weight: 600; color: var(--info-text); background: var(--info-bg); border-radius: 10px; padding: 0 8px; }
.team-mine { display: block; font-size: 11px; color: var(--accent-strong); white-space: nowrap; }
.team-load { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }  /* 07.11: узко (1280 с неделей) — подпись под полоской, а не за край */
.team-load i { display: block; height: 8px; border-radius: 4px; background: var(--accent); opacity: .75; flex: none; }
.team-load i.team-load--above { background: var(--warning); }
.team-load i.team-load--high { background: var(--danger); }
.team-load small { font-size: 12px; color: var(--muted-light); white-space: nowrap; }
.team-foot { font-size: 12px; color: var(--muted-light); margin: 4px 0 20px; }
/* Неделя формата работы (ТЗ 06.11 п. 5.В.2): значок дня, сегодня обведено; кнопка — только если день можно отметить. */
.team-week { display: grid; grid-template-columns: repeat(5, 22px); gap: 3px; }
.team-wd-h { font-size: 10.5px; font-weight: 500; text-align: center; color: var(--muted-light); }
.team-wd-h.is-today { color: var(--accent-strong); font-weight: 700; }
.team-wd-slot { display: contents; }
.team-wd { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font: inherit; font-size: 11px; line-height: 1; border: 0; padding: 0; background: transparent; color: var(--muted-light); }
button.team-wd { cursor: pointer; }
button.team-wd:hover, button.team-wd:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.team-wd--office { background: var(--info-bg); color: var(--info-text); }
.team-wd--remote { background: var(--success-bg); color: var(--success-text); }
.team-wd--vacation { background: var(--status-warn-bg); color: var(--status-warn-text); }
.team-wd--business_trip { background: var(--status-progress-bg); color: var(--status-progress-text); }
.team-wd--day_off { background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.team-wd--absent { background: var(--danger-bg); color: var(--danger-text); }
.team-wd--none { box-shadow: inset 0 0 0 1px var(--border-input); }
.team-wd.is-today { box-shadow: 0 0 0 2px var(--accent); }
.team-wd--none.is-today { box-shadow: inset 0 0 0 1px var(--border-input), 0 0 0 2px var(--accent); }
.team-day { width: 380px; }
.team-day__sub { font-size: 13px; color: var(--muted); margin: -10px 0 14px; }
.team-day__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.team-day__err { margin-top: 10px; font-size: 12.5px; color: var(--danger-text); }
.team-person { margin: 0 0 8px; }
.team-back { font-size: 13px; color: var(--accent-strong); text-decoration: none; }
.team-person__sub { font-size: 12.5px; color: var(--muted-light); margin-top: 2px; }
.team-person__away { display: inline-block; margin-top: 6px; font-size: 13px; border-radius: 8px; padding: 4px 10px; background: var(--status-warn-bg); color: var(--status-warn-text); }
.dash-team { padding: 12px 14px 8px; flex: 0 0 auto; }
@media (max-width: 768px) {
  /* телефон (07.11, ТЗ 06.11 п. 5.В.2): имя, неделя, «В работе», «Просрочено»; на ≤480 — без «Просрочено» */
  .team-table { overflow: hidden; }   /* на телефоне вбок не листается: всё переносится внутри столбца */
  .team-row, .team-grp { min-width: 0; }
  .team-row { grid-template-columns: minmax(0, 1fr) 122px 52px 68px; gap: 0 8px; padding: 9px 10px; }
  .team-row--head { font-size: 11px; }
  .team-row .team-hide-m { display: none; }
  .team-row--nested .team-who { padding-left: 10px; margin-left: 0; }
  .team-who b { overflow-wrap: anywhere; }
  .team-who .team-away, .team-who .team-lead { display: inline-block; max-width: 100%; white-space: normal; margin-left: 0; }
  .team-bar input { min-width: 0; flex: 1 1 160px; }
  .team-day__btns .btn { min-height: 44px; }
}
@media (max-width: 480px) { /* «Моя команда»: имя, неделя, «В работе» */
  .team-row { grid-template-columns: minmax(0, 1fr) 122px 52px; }
  .team-row .team-c-ov { display: none; }
}

/* Заход 4 (28.09): окно «Новая встреча» — 720 по центру (решение по окнам), люди чипами,
   строка «Все свободны», «Ещё». На телефоне .modal = 95vw: всё переносится, вбок не едет. */
.mm-modal { width: 720px; }
.mm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.mm-head h3 { margin: 0; min-width: 0; }
.mm-x { min-width: 32px; min-height: 32px; font-size: 16px; color: var(--muted-light); flex: none; }
.mm-people-wrap { position: relative; }
.mm-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; padding: 6px 8px; border: 0.5px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: text; }
.mm-people:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.mm-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; max-width: 100%; min-width: 0; font-size: 12.5px; background: var(--hover); border-radius: 14px; padding: 2px 4px 2px 10px; }
.mm-chip--me { background: var(--sidebar-active); color: var(--accent-strong); padding-right: 10px; }
.mm-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-chip__role { color: var(--muted-light); }
.mm-chip__x { border: none; background: none; color: var(--muted-light); cursor: pointer; padding: 2px 5px; font-size: 12px; line-height: 1; }
.mm-people__input { flex: 1 1 160px; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font-family: inherit; font-size: var(--font-size-base); padding: 4px; }
.mm-dd { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin-top: 2px; background: var(--card); border: 1px solid var(--border-input); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.1); max-height: 240px; overflow-y: auto; }
.mm-dd__item { display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 12px; border: none; border-bottom: 1px solid var(--hover); background: none; text-align: left; font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.mm-dd__item:hover, .mm-dd__item:focus { background: var(--hover); }
.mm-dd__who { min-width: 0; }
.mm-dd__pos { font-size: 11.5px; color: var(--muted-light); }
.mm-invite { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.mm-slots-wrap { margin: -4px 0 12px; }
.mm-slots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mm-slots__lbl { font-size: 12px; color: var(--muted-light); }
.mm-slot { font-family: inherit; font-size: 12.5px; border: 1px solid var(--success-text); background: var(--success-bg); color: var(--success-text); border-radius: 8px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.mm-slot--on { background: var(--dk-success-strong, var(--success-text)); color: #fff; font-weight: 600; }
.mm-slots__note { font-size: 11.5px; color: var(--muted-light); margin-top: 4px; }
.mm-more { display: block; width: 100%; text-align: left; border: none; border-top: 1px dashed var(--border); background: none; padding: 10px 0 0; font-family: inherit; font-size: 12.5px; color: var(--accent-strong); cursor: pointer; }
.mm-more__sum { color: var(--muted-light); }
@media (max-width: 480px) {
  .mm-x { min-width: 44px; min-height: 44px; }
  .mm-people__input { font-size: 16px; }   /* iOS не приближает поле при фокусе */
}

/* ── «Документы» (СЭД) на телефоне — мобильный аудит 28.09, П1 1–4 ─────────────
   Раздел свёрстан инлайн-стилями, поэтому правила навешены на свои классы
   и перебивают инлайн через !important. */
@media (max-width: 768px) {
  .sed-statusbar { flex-wrap: wrap !important; }
  .sed-statusbar-actions { margin-left: 0 !important; width: 100%; flex-wrap: wrap !important; }
  .sed-statusbar-actions .btn { flex: 1 1 auto; min-height: 44px; }
  .sed-create-grid, .sed-approval-grid { grid-template-columns: 1fr !important; }
  .sed-action-panel { order: -1; }
  .sed-action-panel .btn { flex: 1 1 100%; min-height: 44px; }
  .sed-create-actions { position: sticky; top: 0; z-index: 5; flex-wrap: wrap !important; }
  .sed-create-actions > div { margin-left: 0 !important; width: 100%; flex-wrap: wrap; }
  .sed-create-actions .btn { flex: 1 1 auto; min-height: 44px; }
  .sed-tabs { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .sed-tabs .card-tab { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .sed-info-grid { grid-template-columns: 1fr !important; }
}

/* Аудит интерфейса 29.09 (У10): реестр документов на телефоне — карточками, а не таблицей
   шириной 700 px в рамке 350 px. Сверху название, ниже номер · тип · автор · дата, статус справа. */
@media (max-width: 768px) {
  .sed-doc-table-wrap { overflow-x: visible !important; }
  .sed-doc-table thead { display: none; }
  .sed-doc-table, .sed-doc-table tbody { display: block; }
  .sed-doc-table .sed-doc-row {
    display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
    gap: 4px 8px; padding: 12px 14px; border-bottom: 0.5px solid var(--divider);
  }
  .sed-doc-table .sed-doc-row > td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
  .sed-doc-table .sed-td-title { grid-column: 1 / -1; order: -1; overflow-wrap: anywhere; }
  .sed-doc-table .sed-td-author { font-size: 12px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sed-doc-table .sed-td-status { grid-column: 4; grid-row: 2; justify-self: end; }
  .sed-doc-table .sed-td-date { grid-column: 1 / -1; font-size: 12px !important; }
  /* 02.11: «Где сейчас» («Прошли через меня») — отдельной строкой карточки. */
  .sed-doc-table .sed-td-where { grid-column: 1 / -1; font-size: 12px !important; }
}

/* ── СЭД: выбор типа документа — выпадашка с поиском (30.09, А2; макет v2 tmp/mockups/2026-09-29-sed-type-dropdown.html).
   Поле с кодом выбранного типа, ✕ и стрелкой; панель: чипы папок, список с липкими заголовками папок,
   у типа вторая строка — описание. Только токены. */
.type-combo { position: relative; }
.type-combo__field { position: relative; }
.type-combo__input { padding-right: 60px; cursor: pointer; text-overflow: ellipsis; }
.type-combo.is-open .type-combo__input { cursor: text; }
.type-combo.has-value:not(.is-open) .type-combo__input { padding-left: 64px; font-weight: 500; }
.type-combo.is-open.has-value .type-combo__input::placeholder { color: var(--text); opacity: .55; }
.type-combo__code { display: inline-block; min-width: 38px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--accent-light); color: var(--accent-strong); flex-shrink: 0; margin-top: 1px; }
.type-combo__code--in { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); max-width: 48px; margin: 0; pointer-events: none; }
.type-combo__btn { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted-light); cursor: pointer; padding: 4px 6px; line-height: 1; border-radius: var(--radius-sm); font-size: 13px; }
.type-combo__btn:hover { color: var(--text); background: var(--hover); }
.type-combo__chev { right: 6px; transition: transform .15s; }
.type-combo.is-open .type-combo__chev { transform: translateY(-50%) rotate(180deg); }
.type-combo__clear { right: 30px; }
.type-combo__panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.type-combo__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--card); }
.type-combo__chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; white-space: nowrap; }
.type-combo__chip:hover { border-color: var(--accent); }
.type-combo__chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-color); }
.type-combo__chip:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.type-combo__n { color: var(--muted-light); font-weight: 400; }
.type-combo__chip.is-on .type-combo__n { color: inherit; opacity: .8; }
.type-combo__sq { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.type-combo__list { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.type-combo__head { position: sticky; top: 0; z-index: 1; padding: 7px 12px 5px; background: var(--surface); border-bottom: 1px solid var(--divider); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-light); }
.type-combo__hrow { display: flex; align-items: center; gap: 7px; }
.type-combo__cnt { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }
.type-combo__opt { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--divider); scroll-margin-top: 34px; }
.type-combo__opt:last-child { border-bottom: 0; }
.type-combo__opt.is-active { background: var(--accent-light); }
.type-combo__orow { display: flex; align-items: flex-start; gap: 10px; }
.type-combo__txt { min-width: 0; flex: 1; }
.type-combo__nm { display: block; font-size: 13px; font-weight: 500; color: var(--text); }
.type-combo__opt.is-picked .type-combo__nm::after { content: " ✓"; color: var(--accent-strong); font-weight: 700; }
.type-combo__ds { display: block; font-size: 12px; line-height: 1.35; margin-top: 1px; color: var(--muted-light); }
.type-combo__fld { font-size: 11px; color: var(--muted-light); white-space: nowrap; margin-left: 8px; margin-top: 2px; }
.type-combo mark { background: var(--warning-bg); color: inherit; border-radius: 2px; padding: 0 1px; }
.type-combo__empty { padding: 14px 12px; font-size: 13px; color: var(--muted-light); }
.type-combo__link { font: inherit; font-size: 13px; border: 0; background: none; color: var(--accent-strong); font-weight: 500; cursor: pointer; padding: 0; text-decoration: underline; }
@media (max-width: 768px) {
  /* Телефон: чипы — одной строкой с прокруткой вбок, папка у «Недавних» не помещается, цели крупнее. */
  .type-combo__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .type-combo__chips::-webkit-scrollbar { display: none; }
  .type-combo__chip { flex-shrink: 0; min-height: 32px; }
  .type-combo__list { max-height: min(420px, 55vh); }
  .type-combo__opt { padding: 10px 12px; }
  .type-combo__fld { display: none; }
  .type-combo__input { min-height: 44px; }
}
/* ── /СЭД: выбор типа документа ── */

/* ── «Планирование» → «Загрузка» (T10): ячейка месяца — кнопка; клик раскрывает «где ещё».
   Заливку по числу строк ставит :style (loadCellStyle в public/js/roadmap.js), здесь — только каркас. ── */
.rm-load-cell { flex: 1; min-width: 0; border: 0; border-left: 1px solid var(--hover); border-radius: 0; padding: 6px 0; background: none; font: inherit; font-size: 12px; line-height: 1.3; text-align: center; color: inherit; cursor: pointer; }
.rm-load-cell:disabled { cursor: default; }
.rm-load-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent-strong); }
.rm-load-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rm-load-swatch { display: inline-block; min-width: 24px; padding: 1px 4px; border-radius: 4px; text-align: center; font-size: 10px; line-height: 1.4; }
/* ── /«Загрузка» ── */

/* ── «Планирование» (T6): макет (а) tmp/mockups/2026-09-30-planning-gantt.html ──
   Раздел лежит в .content (одна прокрутка на весь раздел), шапка стоит на месте,
   в ганте закреплены строка месяцев (сверху) и колонка названий (слева, на узких).
   Цвета — только токены. ── */
.rm-topbar { position: sticky; top: 0; z-index: 6; gap: 8px 10px; padding: 8px 20px; font-size: 14px; }
.rm-topbar .rm-title { font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
/* Верхний отступ — псевдоэлементом, а не padding: sticky-строка месяцев липнет к краю области
   прокрутки без зазора (с padding-top она висела на 16 px ниже шапки). */
.rm-content { padding-top: 0; }
.rm-content::before { content: ''; display: block; height: 16px; }
.rm-break { flex: 0 0 100%; height: 0; }
.rm-spacer { flex: 1 1 auto; }
.rm-views { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rm-views::-webkit-scrollbar { display: none; }
.rm-views .card-tab { font-size: 12px; padding: 5px 12px; white-space: nowrap; flex: 0 0 auto; }
.rm-sub { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 12px; font-weight: 400; color: var(--muted); }
.rm-sub .btn { font-size: 12px; padding: 3px 10px; }
.rm-pill { background: var(--accent-tint-1); color: var(--accent-strong); border-radius: 999px; padding: 1px 10px; font-weight: 600; font-size: 12px; }
.rm-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--accent-strong); cursor: pointer; }
.rm-link:hover { text-decoration: underline; }
.rm-plans-list { position: absolute; left: 20px; right: 20px; top: 100%; z-index: 7; max-height: 45vh; overflow: auto; padding: 10px 14px; font-weight: 400; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,.08)); }

.rm-gantt { --rm-name-w: 300px; padding: 0; }
.rm-g-inner { min-width: 900px; }
.rm-g-head { position: sticky; top: 0; z-index: 4; display: flex; background: var(--card); border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-light); }
.rm-g-head .rm-g-name { padding: 8px 12px; z-index: 5; border-top-left-radius: 12px; }
.rm-g-months { flex: 1; display: flex; min-width: 0; }
.rm-g-months > div { flex: 1; text-align: center; padding: 8px 0; border-left: 1px solid var(--divider); }
.rm-g-months > div.is-now { color: var(--accent-strong); background: var(--accent-light); }
.rm-g-rows { position: relative; }
.rm-g-row { display: flex; align-items: stretch; border-top: 1px solid var(--divider); min-height: 44px; }
.rm-g-name { flex: 0 0 var(--rm-name-w); min-width: 0; position: sticky; left: 0; z-index: 1; background: var(--card); }
.rm-g-name--row { padding: 4px 12px 4px calc(12px + var(--d, 0) * 16px); display: flex; flex-direction: column; justify-content: center; }
.rm-nm { font-size: 13px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.rm-ti { font-size: 13px; line-height: 1.35; }
.rm-g-name--row .rm-ti { flex: 1 1 0; min-width: 40px; }
.rm-nm-lvl { font-size: 11px; font-weight: 400; color: var(--muted-light); flex-shrink: 0; }
.rm-meta { font-size: 12px; line-height: 1.35; color: var(--muted-light); }
.rm-track { flex: 1; position: relative; min-width: 0; min-height: 26px; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), var(--divider) calc(100% / 12 - 1px), var(--divider) calc(100% / 12)); }
.rm-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 12px; border-radius: 6px; }
.rm-bar--sum { height: 8px; background: transparent; border: 2px solid var(--accent-tint-line); }
.rm-diamond { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
.rm-today-layer { position: absolute; top: 0; bottom: 0; left: var(--rm-name-w); right: 0; z-index: 0; pointer-events: none; }
.rm-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); opacity: .75; }
.rm-today-lbl { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; line-height: 1.5; color: var(--on-color); background: var(--danger); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.rm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.rm-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.rm-sw { display: inline-block; width: 18px; height: 8px; border-radius: 4px; flex-shrink: 0; }
.rm-sw--plan { background: var(--info-bg); border: 1px solid var(--info-line); }
.rm-sw--go { background: var(--accent); }
.rm-sw--late { background: var(--warning); }
.rm-sw--done { background: var(--success); }
.rm-sw--cancel { background: repeating-linear-gradient(45deg, var(--border-input) 0 4px, var(--border) 4px 8px); }
.rm-sw--sum { height: 8px; background: transparent; border: 2px solid var(--accent-tint-line); }
.rm-sw--day { width: 9px; height: 9px; border-radius: 2px; background: var(--info); transform: rotate(45deg); }
.rm-sw--today { width: 2px; height: 12px; border-radius: 0; background: var(--danger); }
/* Узкие экраны: вбок листается сам .rm-content, а не карточка ганта — иначе карточка становится
   контейнером прокрутки и sticky строки месяцев перестаёт работать (ревью T6, I1). */
@media (max-width: 1200px) {
  .rm-gantt { width: max-content; min-width: 100%; }
}
@media (max-width: 768px) {
  .rm-topbar { padding: 6px 12px; gap: 6px 8px; align-items: center; min-height: 0; }
  .rm-break, .rm-spacer, .rm-plans-bar { display: none !important; }
  .rm-topbar > .rm-title { margin-right: auto; }
  .rm-topbar > .btn { order: 1; padding: 4px 9px !important; min-height: 32px; min-width: 0; }
  .rm-topbar > select { order: 2; min-height: 32px; }
  .rm-topbar > [data-testid="roadmap-stage-chip"] { order: 2; }
  .rm-topbar > select.input-inline { flex: 0 0 84px; width: 84px; }
  .rm-g-name--row .rm-ti { flex-basis: 100%; }
  /* inline style у селекта (flex:0 1 300px; max-width:300px) — перебиваем: год и узел в один ряд */
  .rm-topbar > select[data-testid="roadmap-filter-node"] { flex: 1 1 0 !important; max-width: none !important; }
  .rm-views { order: 3; flex: 1 1 100%; }
  .rm-views .card-tab { padding: 4px 10px; min-height: 0; }
  .rm-sub { order: 4; padding-top: 4px; gap: 4px 8px; }
  /* На телефоне в .rm-sub видна только строка стадии (счётчик скрыт): нет её — нет и пустой пунктирной линии. */
  .rm-sub:not(:has([data-testid="roadmap-stage-bar"])) { display: none; }
  .rm-sub .btn { min-height: 30px; padding: 3px 9px; }
  .rm-btn-txt { display: none; }
  .rm-content::before { height: 12px; }
  .rm-gantt { --rm-name-w: 136px; }
  .rm-g-inner { min-width: 856px; }
  .rm-g-name--row { padding: 4px 6px 4px calc(6px + var(--d, 0) * 6px); box-shadow: 1px 0 0 var(--divider); hyphens: auto; }
  .rm-g-head .rm-g-name { padding: 8px; box-shadow: 1px 0 0 var(--divider); }
  .rm-nm { font-size: 12px; }
  .rm-nm-lvl { display: none; }
  .rm-ti { font-size: 12px; }
  .rm-meta { font-size: 11px; }
  .rm-legend { position: sticky; left: 0; width: calc(100vw - 24px); }
  .rm-plans-list { left: 12px; right: 12px; }
}
/* ── /«Планирование» T6 ── */

/* ── Календарь → «События года» (Ваня 02.10, макет tmp/mockups/2026-10-02-calendar-year.html) ──
   ПК — 12 мини-месяцев сеткой (разделители — фоном сетки через gap, а не рамками у
   nth-child: первый ребёнок сетки — <template> x-for, счёт по nth-child съезжает);
   телефон — список по месяцам. */
.cal-year { background: var(--card); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-year-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--divider); }
.cal-year-sum strong { color: var(--text); font-variant-numeric: tabular-nums; }
.cal-year-empty { padding: 14px 16px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--divider); }
.cal-year-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--divider); }
.cal-year-month { background: var(--card); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cal-year-month.is-past { background: color-mix(in srgb, var(--content-bg) 45%, var(--card)); }
.cal-year-month.is-now { box-shadow: inset 0 0 0 2px var(--accent-tint-line); }
.cal-year-mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cal-year-mname { font-weight: 600; font-size: 14px; }
.cal-year-month.is-past .cal-year-mname { color: var(--muted); }
.cal-year-mcount { font-size: 11.5px; font-weight: 400; color: var(--muted-light); font-variant-numeric: tabular-nums; }
.cal-year-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-size: 10.5px; text-align: center; font-variant-numeric: tabular-nums; }
.cal-year-dow { color: var(--muted-light); font-size: 9.5px; padding-bottom: 2px; }
.cal-year-day { padding: 2px 0; border-radius: 4px; cursor: pointer; }
.cal-year-day:empty { cursor: default; }
.cal-year-day.is-we { color: var(--muted-light); }
.cal-year-day.has-ev { background: var(--sidebar-active); color: var(--accent-strong); font-weight: 600; }
.cal-year-day.has-ev.is-pending { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }
.cal-year-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
.cal-year-month.is-past .cal-year-day { opacity: .55; }
.cal-year-evs { display: grid; gap: 6px; }
.cal-year-ev { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 1.35; cursor: pointer; }
.cal-year-ev:hover .cal-year-what > span { text-decoration: underline; }
.cal-year-when { color: var(--accent-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-year-what { min-width: 0; overflow-wrap: anywhere; }
.cal-year-what small { display: block; color: var(--muted-light); font-size: 11px; }
.cal-year-month.is-past .cal-year-what > span { color: var(--muted); }
.cal-year-ev.is-pending .cal-year-what { border-left: 2px dashed var(--accent); padding-left: 6px; }
.cal-year-ev.is-pending small { color: var(--accent-strong); }
.cal-year-none { font-size: 12px; color: var(--muted-light); }
.cal-year-list { display: none; }
.cal-year-past { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 10px 14px; background: none; border: 0; border-bottom: 1px solid var(--divider); font: inherit; font-size: 13px; color: var(--accent-strong); text-align: left; cursor: pointer; }
.cal-year-lmonth { padding: 0 14px 6px; border-bottom: 1px solid var(--divider); }
.cal-year-lhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 0 6px; font-weight: 600; }
.cal-year-lmonth.is-now .cal-year-lhead { color: var(--accent-strong); }
.cal-year-lmonth .cal-year-ev { grid-template-columns: 82px minmax(0, 1fr); align-items: start; padding: 8px 0; min-height: 44px; border-top: 1px solid var(--divider); font-size: 13.5px; }
@media (max-width: 1100px) { .cal-year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .cal-year-grid { display: none; } .cal-year-list { display: block; } }

/* ── «Планирование», исправления по аудитам 02.10 ── */
/* «Моё»: завершённые свёрнуты под кнопкой (№5). */
.rm-my-done-toggle {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-top: 1px solid var(--border); padding: 10px 14px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--accent);
}
.rm-my-done-toggle:hover { text-decoration: underline; }
/* «Планирование»: подпись раздела, «Развернуть всё» и поиск строки (Ваня 06.10). */
.rm-filter-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.rm-search { display: flex; align-items: center; gap: 6px; flex: 0 1 300px; min-width: 0; padding: 3px 6px 3px 10px;
  border: 1px solid var(--border-input); border-radius: 8px; background: var(--card); }
.rm-search:focus-within { border-color: var(--accent); }
.rm-search > .ic { color: var(--muted-light); flex-shrink: 0; }
.rm-search__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--text-strong); padding: 3px 0; }
.rm-found { font-size: 12px; color: var(--muted); }
.rm-hit { background: var(--warning-bg); color: inherit; border-radius: 3px; padding: 0 1px; }
/* На телефоне список раздела уходит на свою строку, а подпись оставалась бы наверху у «Печати». */
@media (max-width: 768px) { .rm-filter-label { display: none; } }
/* Причина «Не могу» (№6): было 151×28 px и 12 px — на телефоне не попасть, подсказка обрезана. */
.rm-decline-note { flex: 1 1 200px; min-width: 0; font-size: 13px; padding: 4px 8px; }
/* Строка ввода: что станет со сроками (№7). */
.rm-quick__hint { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
@media (pointer: coarse) {
  .rm-decline-note { flex-basis: 100%; min-height: 44px; font-size: 16px; }
  .rm-decline-form .btn, .rm-my-done-toggle { min-height: 44px; }
}

/* ── «Планирование» T7: макет (б) tmp/mockups/2026-09-30-planning-row-form.html ──
   Строку правят в дровере справа (460 px, телефон — весь экран; шапка / тело / низ — общие
   .dr-head / .dr-body / .dr-foot окон, шторка — .center-modal-scrim). «Кто» — чипами прямо
   в поле, и в дровере, и в строке ввода. «Список» — сеткой колонок с точкой статуса.
   Цвета — только токены. ── */
/* Шторка дровера светлее и без размытия, как в макете: план за ней читается, строка подсвечена. */
.center-modal-scrim.rm-scrim { background: rgba(15,23,42,.18); backdrop-filter: none; }
.rm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; z-index: 300; display: flex; flex-direction: column; background: var(--card); box-shadow: -8px 0 24px rgba(15,23,42,.12); }
.rm-dr-head { padding-bottom: 10px; }
.rm-crumbs { font-size: 12px; font-weight: 400; color: var(--muted-light); margin-bottom: 2px; overflow-wrap: anywhere; }
.rm-dr-body { display: flex; flex-direction: column; gap: 14px; }
/* Тело дровера прокручивается: без flex-shrink:0 поля сжимались по высоте и наезжали друг на друга. */
.rm-dr-body > *, .rm-more-body > * { flex-shrink: 0; }
.rm-dr-foot { flex-wrap: wrap; justify-content: flex-end; }
.rm-dr-foot .rm-btn-danger { margin-right: auto; color: var(--danger-text); border-color: transparent; background: transparent; }
.rm-dr-foot .rm-btn-danger:hover { background: var(--danger-bg); }
.rm-dr-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.rm-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.rm-fld { display: flex; flex-direction: column; min-width: 0; }
.rm-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; text-transform: none; letter-spacing: normal; }
.rm-lbl--inline { display: inline; margin: 0; }
.rm-lbl__n { font-weight: 400; color: var(--muted-light); }
.rm-err { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--danger-text); text-transform: none; letter-spacing: normal; }
.rm-tip { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--muted-light); text-transform: none; letter-spacing: normal; }
.rm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rm-row { display: flex; gap: 6px; align-items: center; }
.rm-row--gap { margin-top: 6px; }
.rm-row > .form-select, .rm-row > .form-input { flex: 1 1 auto; min-width: 0; }
.rm-row > .btn { flex-shrink: 0; }
/* «Кто»: чипы и поиск в одной рамке; список подсказок — под рамкой */
.rm-who-box, .rm-quick__who { position: relative; min-width: 0; }
.rm-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 6px; border: 0.5px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: text; }
.rm-who:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.rm-who__input { flex: 1 1 120px; min-width: 80px; border: 0; outline: none; background: transparent; padding: 3px 4px; font: inherit; font-size: 13px; color: var(--text); }
.rm-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 4px; border-radius: 999px; background: var(--accent-tint-1); color: var(--accent-strong); font-size: 12px; line-height: 1.35; cursor: default; }
.rm-chip.is-lead { box-shadow: inset 0 0 0 1px var(--accent-tint-line); }
.rm-chip.is-team-member { background: var(--card); box-shadow: inset 0 0 0 1px var(--accent-tint-line); color: var(--accent-strong); }
.rm-chip--team { padding-left: 8px; background: var(--info-bg); color: var(--info-text); }
.rm-chip__name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.rm-chip__name b { font-weight: 600; }
.rm-chip__role { font-weight: 400; }
.rm-chip__note { font-size: 11px; color: var(--danger-text); }
.rm-chip__btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 20px; min-height: 20px; padding: 0 2px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.rm-chip__btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.rm-chip__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rm-chip__star { font-size: 13px; }
.rm-chip.is-lead .rm-chip__star { color: var(--warning); }
.rm-chip__part { display: inline-flex; align-items: center; font-weight: 700; }
.rm-chip__part.is-confirmed { color: var(--success-text); }
.rm-chip__part.is-declined { color: var(--danger-text); }
.rm-chip__part.is-pending { color: var(--muted-light); }
/* Чипы «Кто» под полем поиска (T7 fix 1); .rm-slot — обёртка элемента x-for, сама в раскладке не участвует. */
.rm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }   /* раскрытая большая команда листается внутри, остальные поля не уезжают */
.rm-slot { display: contents; }
.rm-chip { position: relative; }
.rm-chip__team { padding: 0 4px; font: inherit; }
.rm-chip__team:disabled { cursor: default; }
/* Меню отметки участия — строкой под чипами: явный выбор вместо переключателя по кругу. */
.rm-partmenu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border-input); border-radius: 10px; }
.rm-partmenu__who { flex: 1 1 100%; font-size: 12px; font-weight: 600; color: var(--muted); }
.rm-partmenu__opt { border: 1px solid var(--border); background: var(--card); padding: 5px 10px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.rm-partmenu__opt:hover { background: var(--hover); }
.rm-partmenu__opt.is-on { background: var(--accent-light); border-color: var(--accent-tint-line); color: var(--accent-strong); font-weight: 600; }
.rm-partmenu__close { margin-left: auto; color: var(--muted); }
.rm-dd { position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; width: max-content; min-width: 100%; max-width: min(360px, calc(100vw - 32px)); max-height: 260px; overflow-y: auto; padding: 4px; background: var(--card); border: 1px solid var(--border-input); border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13px; }
.rm-dd__opt { padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--text); }
.rm-dd__opt.is-on { background: var(--accent-light); }
.rm-dd__opt b { display: block; font-weight: 500; }
.rm-dd__opt small { display: block; font-size: 11px; color: var(--muted-light); }
.rm-dd__empty { padding: 6px 10px; font-size: 12px; color: var(--muted-light); }
/* Флажки с подписью: в дровере, в «Ещё» и в списках «Команды / Люди» */
.rm-check { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 13px; cursor: pointer; }
.rm-check--top { align-items: flex-start; padding: 0; }
.rm-check input[type=checkbox] { flex-shrink: 0; width: 16px; height: 16px; margin: 0; }
.rm-check--top input[type=checkbox] { margin-top: 2px; }
.rm-check__t { color: var(--text-strong); }
.rm-checklist { max-height: 180px; overflow-y: auto; border: 1px solid var(--border-input); border-radius: 6px; padding: 4px; }
.rm-input-sm { font-size: 12px; padding: 5px 8px; margin-bottom: 4px; }
.rm-more { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 10px 0 0; border: 0; border-top: 1px dashed var(--border); background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-strong); text-align: left; cursor: pointer; }
.rm-more__sum { font-weight: 400; font-size: 12px; color: var(--muted-light); }
.rm-more-body { display: flex; flex-direction: column; gap: 14px; }

/* «Список»: шапка, строки сеткой, точка статуса */
.rm-lhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.rm-lhead__title { font-size: 13px; font-weight: 600; }
.rm-pickbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rm-lrow { display: grid; grid-template-columns: minmax(0, 1fr) 128px 150px 72px; gap: 4px 12px; align-items: center; padding: 6px 12px 6px calc(12px + var(--d, 0) * 16px); font-size: 13px; }
.rm-lrow.is-picked { background: var(--accent-light); box-shadow: inset 3px 0 0 var(--accent); }
.rm-lrow__main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rm-lrow__title { min-width: 0; overflow-wrap: break-word; }
.rm-lrow__meta { display: contents; }
.rm-lrow__when, .rm-lrow__who { min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-lrow__acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.rm-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.rm-lhead-row__name { min-width: 0; overflow-wrap: break-word; }
.rm-lhead-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; font-size: 12px; color: var(--muted-light); }
.rm-lhead-row__meta > span { white-space: nowrap; }
.rm-lhead-row__acts { display: flex; align-items: center; gap: 4px; }
.rm-pick { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.rm-pick input { margin: 0; }

/* Строка ввода: название → кто → начало → окончание → «Добавить» */
.rm-quick { display: grid; grid-template-columns: minmax(0, 1fr) 210px 132px 132px auto; gap: 6px 8px; align-items: start; padding: 4px 12px 6px calc(12px + var(--d, 0) * 16px); font-size: 12px; }
.rm-quick--empty { padding: 4px 16px 18px; }
.rm-quick .form-input { font-size: 12px; padding: 5px 8px; min-height: 30px; }
.rm-quick__title { border-style: dashed; }
.rm-who--sm { min-height: 30px; padding: 2px 4px; gap: 4px; }
.rm-who--sm .rm-who__input { flex-basis: 50px; min-width: 50px; padding: 2px 4px; font-size: 12px; }
.rm-who--sm .rm-chip { padding-left: 6px; }

@media (max-width: 768px) {
  .rm-drawer { width: 100vw; box-shadow: none; }
  .rm-dr-foot .btn { flex: 1 1 auto; }
  .rm-dr-foot .btn-primary { flex: 1 1 100%; order: 3; }
  .rm-dr-foot .rm-btn-danger { flex: 0 0 auto; }
  .rm-who { min-height: 44px; }
  .rm-chip { padding: 2px 2px 2px 6px; }
  .rm-chip__btn { min-width: 44px; min-height: 44px; }
  .rm-partmenu__opt { min-height: 44px; }
  .rm-chips { max-height: 50vh; }
  .rm-check { min-height: 44px; }
  .rm-check--top { min-height: 0; padding: 10px 0; }
  .rm-pick { min-width: 44px; min-height: 44px; }
  .rm-pick input { width: 18px; height: 18px; }
  .rm-lhead { padding: 8px 10px; }
  .rm-lhead .btn-icon--sm, .rm-lhead-row .btn-icon--sm, .rm-lrow .btn-icon--sm { width: 44px; height: 44px; }
  .rm-pickbar { flex: 1 1 100%; }
  .rm-lhead .rm-pickwrap:has(.rm-pickbar) { flex: 1 1 100%; margin-left: 0 !important; }
  .rm-lrow { grid-template-columns: minmax(0, 1fr) 136px; grid-template-areas: "main main" "meta acts"; gap: 0 8px; padding: 6px 4px 2px calc(8px + var(--d, 0) * 8px); }
  .rm-lrow__main { grid-area: main; }
  .rm-lrow__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
  .rm-lrow__acts { grid-area: acts; }
  .rm-lrow__when, .rm-lrow__who { white-space: normal; }
  /* Строка ввода на телефоне: название и «Добавить» — первый ряд, «Кто» — второй, даты —
     третий, каждая на половину ширины (в два ряда даты сжимались до 106 px и резались). */
  .rm-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 8px 8px calc(8px + var(--d, 0) * 8px); }
  .rm-quick__title { grid-column: 1 / 5; }
  .rm-quick__save { grid-column: 5 / -1; grid-row: 1; }
  .rm-quick__who { grid-column: 1 / -1; }
  .rm-quick__date { grid-column: span 3; }
  .rm-lhead-row { flex-wrap: wrap; row-gap: 0; }
  /* Заголовок фазы: ▾ и название — первый ряд, «срок · кто» и кнопки — второй (название не сжимается в столбик). */
  .rm-lhead-row__name { flex: 1 1 calc(100% - 56px); }
  .rm-lhead-row:not(:has(.rm-lhead-row__meta)) .rm-lhead-row__name { flex: 1 1 0; }   /* узел: «+ Фаза» в одном ряду с названием */
  .rm-lhead-row__meta { flex: 1 1 0; min-width: 0; order: 3; padding-left: 50px; }
  .rm-lhead .btn, .rm-lhead-row .btn { min-height: 44px; }
  .rm-lhead-row__acts { order: 4; margin-left: auto; }
  .rm-who--sm { min-height: 44px; }
  .rm-quick .form-input { min-height: 44px; }
  .rm-quick__save { min-height: 44px; }
  .rm-more-acts .btn, .rm-dr-status .btn { min-height: 44px; }
  .rm-load-cell { min-height: 44px; }
}
/* ── /«Планирование» T7 ── */

/* ── «Стратегия»: дерево (макет v4, 02.10; пачка 2 плана 2026-10-02-strategy-plan.md) ──
   Четыре типа — четыре цвета и значка, одинаковые в дереве, карточке и вкладках:
   годовые цели — фиолетовый, проекты — синий, инициативы — зелёный, риски — янтарь
   (высокая вероятность — красный). Сферы — цветной подчёркнутой строкой, не плашкой. */
:root {
  --st-goal: #6d63d6;  --st-goal-soft: #efedfd;
  --st-proj: #2f6fb0;  --st-proj-soft: #e8f1fb;
  --st-ini: #2e8a57;   --st-ini-soft: #e7f5ed;
  --st-risk: #b45309;  --st-risk-soft: #fdf3e2;
  --st-risk-hi: #b91c1c; --st-risk-hi-soft: #fde8e8;
}
/* ── Helpdesk (08.11, задача 8a): токены всех экранов раздела — колонки доски, цвета тем, статусы автора ──
   Значения — из макета tmp/mockups/2026-11-08-helpdesk-v4.html. Тёмные пары — в тёмном блоке. */
:root {
  --hd-col-new: #FAF9FF;   --hd-col-new-bg: #EEEDFE;   --hd-col-new-t: #534AB7;   --hd-col-new-line: #7F77DD;
  --hd-col-work: #F5F9FE;  --hd-col-work-bg: #E6F1FB;  --hd-col-work-t: #185FA5;  --hd-col-work-line: #378ADD;
  --hd-col-check: #FFFAF2; --hd-col-check-bg: #FAEEDA; --hd-col-check-t: #854F0B; --hd-col-check-line: #EF9F27;
  --hd-col-done: #F6FAF0;  --hd-col-done-bg: #EAF3DE;  --hd-col-done-t: #3B6D11;  --hd-col-done-line: #639922;
  --hd-topic-0: #185FA5; --hd-topic-1: #0F6E56; --hd-topic-2: #534AB7; --hd-topic-3: #993C1D; --hd-topic-4: #993556; --hd-topic-5: #854F0B; --hd-chip-on-text: #ffffff;
  --hd-v-bg: #EEEDFE;  --hd-v-t: #534AB7;
  --hd-pg-bg: #E6F1FB; --hd-pg-t: #185FA5;
  --hd-w-bg: #FAEEDA;  --hd-w-t: #854F0B;
  --hd-ok-bg: #EAF3DE; --hd-ok-t: #3B6D11;
  --hd-r-bg: #FCEBEB;  --hd-r-t: #A32D2D;
  --hd-n-bg: #F1EFE8;  --hd-n-t: #5F5E5A;
}
.strat-topbar { flex-wrap: wrap; row-gap: 8px; }
.strat-topbar__end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.strat-topbar__btn { font-size: 12px; padding: 5px 12px; }
.strat-menu { position: relative; }
.strat-menu__pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 230px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 4px; display: grid; }
.strat-menu__group { display: grid; }
.strat-menu__pop button { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.strat-menu__pop button:hover, .strat-menu__pop button:focus-visible { background: var(--hover); }
.strat-menu__danger { color: var(--danger) !important; }
.strat-empty-page { text-align: center; padding: 60px 16px; color: var(--muted-light); display: grid; gap: 12px; justify-items: center; }
.strat-muted { color: var(--muted-light); }
.strat-small { font-size: 12px; }
.strat-red { color: var(--st-risk-hi); }
.strat-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--accent-strong); cursor: pointer; text-align: left; }
.strat-link:hover { text-decoration: underline; }
.strat-tree { display: grid; gap: 12px; }
.strat-vision { padding: 14px 16px; border-radius: 10px; background: var(--sidebar-active); display: grid; gap: 4px; }
.strat-vision__k { font-size: 11.5px; font-weight: 600; color: var(--accent-strong); text-transform: uppercase; letter-spacing: .06em; }
.strat-vision__v { font-size: 16px; font-weight: 600; text-wrap: balance; }
.strat-locked { padding: 10px 14px; background: var(--warning-bg); border: 1px dashed var(--dk-amber-line, #fde68a); border-radius: 8px; font-size: 12.5px; color: var(--status-warn-text); }
.strat-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 13px; color: var(--muted); }
.strat-sum strong { color: var(--text); font-variant-numeric: tabular-nums; }
.strat-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-left: auto; }
.strat-seg button { padding: 4px 10px; font: inherit; font-size: 12.5px; color: var(--muted); background: var(--card); border: 0; cursor: pointer; }
.strat-seg button + button { border-left: 1px solid var(--border); }
.strat-seg button.on { background: var(--sidebar-active); color: var(--accent-strong); font-weight: 600; }
.strat-spheres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.strat-sphere { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.strat-sphere--loose { background: var(--dk-amber-bg, #fffaf0); border: 1px dashed var(--dk-amber-line, #e9c46a); border-radius: 12px; padding: 10px; }
.strat-sphere--new { border: 1px dashed var(--border); border-radius: 12px; padding: 10px; }
.strat-sphere__h { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 6px; border-bottom: 3px solid; }
.strat-sphere__h b { font-size: 15px; flex: 1; min-width: 0; }
.strat-sphere__h small { color: var(--muted-light); font-size: 12px; white-space: nowrap; }
.strat-sphere__h .btn-icon { align-self: center; }
.strat-dir { display: grid; gap: 8px; }
.strat-dir__row { display: flex; align-items: center; gap: 4px; }
.strat-dir__h { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; background: none; border: 0;
  border-top: 1px solid var(--divider); padding: 8px 2px 2px; font: inherit; font-size: 13px; color: var(--muted); text-align: left; cursor: pointer; }
.strat-dir__h.open { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.strat-dir__h small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted-light); white-space: nowrap; font-size: 12px; }
.strat-dir__body { display: grid; gap: 8px; }
.strat-fcard { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; display: grid; gap: 8px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); cursor: pointer; text-align: left; }
.strat-fcard:hover { border-color: var(--accent-tint-line); }
.strat-fcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.strat-fcard__head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.strat-fcard__name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.strat-pill { font: inherit; font-size: 11px; border-radius: 9px; padding: 1px 8px; white-space: nowrap; font-weight: 600; border: 0;
  background: var(--sidebar-active); color: var(--accent-strong); cursor: pointer; }
.strat-pill.off { background: var(--surface); color: var(--muted-light); font-weight: 500; }
.strat-pill:disabled { cursor: default; }
.strat-imagine { font-size: 12.5px; color: var(--muted); font-style: italic; }
.strat-imagine.empty { font-style: normal; color: var(--muted-light); }
.strat-goal { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; gap: 4px 7px; align-items: center; font-size: 12.5px;
  padding: 6px 8px; border-radius: 8px; background: var(--st-goal-soft); }
.strat-goal svg.ic { width: 15px; height: 15px; color: var(--st-goal); vertical-align: 0; }
.strat-goal__t { overflow-wrap: anywhere; }
.strat-goal__st { font-size: 11px; color: var(--st-goal); font-weight: 600; white-space: nowrap; }
.strat-goal__st.gs-done { color: var(--dk-green-text, #15803d); }
.strat-goal__st.gs-planned { color: var(--muted-light); }
.strat-goal__st.gs-not_achieved { color: var(--st-risk-hi); }
.strat-goal--loose { grid-template-columns: 15px minmax(0, 1fr) auto; background: var(--card); border: 1px solid var(--dk-violet-line, #dcd8fb); }
.strat-goal__move { grid-column: 2 / -1; font-size: 12px; padding: 3px 6px; min-height: 0; }
.strat-loose-goals { display: grid; gap: 6px; }
.strat-bar { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.strat-bar__track { height: 5px; background: rgba(109,99,214,.15); border-radius: 3px; overflow: hidden; }
.strat-bar__track i { display: block; height: 100%; background: var(--st-goal); border-radius: 3px; }
.strat-bar__pf { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strat-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.strat-bdg { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.strat-bdg svg.ic { width: 13px; height: 13px; vertical-align: 0; }
.strat-bdg.b-proj { background: var(--st-proj-soft); color: var(--st-proj); }
.strat-bdg.b-ini { background: var(--st-ini-soft); color: var(--st-ini); }
.strat-bdg.b-risk { background: var(--st-risk-soft); color: var(--st-risk); }
.strat-bdg.b-riskhi { background: var(--st-risk-hi-soft); color: var(--st-risk-hi); }
.strat-bdg.b-zero { background: var(--content-bg); color: var(--muted-light); font-weight: 500; }
/* «+ …» — тихой ссылкой, не плашкой: на каждой карточке пунктир шумел бы (проверка глазами 03.10) */
.strat-add__btn { background: none; border: 0; border-radius: 6px; padding: 3px 2px; font: inherit; font-size: 12.5px;
  color: var(--accent-strong); cursor: pointer; text-align: left; }
.strat-add__btn:hover { text-decoration: underline; }
.strat-add__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.strat-add__input { width: 100%; font-size: 13px; }
.strat-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.strat-swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.strat-swatch.on { box-shadow: 0 0 0 2px var(--text); }
@media (max-width: 1100px) { .strat-spheres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .strat-spheres { grid-template-columns: minmax(0, 1fr); }
  .strat-seg { margin-left: 0; }
  .strat-topbar__end { margin-left: 0; width: 100%; }
  .strat-dir__h, .strat-add__btn, .strat-seg button, .strat-pill { min-height: 44px; }
  .strat-pill { padding: 1px 12px; }
}
/* ── /«Стратегия»: дерево ── */

/* ── «Стратегия»: карточка фокуса (макет v4, пачка 3а) ──
   Суть — текстом без цвета (подписи слева), ниже цветные блоки по типам со своими «+». */
.strat-card { width: min(760px, 100vw - 32px); }
.strat-card__inner { display: flex; flex-direction: column; min-height: 0; max-height: 90vh; }
.strat-card__head { padding: 14px 20px 12px; display: grid; gap: 6px; }
.strat-card__crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted-light); }
.strat-card__close { margin-left: auto; }
.strat-card__title { font-size: 17px; margin: 0; }
.strat-card__title-input { font: inherit; font-size: 17px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; margin: 0 -6px; color: var(--text); background: none; resize: none; width: calc(100% + 12px); line-height: 1.35; }
.strat-card__title-input:hover { border-color: var(--border); }
.strat-card__title-input:focus { border-color: var(--accent); outline: none; background: var(--card); }
.strat-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.strat-card__metafield { display: inline-flex; align-items: center; gap: 6px; }
.strat-card__metafield .form-select { font-size: 12.5px; padding: 2px 6px; min-height: 0; width: auto; max-width: 220px; }
.strat-card__metafield .form-select:disabled { border-color: transparent; background: none; color: var(--text); appearance: none; padding: 2px 0; opacity: 1; }
.strat-card__jump { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); background: var(--surface); }
.strat-card__jump .strat-bdg { border: 0; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.strat-bdg.b-goal { background: var(--st-goal-soft); color: var(--st-goal); }
.strat-card__body { padding: 14px 20px 18px; display: grid; gap: 14px; overflow-y: auto; min-height: 0; }
.strat-ess { display: grid; }
.strat-ess__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--divider); font-size: 13.5px; }
.strat-ess__row:first-of-type { border-top: 0; padding-top: 0; }  /* первый ребёнок — <template> x-for */
.strat-ess__l { font-size: 12px; color: var(--muted); font-weight: 600; padding-top: 4px; }
.strat-ess__l small { display: block; font-weight: 400; color: var(--muted-light); }
.strat-ess__v { font: inherit; font-size: 13.5px; color: var(--text); border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; background: none; resize: none; width: 100%; min-height: 28px; }
.strat-ess__v:not([readonly]):hover { border-color: var(--border); }
.strat-ess__v:focus { border-color: var(--accent); outline: none; background: var(--card); }
.strat-ess__v::placeholder { color: var(--muted-light); font-style: italic; }
.strat-ess__row.main .strat-ess__v { font-weight: 600; }
.strat-blk { border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; border: 1px solid; scroll-margin-top: 8px; }
.strat-blk__h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.strat-blk__n { font-weight: 600; opacity: .7; }
.strat-blk--goal { background: var(--st-goal-soft); border-color: var(--dk-violet-line, #dcd8fb); color: var(--st-goal); }
.strat-blk--proj { background: var(--st-proj-soft); border-color: var(--dk-blue-line, #d3e3f5); color: var(--st-proj); }
.strat-blk--ini { background: var(--st-ini-soft); border-color: var(--dk-green-line, #cfe9da); color: var(--st-ini); }
.strat-blk--risk { background: var(--st-risk-soft); border-color: var(--dk-amber-line, #f1dcb5); color: var(--st-risk); }
.strat-blk .strat-muted { color: inherit; opacity: .7; }
.strat-blk .strat-add__btn { color: inherit; font-weight: 600; }
.strat-row { background: var(--card); border-radius: 8px; padding: 8px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; color: var(--text); font-size: 13px; }
.strat-row.pending { outline: 1px dashed var(--dk-amber-line, #e9c46a); }
.strat-row--risk { border-left: 4px solid var(--st-risk); }
.strat-row--risk.hi { border-left-color: var(--st-risk-hi); }
.strat-row--risk.closed { opacity: .7; }
.strat-row__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.strat-row__main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.strat-row__t { overflow-wrap: anywhere; }
.strat-row__sub { color: var(--muted); font-size: 12px; }
.strat-row .strat-bar { grid-column: auto; }
.strat-row__edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 6px; border-top: 1px solid var(--divider); margin-top: 4px; }
.strat-row__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.strat-row__triple { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.strat-row__acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.strat-row__acts .btn { font-size: 12.5px; padding: 4px 12px; }
.strat-field { display: grid; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.strat-chip { font-size: 11px; border-radius: 8px; padding: 0 7px; white-space: nowrap; font-weight: 600; background: var(--dk-n-hover, #f1f2f5); color: var(--muted); }
.strat-chip.gs-in_progress { background: var(--st-goal-soft); color: var(--st-goal); }
.strat-chip.gs-done, .strat-chip.is-done { background: var(--dk-green-bg, #e7f6ec); color: var(--dk-green-text, #15803d); }
.strat-chip.gs-not_achieved, .strat-chip.p-high { background: var(--st-risk-hi-soft); color: var(--st-risk-hi); }
.strat-chip.is-in_progress, .strat-chip.is-new { background: var(--st-ini-soft); color: var(--st-ini); }
.strat-chip.p-medium, .strat-chip.c-wait { background: var(--st-risk-soft); color: var(--st-risk); }
.strat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.strat-pchip { background: var(--card); color: var(--text); border-radius: 14px; padding: 3px 6px 3px 11px; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.strat-pchip small { color: var(--st-proj); font-size: 11.5px; }
.strat-pchip__x { border: 0; background: none; color: var(--muted-light); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 50%; }
.strat-pchip__x:hover { color: var(--danger); }
.strat-suggest { display: grid; background: var(--card); border: 1px solid var(--border); border-radius: 8px; margin-top: 4px; overflow: hidden; }
.strat-suggest button { text-align: left; border: 0; background: none; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.strat-suggest button:hover, .strat-suggest button:focus-visible { background: var(--hover); }
.strat-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-strong); }
@media (max-width: 768px) {
  .strat-ess__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .strat-row__triple { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .strat-row__triple .strat-field:first-child { grid-column: 1 / -1; }
  .strat-row__main, .strat-card__jump .strat-bdg, .strat-row__acts .btn { min-height: 44px; }
}
.strat-kt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.strat-kt__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 3px 0; border-top: 1px solid var(--divider); }
.strat-kt__t { overflow-wrap: anywhere; font-size: 13px; color: var(--text); }
.strat-kt__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.strat-kt__link { width: auto; max-width: 100%; font-size: 12.5px; }
/* ── /«Стратегия»: карточка фокуса ── */

/* ── «Стратегия»: вкладки (пачка 4) ── */
.strat-page { display: grid; gap: 12px; }
.strat-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; }
.strat-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; font: inherit; font-size: 13px; color: var(--muted); background: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.strat-tabs button svg.ic { width: 14px; height: 14px; vertical-align: 0; }
.strat-tabs button.on { color: var(--accent-strong); border-bottom-color: var(--accent); font-weight: 600; }
.strat-tabs__cnt { font-size: 11px; border-radius: 8px; padding: 0 6px; background: var(--st-risk-soft); color: var(--st-risk); font-weight: 600; }
.strat-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.strat-filter button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 14px; padding: 3px 11px; font: inherit; font-size: 12.5px;
  color: var(--muted); background: var(--card); cursor: pointer; }
.strat-filter button i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.strat-filter button.on { background: var(--sidebar-active); color: var(--accent-strong); border-color: var(--sidebar-active); font-weight: 600; }
.strat-table { width: 100%; font-size: 13px; min-width: 640px; }  /* на телефоне листается вбок, а не сжимается в столбики */
.strat-table th { white-space: nowrap; }
.strat-table td { vertical-align: top; }
.strat-table__click { cursor: pointer; }
.strat-table__click:hover td { background: var(--surface); }
.strat-table__goal, .strat-table__ini { display: inline-flex; gap: 6px; align-items: baseline; }
.strat-table__goal svg.ic { color: var(--st-goal); width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.strat-table__ini svg.ic { color: var(--st-ini); width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.strat-table__risk td:first-child { border-left: 4px solid var(--st-risk); }
.strat-table__risk.hi td:first-child { border-left-color: var(--st-risk-hi); }
.strat-table__risk.closed td { opacity: .65; }
.strat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 1px; }
.strat-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.strat-bar--cell { min-width: 160px; }
.strat-matrix__f { white-space: normal !important; min-width: 96px; max-width: 140px; font-size: 11.5px; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.3; }
.strat-matrix__f small { display: block; color: var(--muted-light); font-weight: 400; }
.strat-matrix__c { text-align: center; }
.strat-matrix__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--st-proj); font-size: 0; }
/* название проекта не уезжает при прокрутке матрицы вбок */
.strat-matrix th:first-child, .strat-matrix td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); min-width: 200px; box-shadow: 1px 0 0 var(--divider); }
.strat-matrix thead th:first-child { background: var(--surface); }
.strat-proj { display: grid; gap: 12px; }
.strat-free { background: var(--card); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; }
.strat-free summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.strat-free summary small { font-weight: 400; color: var(--muted-light); }
.strat-free .strat-chips { margin-top: 8px; }
.strat-free .strat-pchip { border: 1px solid var(--border); padding-right: 11px; }
.strat-review { display: grid; gap: 10px; }
.strat-rv { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px; padding: 10px 14px; display: grid; gap: 6px; }
.strat-rv--goal { border-left-color: var(--st-goal); }
.strat-rv--initiative { border-left-color: var(--st-ini); }
.strat-rv--risk { border-left-color: var(--st-risk); }
.strat-rv__head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.strat-rv__kind { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.strat-rv--goal .strat-rv__kind { color: var(--st-goal); }
.strat-rv--initiative .strat-rv__kind { color: var(--st-ini); }
.strat-rv--risk .strat-rv__kind { color: var(--st-risk); }
.strat-rv__kind svg.ic { width: 14px; height: 14px; vertical-align: 0; }
.strat-rv__title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.strat-rv__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.strat-rv__comment { font-size: 12.5px; background: var(--surface); border-radius: 6px; padding: 6px 8px; }
.strat-rv__acts { display: grid; gap: 8px; }
@media (max-width: 768px) {
  .strat-tabs button, .strat-filter button { min-height: 44px; }
}
/* ── /«Стратегия»: вкладки ── */

/* ── 04.10 (аудит экранов): подсказка «таблицу/вкладки можно листать» и «Стратегия» на телефоне ── */
/* Класс .tw-more ставит table-scroll-hint.js, пока справа есть непоказанное: край плавно гаснет. */
@media (max-width: 768px) {
  .tw-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  /* Шапка «Стратегии»: версия на всю строку (текст сокращается многоточием), год и кнопки — одной строкой ниже */
  .strat-topbar > select.input-inline[aria-label="Версия стратегии"] { flex: 1 1 100%; width: 100%; min-width: 0; text-overflow: ellipsis; }
  .strat-topbar > select.input-inline[aria-label="Год"] { flex: 0 0 auto; }
  .strat-topbar__end { width: auto; flex: 1 1 auto; justify-content: flex-end; }
}
/* «Годовые цели» на телефоне — карточки: цель заголовком, остальное подписями под ней */
@media (max-width: 600px) {
  .strat-table--goals { min-width: 0; }
  .strat-table--goals thead { display: none; }
  .strat-table--goals, .strat-table--goals tbody, .strat-table--goals tr, .strat-table--goals td { display: block; }
  .strat-table--goals tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .strat-table--goals td { padding: 3px 0; border: 0; text-align: left; }
  .strat-table--goals td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
  .strat-table--goals td[data-label] .strat-bar { display: inline-flex; vertical-align: middle; }
}

/* «Гранты → Все гранты» (аудит 27.10): на широком экране — таблица колонками; на телефоне колонки справа скрыты,
   статус и ближайший срок — строкой под названием, без прокрутки вбок. */
.grants-list-table { min-width: 760px; }
.grants-list-table--head { min-width: 620px; }
.grants-row-narrow { display: none; }
@media (max-width: 600px) {
  .grants-list-table, .grants-list-table--head { min-width: 0; }
  .grants-list-table .grants-col-wide { display: none; }
  .grants-row-narrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12px; }
}

/* ===== Сообщения: две колонки, как почта (задача 5 плана 17.10) ===============
   Слева список ≈330 px, справа ветка. На телефоне — одна колонка: список, тап — ветка на весь экран. */
.msg-layout { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.msg-list { width: 330px; min-width: 330px; border-right: 0.5px solid var(--border); background: var(--card); overflow-y: auto; }
.msg-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.msg-thread__inner { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.msg-thread__empty, .msg-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 40px 20px; }
.msg-block-title { padding: 10px 14px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.msg-block-empty { padding: 8px 14px; font-size: 12px; color: var(--muted); }
.msg-row { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 0.5px solid var(--border); cursor: pointer; }
.msg-row:hover { background: var(--accent-light); }
.msg-row.active { background: var(--accent-light); box-shadow: inset 3px 0 0 var(--accent); }
.msg-row__body { flex: 1; min-width: 0; }
.msg-row__head { display: flex; gap: 8px; align-items: baseline; }
.msg-row__subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; }
.msg-row--unread .msg-row__subject { font-weight: 700; }
.msg-row__time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.msg-row__who, .msg-row__preview { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.msg-archive-toggle { padding: 10px 14px; font-size: 12px; color: var(--muted); cursor: pointer; border-top: 0.5px solid var(--border); }
.msg-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; background: var(--accent-light); color: var(--accent-strong); }
.msg-avatar--me { background: var(--surface); color: var(--muted); }
.msg-avatar--sm { width: 20px; height: 20px; font-size: 9px; }
.msg-thread__head { padding: 14px 20px 10px; border-bottom: 0.5px solid var(--border); background: var(--card); flex-shrink: 0; }
.msg-back { display: none; margin-bottom: 8px; }
.msg-thread__title-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.msg-thread__title { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: break-word; }
.msg-thread__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-thread__note { margin-top: 6px; font-size: 12px; color: var(--muted); }
.msg-parts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 10px; font-size: 12px; }
.msg-part { display: inline-flex; align-items: center; gap: 5px; }
.msg-part__st { color: var(--muted); }
.msg-part__st--not_opened, .msg-part__st--unread_new { color: var(--warning-text); }
.msg-feed { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.msg-post { max-width: 640px; padding: 10px 14px; border: 0.5px solid var(--border); border-radius: 10px; background: var(--card); }
.msg-post--me { align-self: flex-end; background: var(--accent-light); }
.msg-post__head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; margin-bottom: 4px; }
.msg-post__time { color: var(--muted); }
.msg-post__text { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-post__files, .msg-compose__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-file { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 0.5px solid var(--border); border-radius: 6px; background: var(--card); font-size: 12px; max-width: 100%; }
.msg-file__size { color: var(--muted); }
/* 17.10: плашка файла — не синяя ссылка браузера, а как вложения системы. */
a.msg-file { color: var(--text); text-decoration: none; cursor: pointer; }
a.msg-file:hover { border-color: var(--accent); color: var(--accent); }
.msg-sys { text-align: center; font-size: 12px; color: var(--muted); }
.msg-compose { position: relative; padding: 10px 20px 8px; border-top: 0.5px solid var(--border); background: var(--card); flex-shrink: 0; }
.msg-compose__row { display: flex; gap: 8px; align-items: flex-end; }
.msg-compose__note { margin-top: 6px; font-size: 11px; color: var(--muted); }
.msg-compose__note--warn { color: var(--warning-text); }
.msg-compose__note--ro { padding: 10px 20px; border-top: 0.5px solid var(--border); background: var(--card); margin-top: 0; }

@media (max-width: 768px) {
  .msg-list { width: 100%; min-width: 0; border-right: 0; }
  .msg-thread { display: none; }
  .msg-layout--thread .msg-list { display: none; }
  .msg-layout--thread .msg-thread { display: flex; }
  .msg-back { display: inline-flex; }
  .msg-thread__head, .msg-feed, .msg-compose { padding-left: 14px; padding-right: 14px; }
  .msg-post { max-width: 100%; }
  /* Шапка ветки столбиком: тема на всю ширину (переносится по словам), кнопки строкой ниже */
  .msg-thread__title-row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .msg-thread__title { flex: none; width: 100%; }
}

/* ---- «Командировки»: реестр поездок во вкладке «Планирования» (17.10, задача 4) ---- */
.trip-wrap { padding-bottom: 64px; min-width: 0; }
.trip-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.trip-seg { display: inline-flex; border: 1px solid var(--border-input); border-radius: 8px; overflow: hidden; background: var(--card); }
.trip-seg__btn { border: 0; background: none; font: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer; color: var(--muted); }
.trip-seg__btn + .trip-seg__btn { border-left: 1px solid var(--border-input); }
.trip-seg__btn.active { background: var(--accent); color: #fff; }
.trip-search { flex: 0 1 280px; min-width: 0; font-size: 13px; padding: 6px 10px; }
.trip-status-sel { font-size: 12px; padding: 6px 8px; width: auto; min-width: 0; }
.trip-summary { margin-left: auto; font-size: 12px; color: var(--muted); }
.trip-summary b { color: var(--text-strong); }
.trip-soon { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 12px; margin-bottom: 12px;
  background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-text); border-radius: 8px; font-size: 13px; }
.trip-empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.trip-table { border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }
.trip-head, .trip-row { display: grid; grid-template-columns: 34px 112px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) 120px; gap: 0 12px; align-items: start; padding: 10px 12px; }
.trip-head { background: var(--surface); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 8px; padding-bottom: 8px; }
.trip-past { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 12px; color: var(--muted); padding: 8px 12px; cursor: pointer; }
.trip-past:hover { color: var(--accent); }
.trip-group__title { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--text-strong); background: var(--surface); border-top: 1px solid var(--border); }
.trip-row { border-top: 1px solid var(--border); cursor: pointer; font-size: 13px; color: var(--text-strong); }
.trip-row:hover, .trip-row:focus-visible { background: var(--surface); outline: none; }
/* выбранная галочкой — акцентом: жёлтый занят меткой «пора уточнить» (задача 5) */
.trip-row--picked { background: var(--accent-tint-1); box-shadow: inset 3px 0 0 var(--accent); }
.trip-row--picked:hover { background: var(--accent-tint-1); }
.trip-row--cancelled { color: var(--muted); }
.trip-row--cancelled .trip-title { text-decoration: line-through; font-weight: 500; }
.trip-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.trip-cell--people { flex-direction: row; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.trip-cell--status { align-items: flex-start; gap: 4px; }
.trip-cell--pick input { margin: 2px 0 0; }
.trip-dates { font-weight: 600; white-space: nowrap; }
.trip-title { font-weight: 700; }
.trip-sub { font-size: 11px; color: var(--muted); }
.trip-chip { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-input); color: var(--muted); white-space: nowrap; }
.trip-status { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.trip-status--approved { background: var(--success-bg); color: var(--success-text); }
.trip-status--draft { background: var(--card); color: var(--text-strong); border: 1px dashed var(--muted); }
.trip-status--cancelled { background: var(--surface); color: var(--muted); text-decoration: line-through; }
.trip-soon-mark { font-size: 10.5px; padding: 1px 7px; border-radius: 8px; background: var(--warning-bg); color: var(--warning-text); }
.trip-selbar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px;
  padding: 10px 14px; border-radius: 10px; background: #1e293b; color: #fff; font-size: 13px; font-weight: 600; }
.trip-selbar__clear { border: 0; background: none; font: inherit; font-size: 13px; color: #cbd5e1; cursor: pointer; text-decoration: underline; }
/* ---- «Командировки»: окно поездки (17.10, задача 5; макет панели 3–4) ---- */
.trip-drawer { width: 540px; }
.trip-dr-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.trip-dr-line { font-size: 12.5px; color: var(--muted); }
.trip-dates-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.trip-dates-row .form-input { flex: 1 1 130px; min-width: 0; width: auto; }
.trip-days { font-size: 12px; color: var(--muted); white-space: nowrap; }
.trip-people-title { font-size: 13px; font-weight: 700; color: var(--text-strong); margin-top: 4px; }
.trip-people-title span { font-weight: 400; color: var(--muted); }
.trip-pc { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); min-width: 0; }
.trip-pc__who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.trip-pc__name { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.trip-pc__kind { font-size: 11.5px; color: var(--muted-light); }
.trip-pc__fired { font-size: 11px; padding: 0 7px; border-radius: 8px; background: var(--danger-bg); color: var(--danger-text); white-space: nowrap; }
.trip-pc__ext { flex: 1 1 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.trip-pc__ext .form-input { flex: 1 1 180px; min-width: 0; }
.trip-pc__ext .form-select { flex: 0 1 150px; min-width: 0; width: auto; }
.trip-pc__x { margin-left: auto; border: 0; background: none; color: var(--muted-light); cursor: pointer; padding: 2px 6px; font-size: 13px; line-height: 1; }
.trip-pc__x:hover { color: var(--danger-text); }
.trip-pc__rg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 6px; }
.trip-pc .form-input, .trip-pc .form-select { font-size: 12.5px; padding: 5px 8px; }
.trip-note { font-size: 12px; line-height: 1.4; border-radius: 6px; padding: 4px 8px; }
.trip-note--warn { background: var(--status-warn-bg); color: var(--status-warn-text); }
.trip-note--calm { background: var(--surface); color: var(--muted); }
.trip-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trip-pick .mm-dd { top: auto; bottom: 100%; margin: 0 0 2px; }
.trip-dr-error { padding: 8px 10px; border-radius: 8px; background: var(--danger-bg); color: var(--danger-text); font-size: 13px; }
.trip-who-can { flex: 1 1 100%; order: 10; }
@media (max-width: 768px) {
  .trip-drawer { width: 100vw; }
  .trip-drawer .rm-two { grid-template-columns: minmax(0, 1fr); }
  .trip-pc__rg { grid-template-columns: minmax(0, 1fr); }
  .trip-pc__x { min-width: 44px; min-height: 44px; }
}
@media (max-width: 768px) {
  .trip-head { display: none; }
  .trip-row { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 8px; }
  .trip-row > .trip-cell--pick { grid-row: 1 / span 5; }
  .trip-row > .trip-cell { grid-column: 2; }
  .trip-summary { margin-left: 0; flex: 1 1 100%; }
  .trip-search { flex: 1 1 100%; }
}
/* ---- «Командировки»: «По месяцам» и телефон (17.10, задача 6; ТЗ п. 5.3, 5.7, макет панели 2 и 6) ---- */
.trip-legend { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; color: var(--muted-light); }
.trip-legend__i::before { content: ''; display: inline-block; width: 14px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 3px; background: var(--surface); }
.trip-legend__i--approved::before { border-left: 3px solid var(--success); }
.trip-legend__i--draft::before { border-left: 3px dashed var(--muted-light); }
.trip-legend__i--cancelled { text-decoration: line-through; }
.trip-legend__i--cancelled::before { border-left: 3px solid var(--border-input); }
.trip-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.trip-month { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 92px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.trip-month.is-past { opacity: .6; }
.trip-month.is-now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.trip-month__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 6px; }
.trip-month__name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.trip-month__count { font-size: 11px; color: var(--muted-light); font-variant-numeric: tabular-nums; }
.trip-month__none { font-size: 12px; color: var(--muted-light); }
.trip-mitem { min-width: 0; padding: 5px 7px; border-radius: 7px; background: var(--surface); font-size: 12px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; cursor: pointer; }
.trip-mitem:hover, .trip-mitem:focus-visible { background: var(--hover); outline: none; }
.trip-mitem b { font-weight: 600; color: var(--text-strong); }
.trip-mitem small { display: block; font-size: 11px; color: var(--muted-light); }
.trip-mitem--approved { border-left: 3px solid var(--success); }
.trip-mitem--draft { border-left: 3px dashed var(--muted-light); }
.trip-mitem--cancelled { border-left: 3px solid var(--border-input); color: var(--muted-light); text-decoration: line-through; }
.trip-mitem--cancelled b { color: var(--muted-light); }
.trip-mcard { display: none; }
@media (max-width: 1100px) { .trip-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  /* Вкладки листаются вбок одной строкой, как до шестой вкладки (ТЗ п. 5.7): общее .topbar > div переносило её вниз */
  .rm-topbar > .rm-views { flex-wrap: nowrap; }
  .trip-months { grid-template-columns: minmax(0, 1fr); }
  .trip-month { min-height: 0; }
  .trip-legend { margin-left: 0; flex: 1 1 100%; }
  /* «Список» — карточками: место и статус, название, «даты · программа · N чел.», «пора уточнить» */
  .trip-table { border: 0; border-radius: 0; background: none; overflow: visible; }
  .trip-group__title, .trip-past { background: none; border-top: 0; padding: 12px 2px 2px; }
  .trip-row { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .trip-row:not(.trip-row--pickable) { grid-template-columns: minmax(0, 1fr); }
  .trip-row:not(.trip-row--pickable) > .trip-cell--pick { display: none; }
  .trip-row > .trip-cell:not(.trip-cell--pick) { display: none; }
  .trip-mcard { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
  .trip-row--pickable > .trip-cell--pick { grid-column: 1; grid-row: 1; }
  .trip-row--pickable > .trip-mcard { grid-column: 2; grid-row: 1; }
  .trip-mcard > * { max-width: 100%; }
  .trip-mcard__l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; align-self: stretch; }
  .trip-mcard__l1 b { min-width: 0; color: var(--text-strong); }
  .trip-mcard .trip-title { font-weight: 500; }
  .trip-row--cancelled .trip-mcard__l1 b { color: var(--muted); text-decoration: line-through; }
}
/* «Отсутствия» (ЛК и «Штат»): строка из реестра командировок — чип, «Замещающий: …», «Открыть поездку» (задача 6) */
.abs-trip-from { margin-top: 4px; }
.abs-trip-acts { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.abs-trip-acts--row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
.abs-trip-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--accent-strong); cursor: pointer; white-space: nowrap; text-align: left; }
.abs-trip-link:hover { text-decoration: underline; }
/* на телефоне таблица ЛК и так листается вбок внутри .table-wrap — чип и ссылки переносим, чтобы не раздувать её */
@media (max-width: 768px) { .abs-trip-from .chip, .abs-trip-link { white-space: normal; } .abs-trip-link { min-height: 32px; } }
/* ЛК → «Мой график» → «Формат работы» (ТЗ 06.11 п. 5.В.1): переключатель формата, пн–пт, «другие дни» чипами.
   Ряды переносятся — на 375 без прокрутки вбок; на телефоне цели — под палец. */
.wm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wm-title { font-size: 13px; font-weight: 600; }
.wm-seg { max-width: 100%; flex-wrap: wrap; }
.wm-seg button:disabled { cursor: default; opacity: .6; }
.wm-days { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.wm-day { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.wm-hint { margin-top: 6px; font-size: 12px; color: var(--muted); }
.wm-none { font-size: 12px; color: var(--muted-light); }
.wm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.wm-chip { font-size: 12px; font-weight: 500; padding: 2px 2px 2px 10px; }
.wm-chip__x { border: 0; background: none; padding: 0 6px; font: inherit; color: inherit; cursor: pointer; line-height: 1; }
.wm-chip__x:hover { color: var(--danger); }
.wm-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--accent-strong); cursor: pointer; }
.wm-link:hover { text-decoration: underline; }
.wm-exc { margin-top: 10px; }
.wm-date { width: auto; max-width: 170px; }
.wm-err { margin-top: 6px; font-size: 12.5px; color: var(--danger); }
@media (max-width: 768px) {
  .wm-seg button, .wm-link, .wm-exc .btn { min-height: 44px; }
  .wm-days { gap: 8px 10px; }
  .wm-day .wm-seg button { padding: 5px 9px; }   /* три дня в ряд на 375 */
  .wm-chip__x { min-width: 32px; min-height: 32px; }
}
/* «Поступления» → «Моё» (задача 8): клетка «донор × месяц» правится на месте — сумма, уверенность, «×» */
.my-cell-in { width: 84px; box-sizing: border-box; border: 1px solid var(--border-input); background: var(--card); color: var(--text); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.my-cell-in::placeholder { color: var(--muted-light); opacity: 1; }
.my-cell-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.my-cell-in--pct { width: 38px; padding: 1px 4px; font-size: 11px; }
.my-cell-sub { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-height: 20px; margin-top: 2px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.my-cell-pct { display: inline-flex; align-items: center; gap: 2px; }
.my-cell-x { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.my-cell-x:hover, .my-cell-x:focus-visible { color: var(--danger); background: var(--surface); }
/* iOS приближает страницу при фокусе в поле мельче 16 px — на телефоне поля клетки крупнее */
@media (max-width: 768px) { .my-cell-in { width: 96px; font-size: 16px; } .my-cell-in--pct { width: 46px; font-size: 16px; } .my-cell-x { width: 28px; height: 28px; } }
/* «Поступления» → «Команда» (задача 9): цифры, сегменты, люди. Цвета — только токены темы. */
.inc-team-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.inc-team-kpi { background: var(--surface); border: 0.5px solid var(--border); border-radius: 10px; padding: 12px 16px; }
.inc-team-kpi__l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.inc-team-card { background: var(--card); border: 0.5px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.inc-team-card__h { font-size: 14px; font-weight: 700; color: var(--text-strong); margin: 0 0 10px; }
.inc-team-table { font-size: 12px; }
.inc-team-table thead tr { background: var(--surface); border-bottom: 0.5px solid var(--border); }
.inc-team-table th { text-align: left; padding: 7px 10px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.inc-team-table th.num { text-align: right; }
.inc-team-table td { padding: 7px 10px; border-bottom: 0.5px solid var(--divider); }
.inc-team-sum td { background: var(--surface); font-weight: 700; color: var(--text-strong); border-bottom: 0; }
.inc-team-row--click { cursor: pointer; }
.inc-team-row--click:hover td { background: var(--accent-light); }
.inc-team-row--fired td, .inc-team-row--fired:hover td { background: var(--danger-bg); }
.inc-team-sub { font-size: 10px; color: var(--muted); }
.inc-team-sub--fired, .inc-team-late { color: var(--danger-text); font-weight: 600; }
.inc-team-link, .inc-team-name { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.inc-team-link { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; font-variant-numeric: tabular-nums; }
.inc-team-name { font-weight: 600; color: var(--text-strong); }
.inc-team-name:hover, .inc-team-name:focus-visible { color: var(--accent-strong); text-decoration: underline; }
.inc-team-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
@media (max-width: 768px) { .inc-team-link, .inc-team-name { min-height: 32px; } }
.inc-xfer-note { font-size: 13px; color: var(--text); background: var(--surface); border: 0.5px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
/* «Поступления»: карточка «План {год}» в «Команде» и плашка утверждённого плана (задача 11) */
.inc-plan-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.inc-plan-card__main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.inc-plan-card__act { display: flex; flex-wrap: wrap; gap: 8px; }
.inc-plan-card__state { font-size: 13px; color: var(--muted); }
.inc-plan-card__state--ok { color: var(--success-text); font-weight: 600; }
.inc-plan-card .inc-team-hint { margin-top: 0; }
.inc-plan-lock { background: var(--info-bg); color: var(--info-text); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }
@media (max-width: 768px) { .inc-plan-card__act, .inc-plan-card__act .btn { width: 100%; } }
/* 26.10: панель поиска и фильтров «Поступлений» прилипает к верху при прокрутке; на телефоне она в 5–6 строк —
   прилипшая закрыла бы полэкрана, поэтому там обычная. */
.inc-filters { position: sticky; top: 0; z-index: 5; }
@media (max-width: 768px) { .inc-filters { position: static; } }

/* «Поступления»: «Кому» в «Передать» — поиск со списком (аудит 27.10, №13) */
.inc-xfer-pick { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--card); border: 1px solid var(--border-input); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.1); max-height: 220px; overflow-y: auto; }
.inc-xfer-pick__h { padding: 6px 12px 2px; font-size: 11px; color: var(--muted); }
.inc-xfer-pick__o { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--hover); background: none; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.inc-xfer-pick__o:hover, .inc-xfer-pick__o:focus-visible { background: var(--surface); }
.inc-xfer-pick__tag { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* «Команда» на телефоне: «Передать» — под именем человека, правый столбец убран (аудит 27.10, №9) */
.inc-team-xfer-m { display: none; font-size: 12px; padding: 4px 10px; margin-top: 4px; }
@media (max-width: 600px) {
  .inc-team-xfer-col { display: none; }
  .inc-team-xfer-m { display: inline-block; }
}

/* 28.10 «Чем покрыт проект» (Бюджет, над вкладками План/Факт): строки «подпись — сумма», на телефоне подпись и сумма переносятся. */
.cov-block { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 12px; max-width: 640px; }
.cov-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.cov-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; padding: 5px 0; border-bottom: 0.5px solid var(--border); font-size: 12.5px; }
.cov-row > b { font-variant-numeric: tabular-nums; text-align: right; margin-left: auto; }
.cov-row.cov-total { font-weight: 700; border-bottom: none; }
.cov-bad { color: var(--danger-text); }
.cov-good { color: var(--success-text); }
.cov-note { font-size: 11px; color: var(--muted-light); font-weight: 400; }
.cov-warn { background: var(--warning-bg); color: var(--warning-text); border-radius: var(--radius); padding: 6px 10px; margin: 8px 0; }
.cov-blind { margin-top: 6px; }
.cov-empty { font-size: 12.5px; color: var(--muted-light); padding: 4px 0; }
.cov-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 10px 0 2px; }
.cov-card-row b { font-weight: 600; }
.cov-amt { text-align: right; margin-left: auto; }
.cov-pin { margin-top: 10px; border-top: 0.5px solid var(--border); padding-top: 4px; }
.cov-pin-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.cov-pin-form .input-inline { max-width: 100%; }
.cov-pin-row { align-items: center; }

/* Новости, вид Б (29.10) */
/* Лента, «Списком», правая колонка, окно чтения (ТЗ «Новости — новый вид», п. 3.1–3.4). Цвета — только токены
   и пары рубрик var(--dk-роль, #светлый) из news-render.js; классы news-sec*, news-video-card рисует общий хелпер. */
.nf-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 20px; align-items: start; } /* лента во всю ширину раздела, как остальные разделы (Ваня 30.10) */
.nf-feed { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nf-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nf-search { flex: 1; min-width: 200px; border-radius: 10px; }
.nf-seg { display: inline-flex; border: 0.5px solid var(--border-input); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.nf-seg button { border: 0; background: none; padding: 7px 14px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.nf-seg button + button { border-left: 0.5px solid var(--border-input); }
.nf-seg button.on { background: var(--accent-light); color: var(--accent-strong); font-weight: 600; }
.nf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-fchip { border: 0.5px solid var(--border-input); background: var(--card); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.nf-fchip:hover { color: var(--text); border-color: var(--muted-light); }
.nf-fchip.on { background: var(--accent); border-color: var(--accent); color: var(--on-color); }
.nf-note { font-size: 13px; color: var(--muted); text-align: center; padding: 8px 0; }
.nf-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; text-align: center; }
.nf-empty__t { font-size: 15px; font-weight: 600; color: var(--text); }
.nf-more-btn { align-self: center; padding: 8px 18px; }
/* Подпись месяца липнет к верху: обёртка записи «прозрачна» для раскладки, поэтому подпись держится всю ленту */
.nf-list { display: flex; flex-direction: column; gap: 14px; }
.nf-list--rows { gap: 6px; }
.nf-item { display: contents; }
.nf-month { position: sticky; top: 0; z-index: 3; background: var(--content-bg); padding: 6px 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-light); }

/* Карточка ленты */
.nf-card { background: var(--card); border: 0.5px solid var(--border); border-radius: 16px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.nf-card:hover { border-color: var(--border-input); }
.nf-card--preview { cursor: default; }
.nf-head { display: flex; gap: 10px; align-items: center; padding: 14px 18px 0; }
.nf-ava { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--dk-violet-bg, #EEEDFE); color: var(--accent-strong); font-size: 14px; font-weight: 600; }
.nf-ava img { width: 100%; height: 100%; object-fit: cover; }
.nf-ava--new { background: var(--dk-orange-bg, #FAECE7); color: var(--dk-orange-text, #993C1D); }
.nf-who { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.nf-who b { font-size: 13.5px; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-who span { font-size: 12px; color: var(--muted-light); line-height: 1.35; }
.nf-chip { display: inline-block; flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 20px; padding: 0 9px; border-radius: 999px; font-weight: 600; }
.nf-body { padding: 10px 18px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.nf-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.nf-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nf-more { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--accent-strong); cursor: pointer; }
.nf-more:hover { text-decoration: underline; }
.nf-toc { align-self: stretch; display: flex; flex-direction: column; border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.nf-toc__i { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; border-bottom: 0.5px solid var(--border); background: var(--surface); padding: 9px 12px; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; }
.nf-toc__i:last-child { border-bottom: 0; }
.nf-toc__i:hover { background: var(--dk-green-bg, #EAF3DE); }
.nf-num, .news-sec__num { width: 22px; height: 22px; border-radius: 6px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--dk-green-bg, #EAF3DE); color: var(--dk-green-text, #3B6D11); }
.nf-toc__t { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.nf-toc__n { font-size: 12px; color: var(--muted-light); white-space: nowrap; }
.nf-gal { margin: 12px 18px 0; display: grid; gap: 3px; max-width: 720px; aspect-ratio: 16 / 9; max-height: 460px; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; border-radius: 12px; overflow: hidden; } /* на большом мониторе рамка не растёт за 720 px (Ваня 31.10); слева, как текст */
.nf-gal--1 { display: block; width: fit-content; aspect-ratio: auto; max-height: none; background: var(--surface); } /* одна картинка — целиком, без обрезки */
.nf-gal--1 .nf-gal__i { display: block; width: 100%; }
.nf-gal--1 .nf-gal__i img { width: auto; max-width: 100%; height: auto; max-height: 460px; object-fit: contain; margin: 0 auto; }
/* Одна портретная (определяется в браузере при загрузке): фото сбоку, текст рядом */
.nf-mid--portrait { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.nf-mid--portrait .nf-body { grid-column: 2; grid-row: 1; }
.nf-mid--portrait .nf-gal { grid-column: 1; grid-row: 1; margin: 10px 0 0 18px; }
.nf-mid--portrait .nf-portrait { width: 200px; max-width: 200px; }
.nf-mid--portrait .nf-gal--1 .nf-gal__i img { max-height: 320px; }
.nf-gal__i { position: relative; border: 0; padding: 0; min-height: 0; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.nf-gal__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-gal--2 .nf-gal__i, .nf-gal--3 .nf-gal__i:first-child { grid-row: 1 / 3; }
.nf-gal__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,23,42,.45); color: var(--on-color); font-size: 20px; font-weight: 700; }
.news-video-card { display: flex; gap: 12px; align-items: center; max-width: 420px; margin: 10px 0; padding: 10px 14px; border: 0.5px solid var(--border-input); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.news-video-card:hover { border-color: var(--accent); background: var(--accent-light); }
.news-video-card__play { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--on-color); font-size: 14px; }
.nf-video { margin: 12px 18px 0; }
.nf-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px 12px; border-top: 0.5px solid var(--border); }
.nf-reacts { display: contents; }   /* реакции и «💬» — прямо в строке подвала: «💬» справа, правка — рядом с ним */
.nf-react { display: inline-flex; gap: 5px; align-items: center; border: 0.5px solid var(--border); background: var(--surface); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.nf-react:hover { border-color: var(--accent); }
.nf-react.mine { border-color: var(--accent); background: var(--dk-violet-bg, #EEEDFE); font-weight: 600; }
.nf-cm { order: 3; margin-left: auto; border: 0; background: none; padding: 3px 4px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.nf-cm:hover { color: var(--accent-strong); }
.nf-card .news-card-actions { order: 2; display: flex; gap: 4px; margin-left: auto; opacity: 0; transition: opacity .15s; }
.nf-foot:has(.news-card-actions) .nf-cm { margin-left: 0; }
.nf-card:focus-within .news-card-actions { opacity: 1; }
@media (hover: none) { .nf-card .news-card-actions { opacity: 1; } }

/* «Списком»: компактные строки */
.nf-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 10px 14px; border: 0.5px solid var(--border); border-radius: 12px; background: var(--card); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.nf-row:hover { border-color: var(--border-input); }
.nf-thumb { width: 64px; height: 48px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; font-size: 22px; }
.nf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nf-row__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nf-row__meta { display: flex; gap: 6px; align-items: center; min-width: 0; }
.nf-row__title { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-row__sub { display: block; font-size: 12.5px; color: var(--muted-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--muted-light); white-space: nowrap; }
.nf-row__author { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* Правая колонка */
.nf-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nf-panel { background: var(--card); border: 0.5px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.nf-panel__body { display: flex; flex-direction: column; gap: 6px; }
.nf-sum { display: none; }
.nf-panel__t { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-light); }
.nf-pi, .nf-rl { display: flex; width: 100%; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.nf-pi { gap: 10px; align-items: center; padding: 4px; border-radius: 10px; }
.nf-pi:hover { background: var(--hover); }
.nf-pi__txt { min-width: 0; display: flex; flex-direction: column; }
.nf-pi__txt b { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-bn { display: flex; gap: 10px; align-items: baseline; padding: 4px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; width: 100%; border-radius: 10px; }
.nf-bn--btn { cursor: pointer; }
.nf-bn--btn:hover { background: var(--hover); }
.nf-bn__when { flex: 0 0 92px; font-size: 12px; color: var(--muted); }
.nf-bn__when--today { color: var(--accent); font-weight: 600; }
.nf-bn__who { min-width: 0; display: flex; flex-direction: column; }
.nf-bn__who b { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.nf-bn__who span { font-size: 12px; color: var(--muted-light); }
.nf-bn__foot { font-size: 11px; color: var(--muted-light); padding: 2px 4px 0; }
.nf-pi__txt span, .nf-rl span { font-size: 12px; color: var(--muted-light); }
.nf-rl { flex-direction: column; align-items: flex-start; padding: 8px 0; border-top: 0.5px solid var(--border); }
.nf-rl:first-of-type { border-top: 0; }
.nf-rl b { font-size: 13px; font-weight: 600; }
.nf-rl:hover b { color: var(--accent-strong); }

/* Окно чтения */
.modal.nf-read { width: 720px; max-width: 95vw; max-height: 86vh; padding: 0; }
.nf-read__in { padding: 20px 24px 24px; }
.nf-rcover { position: relative; height: 170px; margin: -20px -24px 16px; overflow: hidden; }
.nf-rcover img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.nf-rcover--portrait { float: left; width: 180px; height: auto; margin: 0 18px 12px 0; border-radius: 12px; }   /* портрет в окне чтения — целиком по высоте */
.nf-rcover--portrait img { height: auto; object-fit: contain; }
.nf-rcover--portrait ~ .nf-rtoc { clear: both; }
.nf-vthumb { width: 104px; height: 76px; object-fit: cover; border-radius: 9px; border: 1px solid var(--border); cursor: zoom-in; }
.nf-vthumb--one { width: auto; height: auto; max-width: 100%; max-height: 460px; object-fit: contain; background: var(--surface); }   /* одна картинка — целиком */
.nf-rbody--side { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: start; }
.nf-rbody--side .nf-vimgs { grid-column: 1; grid-row: 1; margin-top: 0 !important; }
.nf-rbody--side .nf-prose { grid-column: 2; grid-row: 1; }
.nf-rbody--side .nf-vthumb--one { width: 180px; max-height: 360px; }
.nf-rcover__in { position: absolute; inset: 0; padding: 18px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.nf-rcover__k, .nf-rcover__sub { font-size: 12px; font-weight: 600; opacity: .85; }
.nf-rcover__big { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.nf-rcover--report { background: linear-gradient(135deg, var(--dk-green-bg, #EAF3DE), var(--dk-green-bg2, color-mix(in srgb, var(--dk-green-bg, #EAF3DE) 72%, var(--dk-green-text, #3B6D11)))); color: var(--dk-green-text, #3B6D11); }
.nf-rcover--announcement { background: linear-gradient(135deg, var(--dk-amber-bg, #FAEEDA), var(--dk-amber-bg2, color-mix(in srgb, var(--dk-amber-bg, #FAEEDA) 72%, var(--dk-amber-text, #854F0B)))); color: var(--dk-amber-text, #854F0B); }
.nf-rcover--video { background: color-mix(in srgb, var(--accent) 35%, black); color: var(--on-color); } /* тёмная в обеих темах, как обложка видео на Главной */
.nf-bars { position: absolute; right: 24px; bottom: 18px; display: flex; gap: 5px; align-items: flex-end; }
.nf-bars i { display: block; width: 12px; border-radius: 3px 3px 0 0; background: currentColor; opacity: .4; }
.nf-evdate { display: inline-block; margin: 2px 0 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--dk-violet-bg, #EEEDFE); color: var(--dk-violet-text, #534AB7); }
.nf-read__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.nf-read__x { margin-left: auto; }
.modal .nf-read__title { margin: 0 0 12px; font-size: 22px; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.nf-author { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.nf-rtoc { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 -24px 12px; padding: 8px 24px; background: var(--card); border-bottom: 0.5px solid var(--border); }
.nf-rtoc button { max-width: 100%; border: 0; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; font-weight: 600; background: var(--dk-green-bg, #EAF3DE); color: var(--dk-green-text, #3B6D11); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-prose { font-size: 15px; line-height: 1.6; color: var(--text-strong); overflow-wrap: anywhere; }
.nf-prose p { margin: 0 0 10px; }
.nf-prose ul, .nf-prose ol { margin: 4px 0 12px; padding-left: 22px; }
.nf-prose li { margin: 3px 0; }
.nf-prose a { color: var(--accent-strong); }
.nf-prose a.news-video-card { color: var(--text); text-decoration: none; }
.nf-prose img { max-width: 100%; }
.nf-prose blockquote { margin: 14px 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--accent-light); border-radius: 0 10px 10px 0; font-size: 17px; line-height: 1.5; color: var(--text-strong); }
.nf-prose blockquote p { margin: 0 0 4px; }
.nf-prose blockquote p:last-child { margin-bottom: 0; }
.nf-prose blockquote p.nf-quote-sign, .nf-quote-sign { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.nf-prose pre { overflow-x: auto; }
.news-intro { margin-bottom: 12px; }
.news-sec { border: 0.5px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; scroll-margin-top: 56px; }
.news-sec > summary { list-style: none; display: flex; gap: 10px; align-items: center; padding: 11px 14px; background: var(--surface); font-weight: 600; color: var(--text); cursor: pointer; }
.news-sec > summary::-webkit-details-marker { display: none; }
.news-sec > summary::after { content: "▾"; color: var(--muted-light); transition: transform .15s; }
.news-sec:not([open]) > summary::after { transform: rotate(-90deg); }
.news-sec__title { min-width: 0; flex: 1; }
.news-sec__count { font-size: 12px; font-weight: 500; color: var(--muted-light); white-space: nowrap; }
.news-sec__body { padding: 10px 16px 4px; }

@media (max-width: 1050px) {
  .nf-wrap { grid-template-columns: minmax(0, 1fr); }
  .nf-side { order: -1; position: static; }
  /* новые панели свёрнуты строкой-кнопкой: «🎂 2 дня рождения ›» */
  .nf-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
  .nf-sum__arr { color: var(--muted-light); transition: transform .15s; }
  .nf-panel--fold.open .nf-sum__arr { transform: rotate(90deg); }
  .nf-panel--fold > .nf-panel__t { display: none; }
  .nf-panel--fold:not(.open) .nf-panel__body { display: none; }
}
@media (max-width: 600px) {
  .nf-search { min-width: 0; flex-basis: 100%; }
  .nf-head { padding: 12px 14px 0; }
  .nf-body { padding: 8px 14px 0; }
  .nf-gal { margin: 12px 14px 0; }
  .nf-mid--portrait { display: flex; flex-direction: column; }   /* на телефоне фото над текстом */
  .nf-mid--portrait .nf-gal { order: -1; margin: 12px 14px 0; }
  .nf-mid--portrait .nf-portrait { width: fit-content; max-width: calc(100% - 28px); }
  .nf-rcover--portrait { width: 140px; margin-right: 14px; }
  .nf-rbody--side { grid-template-columns: minmax(0, 1fr); }
  .nf-rbody--side .nf-vimgs, .nf-rbody--side .nf-prose { grid-column: 1; }
  .nf-rbody--side .nf-prose { grid-row: 2; }
  .nf-rbody--side .nf-vthumb--one { width: auto; max-width: 160px; }
  .nf-video { margin: 12px 14px 0; }
  .nf-row { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .nf-thumb { width: 48px; height: 40px; font-size: 18px; }
  .nf-row__right { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .nf-read__in { padding: 16px; }
  .nf-rcover { height: 140px; margin: -16px -16px 14px; }
  .nf-rtoc { margin: 0 -16px 12px; padding: 8px 16px; }
  .modal .nf-read__title { font-size: 19px; }
  .nf-rcover__big { font-size: 24px; }
}

/* Окно создания и правки (ТЗ п. 3.5): слева поля, справа «Так увидят в ленте» и «Так — на Главной».
   Колонки прокручиваются каждая сама: пока пишешь текст, карточка превью остаётся на виду. ≤ 900 px — одна колонка. */
.modal.nf-ed { width: 1100px; max-width: 95vw; display: flex; flex-direction: column; overflow: hidden; }
.nf-ed__grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; }
.nf-ed__form { min-width: 0; min-height: 0; overflow-y: auto; margin-left: -4px; padding: 0 10px 4px 4px; }   /* отступ — под рамку фокуса полей */
.nf-ed__prev { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--content-bg); }
.modal.nf-ed .modal-footer { position: static; }
.nf-ed__prev > * { flex: none; }   /* колонка ограничена по высоте — карточки не сжимать (у .dash-news__small flex: 1), а прокручивать */
.nf-ed__h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-light); }
.nf-ed__h--gap { margin-top: 6px; }
.nf-ed__note { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.nf-ed__seg { max-width: 100%; flex-wrap: wrap; }
.nf-ed__tpl { display: inline-block; margin-bottom: 8px; margin-right: 6px; }
.nf-ed__hints { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--muted); }
/* .modal h3 (0,1,1) иначе перебил бы заголовок карточки — превью должно выглядеть как лента */
.modal .nf-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); }
.nf-card--preview { padding-bottom: 16px; }   /* подвала с реакциями в превью нет */
.nf-ed__home { cursor: default; }
.nf-ed__home:hover { box-shadow: none; }
.nf-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nf-rule { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border: 0.5px solid transparent; border-radius: 9px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.nf-rule b { color: var(--text); font-weight: 600; }
.nf-rule.on { background: var(--accent-light); border-color: var(--accent); }
.nf-rule.skip { opacity: .7; }
.nf-rule__n { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--card); color: var(--muted); }
.nf-rule.on .nf-rule__n { background: var(--accent); color: var(--on-color); }
.nf-rule__why { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--accent-strong); }
@media (max-width: 900px) {
  .modal.nf-ed { display: block; overflow-y: auto; }
  .nf-ed__grid { grid-template-columns: minmax(0, 1fr); }
  .nf-ed__form, .nf-ed__prev { overflow: visible; }
  .modal.nf-ed .modal-footer { position: sticky; }
}
@media (max-width: 480px) {
  .nf-ed__seg button { padding: 7px 10px; }
  .nf-ed__prev { padding: 10px; margin: 0 -6px; }
}

/* =========================================================================
   Сезонное оформление Главной (08.11, ТЗ «Сезонное оформление»; рисунки — season-art.js,
   поведение — season-decor.js). Значок у логотипа — тег <i>: правило свёрнутого меню
   `.sidebar-logo > span:last-of-type` прячет название, значок-span выпустил бы его обратно.
   ========================================================================= */
.season-ic { width: 15px; height: 15px; display: inline-block; flex: none; margin-left: -2px; font-style: normal; line-height: 0; }
.season-ic svg { width: 15px; height: 15px; display: block; overflow: visible; }
/* в полосе иконок значка нет (на телефоне nav-collapsed не ставится — там меню-шторка) */
@media (min-width: 769px) {
  .app.nav-collapsed .sidebar-logo .season-ic { display: none; }
}
/* Картинка в верхней панели Главной: флекс-элемент между «?» и датой, забирает свободное место
   (автоотступы .topbar-date и кнопок обнуляются сами — класс .topbar-date не трогаем). Высота панели та же. */
.sd { flex: 1 1 0; min-width: 0; align-self: stretch; margin: -6px 0; position: relative; pointer-events: none; }
.sd[hidden], .sd-garland[hidden] { display: none !important; }   /* глобального [hidden] в main.css нет — точечно */
.sd-box { position: absolute; top: 0; bottom: 0; right: 0; width: min(100%, 420px); overflow: hidden;
  /* слева растворяется. Маска берёт только прозрачность, цвет black к теме не относится */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 30%, black 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 30%, black 97%, transparent 100%); }
.sd-box > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sd-box canvas { z-index: 2; }
.sd-box svg { z-index: 1; }
.sd-wash { z-index: 0; }
.sd-wash--spring { background: radial-gradient(38% 95% at 74% 50%, rgba(244,182,198,.16), transparent 72%); }
.sd-wash--summer { background: radial-gradient(24% 90% at 88% 36%, rgba(250,204,92,.16), transparent 72%); }
.sd-wash--autumn { background: radial-gradient(38% 95% at 72% 50%, rgba(226,152,98,.12), transparent 72%); }
.sd-wash--winter { background: radial-gradient(40% 95% at 74% 50%, rgba(150,186,226,.14), transparent 72%); }
.sd-wash--ng { background: radial-gradient(34% 95% at 76% 50%, rgba(226,186,92,.10), transparent 72%); }
:root[data-theme="dark"] .sd-wash--spring { background: radial-gradient(38% 95% at 74% 50%, rgba(244,182,198,.07), transparent 72%); }
:root[data-theme="dark"] .sd-wash--summer { background: radial-gradient(24% 90% at 88% 36%, rgba(250,204,92,.06), transparent 72%); }
:root[data-theme="dark"] .sd-wash--autumn { background: radial-gradient(38% 95% at 72% 50%, rgba(226,152,98,.06), transparent 72%); }
:root[data-theme="dark"] .sd-wash--winter { background: radial-gradient(40% 95% at 74% 50%, rgba(150,186,226,.07), transparent 72%); }
:root[data-theme="dark"] .sd-wash--ng { background: radial-gradient(34% 95% at 76% 50%, rgba(226,186,92,.06), transparent 72%); }
/* огоньки ёлки и искорки Нового года «дышат» */
.sd-twk { animation: sd-twk 3.4s ease-in-out infinite; }
.sd-twk2 { animation: sd-twk 4.6s ease-in-out infinite; animation-delay: -1.7s; }
.sd-twk3 { animation: sd-twk 5.2s ease-in-out infinite; animation-delay: -3.1s; }
@keyframes sd-twk { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .sd-twk, .sd-twk2, .sd-twk3, .sd-gb { animation: none !important; }
}
/* Гирлянда Нового года — нить под верхней панелью Главной, огоньки медленно «дышат» (не мигают) */
.sd-garland { height: 16px; margin-bottom: -16px; position: relative; z-index: 5; pointer-events: none; overflow: hidden; flex-shrink: 0; }
.sd-garland svg { display: block; width: 100%; height: 16px; }
.sd-gb { animation: sd-breathe 6s ease-in-out infinite; }
@keyframes sd-breathe { 0%, 100% { opacity: .95; } 50% { opacity: .45; } }
:root[data-theme="dark"] .sd-gb { filter: url(#sdGGlow); }

/* ── Helpdesk: страница, форма подачи, общие классы (колонки, плашки статусов, шкала, кнопки тем) ── */
.hd-scroll { flex: 1; min-height: 0; overflow: auto; padding: 20px 26px; }
.hd-report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .hd-report { grid-template-columns: minmax(0, 1fr); } .hd-scroll { padding: 14px 16px; } }
.hd-card { background: var(--card); border: 0.5px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 20px 22px; min-width: 0; }
.hd-h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.hd-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0 0 6px; }
.hd-opt { font-weight: 400; color: var(--muted); margin-left: 6px; }
.hd-field { margin-bottom: 16px; }
.hd-author { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 8px; padding: 9px 12px; margin-bottom: 16px; }
.hd-author__main { flex: 1; min-width: 0; }
.hd-author__name { font-size: 13.5px; font-weight: 600; }
.hd-author__meta { font-size: 12.5px; color: var(--text-secondary); }
.hd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hd-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 16px; border: 0.5px solid var(--border); background: var(--card); color: var(--text); font-size: 13.5px; font-family: inherit; cursor: pointer; }
.hd-chip:hover { border-color: var(--tc, var(--accent)); }
.hd-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tc, var(--accent)); }
.hd-chip.on { background: var(--tc, var(--accent)); border-color: var(--tc, var(--accent)); color: var(--hd-chip-on-text); }
.hd-chip.on .hd-chip__dot { background: var(--hd-chip-on-text); }
.hd-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.hd-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hd-file { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 8px; background: var(--surface); font-size: 12.5px; }
.hd-file button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 6px; font-size: 13px; }
.hd-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.hd-foot__sp { flex: 1; }
.hd-error { color: var(--hd-r-t); font-size: 13px; margin: 0 0 10px; }
.hd-empty { color: var(--text-secondary); font-size: 13px; text-align: center; padding: 28px 12px; }
.hd-done { text-align: center; padding: 30px 10px; }
.hd-done__no { font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.hd-done__note { color: var(--text-secondary); margin: 0 0 16px; font-size: 13.5px; }
.hd-pill { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.hd-pill--v { background: var(--hd-v-bg); color: var(--hd-v-t); }
.hd-pill--pg { background: var(--hd-pg-bg); color: var(--hd-pg-t); }
.hd-pill--w { background: var(--hd-w-bg); color: var(--hd-w-t); }
.hd-pill--ok { background: var(--hd-ok-bg); color: var(--hd-ok-t); }
.hd-pill--r { background: var(--hd-r-bg); color: var(--hd-r-t); }
.hd-pill--n { background: var(--hd-n-bg); color: var(--hd-n-t); }
.hd-track { display: flex; gap: 3px; margin-top: 8px; }
.hd-track__seg { flex: 1; height: 5px; border-radius: 3px; background: var(--border); }
.hd-track__seg.on.v { background: var(--hd-col-new-line); }
.hd-track__seg.on.pg { background: var(--hd-col-work-line); }
.hd-track__seg.on.w { background: var(--hd-col-check-line); }
.hd-track__seg.on.ok { background: var(--hd-col-done-line); }
.hd-col { background: var(--hd-col-new); border-top: 3px solid var(--hd-col-new-line); border-radius: 10px; }
.hd-col__head { background: var(--hd-col-new-bg); color: var(--hd-col-new-t); font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 7px 7px 0 0; }
.hd-col--new { background: var(--hd-col-new); border-top-color: var(--hd-col-new-line); }
.hd-col--work { background: var(--hd-col-work); border-top-color: var(--hd-col-work-line); }
.hd-col--work .hd-col__head { background: var(--hd-col-work-bg); color: var(--hd-col-work-t); }
.hd-col--check { background: var(--hd-col-check); border-top-color: var(--hd-col-check-line); }
.hd-col--check .hd-col__head { background: var(--hd-col-check-bg); color: var(--hd-col-check-t); }
.hd-col--done { background: var(--hd-col-done); border-top-color: var(--hd-col-done-line); }
.hd-col--done .hd-col__head { background: var(--hd-col-done-bg); color: var(--hd-col-done-t); }

/* ── Helpdesk, Настройки: карточки тем (11a) ── */
.hd-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.hd-tcard { padding: 16px 18px; }
.hd-tcard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hd-tcard__name { font-size: 15px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.hd-tcard__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-secondary); padding: 3px 0; }
.hd-tcard__row b { color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.hd-tcard__foot { margin-top: 12px; }
.hd-tnew { border: 1px dashed var(--border); border-radius: 12px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; min-height: 120px; cursor: pointer; }
.hd-tnew:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

/* ── Helpdesk, настройка темы (11b) ── */
.hd-set-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.hd-set-head__main { min-width: 0; }
.hd-set-head__title { font-size: 20px; font-weight: 600; margin: 4px 0 0; overflow-wrap: anywhere; }
.hd-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.hd-set__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 900px) { .hd-set { grid-template-columns: minmax(0, 1fr); } }
.hd-link { border: 0; background: transparent; padding: 4px 0; color: var(--accent); font: inherit; font-size: 13.5px; cursor: pointer; }
.hd-link:hover { text-decoration: underline; }
.hd-bh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hd-bh .hd-h2 { margin: 0; }
.hd-bnum { width: 22px; height: 22px; border-radius: 50%; background: var(--sidebar-active); color: var(--accent-strong); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hd-bsub { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; }
.hd-mrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.hd-mrow__main { flex: 1; min-width: 0; }
.hd-mrow__name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.hd-mrow__pos { font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.hd-mrow__role { width: 130px; flex-shrink: 0; }
.hd-icb { border: 0.5px solid var(--border); background: var(--card); color: var(--text-secondary); border-radius: 8px; width: 30px; height: 30px; font: inherit; cursor: pointer; flex-shrink: 0; }
.hd-icb:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hd-icb:disabled { opacity: .4; cursor: not-allowed; }
.hd-crow, .hd-frow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hd-crow .form-input, .hd-frow .form-input { flex: 1; min-width: 0; }
.hd-crow__btns { display: inline-flex; gap: 4px; }
.hd-cdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--hd-col-work-line); }
.hd-cdot.new { background: var(--hd-col-new-line); }
.hd-cdot.work { background: var(--hd-col-work-line); }
.hd-cdot.check { background: var(--hd-col-check-line); }
.hd-cdot.done { background: var(--hd-col-done-line); }
.hd-lock { font-size: 12px; color: var(--muted); min-width: 64px; text-align: right; }
.hd-ftype { width: 150px; flex-shrink: 0; }
.hd-req { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.hd-frow { flex-wrap: wrap; }
.hd-pv { background: var(--surface); border-radius: 10px; padding: 14px; }
@media (max-width: 600px) { .hd-ftype { width: 100%; } .hd-mrow__role { width: 112px; } }
/* ── Helpdesk 9a: доска (вкладки тем, панель, колонки, карточки) ── */
.hd-b__team { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hd-b__team + .topbar-date { margin-left: 0; }
.hd-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--sidebar-active); color: var(--accent-strong); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hd-ava--sm { width: 22px; height: 22px; font-size: 10px; }
.hd-b { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 26px 16px; }
.hd-b__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hd-tabs { display: flex; gap: 2px; border-bottom: 0.5px solid var(--border); margin-bottom: 12px; overflow-x: auto; flex-shrink: 0; }
.hd-tab { border: 0; background: transparent; padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.hd-tab:hover { color: var(--accent-strong); }
.hd-tab.on { color: var(--tc, var(--accent-strong)); border-bottom-color: var(--tc, var(--accent-strong)); font-weight: 600; }
.hd-tab__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tc, var(--accent)); }
.hd-tab__c { background: var(--accent-strong); color: var(--hd-chip-on-text); font-size: 10.5px; font-weight: 600; border-radius: 9px; padding: 0 6px; }
.hd-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; flex-wrap: wrap; flex-shrink: 0; }
.hd-toolchip { padding: 5px 13px; border-radius: 16px; border: 0.5px solid var(--border-strong); background: var(--card); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.hd-toolchip:hover { border-color: var(--accent); }
.hd-toolchip.on { background: var(--sidebar-active); border-color: var(--accent); color: var(--accent-strong); font-weight: 500; }
.hd-board { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; border-radius: 12px; border: 0.5px solid var(--border); background: var(--card); }
.hd-board__grid { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(220px, 1fr)); grid-template-rows: minmax(0, 1fr); min-width: calc(var(--n, 1) * 220px); height: 100%; }
.hd-bcol { display: flex; flex-direction: column; min-height: 0; border-radius: 0; border-right: 0.5px solid var(--border); }
.hd-bcol:last-child { border-right: 0; }
.hd-bcol .hd-col__head { border-radius: 0; flex-shrink: 0; }
.hd-bcol__c { opacity: .75; font-weight: 500; }
.hd-bcol__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.hd-kc { background: var(--card); border: 0.5px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; box-shadow: var(--shadow-sm); text-align: left; }
.hd-kc:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.hd-kc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hd-kc--new { border-color: var(--accent); }
.hd-kc--p1 { border-left: 4px solid var(--danger); }
.hd-kc--p2 { border-left: 4px solid var(--hd-col-check-line); }
.hd-kc--p3 { border-left: 4px solid var(--hd-col-work-line); }
.hd-kc__newp { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--hd-chip-on-text); background: var(--accent-strong); border-radius: 5px; padding: 1px 6px; margin-bottom: 5px; }
.hd-kc__t { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.hd-kc__aut { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
.hd-kc__m { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 22px; font-size: 11.5px; color: var(--muted-light); flex-wrap: wrap; }
.hd-kc__sp { flex: 1; }
.hd-kc__pr { font-weight: 700; font-size: 10.5px; padding: 1px 6px; border-radius: 5px; }
.hd-kc__pr--1 { background: var(--hd-r-bg); color: var(--hd-r-t); }
.hd-kc__pr--2 { background: var(--hd-w-bg); color: var(--hd-w-t); }
.hd-kc__pr--3 { background: var(--hd-pg-bg); color: var(--hd-pg-t); }
.hd-kc__due--late { color: var(--hd-r-t); font-weight: 600; }
.hd-kc__reply { color: var(--accent-strong); font-weight: 600; }
.hd-take { border: 0.5px solid var(--border-strong); background: var(--card); border-radius: 6px; font: inherit; font-size: 11.5px; padding: 2px 8px; color: var(--text-secondary); cursor: pointer; }
.hd-take:hover { border-color: var(--accent); color: var(--accent-strong); }
.hd-take:disabled { opacity: .5; cursor: default; }

/* ── Helpdesk 9b: перетаскивание, окна «Новая карточка» и «Архив» ── */
.hd-bcol--over { outline: 2px dashed var(--accent); outline-offset: -3px; }
.hd-kc[draggable="true"] { cursor: grab; }
.hd-ov { position: fixed; inset: 0; z-index: 340; background: rgba(15,23,42,.45); display: flex; justify-content: flex-end; }
.hd-dr { width: 480px; max-width: 100%; height: 100%; background: var(--card); box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.hd-dr__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 0.5px solid var(--border); }
.hd-dr__t { font-size: 16px; font-weight: 600; }
.hd-dr__s { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.hd-dr__b { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.hd-dr__f { padding: 12px 20px; border-top: 0.5px solid var(--border); display: flex; justify-content: flex-end; }
.hd-dr__who { font-size: 12.5px; color: var(--text-secondary); background: var(--sidebar-active); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.hd-dr .in { width: 100%; box-sizing: border-box; }
.hd-arch { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
/* ── Helpdesk, задача 8b: «Мои обращения» и окно обращения справа ── */
.hd-group { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.hd-mine-row { border: 0.5px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; background: var(--card); }
.hd-mine-row:hover, .hd-mine-row:focus-visible { border-color: var(--accent); outline: none; }
.hd-mine-row__top { display: flex; align-items: flex-start; gap: 10px; }
.hd-mine-row__title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.hd-mine-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; margin-top: 7px; font-size: 12px; color: var(--text-secondary); }
.hd-mine-row__act { display: flex; gap: 6px; margin-top: 10px; }
.hd-tdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hd-hint { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; overflow-wrap: anywhere; }
.hd-hint--warn { color: var(--hd-w-t); background: var(--hd-w-bg); border-radius: 8px; padding: 7px 10px; margin-top: 10px; }
.hd-reply { margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: var(--surface); font-size: 12.5px; overflow-wrap: anywhere; }
.hd-mark { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--hd-pg-bg); color: var(--hd-pg-t); }
.hd-scrim { position: fixed; inset: 0; z-index: 299; background: rgba(15, 23, 42, .25); }
.hd-dr { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; z-index: 300; display: flex; flex-direction: column; background: var(--card); box-shadow: -8px 0 24px rgba(15, 23, 42, .12); }
.hd-dr__body { display: flex; flex-direction: column; gap: 14px; }
.hd-dr__body > * { flex-shrink: 0; }
.hd-statusbox { background: var(--surface); border-radius: 10px; padding: 12px 14px; }
.hd-statusbox__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.hd-track--lbl { margin-top: 10px; }
.hd-step { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.hd-step.done { color: var(--text); }
.hd-ln { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px; margin-top: 7px; font-size: 12.5px; }
.hd-ln > span { color: var(--muted); }
.hd-ln > div { overflow-wrap: anywhere; }
.hd-ask { background: var(--hd-w-bg); border-radius: 10px; padding: 12px 14px; }
.hd-ask textarea { min-height: 72px; }
.hd-ask__btns { display: flex; gap: 6px; margin-top: 8px; }
.hd-ans__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
.hd-ans__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; margin-top: 6px; font-size: 12.5px; overflow-wrap: anywhere; }
.hd-ans__lbl { color: var(--muted); }
.hd-attach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hd-file--link { padding: 3px 10px; color: var(--accent); text-decoration: none; }
.hd-file--link:hover { text-decoration: underline; }
.hd-msg { background: var(--surface); border-radius: 10px; padding: 9px 12px; }
.hd-msg--mine { background: var(--accent-light); }
.hd-msg__who { font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; }
.hd-msg__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
.hd-replybox textarea { min-height: 72px; margin-bottom: 8px; }
@media (max-width: 600px) { .hd-dr { width: 100vw; } }

/* ── Helpdesk, задача 10a: окно карточки для команды (980 px, две колонки) ── */
.hd-dr--wide { width: 980px; }
.hd-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 22px; align-items: start; }
.hd-cgrid__side { order: 2; min-width: 0; }
.hd-cgrid__main { order: 1; min-width: 0; }
.hd-sub { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; overflow-wrap: anywhere; }
.hd-abox { background: var(--surface); border-radius: 10px; padding: 11px 13px; margin-bottom: 16px; }
.hd-abox__head { display: flex; align-items: center; gap: 10px; }
.hd-abox__name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.hd-abox__pos { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.hd-abox__grid { margin-top: 9px; font-size: 12.5px; }
.hd-abox__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 6px; margin-top: 5px; }
.hd-abox__row > span { color: var(--muted); }
.hd-abox__row > b { font-weight: 500; overflow-wrap: anywhere; }
.hd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.hd-row { display: flex; gap: 8px; }
.hd-row .form-select { flex: 1; min-width: 0; }
.hd-resbox { display: flex; align-items: flex-start; gap: 9px; background: var(--surface); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 13.5px; }
.hd-resbox__text { overflow-wrap: anywhere; white-space: pre-wrap; }
.hd-cgrid__main .hd-ans { margin-bottom: 14px; }
.hd-tabs { margin-bottom: 12px; }
.hd-hrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; overflow-wrap: anywhere; }
.hd-hrow:last-child { border-bottom: 0; }
.hd-hrow__t { color: var(--muted); font-size: 12px; }
@media (max-width: 820px) {
  .hd-cgrid { grid-template-columns: minmax(0, 1fr); }
  .hd-cgrid__side { order: 1; }
  .hd-cgrid__main { order: 2; }
}
@media (max-width: 480px) { .hd-two { grid-template-columns: 1fr; } }

/* ── Helpdesk, задача 10b: комментарии и закрытие в окне карточки ── */
.hd-card-comments { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.hd-card-comments:empty { display: none; }
.hd-msg--team { background: var(--hd-w-bg); }
.hd-msg--team.hd-msg--mine { background: var(--hd-w-bg); }
.hd-replybox__vis { margin-bottom: 6px; }
.hd-replybox__call { width: auto; max-width: 100%; min-width: 0; }
.hd-closing-slot { margin-bottom: 14px; }
.hd-closing-slot .hd-res { margin: 4px 0 8px; }