/* Business OS — дизайн-система в стиле dds/Dub: светлый холст, волосяные рамки,
   монохром + акцент electric-blue, Inter, border-first (минимум теней).
   Две темы через :root[data-theme]: day (светлая, по умолчанию) и dark (ночная). */
html{
  /* #665 — «экран гуляет по ширине при переключении вкладок». Причина замерена: на коротких
     страницах вертикальной полосы нет, на «Задачах» и «Оргструктуре» она появляется, и рабочая
     ширина скачет на 15 px — центрированное содержимое (.content, max-width) прыгает на 7-8 px
     при каждом переходе. scrollbar-gutter резервирует место под полосу ВСЕГДА, поэтому ширина
     одинаковая на всех разделах. Браузеры без поддержки просто ведут себя как раньше. */
  /* Замер в браузере показал: одного scrollbar-gutter недостаточно — корень не является
     скролл-контейнером (overflow: visible), и место не резервируется. Поэтому основной механизм —
     overflow-y: scroll: полоса присутствует всегда, ширина рабочей области одинаковая на всех
     разделах. Цена честная: на коротких страницах виден пустой ползунок. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

:root{
  color-scheme: light;  /* нативные контролы (date/select/скроллбары) — в тон теме */
  --canvas:#ffffff; --page:#eef1f6; --panel:#ffffff; --panel-2:#f7f8fb;
  --sidebar-bg:#f7f8fb;
  --line:#edeff4; --line-2:#f4f5f9; --line-strong:#dce0e8;
  --ink:#141e41; --ink-2:#3a4566; --ink-3:#5d6787; --silver:#848daa;
  --blue:#5b42e4; --sapphire:#4433c4; --blue-wash:#f3f2fe;
  /* #2699 — оттенки уровней оргсхемы: доля цвета департамента при смешении с белым (уровень 0 = 100%).
     Убывают монотонно; подобраны по расчёту ΔE (CIELAB) на всех десяти цветах ORG_COLORS (services.py):
     у ярких цветов соседние уровни различаются на 2,5–5 ΔE, у двух серых (#EAECF5, #E4E7EC) глубокие
     уровни различимы слабо (≈1 ΔE) — палитра пастельная, а палитру эта работа не меняет. */
  --oc-mix-1:66%; --oc-mix-2:44%; --oc-mix-3:30%; --oc-mix-4:20%;
  /* #2762 — числа оргсхемы живут здесь, а не в правилах: размер названия блока, ширина колонки управления
     (212) и департамента (228), шаг вложенности (отступ слева + линия 1 px), потолок мини-карты. */
  --oc-name-fs:var(--fs-text); --oc-w-row:212px; --oc-w-dept:228px; --oc-nest-step:calc(var(--sp-4) + 1px);
  --oc-map-w:280px; --oc-map-h:160px;
  /* #772 — текст на основной кнопке отдельной переменной: в тёмной теме её фон ЯРКИЙ (--blue
     светлеет, чтобы ссылки читались на тёмном), и белый текст давал бы меньше нормы. Замер
     после редизайна 15.09: белым по --blue 6.28, по наведению (--sapphire) 8.35. */
  --btn-primary-fg:#ffffff;
  /* №1136 (находка 10) — текст на полосах Ганта: днём белый; ночью полосы светлые (--amber, --green,
     --t-violet-fg…) и белый давал 1,7–3,6 — тёмный текст, кроме серой полосы «Новые» (она ночью тёмная).
     №1144 — днём «Новые» (--silver #848daa) с белым давала 3,30: текст тёмный --ink, 4,93. */
  --gantt-bar-fg:#ffffff; --gantt-bar-new-fg:#141e41;
  /* №1146 — ★ «главный показатель» и ⚠ «нет значения» на карточке оргсхемы; на цветной карточке — свои значения.
     №1151 — ★ на обычной карточке днём: #eab308 на белом давал 1,92; тёмно-золотая #a16207 — 4,9 (при наведении
     на строку 4,5); ночью своё значение в :root[data-theme="dark"]. */
  --oc-star-fg:#a16207; --oc-warn-fg:#dc2626;
  --green:#17724a; --amber:#8a5a10; --red:#e11d48;
  /* П3 (#2999) — цвет ряда на графике показателя; тёмная тема получается сама через --blue */
  --chart-1:var(--blue);
  /* П3б (#3000) — цвета 2–4 рядов: красный и зелёный в палитре не используются, они заняты ухудшением и
     трендом; контраст к фону канвы ≥ 4,9:1 в обеих темах */
  --chart-2:#0e7490; --chart-3:#a16207; --chart-4:#475569;
  /* семантические тинты (чипы/бейджи) — day в стиле Business OS */
  --t-blue-bg:#f3f2fe; --t-blue-fg:#5b42e4;
  --t-green-bg:#eaf6ee; --t-green-fg:#17724a;
  --t-amber-bg:#fdf5ea; --t-amber-fg:#8a5a10;
  --t-red-bg:#fdebee; --t-red-fg:#d11440;
  --t-slate-bg:#f1f3f8; --t-slate-fg:#455173;
  --t-violet-bg:#f3f2fe; --t-violet-fg:#5b42e4;
  --t-zinc-bg:#e8ebf2; --t-zinc-fg:#434d6b;
  /* #585 — выбор Юрия 18.08: платформенный вариант «Плотный». Редизайн 15.09 поднял радиусы
     до 14/8 — это числа отвергнутого «Спокойного»: на экран влезало меньше строк, а платформа
     живёт таблицами и списками. Возвращено. Варианты на /settings/styleguide/ переопределяют
     ЭТИ переменные и разметку не трогают. */
  --radius:10px; --radius-sm:6px; --radius-input:6px; --radius-pill:9999px;
  /* #715 — предел ширины пилюли метаданных (.disk__badge), см. ui-standard.md §13 */
  --badge-max-w:120px;
  --fs-meta:11px; --fs-label:12px; --fs-text:13px; --fs-accent:14px; --fs-card:16px; --fs-page:20px;
  --shadow:0 1px 3px rgba(20,30,65,.04), 0 8px 24px rgba(20,30,65,.06);
  --shadow-card:0 2px 8px rgba(20,30,65,.06), 0 16px 36px rgba(20,30,65,.08);
  --topbar-h:56px;
  --topbar-bg:rgba(255,255,255,.94);

  /* #933 — пастельная шкала очерёдности: 1 раньше всех (тёплое) → 10 позже всех (холодное).
     Пары «светлый фон + тёмная буква того же тона» дают контраст не ниже 4.6 (замерено). */
  --o1-bg:#fee2e2; --o1-fg:#b42318; --o2-bg:#ffe4e6; --o2-fg:#be123c;
  --o3-bg:#ffedd5; --o3-fg:#9a3412; --o4-bg:#fef3c7; --o4-fg:#92400e;
  --o5-bg:#fef9c3; --o5-fg:#854d0e; --o6-bg:#ecfccb; --o6-fg:#3f6212;
  --o7-bg:#dcfce7; --o7-fg:#166534; --o8-bg:#ccfbf1; --o8-fg:#0f766e;
  --o9-bg:#e0f2fe; --o9-fg:#0369a1; --o10-bg:#f3f2fe; --o10-fg:#5b42e4;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
  --card-pad:var(--sp-3);      /* внутренний отступ карточки (#585 — «Плотный») */
  --card-gap:var(--sp-2);      /* зазор между карточками и блоками (#585 — «Плотный») */
  --field-gap:var(--sp-2);     /* между полем и его подписью/подсказкой */
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --canvas:#0c101c; --page:#070a12; --panel:#111726; --panel-2:#161e31;
  --sidebar-bg:#0d1220;
  --line:#1c253b; --line-2:#141b2b; --line-strong:#26324d;

  /* Ночью пастель обратная: тёмный тон фона, светлая буква — иначе десять светлых квадратиков
     светились бы на тёмной доске ярче карточек. */
  --o1-bg:#3b1d1d; --o1-fg:#fca5a5; --o2-bg:#3d1c24; --o2-fg:#fda4af;
  --o3-bg:#3a2415; --o3-fg:#fdba74; --o4-bg:#382b12; --o4-fg:#fcd34d;
  --o5-bg:#333010; --o5-fg:#fde047; --o6-bg:#283212; --o6-fg:#bef264;
  --o7-bg:#14331f; --o7-fg:#86efac; --o8-bg:#0f3330; --o8-fg:#5eead4;
  --o9-bg:#10293b; --o9-fg:#7dd3fc; --o10-bg:#231a47; --o10-fg:#b4a5fc;
  /* #585 — ночная тема: подписи полей, подсказки и ячейки таблиц читаются с высоким контрастом. */
  --ink:#e9edf6; --ink-2:#a3afd0; --ink-3:#7a88aa; --silver:#525f7d;
  --blue:#8574f7; --sapphire:#9d8ff7; --blue-wash:#1f1b40;
  --btn-primary-fg:#0f141b;   /* 5.75:1 на кнопке (#772) */
  --gantt-bar-fg:#0f141b; --gantt-bar-new-fg:#ffffff;   /* №1136: контраст 5,1–10,7 и 6,4 на «Новых» */
  --oc-star-fg:#eab308;   /* №1151 — ★ на обычной карточке ночью: 9,3 к --panel (дневная #a16207 дала бы 3,6) */
  --green:#2ec97a; --amber:#e0a038; --red:#fb5d7c;
  --chart-2:#22d3ee; --chart-3:#facc15; --chart-4:#94a3b8;
  --t-blue-bg:#1f1b40; --t-blue-fg:#b4a5fc;
  --t-green-bg:#10331f; --t-green-fg:#7fd8a0;
  --t-amber-bg:#33260f; --t-amber-fg:#e8c766;
  --t-red-bg:#3a1616; --t-red-fg:#f8b4b4;
  --t-slate-bg:#1a2337; --t-slate-fg:#a4b1cd;
  --t-violet-bg:#271f4b; --t-violet-fg:#c4b5fd;
  --t-zinc-bg:#20283a; --t-zinc-fg:#9fa9be;
  --shadow:0 1px 3px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  --shadow-card:0 2px 6px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
  --topbar-bg:rgba(17,23,38,.94);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:"Inter","Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:-0.01em;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","cv04","cv11"}
.font-display{font-family:"Plus Jakarta Sans","Inter",sans-serif;letter-spacing:-0.025em}
a{color:inherit;text-decoration:none}

/* ---- Каркас ---- */
.layout{display:flex;align-items:flex-start;min-height:100vh}
/* #909 — меню компактнее: воздух убран, ползунок тонкий и цвета линии, а не серый по умолчанию
   («сам ползунок можно сделать менее серым, чтобы не бросался в глаза»). */
.sidebar{width:236px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;
  background:var(--sidebar-bg);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;padding:12px 10px}
/* #924 — «ползунки сильно выделены серым и чуть толстоваты; сделать изящными, как у левого меню».
   Одно правило на все прокручиваемые места: столбцы канбана, тело карточки и выезжающей панели,
   длинные списки. Иначе «как у меню» пришлось бы повторять в каждом месте и оно бы разъехалось.
   :where() держит специфичность нулевой, чтобы это не перебивало точечные правила экранов. */
:where(.sidebar,.kanban,.kcol__body,.orgwrap,.drawer__body,.u-scroll,.modal__list,.chat,.taskchats__list){
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
:where(.sidebar,.kanban,.kcol__body,.orgwrap,.drawer__body,.u-scroll,.modal__list,.chat,.taskchats__list)::-webkit-scrollbar{
  width:8px;height:8px}
:where(.sidebar,.kanban,.kcol__body,.orgwrap,.drawer__body,.u-scroll,.modal__list,.chat,.taskchats__list)::-webkit-scrollbar-track{
  background:transparent}
:where(.sidebar,.kanban,.kcol__body,.orgwrap,.drawer__body,.u-scroll,.modal__list,.chat,.taskchats__list)::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
:where(.sidebar,.kanban,.kcol__body,.orgwrap,.drawer__body,.u-scroll,.modal__list,.chat,.taskchats__list):hover::-webkit-scrollbar-thumb{
  background:var(--line-strong);background-clip:padding-box}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px}
.brand__mark{width:34px;height:34px;border-radius:9px;flex:none;background:var(--blue);color:#fff;
  font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
/* #802 — в левом верхнем углу стоит знак платформы, а не буква-заглушка «B». Юрий:
   «имеется в виду по умолчанию вместо буквы B около надписи Business OS». Знак тот же,
   что в иконке вкладки (img/favicon.svg), поэтому платформа узнаётся и в окне, и в углу. */
.brand__mark--sign{background:none;padding:0}
.brand__name{font-weight:600;letter-spacing:-.01em}

/* #909 — выбор компании на месте бренда. Прежний блок .company-switch (рамка, подпись «Компания»,
   выпадающий список) убран целиком: он занимал около 90 px в самом верху меню. */
.cswitch{position:relative;flex:none}
.cswitch>summary{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;
  cursor:pointer;list-style:none}
.cswitch>summary::-webkit-details-marker{display:none}
.cswitch>summary::marker{content:""}
.cswitch>summary:hover{background:var(--page)}
.cswitch>summary:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.cswitch__text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.cswitch__name{font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cswitch__hint{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cswitch__caret{margin-left:auto;color:var(--ink-3);font-size:11px;flex:none}
.cswitch[open] .cswitch__caret{transform:rotate(180deg)}
.cswitch__menu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow),0 10px 24px rgba(0,0,0,.10);padding:6px;
  display:flex;flex-direction:column;gap:1px}
.cswitch__item{display:block;width:100%;text-align:left;background:none;border:none;font:inherit;
  font-size:13px;font-weight:450;color:var(--ink-2);padding:7px 9px;border-radius:8px;cursor:pointer}
.cswitch__item:hover{background:var(--page);color:var(--ink)}
.cswitch__item.is-current{background:var(--blue-wash);color:var(--sapphire);font-weight:600}
.cswitch__item--empty{color:var(--ink-3);cursor:default}
.cswitch__new{font-size:12px;color:var(--blue);font-weight:600;padding:7px 9px;margin-top:2px;
  border-top:1px solid var(--line)}

.nav{display:flex;flex-direction:column;gap:1px}
.nav--bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:6px}
/* #909 — «пробелы поменьше и шрифт более изящный»: 9→6 px по вертикали, 14→13 px, 500→450. */
.navlink{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;
  color:var(--ink-2);font-weight:450;font-size:13px}
.navlink:hover{background:var(--page);color:var(--ink)}
.navlink--active{background:var(--blue-wash);color:var(--blue);font-weight:600;box-shadow:inset 3px 0 0 var(--blue)}
.navlink__icon{display:grid;place-items:center;width:17px;height:17px;flex:none;opacity:.85}
.navlink--active .navlink__icon{color:var(--blue);opacity:1}
/* #1155 — на наведении значок подсвечивается тем же ярким синим, что и у активного пункта;
   остальной вид (фон, насыщенность подписи) не трогаем, чтобы hover не слипался с «я тут» */
.navlink:hover .navlink__icon{color:var(--blue);opacity:1}
.navlink__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.navlink__label{flex:1}
/* Группа «Задачи» с раскрывающимися подпунктами (#13) */
.navgroup__row{position:relative;display:flex;align-items:center}
.navgroup__row>.navlink{flex:1}
/* #117 — каретка того же размера, что на оргсхеме (14px, зона клика 22×22): 10px было не попасть */
.navgroup__caret{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--ink-3);cursor:pointer;font-size:14px;line-height:1;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:5px;transition:transform .15s}
.navgroup__caret:hover{color:var(--ink)}
.navgroup.is-collapsed .navgroup__caret{transform:translateY(-50%) rotate(-90deg)}
.navgroup.is-collapsed .navsub{display:none}
/* Решение человека («раскрыл стрелкой») старше серверного дефолта: атрибут ставится до
   первой отрисовки в theme_boot.js, поэтому подпункты не мигают. */
/* 20.09.2026 — заголовок группы «Персонал»: выглядит как пункт, но не ведёт никуда. Курсор и
   отсутствие подсветки говорят это раньше, чем человек нажмёт. */
.navlink--head{cursor:default;color:var(--ink-3)}
.navlink--head:hover{background:none}
/* 23.09.2026 — ЗДЕСЬ БЫЛИ ДВА ПРАВИЛА, ИЗ-ЗА КОТОРЫХ ГРУППЫ ВЕЛИ СЕБЯ КАК СВЯЗАННЫЕ:
       :root[data-navtasks="open"] .navgroup.is-collapsed .navsub{display:block}
   Селектор не привязан к своей группе — раскрытие «Задач» показывало подпункты ЛЮБОЙ свёрнутой
   группы. Юрий это и увидел: «треугольнички связаны друг с другом и не работают по отдельности».

   Состояние теперь живёт на самом блоке группы (класс is-collapsed) — там же, где показывают
   стили, — и связать две группы больше нечем. Признак на <html> не нужен, правил здесь не нужно
   вовсе: работает правило .navgroup.is-collapsed .navsub{display:none} выше. */
/* Здесь была та же болезнь, что строкой выше, — но у СТРЕЛКИ: её поворот зависел от признака
   ЧУЖОЙ группы, и стрелка «Персонала» разворачивалась от раскрытия «Задач». Теперь поворотом
   управляет только класс своей группы (.navgroup.is-collapsed .navgroup__caret выше). */
.navsub .navlink{padding-left:32px;font-size:12.5px}
.navsub .navlink__icon{width:15px;height:15px}
.navsub .navlink__icon svg{width:16px;height:16px}
.navlink__badge{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:1px 7px}
/* #588 — модуль не подключён компании: видно, что он есть, но без ссылки и без наведения */
.navlocked{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.navlink--locked{cursor:default;opacity:.55}
.navlink--locked:hover{background:none;color:var(--ink-2)}
.navlink--locked:hover .navlink__icon{color:inherit;opacity:.85}  /* #1155 — без доступа не подсвечиваем */
.navlink__note{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:1px 6px}
.navlink__count{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--blue);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.navgroup__row>.navlink .navlink__count{margin-right:20px}  /* #131 — освобождаем место под каретку у «Задачи» */
.notif-bell.is-on{color:var(--blue);border-color:var(--blue)}

/* #1793 — ПАНЕЛЬ БОСai. Три решения записаны прямо здесь, потому что их легко «упростить»
   обратно и не заметить, что сломалось.

   1. Панель — ТРЕТИЙ СТОЛБЕЦ каркаса (.layout уже flex), а не наложение. Наложение прячет то,
      о чём человек спрашивает, — а спрашивают именно о том, что на экране.
   2. Место под неё берётся у ЛЕВОГО МЕНЮ: пока панель открыта, меню сжато до значков. 236 → 56
      покрывают панель больше чем наполовину, и рабочая область почти не сужается.
   3. Панель закреплена и прокручивается сама: прокрутка страницы её не двигает. Иначе разговор
      уезжал бы вверх вместе с содержимым.

   Состояние живёт в data-атрибутах на <html> и ставится ДО первой отрисовки (theme_boot.js):
   платформа многостраничная, и без этого при каждом переходе меню разворачивалось бы на глазах. */
.aipanel{width:380px;flex:none;position:sticky;top:0;height:100vh;display:flex;
  flex-direction:column;background:var(--canvas);border-left:1px solid var(--line)}
:root[data-ai="closed"] .aipanel{display:none}
.aipanel__head{display:flex;align-items:center;gap:var(--sp-2);flex:none;
  padding:var(--sp-3);border-bottom:1px solid var(--line)}
.aipanel__ttl{font-weight:600;flex:1;min-width:0}
.aipanel__acts{display:flex;align-items:center;gap:var(--sp-1)}
.aipanel__btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:7px;background:var(--canvas);color:var(--ink-3);
  cursor:pointer;font-size:13px;line-height:1;text-decoration:none}
.aipanel__btn:hover{border-color:var(--blue);color:var(--ink)}
.aipanel__body{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-3);
  display:flex;flex-direction:column;gap:var(--sp-3)}
/* «С кем говорим и за чей счёт» — под шапкой, мелко: справочная строка, а не заголовок. */
/* #1793 — «вы на этом экране»: строка над разговором, чтобы человек видел, как помощник
   понимает слово «здесь», и мог поправить, если экран определён не тот. */
.aipanel__place{display:flex;align-items:center;gap:var(--sp-2);margin:0;
  font-size:var(--fs-meta);color:var(--blue)}
.aipanel__meta{display:flex;align-items:center;gap:var(--sp-2);margin:0;
  font-size:var(--fs-meta);color:var(--ink-3)}
/* #1793, замечания Юрия 18.09.2026 по панели BOSai. Две правки об одном: узкая панель не должна
   тратить ширину на то, что смотрят редко.

   «+» вместо двух значков в ряд: «пусть ниже, под полем ввода, будет маленький плюсик, и в нём
   скрепочка и папка». Меню открывается ВВЕРХ — под кнопкой низ панели, там места нет. */
.bosai-plus{flex:none}
.bosai-plus__btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:none;
  color:var(--ink-2);font-size:16px;line-height:1;cursor:pointer}
.bosai-plus__btn:hover{border-color:var(--blue);color:var(--ink)}
/* Раскрывается В ТОЙ ЖЕ СТРОКЕ, вправо от «+», а не всплывает над полем ввода: замечание Юрия
   19.09.2026 — «скрепка и папка висят теперь над полем ввода». Всплывающий список в узкой панели
   всегда кого-то накрывает; строка — нет. */
.bosai-plus__menu{position:static;display:flex;gap:var(--sp-1);align-items:center}
/* #1135 — меню «+» стояло раскрытым всегда: display:flex перебивал hidden, который ставит
   bosaiattach.js. Скрепка и папка показываются только по «+», как задумано 18.09. */
.bosai-plus__menu[hidden]{display:none}
/* Кружок бюджета: «почему бы это всё убрать оттуда и показывать, когда нажимаешь на кругляшок».
   Цвет — те же три состояния, что у бюджета агентов (ok / на исходе / кончился). */
.aipanel__ring{padding:0;border:0;background:none;cursor:pointer;display:inline-flex;
  align-items:center;color:var(--ink-3)}
/* Подпись модели и кружок бюджета живут в нижней строке композитора, у правого края: «счётчик и
   надпись под полем ввода» (Юрий, 19.09.2026). */
.aipanel__who{margin-left:auto;font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:55%}
.aipanel__ringbg{stroke:var(--line)}
.aipanel__ringfg{stroke:var(--blue);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.aipanel__ring--warn .aipanel__ringfg{stroke:var(--amber)}
.aipanel__ring--stopped .aipanel__ringfg,
.aipanel__ring--paused .aipanel__ringfg{stroke:var(--red)}
.aipanel__budgetline{margin:0 0 var(--sp-2);padding:var(--sp-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:var(--fs-meta);color:var(--ink-2)}
.aipanel__budget{margin-left:auto}
.aipanel__budget--warn{color:var(--amber)}
.aipanel__budget--stopped{color:var(--red)}

/* Кнопка-переключатель в меню: выглядит как пункт меню, ведёт себя как тумблер. Своё нажатое
   состояние, отличное от navlink--active: «панель открыта» это не «я на этой странице». */
/* Шрифт и межстрочный интервал задаются ЯВНО: у <button> они свои (font: initial), и строка
   выходила на 2px выше соседних пунктов. Размер берём тот же, что у .navlink — 13px×1.5=19.5,
   ровно как у ссылок рядом; «inherit» тут не годится, он подтягивает 14px из каркаса и молча
   перебивает .navlink, потому что стоит ниже по файлу. */
.navlink--toggle{width:100%;border:none;background:none;text-align:left;cursor:pointer;
  font-family:inherit;font-size:13px;line-height:1.5}
.navlink--toggle.is-on{background:var(--blue-wash);color:var(--blue);font-weight:600}
/* Просьба Юрия 18.09.2026: значок BOSai подсвечен ВСЕГДА, а не только на наведении и не только
   когда панель открыта, — «чтобы не забывали, что здесь есть такая возможность». Подсвечен
   именно значок, не вся строка: пункт меню, горящий постоянно, читался бы как «я тут», и тогда
   потерялось бы нажатое состояние самой панели. */
.navlink--ai .navlink__icon{color:var(--blue);opacity:1}
.navlink--toggle.is-on .navlink__icon{color:var(--blue);opacity:1}
/* Кнопка ручного сворачивания: бледнее прочих пунктов — это управление видом, а не раздел. */
.navmini{color:var(--ink-3)}
:root[data-nav="mini"] .navmini .navlink__icon{transform:scaleX(-1)}

/* МЕНЮ, СЖАТОЕ ДО ЗНАЧКОВ. Подписи убираются display:none, а не шириной 0: место под них
   иначе остаётся, и значки съезжают влево неровным столбиком. Счётчики остаются точкой —
   пропасть им нельзя (решение по п. 3828: число не читается в 56px, а факт «есть новое» —
   читается). */
:root[data-nav="mini"] .sidebar{width:56px;padding-left:8px;padding-right:8px}
:root[data-nav="mini"] .navlink__label,
:root[data-nav="mini"] .navlink__badge,
:root[data-nav="mini"] .navlink__note,
:root[data-nav="mini"] .userbox__info,
:root[data-nav="mini"] .navgroup__caret,
:root[data-nav="mini"] .cswitch__cur,
:root[data-nav="mini"] .navlocked{display:none}
:root[data-nav="mini"] .navlink{justify-content:center;padding-left:6px;padding-right:6px}
:root[data-nav="mini"] .navsub .navlink{padding-left:6px}
:root[data-nav="mini"] .navlink__count{position:absolute;margin:0;min-width:8px;width:8px;height:8px;
  padding:0;border-radius:50%;font-size:0;line-height:0;transform:translate(10px,-8px)}
:root[data-nav="mini"] .navlink{position:relative}
:root[data-nav="mini"] .userbox{justify-content:center;padding-left:0;padding-right:0}

/* Узкий экран: сжимать меню нечего — оно и так уезжает за край, — поэтому панель занимает
   ширину целиком. Пункт 3839 чек-листа. */
@media (max-width:860px){
  .aipanel{position:fixed;inset:0;width:100%;height:100dvh;z-index:70}
}

/* 01-SPEC ТРАНС-1 (23.09.2026) — панель «Транскрибация встреч»: тот же каркасный приём, что
   .aipanel выше (четвёртый столбец .layout, не наложение), поэтому и правила почти дословно те
   же — держим панели визуально согласованными, это одна и та же идея с разным содержимым. */
.meetpanel{width:380px;flex:none;position:sticky;top:0;height:100vh;display:flex;
  flex-direction:column;background:var(--canvas);border-left:1px solid var(--line)}
:root[data-meet="closed"] .meetpanel{display:none}
.meetpanel__head{display:flex;align-items:center;gap:var(--sp-2);flex:none;
  padding:var(--sp-3);border-bottom:1px solid var(--line)}
.meetpanel__ttl{font-weight:600;flex:1;min-width:0}
.meetpanel__acts{display:flex;align-items:center;gap:var(--sp-1)}
.meetpanel__btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--canvas);
  color:var(--ink-3);cursor:pointer;font-size:var(--fs-text);line-height:1;text-decoration:none}
.meetpanel__btn:hover{border-color:var(--blue);color:var(--ink)}
.meetpanel__body{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-3);
  display:flex;flex-direction:column;gap:var(--sp-3)}
@media (max-width:860px){
  .meetpanel{position:fixed;inset:0;width:100%;height:100dvh;z-index:70}
}

.userbox{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;margin-top:6px}
.userbox__link{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-decoration:none;color:inherit;border-radius:8px}
.userbox__link:hover{background:var(--page)}
.userbox .ava{margin:0}
.userbox__info{display:flex;flex-direction:column;min-width:0;flex:1}
.userbox__name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userbox__role{color:var(--ink-3);font-size:11px}
.userbox__out{background:none;border:1px solid var(--line);border-radius:7px;color:var(--ink-2);
  cursor:pointer;padding:4px 9px;font-size:14px}
.userbox__out:hover{border-color:var(--blue);color:var(--sapphire);background:var(--blue-wash)}

/* ---- Контент ---- */
/* min-width:0 позволяет флекс-колонке сжиматься уже контента; overflow-x:clip — страховка от
   горизонтального выезда за экран (не создаёт скролл-контейнер, не ломает position:sticky). */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--page);overflow-x:clip}
/* №1134 — единое правило шапки для всех страниц: при многих кнопках первыми уходят во вторую
   строку кнопки, а не сжимается заголовок. Раньше перенос был только в медиазапросах (≤960 и ≤640),
   правый блок не сжимался (flex:none), а блок заголовка сжимался до самого длинного слова: на 1280
   у /metrics/ заголовок 105 px и подзаголовок в 5 строк, у /finance/ 83 px, а часть кнопок уходила
   за край шапки и не нажималась (замерено). Теперь:
   - шапка переносится всегда (flex-wrap), перенос строк — по естественной ширине элементов;
   - блок заголовка (.topbar__head) не сжимается (flex-shrink:0) и не шире строки (max-width), поэтому
     заголовок занимает одну строку, пока она есть, и переносится по словам только когда шире строки;
   - правый блок, оказавшись на своей строке шире неё, сжимается и переносит кнопки внутри себя.
   Высота шапки и так плавала (--topbar-h — только её минимум), панели поверх шапки (.mpan, .drawer)
   от неё не зависят. */
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);min-height:var(--topbar-h);padding:12px 24px;
  background:var(--topbar-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar__head{flex:0 0 auto;max-width:100%;min-width:0}
.topbar__title{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em}
.topbar__sub{color:var(--ink-3);margin-top:2px;font-size:13px}
.topbar__right{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;
  flex:0 1 auto;min-width:0}
.navtoggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);cursor:pointer}
.navtoggle svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.navtoggle:hover{background:var(--blue-wash)}
.scrim{display:none}
.content{padding:24px;max-width:1680px;width:100%;margin:0 auto}

.theme-toggle{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--canvas);color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
.theme-toggle:hover{color:var(--ink);border-color:var(--blue)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .t-sun{display:none}.theme-toggle .t-moon{display:block}
:root[data-theme="dark"] .theme-toggle .t-sun{display:block}
:root[data-theme="dark"] .theme-toggle .t-moon{display:none}

/* ---- Тосты ---- */
.messages{margin-bottom:16px}
.toast{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);
  margin-bottom:8px;font-weight:450}
.toast--success{border-color:var(--green);background:var(--t-green-bg);color:var(--t-green-fg)}
.toast--error{border-color:var(--red);background:var(--t-red-bg);color:var(--t-red-fg)}
.toast__close{float:right;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;font-size:16px;line-height:1;margin-left:12px}
.toast__close:hover{opacity:1}
/* 19.09.2026 — всплывашка о готовой расшифровке (просьба Юрия: «боковое снизу всплывающее
   уведомление»). Полка внизу СЛЕВА: справа выезжает панель BOSai, и всплывашка встала бы ровно
   под неё. Поверх содержимого, но ниже панели и модальных окон по z-index — новость не должна
   перекрывать то, чем человек занят прямо сейчас. */
.toastbay{position:fixed;left:var(--sp-4);bottom:var(--sp-4);z-index:60;display:grid;gap:8px;
  max-width:360px;pointer-events:none}
/* Крестик — в строку с текстом, а не под ним: у общих плашек он всплывает через float, а в
   узкой полке текст занимает всю ширину, и float опускал значок на отдельную строчку внизу. */
.toastbay .toast{pointer-events:auto;box-shadow:0 6px 24px rgba(0,0,0,.12);margin:0;
  display:flex;align-items:flex-start;gap:8px}
.toastbay .toast__close{float:none;margin:0;flex:none}
.toast--live{border-color:var(--blue)}
.toast--live-bad{border-color:var(--red)}
.toast__text{display:block;color:inherit;text-decoration:none;padding-right:18px}
a.toast__text:hover{text-decoration:underline}

/* ---- Кнопки ---- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);
  background:var(--canvas);color:var(--ink);border-radius:var(--radius-sm);padding:8px 14px;
  font:inherit;font-size:13px;font-weight:450;cursor:pointer;transition:all .15s ease}
.btn:hover{background:var(--page);border-color:var(--blue);color:var(--blue)}
.btn--primary{background:var(--blue);border-color:var(--blue);color:var(--btn-primary-fg)}
.btn--primary{font-weight:600;box-shadow:0 2px 8px rgba(91,66,228,.28);transition:all .15s ease}
.btn--primary:hover{background:var(--sapphire);border-color:var(--sapphire);box-shadow:0 4px 14px rgba(91,66,228,.38);transform:translateY(-1px)}
.btn--danger{color:var(--red)}
.btn--danger:hover{border-color:var(--red);background:var(--t-red-bg);color:var(--red)}

/* ---- Плитки ---- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
/* #924 — «шрифты тонкие и изящные»: мелкие подписи-заглавные набирались 600 и выглядели тяжело.
   Ярлыки облегчены до 550; числа и значки-счётчики остаются плотными — там вес несёт смысл. */
.tile__label{color:var(--ink-3);font-size:12px;font-weight:450;text-transform:uppercase;letter-spacing:.02em}
.tile__value{font-size:28px;font-weight:600;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.tile__hint{color:var(--ink-3);font-size:12px;margin-top:2px}

.section-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);
  font-weight:700;margin:26px 0 12px}
/* #585 — карточка сама держит внутренний отступ: раньше его дописывали по месту (style="padding:22px"),
   а где забывали — содержимое прижималось к рамке (блоки карточки сделки). Для карточек-обёрток
   таблиц и полос прокрутки есть .card--flush (или утилита .u-p0). */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--card-pad)}
.card--flush{padding:0}
.card--sm{padding:var(--sp-3)}   /* компактная карточка: плитки, строки списков */
.card--lg{padding:var(--sp-6)}   /* акцентная карточка: форма-страница, пустое состояние */
.card + .card{margin-top:var(--card-gap)}
/* #585 — строка управления под содержимым блока (поля + кнопка): вместо inline gap/margin по месту */
.form-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}
.form-row + .form-row{margin-top:var(--sp-2)}
/* поля в строке не должны распирать контейнер: длинный вариант в списке — не повод уехать за край */
.form-row > select,.form-row > input,.form-row > textarea{min-width:0;max-width:100%}
/* и выглядеть одинаково: строка управления встречается вне класса .form, где стилей полей нет */
.form-row > select,.form-row > input:not([type=checkbox]):not([type=radio]){
  border:1px solid var(--line-strong);border-radius:var(--radius-input);background:var(--canvas);
  color:var(--ink);font:inherit;font-size:var(--fs-text);padding:7px 9px}
.form-row > select:focus,.form-row > input:focus{outline:none;border-color:var(--blue)}
/* #585 — обёртка прокрутки для широких таблиц. Класс использовался в шаблонах, но правило
   было объявлено только внутри одного из них, поэтому на остальных страницах не работало. */
.u-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.u-mt-card{margin-top:var(--card-gap)}
/* #675 — колонка карточек настроек. Ширину задавали тремя разными способами: .form
   (560px), .demo-card (свой max-width + хардкод padding) и inline style у «Ресурсов». 
   Карточка «Адрес портала» не попала ни в один и растягивалась во всю ширину экрана —
   она выпирала за остальные, а дата «задан …» уезжала к правому краю. */
.u-col-form{max-width:560px}
.u-mt-2{margin-top:var(--sp-2)}
.u-mt-3{margin-top:var(--sp-3)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.dept-card{padding:14px 16px}
.dept-card__name{font-weight:450}
.dept-card__ckp{color:var(--ink-2);font-size:var(--fs-text);margin-top:4px}

/* ---- Оргдерево ---- */
.tree{--rail:22px}
.tree__children{margin-left:var(--rail);padding-left:16px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;margin-top:10px}
.node{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.node>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.node>summary::-webkit-details-marker{display:none}
.node__head{display:flex;align-items:center;gap:10px}
.badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 8px;border-radius:var(--radius-pill);flex:none;border:1px solid transparent}
.badge--company{background:var(--ink);color:var(--canvas)}
.badge--department{background:var(--t-blue-bg);color:var(--t-blue-fg)}
.badge--division{background:var(--t-slate-bg);color:var(--t-slate-fg)}
.badge--service{background:var(--t-green-bg);color:var(--t-green-fg)}
.badge--office{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.badge--council{background:var(--t-blue-bg);color:var(--t-blue-fg)}
.badge--section{background:var(--t-slate-bg);color:var(--t-slate-fg)}
.badge--other{background:var(--t-slate-bg);color:var(--t-slate-fg)}
.node__name{font-weight:450;letter-spacing:-.01em}
.node__count{margin-left:auto;color:var(--ink-3);font-size:12px;font-weight:600}
.node__ckp{color:var(--ink-2);font-size:var(--fs-text);padding-left:2px}
.node__ckp b{color:var(--ink-3);font-weight:450}
.fns{margin:2px 14px 12px;border-top:1px solid var(--line-2);padding-top:8px}
.fns>summary{cursor:pointer;color:var(--blue);font-size:12px;font-weight:450;list-style:none}
.fns ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:12.5px;
  display:flex;flex-direction:column;gap:3px}

/* ---- Галерея шаблонов ---- */
/* #481 — график показателя с осями (геометрию считает apps/metrics/chartsvg.py).
   Цвета берём из переменных темы: ночная тема получается сама, без второго набора правил.
   Ширина резиновая, высота задаётся соотношением сторон viewBox — на мобильном график сжимается,
   а не режется. */
.mchart{position:relative;width:100%;overflow:hidden}
.mchart svg{display:block;width:100%;height:auto}
/* №1133 — у крупного графика два SVG: вьюпорт 640 и узкий 320 (apps/metrics/chartsvg.py, SIZES["narrow"]).
   Какой виден, решает ширина самого графика, а не экрана: панель оргсхемы узкая и на 1280. Уже 480 px —
   узкий: подпись в 11 единиц на 305 px телефона ≈ 10,5 px вместо прежних ~5. Без @container — широкий, как было. */
.mchart{container-type:inline-size}
.mchart .mchart__svg--narrow{display:none}
@container (max-width:479.98px){
  .mchart .mchart__svg--wide{display:none}
  .mchart .mchart__svg--narrow{display:block}
}
.mchart--empty{padding:14px 0;font-size:12.5px}
/* П3 (#2999, bos81) — современный вид: пунктирная сетка, плавная линия цвета ряда с заливкой и
   маркерами с обводкой цвета фона, красный только для участков против цели. Цвет ряда — токен
   --chart-1 (= --blue, тёмная тема получается сама), новых hex в правилах графика нет.
   Слои и правила — docs/design/ui-standard.md §21. */
.mchart__grid{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 4}
.mchart__axis{stroke:var(--line-strong);stroke-width:1}
.mchart__band{fill:var(--panel-2)}
.mchart__ylab,.mchart__xlab{fill:var(--ink-3);font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.mchart__seg{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mchart__seg.is-good{stroke:var(--chart-1)}
.mchart__seg.is-bad{stroke:var(--red)}
/* заливка: цвет задают ТОЛЬКО <stop>; свойство fill у .mchart__area в CSS перебило бы атрибут fill="url(#…)" */
.mchart__stop--up{stop-color:var(--chart-1)}
.mchart__stop--dn{stop-color:var(--red)}
.mchart__stop--top{stop-opacity:.26}
.mchart__stop--bot{stop-opacity:.02}
.mchart__trend{stroke-width:1.4;stroke-dasharray:5 4;fill:none;opacity:.75}
.mchart__trend.is-good{stroke:var(--green)}
.mchart__trend.is-bad{stroke:var(--red)}
.mchart__plan{fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:4 3}
.mchart__planlab{fill:var(--ink-3);font-size:var(--fs-meta)}
/* П3б (#3000, bos82) — бледный фон будущих колонок, ряды 2–4, кружок цвета ряда в подсказке, легенда */
.mchart__future{fill:var(--panel-2)}
.mchart__seg--s2{stroke:var(--chart-2)}
.mchart__seg--s3{stroke:var(--chart-3)}
.mchart__seg--s4{stroke:var(--chart-4)}
.mchart__dot--s2{fill:var(--chart-2)}
.mchart__dot--s3{fill:var(--chart-3)}
.mchart__dot--s4{fill:var(--chart-4)}
.mchart__bar--s2{fill:var(--chart-2)}
.mchart__bar--s3{fill:var(--chart-3)}
.mchart__bar--s4{fill:var(--chart-4)}
.mchart__sw{stroke:var(--canvas);stroke-width:1}
.mchart__sw--s1{fill:var(--chart-1)}
.mchart__sw--s2{fill:var(--chart-2)}
.mchart__sw--s3{fill:var(--chart-3)}
.mchart__sw--s4{fill:var(--chart-4)}
.mchart__legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin:var(--sp-1) 0 0;padding:0;list-style:none;font-size:var(--fs-meta);color:var(--ink-2)}
.mchart__lg{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mchart__lg--hidden{max-width:none}
.mchart__lg--s1::before,.mchart__lg--s2::before,.mchart__lg--s3::before,.mchart__lg--s4::before{content:"";display:inline-block;width:8px;height:8px;margin-right:var(--sp-1);border-radius:var(--radius-pill)}
.mchart__lg--s1::before{background:var(--chart-1)}
.mchart__lg--s2::before{background:var(--chart-2)}
.mchart__lg--s3::before{background:var(--chart-3)}
.mchart__lg--s4::before{background:var(--chart-4)}
.mchart__lg--plan::before{content:"";display:inline-block;width:12px;height:0;margin-right:var(--sp-1);border-top:2px dashed var(--ink-3);vertical-align:middle}
.mchart__dot{stroke:var(--canvas);stroke-width:2}
.mchart__dot.is-good{fill:var(--chart-1)}
.mchart__dot.is-bad{fill:var(--red)}
.mchart__bar.is-good{fill:var(--chart-1)}
.mchart__bar.is-bad{fill:var(--red)}
.mchart__val{fill:var(--ink);font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
/* №1133: даты мельче (10) только у широкого SVG — узкий и плитки на телефоне держат 11 единиц (≥ 10 px на 375) */
@media (max-width:560px){.mchart__svg--wide .mchart__xlab{font-size:10px}}
/* #1298 п.3 — подсказка точки графика: период словами и точное значение при наведении.
   Показ мышью — чистый CSS (скрипты в SVG запрещены политикой содержимого #849). Зона наведения —
   прозрачный прямоугольник во всю высоту колонки периода: в саму точку радиусом 3 курсором
   попасть невозможно. pointer-events:none у коробки — иначе она сама перехватывала бы курсор и
   мигала, наезжая на соседнюю колонку. П3 (#2999): с клавиатуры и пальцем подсказку включает
   static/js/mchart.js классом is-active; плашка цвета точки с хвостиком к ней. */
.mchart__hit{fill:transparent}
.mchart__pt .mchart__tip,.mchart__pt .mchart__dot--hover{opacity:0;pointer-events:none;
  transition:opacity .08s linear}
.mchart__pt:hover .mchart__tip,.mchart__pt:focus-within .mchart__tip,.mchart__pt.is-active .mchart__tip,
.mchart__pt:hover .mchart__dot--hover,.mchart__pt:focus-within .mchart__dot--hover,
.mchart__pt.is-active .mchart__dot--hover{opacity:1}
.mchart__tipbox.is-good,.mchart__tiparrow.is-good{fill:var(--chart-1)}
.mchart__tipbox.is-bad,.mchart__tiparrow.is-bad{fill:var(--red)}
.mchart__tipbox.is-neutral,.mchart__tiparrow.is-neutral{fill:var(--ink)}
/* мышь стоит на одной колонке, а стрелками/касанием выбрана другая: показываем одну плашку — выбранную
   (класс is-manual ставит mchart.js, снимает движение мыши или уход фокуса) */
.mchart.is-manual .mchart__pt:not(.is-active) .mchart__tip,
.mchart.is-manual .mchart__pt:not(.is-active) .mchart__dot--hover{opacity:0}
.mchart__tiptext{fill:var(--canvas);font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.mchart__tiptext--head{opacity:.85}
.mchart[data-mchart-kbd]:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--radius-sm)}
.mchart__live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* #807 — быстрое создание контакта в форме сделки: «+» рядом с выбором и блок из трёх полей.
   Блок — часть формы сделки, поэтому НЕ модальное окно: человек видит и сделку, и контакт. */
.cq{display:inline-flex;align-items:center;gap:6px}
.cq__add{padding:4px 10px;line-height:1;font-size:16px;font-weight:450}
.cq-new{margin-top:10px;max-width:560px}
.cq-new__head{font-weight:450;margin-bottom:8px}
.cq-new__foot{display:flex;align-items:center;gap:var(--sp-2);margin-top:10px;flex-wrap:wrap}
.cq-new__msg{font-size:12px}
.cq-new__msg--bad{color:var(--red)}
/* #258 — выбор варианта оргсхемы: три карточки с предпросмотром и «Далее».
   Нативный радиовход спрятан, но НЕ выключен: он остаётся в табуляции, отвечает на пробел и
   рисует рамку по :focus-visible — иначе выбор был бы недоступен с клавиатуры. */
.ostart{padding:var(--sp-4);max-width:920px}
.ostart__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.ostart__opt{position:relative;display:block;cursor:pointer}
.ostart__opt input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ostart__box{display:flex;flex-direction:column;gap:8px;height:100%;padding:14px 14px 12px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);
  transition:border-color .12s,background .12s}
.ostart__opt:hover .ostart__box{border-color:var(--line-strong)}
.ostart__opt input:checked + .ostart__box{border-color:var(--blue);background:var(--panel);
  box-shadow:0 0 0 1px var(--blue) inset}
.ostart__opt input:focus-visible + .ostart__box{outline:2px solid var(--blue);outline-offset:2px}
.ostart__dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--canvas);flex:none}
.ostart__opt input:checked + .ostart__box .ostart__dot{border-color:var(--blue);
  box-shadow:0 0 0 3px var(--canvas) inset;background:var(--blue)}
.ostart__pic{display:block;padding:4px 0 2px}
.ostart__pic svg{width:100%;height:auto;display:block}
.ostart__pic .p-root{fill:var(--blue-wash);stroke:var(--blue);stroke-width:.8}
.ostart__pic .p-dept rect{fill:var(--panel);stroke:var(--line-strong);stroke-width:.7}
.ostart__pic .p-cell rect{fill:var(--line-2);stroke:var(--line);stroke-width:.5}
.ostart__pic .p-line{stroke:var(--line-strong);stroke-width:.8;fill:none}
.ostart__pic .p-new{fill:var(--panel);stroke:var(--line-strong);stroke-width:.8;stroke-dasharray:3 2}
.ostart__pic .p-plus{stroke:var(--blue);stroke-width:1.4;fill:none;stroke-linecap:round}
.ostart__name{font-weight:450}
.ostart__meta{color:var(--ink-3);font-size:12px;line-height:1.4}
.ostart__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line-2)}
@media (max-width:760px){.ostart__grid{grid-template-columns:1fr}}
.tpl-card{padding:16px;display:flex;flex-direction:column;gap:10px}
.tpl-card__name{font-weight:450}
.tpl-card__meta{color:var(--ink-3);font-size:12px}
.tpl-card form{margin-top:auto}

/* ---- Формы ---- */
.form{max-width:560px}
.form .field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
/* #2668 — display:flex выше перебивал атрибут hidden: на форме создания был виден старый «Повтор»,
   который taskkind.js прячет (repeatWrap.hidden = true). */
.form .field[hidden]{display:none}
.form label{font-weight:450;font-size:13px}
/* #1290 — БАЗОВОЕ правило для выпадающих списков. До него вида у <select> не было вовсе: он
   приходил ТОЛЬКО от предка (.form select, .form-row > select, .filterbar select, .board-row
   select, .subtask-add select, .task-nest__form select), и любой список, оказавшийся вне этих
   контекстов, браузер рисовал нативным — квадратным. Так выглядели выбор сотрудника на
   «Еженедельных планах» и списки в настройках CRM: 158 тегов <select> в шаблонах, у 128 нет ни
   одного класса. Чинить по месту уже пробовали — в crm/_filterdrawer.html висит комментарий ровно
   про этот случай; поэтому правило поднято на уровень элемента.
   Ничего нового здесь не придумано: взят ровно тот вид, что уже был у .filterbar select. Стрелка
   остаётся нативной — она в тон теме через color-scheme в :root, своя рисовалась бы ради
   единственного отличия и требовала бы поддержки в обеих темах.
   Контекстные правила, которые задают РАЗМЕР (узкий селект в строке подзадачи, высота 34px в
   строке доски), остаются: у них выше специфичность, и они про размер, а не про вид. */
select{border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:6px 9px;background:var(--canvas);color:var(--ink);font:inherit;font-weight:450;
  max-width:100%}
select:focus{outline:none;border-color:var(--blue)}

.form input,.form select,.form textarea{width:100%;border:1px solid var(--line-strong);
  border-radius:var(--radius-input);padding:9px 11px;font:inherit;background:var(--canvas);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue)}
.form textarea{resize:vertical}
.form input[type=checkbox],.form input[type=radio]{width:auto;margin:0}
.check-inline{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-weight:450;color:var(--ink)}
.check-inline input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue);cursor:pointer}
/* #агенты — управление токенами */
.chk-list{display:flex;flex-wrap:wrap;gap:14px}
.agent-row{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px;background:var(--panel-2)}
.agent-row__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.agent-row__name{flex:1;min-width:180px;font-weight:450;border:1px solid transparent;border-radius:8px;
  padding:5px 8px;background:transparent;color:var(--ink);font:inherit;font-size:15px}
.agent-row__name:hover,.agent-row__name:focus{border-color:var(--line-strong);outline:none}
.agent-tok{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--canvas);
  border:1px solid var(--line);border-radius:6px;padding:2px 8px;color:var(--ink-2)}
.agent-row__opts{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 10px}
/* #157/#1187 — предупреждение про board-scope под списком досок: было style="margin:4px 0 0" */
.agent-board-note{margin:var(--sp-1) 0 0}
.agent-row__btns{margin-top:4px}
.agent-row__actions{display:flex;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.agent-row__actions form{display:inline}
/* подключения агента к внешним платформам (ключи) */
.agent-creds{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.agent-creds__head{font-size:11px;font-weight:450;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
/* #2875 — токен агента, показанный один раз: поле на всю ширину + «Скопировать» сразу за ним */
.token-once{display:flex;gap:var(--sp-2);align-items:center;margin-top:var(--sp-2)}
.token-once__val{flex:1 1 auto;min-width:0;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:var(--sp-2) var(--sp-3);background:var(--canvas);color:var(--ink);
  font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.agent-creds__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.agent-creds__set{color:var(--t-green-fg,#16a34a);font-size:12.5px}
.agent-creds__add{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.agent-creds__add input{border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:7px 10px;font:inherit;background:var(--canvas);color:var(--ink);min-width:0}
.agent-creds__add input[name=provider]{flex:0 1 190px}
.agent-creds__add input[name=label]{flex:0 1 190px}
.agent-creds__add input[name=secret]{flex:1 1 220px}
/* #850 — перечень разрешённых адресатов ключа: куда агенту можно ходить с этим ключом.
   Кнопка удаления держится справа своим правилом, а не style="margin-left:auto" в разметке. */
/* #901 — кнопки формы одной строкой с переносом: в узкой выезжающей панели «Сохранить» и
   «Отмена» иначе выходили за край. */
.form__acts{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-1)}
.drawer__body .form{max-width:none}

/* #883 — быстрая подсказка: браузерная всплывает через секунду, эту показываем через 120 мс.
   Тёмная тема: цвета через переменные, иначе на ночном фоне подсказка была бы нечитаемой. */
.quicktip{position:fixed;z-index:300;pointer-events:none;max-width:280px;
  background:var(--ink);color:var(--canvas);font-size:var(--fs-label);line-height:1.35;
  padding:4px 8px;border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.quicktip[hidden]{display:none}

/* #901 — исполнитель подзадачи прямо в строке: узкий список, чтобы строка не разъезжалась,
   и явное «Нет исполнителя» вместо пустого места. */
/* #900 — элементы CRM у задачи: чипы с подписью вида и снятием, рядом строка выбора. */
.crmlinks{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crmlinks__chip{display:inline-flex;align-items:center;gap:8px}
.crmlinks__kind{color:var(--ink-3);font-size:var(--fs-meta);text-transform:uppercase;
  letter-spacing:.03em}
.crmlinks__x{display:inline}
/* Крестик в ЧИПЕ (связь CRM, лишняя доска): виден всегда. Класс .ppl__x для этого не годится —
   он показывается только при наведении на аватарку .ppl, а в чипе такой обёртки нет, поэтому
   кнопка не показывалась никогда (нашёл на своём же выпуске #900). */
.chip__x{border:0;background:none;padding:0 0 0 2px;margin:0;color:inherit;opacity:.6;
  cursor:pointer;font:inherit;font-size:14px;line-height:1}
.chip__x:hover{opacity:1;color:var(--red)}
.crmlinks__add{min-width:200px}
.crmlinks__add .entpick__ctl{min-height:30px;padding:3px 26px 3px 8px;font-size:var(--fs-label)}

/* #944 — выбор исполнителя (делегирование) и добавление участника: строка на всю ширину поля,
   подсказка под ней мелкая и серая. */
.delegate-box{display:flex;flex-direction:column;gap:2px;min-width:0}
.delegate-box .entpick{width:100%}
.delegate-box .field__hint{margin:0}
.ppl-add .entpick__ctl{min-height:30px;padding:3px 26px 3px 8px;font-size:var(--fs-label)}
.ppl-add .entpick{min-width:170px}
.subtask__who{margin-left:auto;display:inline-flex}
/* #923 — тот же выбор человека, но в ряду подзадачи: узкая строка, мелкий кегль, без лишней
   высоты. Иначе компонент на всю ширину развалил бы ряд. */
.subtask__who .entpick{width:auto}
.subtask__who .entpick__ctl{min-height:26px;max-width:190px;padding:2px 24px 2px 6px;
  font-size:var(--fs-label);border-color:var(--line);color:var(--ink-2)}
.subtask__who .entpick__ctl .ava{width:18px;height:18px;font-size:9px}
.subtask__who .entpick__caret{right:6px}
.deps__add .entpick{flex:1;min-width:0}
.subtask__who select{max-width:150px;font-size:var(--fs-label);padding:2px 4px;
  border:1px solid var(--line);border-radius:var(--radius-input);background:var(--canvas);
  color:var(--ink-2)}
.subtask__who select:hover{border-color:var(--line-strong);color:var(--ink)}
.subtask__none{margin-left:auto;font-size:var(--fs-meta);color:var(--amber)}
/* #2574 — крестик «отвязать от главной» в строке подзадачи: тихий, краснеет по наведению */
.subtask__unlink-form{display:inline-flex;flex:none}
.subtask__unlink{border:0;background:none;cursor:pointer;color:var(--ink-3);font:inherit;
  font-size:16px;line-height:1;padding:0 var(--sp-1)}
.subtask__unlink:hover,.subtask__unlink:focus-visible{color:var(--red)}

/* #917 п.6 / #923 — ОДИН выбор сущности на платформе: строка, по нажатию — плашка со списком.
   Было: строка поиска НАД раскрытым списком (два способа выбора рядом, у соисполнителей ещё и
   полоса прокрутки в карточке). Стало: строка показывает выбранных кружком-аватаром, список
   приезжает плашкой. Плашка живёт в <body> (floatpop.js): внутри выезжающей панели и столбца
   канбана её обрезала бы граница прокрутки — этим болели #936 и #937. */
.entpick{position:relative;display:block}
/* Список остаётся в разметке и уезжает на сервер, просто не занимает места. Без скриптов
   класс не появляется — человек видит обычный список и заполняет форму как раньше. */
.entpick__native{display:none}
.entpick__ctl{position:relative;display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;
  width:100%;min-height:38px;padding:5px 32px 5px 10px;border:1px solid var(--line-strong);
  border-radius:var(--radius-input);background:var(--canvas);color:var(--ink);cursor:pointer}
.entpick__ctl:hover{border-color:var(--ink-3)}
.entpick.is-open>.entpick__ctl,.entpick__ctl:focus-visible{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-wash)}
.entpick__val{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;min-width:0}
.entpick__ph{color:var(--ink-3)}
.entpick__chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;
  padding:2px 8px 2px 3px;border-radius:var(--radius-pill);background:var(--panel-2);color:var(--ink)}
.entpick__chip .ava{width:20px;height:20px;font-size:9.5px}
.entpick__chipname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entpick__x{display:inline-flex;align-items:center;border:0;background:none;padding:0;
  color:var(--ink-3);cursor:pointer}
.entpick__x:hover{color:var(--red)}
.entpick__caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  display:inline-flex;color:var(--ink-3);pointer-events:none}
/* Строка поиска — часть той же строки выбора, а не отдельное поле: «принцип одной строки». */
.entpick__q{flex:1 1 90px;min-width:60px;border:0;padding:0;background:none;font:inherit;
  color:var(--ink);outline:none}
.form .entpick__q{width:auto;border:0;padding:0;background:none}
.entpick__q[hidden]{display:none}
.entpick__pop{z-index:80;padding:4px;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow),0 12px 28px rgba(0,0,0,.12);
  max-height:calc(var(--entrows,6) * 34px + 8px)}
.entpick__list{display:flex;flex-direction:column}
.entpick__row{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:6px 8px;border:0;
  background:none;color:var(--ink);font:inherit;text-align:left;border-radius:7px;cursor:pointer}
.entpick__row[hidden]{display:none}
.entpick__row:hover,.entpick__row.is-cursor{background:var(--panel-2)}
/* Выбранная строка плотнее: вес здесь — признак «это и выбрано», как в активном пункте меню. */
.entpick__row.is-on{font-weight:600}
.entpick__row--clear{color:var(--ink-3)}
.entpick__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entpick__tick{display:inline-flex;color:var(--blue);visibility:hidden}
.entpick__row.is-on .entpick__tick{visibility:visible}
.entpick__none{margin:6px 8px;color:var(--ink-3);font-size:var(--fs-label)}
/* У задачи вместо лица — её номер: по нему её и ищут («поиск по номеру или названию»). */
.entpick__num{display:inline-grid;place-items:center;min-width:36px;height:20px;padding:0 5px;
  border-radius:6px;background:var(--t-blue-bg);color:var(--t-blue-fg);
  font-size:11px;font-weight:600;flex:none}
/* #900 — выбор родительской задачи в правой карточке: поиск сверху, кнопка под ним. */
.pnl-parent{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pnl-parent select{max-width:100%}
.pnl-parent .entpick{width:100%}

/* Портал компании называет компанию: и человеку понятно, куда он вошёл, и поддомены перестают
   выглядеть копиями одной формы пароля. */
.auth-portal{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  margin:0 0 var(--sp-3);font-size:var(--fs-label);color:var(--ink-2)}
.auth-portal__logo{height:20px;width:auto;border-radius:4px}

/* Подпись «кто ведёт сервис» на экране входа: признак настоящего сервиса, а не формы-обманки. */
.auth-who{margin:var(--sp-4) 0 0;font-size:var(--fs-meta);color:var(--ink-3);text-align:center;
  line-height:1.5}
.auth-who a{color:var(--ink-2)}

.agent-creds__del{margin-left:auto}
.agent-creds__add input[name=allowed_hosts]{flex:1 1 220px}
.agent-creds__egress{margin:var(--sp-1) 0 var(--sp-3);font-size:var(--fs-label)}
.agent-creds__egress>summary{cursor:pointer;color:var(--ink-2);padding:var(--sp-1) 0}
.agent-creds__egress>summary:hover{color:var(--sapphire)}
.agent-creds__hosts{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.agent-creds__hosts label{display:flex;flex-direction:column;gap:var(--sp-1);color:var(--ink-2)}
.agent-creds__hosts textarea,.agent-creds__hosts input{border:1px solid var(--line-strong);
  border-radius:var(--radius-input);padding:7px 10px;font:inherit;font-size:var(--fs-text);
  background:var(--canvas);color:var(--ink);min-width:0;resize:vertical}
.agent-creds__hrow{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end}
.agent-creds__hrow label{flex:0 1 auto}
.agent-creds__note{margin:var(--sp-2) 0 0;max-width:640px}
.agent-help{background:var(--canvas);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-2);overflow-x:auto;white-space:pre}

/* ---- Логотип в настройках ---- */
.logo-preview{align-self:flex-start;width:132px;height:132px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel)}
.logo-preview img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.logo-field{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.logo-field input[type=file]{width:auto;flex:1 1 200px}
.logo-field label{font-weight:400;margin:0;color:var(--ink-2)}
.logo-field a{color:var(--blue)}
.field__err{color:var(--red);font-size:12px}
.field__hint{color:var(--ink-3);font-size:12px}
/* min-width:0 обязателен: без него поле не сжимается внутри flex-контейнера (у input свой
   минимальный размер по содержимому) и продолжает распирать ячейку на узком окне. */
.invite-link{width:200px;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:var(--radius-input);
  padding:5px 8px;font-size:11px;background:var(--page);color:var(--ink-2)}

/* ---- Пустое состояние ---- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:60px 20px;color:var(--ink-2)}
.empty h3{color:var(--ink);margin:0 0 6px}

/* ---- Табы ---- */
.tabs{display:inline-flex;gap:4px;background:var(--page);border:1px solid var(--line);
  padding:3px;border-radius:10px;margin-right:10px}
.tab{padding:var(--sp-2) 12px;border-radius:7px;font-size:13px;font-weight:450;color:var(--ink-2)}
button.tab{background:none;border:0;cursor:pointer;font:inherit}
/* Кнопка «…» в ряду вкладок (15.09.2026, решение Юрия по #1311). Ряд задач разросся, когда к
   нему добавились «Регулярные»: место в ряду стоит дорого и достаётся тому, чем пользуются
   каждый день, а расписание заводят раз и потом почти не трогают. Меню на <details> — без
   скрипта (политика содержимого запрещает инлайновый JS) и работает с клавиатуры.
   Позиционируем от самого <details>, а не от ряда: у .tabs нет overflow:hidden, но опираться
   на это не стоит — плашки, обрезанные предком, мы уже чинили. */
.tabmore{position:relative}
.tabmore__btn{list-style:none;cursor:pointer;user-select:none;display:inline-block;line-height:1.2}
.tabmore__btn::-webkit-details-marker{display:none}
.tabmore--active>.tabmore__btn,.tabmore[open]>.tabmore__btn{background:var(--panel);color:var(--ink)}
.tabmore__pop{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:200px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:0 6px 20px rgba(15,20,27,.12)}
.tabmore__item{display:block;padding:7px 10px;border-radius:7px;font-size:13px;
  color:var(--ink-2);text-decoration:none;white-space:nowrap}
.tabmore__item:hover{background:var(--page);color:var(--ink)}
.tabmore__item.is-current{color:var(--ink);font-weight:600}
.task-tabs{margin-bottom:14px}
/* ---- История задачи (#3) ---- */
.activity{display:flex;flex-direction:column;gap:12px}
.act{display:flex;gap:10px;align-items:flex-start}
.act__body{min-width:0}
.act__line{font-size:13px;color:var(--ink-2);line-height:1.45}
.act__line b{color:var(--ink);font-weight:600}
.act__time{color:var(--ink-3);font-size:11.5px;margin-top:2px}
.tab--active{background:var(--canvas);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}

/* ---- Фильтры ---- */
/* #23 — переключатель досок (details/summary, без JS) */
.boardswitch{position:relative;display:inline-block}
.boardswitch__btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;max-width:260px}
.boardswitch__btn::-webkit-details-marker{display:none}
.boardswitch__cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boardswitch__caret{color:var(--ink-3);font-size:11px}
.boardswitch[open] .boardswitch__caret{transform:rotate(180deg)}
.boardswitch__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:60;min-width:240px;max-height:60vh;
  overflow:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px}
.boardswitch__item{display:block;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--ink);white-space:nowrap}
.boardswitch__item:hover{background:var(--page)}
.boardswitch__item.is-active{background:var(--blue-wash);color:var(--sapphire);font-weight:600}
.boardswitch__node{color:var(--ink-3);font-size:12px}
.boardswitch__manage{border-top:1px solid var(--line-2);margin-top:4px;color:var(--ink-2)}
.filterbar{margin-bottom:16px}
.filterbar__form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.filterbar select{max-width:100%}
.filterbar label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:450}
/* #1290 — здесь было ровно то, что теперь стоит базовым правилом для select (см. выше):
   вид списка в планке фильтров и был образцом, по которому его подняли. Второй источник правды
   для одного и того же вида не держим. */
/* #79 — переключатель «изменённые» (задачи с новыми комментариями) со счётчиком */
.filterbar .filter-chk{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-text);text-transform:none;
  letter-spacing:0;color:var(--ink-2);font-weight:450;cursor:pointer;padding:5px 9px;
  border-radius:var(--radius-input);border:1px solid transparent;white-space:nowrap}
.filterbar .filter-chk:hover{border-color:var(--line)}
.filterbar .filter-chk.is-active{border-color:var(--blue);color:var(--ink);background:var(--blue-wash)}
.filterbar .filter-chk input{margin:0;cursor:pointer}
.filter-cnt{font-size:11px;font-weight:700;background:var(--blue);color:#fff;
  border-radius:var(--radius-pill);padding:0 6px;min-width:18px;text-align:center}

/* ---- Канбан ---- */
/* #77 — переключатель этапов в «Мои задачи» */
.mygroup{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.mygroup__lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:450}
.mygroup__opt{font-size:12.5px;padding:5px 11px;border:1px solid var(--line);border-radius:var(--radius-pill);
  color:var(--ink-2);background:var(--panel)}
.mygroup__opt:hover{border-color:var(--line-strong)}
.mygroup__opt.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
/* «Мои задачи»: группировка по доскам (#12) */
.boardgroup{margin-bottom:22px}
.boardgroup__title{display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.boardgroup__count{font-size:12px;font-weight:600;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:0 8px}
/* #437 (06.08) — длинные колонки листаются ВНУТРИ себя (как Bitrix/amo): шапка стадии всегда
   видна, и карточку не приходится тащить через всю страницу к невидимому заголовку. */
.kanban{display:flex;gap:12px;align-items:stretch;overflow-x:auto;padding-bottom:4px;
  max-height:calc(100vh - var(--topbar-h) - 118px)}
/* #926 п.1 — столбец задач как в сделках: без рамки и фона, «лёгким и лаконичным». Рамка вокруг
   каждой колонки давала по экрану сетку тяжёлых полос — именно это и просили убрать. */
.kcol{display:flex;flex-direction:column;min-height:140px;flex:1 1 0;min-width:216px;gap:8px}
/* #943 — «цвет сделай более пастельный, сильно режет глаз, особенно фиолетовый». Заливка
   насыщенным цветом со светлым текстом для работы весь день не годится. Беру те же тинты, которыми
   красятся чипы стадий: светлый фон + тёмная буква того же тона. Заодно чип на карточке и плашка
   столбца становятся одного цвета — глаз перестаёт спорить сам с собой. Тинты заданы в обеих темах,
   поэтому ночью плашки не светятся. */
.kcol{--kc-bg:var(--t-slate-bg);--kc-fg:var(--t-slate-fg)}
.kcol--new{--kc-bg:var(--t-slate-bg);--kc-fg:var(--t-slate-fg)}
.kcol--in_progress{--kc-bg:var(--t-amber-bg);--kc-fg:var(--t-amber-fg)}
.kcol--review{--kc-bg:var(--t-violet-bg);--kc-fg:var(--t-violet-fg)}
.kcol--done{--kc-bg:var(--t-green-bg);--kc-fg:var(--t-green-fg)}
.kcol--deferred{--kc-bg:var(--t-zinc-bg);--kc-fg:var(--t-zinc-fg)}
.kcol--tech_cancel{--kc-bg:var(--t-red-bg);--kc-fg:var(--t-red-fg)}
/* #884 — ширина колонки от ОБЩЕГО числа колонок, а не от числа уже пришедших. Браузер рисует
   страницу по мере загрузки: при `flex:1 1 0` две пришедшие колонки растягивались на всю ширину
   (замер на экране 1857 px: 772 px вместо 248 px), и через секунду всё перестраивалось. Доля
   считается из ширины ряда минус промежутки; min ниже 216 px не пускает — дальше горизонтальная
   прокрутка, как и было задумано. На узком экране действует своё правило ниже (85 % ширины). */
@media (min-width:761px){
  /* Запас: личных стадий на «Моих задачах» можно завести и больше восьми — тогда точного
     правила ниже не найдётся, и без этой строки вернулось бы прежнее растягивание. */
  .kanban:where([class*="kanban--c"])>.kcol{flex:0 0 216px}   /* :where — чтобы запас НЕ перебивал точные правила ниже */
  .kanban--c1>.kcol{flex:0 0 100%}
  .kanban--c2>.kcol{flex:0 0 max(216px,calc((100% - 14px)/2))}
  .kanban--c3>.kcol{flex:0 0 max(216px,calc((100% - 28px)/3))}
  .kanban--c4>.kcol{flex:0 0 max(216px,calc((100% - 42px)/4))}
  .kanban--c5>.kcol{flex:0 0 max(216px,calc((100% - 56px)/5))}
  .kanban--c6>.kcol{flex:0 0 max(216px,calc((100% - 70px)/6))}
  .kanban--c7>.kcol{flex:0 0 max(216px,calc((100% - 84px)/7))}
  .kanban--c8>.kcol{flex:0 0 max(216px,calc((100% - 98px)/8))}
}
/* #926 — быстрая задача и быстрая сделка: кнопка под шапкой стадии.
   #939 — «нужно, чтобы когда мышка не наведена, отображался + вместо пустой строки»: в покое видно
   плюс без рамки (пустая строка читалась как поломка), при наведении на столбец появляются рамка и
   подпись. При открытой строке ввода подпись остаётся, чтобы поле не «висело» само по себе. */
/* #918 (правка 20.08) — своей строки фильтров у разделов нет: выбранное видно планкой в верхней
   строке рядом со сквозным поиском, настройки выезжают справа панелью поверх рабочей поверхности.
   Так экран не опускается и место не тратится. Класс .filterbar остаётся: им живут «Планы», «Гант»
   и «Доски». */
/* Планке нужна СВОЯ доля строки: при flex-basis 0 она получала лишь остаток (44 px по замеру) и
   чипы прятались все. С основой 160 px строка чуть переполняется, и лишнее забирается у сжимаемого
   поиска — правый блок с вкладками при этом не трогаем (flex:none), иначе вкладки поплыли бы. */
/* #1257 (замечание Юрия) — бар был «очень длинный» на глаз; основа сжата вдвое (280 -> 140px),
   значки и поля вокруг — тоже компактнее. Проверено фактом после сжатия: поле поиска не крошится
   там, где раньше уже проверяли давку (1280–1920px, сценарий «несколько чипов + длинный запрос») —
   строка при нехватке места всё равно переносится на свою (правило ниже), это осталось. */
.topfilters{display:flex;align-items:center;gap:5px;min-width:140px;flex:1 1 140px}
/* #1084 — на большинстве ноутбучных ширин (1280–1900px) в строке уже сидят: бургер, заголовок,
   сквозной поиск и правый блок вкладок (flex:none, не сжимается). До минимума бару просто не
   хватало места — поле поиска замерено сжималось до считанных пикселей (не увидеть на диффе
   HTML, только фактом в браузере). Раз в строке не хватает места — бар переносится на свою строку
   целиком, а не сжимается до нечитаемого. */
.topbar:has(.topfilters){flex-wrap:wrap}
/* #1084 — фильтр и поиск в одном пилюле-баре: «кнопки „Фильтры“ отдельно нет, всё в одном месте».
   Бар растягивается на всю долю строки, чипы и поле ввода делят место, значки — фиксированной
   ширины по краям. Фокус на всём баре (не только на поле): по требованию «нажатие на строку
   поиска выподает фильтры» это должно читаться как один орган управления, а не два соседних. */
.topfilters__bar{display:flex;align-items:center;gap:3px;width:100%;min-width:0;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--panel);
  padding:2px 3px 2px 8px;transition:border-color .12s}
.topfilters__bar:has(.topfilters__q:focus){border-color:var(--blue)}
/* Свободное место в верхней строке забирал `margin-left:auto` правого блока: авто-отступы съедают
   остаток ДО распределения flex-grow, поэтому планка чипов получала ноль пикселей (замерено).
   На страницах с планкой авто-отступ снимаем — место уходит ей, а правый блок и так встаёт к краю.
   Где планки нет, всё остаётся как было. */
.topbar:has(.topfilters) .topbar__right{margin-left:0}
.topfilters__chips{display:flex;align-items:center;gap:5px;min-width:0;flex:0 1 auto;
  overflow:hidden;white-space:nowrap}
.topfilters__chips .fchip[hidden]{display:none}
.topfilters__more{flex:none;border:1px dashed var(--line-strong);border-radius:var(--radius-pill);
  background:none;color:var(--ink-3);font:inherit;font-size:var(--fs-label);padding:1px 7px;
  cursor:pointer}
.topfilters__more:hover{border-color:var(--blue);color:var(--blue)}
/* Поле поиска забирает всё, что осталось от чипов: пусто в чипах — почти вся ширина бара полю. */
.topfilters__q{flex:1 1 50px;min-width:0;border:0;background:none;padding:3px 2px;font:inherit;
  font-size:13px;color:var(--ink)}
.topfilters__q::placeholder{color:var(--ink-3)}
.topfilters__q:focus{outline:none}
.topfilters__gear,.topfilters__go{flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:22px;height:22px;border:0;border-radius:50%;background:none;
  color:var(--ink-3);cursor:pointer}
.topfilters__gear:hover,.topfilters__go:hover{background:var(--panel-2);color:var(--blue)}
.topfilters__gear[aria-expanded="true"]{color:var(--blue);background:var(--t-blue-bg)}
/* На телефоне планка чипов уступает место названию раздела: сам бар «фильтр + поиск» остаётся
   (#1084 — поиск и значок настроек больше не отдельная кнопка, прятать нечего). */
@media (max-width:1100px){.topfilters__chips{display:none}}
/* Панель настроек уже карточки задачи: в ней шесть полей, шире не нужно. */
/* Специфичность двойная нарочно: правило .drawer идёт ниже в файле и при равной специфичности
   перебивало ширину (замер: панель выезжала на 600 px вместо 420). */
.drawer.drawer--filters{width:min(420px,94vw)}
.fdr .field{margin-bottom:var(--sp-3)}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:2px 6px 2px 9px;max-width:190px;
  border-radius:var(--radius-pill);background:var(--t-blue-bg);color:var(--t-blue-fg);
  font-size:var(--fs-label);white-space:nowrap}
/* Длинное имя обрезаем троеточием, а не выдавливаем им соседние чипы из строки. */
.fchip__v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.fchip b{font-weight:600}
.fchip__x{color:inherit;opacity:.65;text-decoration:none;font-size:15px;line-height:1}
.fchip__x:hover{opacity:1}

/* #935 — строка состава ленты «Входящих»: сколько дел, сколько переписки. */
.ibx__sum{margin:0 0 var(--sp-3);color:var(--ink-3);font-size:var(--fs-label)}
.ibx__sum b{color:var(--ink-2);font-weight:600}

/* #917 п.5 + #972 — план и факт стоят В ОДНОЙ строке карточки, план вводится как «часы:минуты»
   с подсказкой «--:--», а готовые значения всплывают плашкой поверх карточки (по умолчанию их не
   видно — так просили). */
.timerow{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
/* #1316 п.1 — поле факта: ширина как у поля плана, цифры моноширинные (иначе тиканье
   счётчика дёргает соседние элементы). Закрытое на правку — бледнее, чтобы разница
   «идёт / можно вписать» читалась без подсказки. */
.timefact__inp{width:72px;font-variant-numeric:tabular-nums;text-align:center}
.timefact__inp[readonly]{background:var(--page);color:var(--ink-2);cursor:default}
.timerow__cell{display:inline-flex;align-items:center;gap:6px}
.plan-hm{width:82px;text-align:center;font-variant-numeric:tabular-nums}
.form .plan-hm{width:110px}
.planhint{display:flex;flex-wrap:wrap;gap:4px;max-width:230px;padding:6px;z-index:80;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow),0 10px 24px rgba(0,0,0,.12)}
.planhint__chip{padding:2px 8px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--panel-2);color:var(--ink-2);font:inherit;font-size:var(--fs-label);cursor:pointer}
.planhint__chip:hover{border-color:var(--blue);color:var(--blue)}
.timefact{display:flex;align-items:center;gap:var(--sp-2)}
.timefact b{font-variant-numeric:tabular-nums;font-weight:600}
.timefact__btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:50%;background:var(--canvas);color:var(--ink-2);
  font-size:11px;line-height:1;cursor:pointer}
.timefact__btn:hover{border-color:var(--blue);color:var(--blue)}
.timefact__btn.is-run{background:var(--t-red-bg);border-color:var(--t-red-fg);color:var(--t-red-fg)}
.timefact__who{color:var(--ink-3);font-size:var(--fs-meta)}
.tcard__chip--run{color:var(--amber)}

/* #917 п.7 — вкладки формы задачи: «Задача» и «Регулярная задача». Подчёркивание, а не рамка:
   форма и без того плотная, а вкладки должны читаться как переключатель, а не как кнопки. */
.formtabs{display:flex;gap:var(--sp-4);margin:0 0 var(--sp-3);border-bottom:1px solid var(--line)}
.formtab{position:relative;padding:0 0 8px;border:0;background:none;color:var(--ink-3);font:inherit;
  font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.formtab:hover{color:var(--ink-2)}
.formtab.is-active{color:var(--blue);font-weight:600}
.formtab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--blue);border-radius:2px}

/* #934 — сортировка внутри столбца: значок в шапке, меню плашкой поверх страницы.
   На плашке стадии значок берёт её цвет текста, в сделках — обычный серый. */
.kcol__sort{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:0;border-radius:6px;background:none;color:inherit;
  opacity:.85;cursor:pointer}
.kcol__sort:hover{opacity:1}
.kcol__sort.is-active{opacity:1;background:rgba(255,255,255,.2)}
.kcol__head .kcol__add{margin-left:0}
.crm-colhd__sort{color:var(--ink-3);margin-left:6px;vertical-align:middle}
.crm-colhd__sort.is-active{background:var(--panel-2);color:var(--blue)}
.colsort__pop{z-index:80;min-width:232px;padding:5px;display:flex;flex-direction:column;gap:2px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
  box-shadow:var(--shadow),0 12px 28px rgba(0,0,0,.12)}
.colsort__item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:7px 9px;border:0;border-radius:7px;background:none;color:var(--ink-2);font:inherit;
  text-align:left;cursor:pointer}
.colsort__item:hover{background:var(--panel-2);color:var(--ink)}
.colsort__item.is-current{color:var(--ink)}
.colsort__tick{visibility:hidden;color:var(--blue)}
.colsort__item.is-current .colsort__tick{visibility:visible}

/* #926 — подсказка над пустой доской: заменила заглушку, которая прятала столбцы. */
.board-hint{margin:0 0 var(--sp-2);color:var(--ink-3);font-size:var(--fs-label)}
.kquick{padding:0 var(--sp-2) var(--sp-1)}
.kquick__btn{display:block;width:100%;padding:5px var(--sp-2);border:1px dashed transparent;
  border-radius:8px;background:none;color:var(--ink-3);font:inherit;font-size:var(--fs-label);
  text-align:center;cursor:pointer;transition:border-color .12s,color .12s}
.kquick__lbl{display:none}
.kcol:hover .kquick__btn,.crm-col:hover .kquick__btn,.kquick.is-open .kquick__btn,
.kquick__btn:focus-visible{border-color:var(--line-strong);text-align:left}
.kcol:hover .kquick__lbl,.crm-col:hover .kquick__lbl,.kquick.is-open .kquick__lbl,
.kquick__btn:focus-visible .kquick__lbl{display:inline}
.kquick__btn:hover{border-color:var(--blue);color:var(--blue)}
.kquick__form{display:flex;flex-direction:column;gap:2px}
.kquick__inp{width:100%;border:1px solid var(--blue);border-radius:8px;padding:6px var(--sp-2);
  font:inherit;font-size:var(--fs-text);background:var(--canvas);color:var(--ink)}
.kquick__note{margin:0}
.kcol__body{overflow-y:auto}
.kcol__head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;
  /* Плашка плоская, без градиента: у градиента правый край светлее, и контраст текста там падал
     до 3.9 (замерено). Плоский тинт держит одно значение по всей ширине. Тень убрана вместе с
     заливкой: на светлой плашке она читалась грязью. */
  color:var(--kc-fg);background:var(--kc-bg)}
/* #926 п.1 — название стадии на плашке, как в сделках: 11.5 px заглавными, 700. Цвет текста
   приходит из тинта стадии (#943). */
.kcol__title{font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcol__count{font-size:11.5px;font-weight:700;opacity:.96}
.kcol__add{margin-left:auto;color:inherit;opacity:.9;font-size:18px;line-height:1;padding:0 6px}
.kcol__add:hover{opacity:1}
.kcol__body{display:flex;flex-direction:column;gap:8px;padding:0 0 12px;min-height:60px;flex:1;
  border-radius:0 0 var(--radius) var(--radius);transition:background .12s}
.kcol__body.is-over{background:var(--blue-wash);outline:1.5px dashed var(--blue);outline-offset:-4px}

/* #128 — личный канбан «Мои задачи»: настраиваемые этапы */
.mykcol{border-top:3px solid var(--sc,var(--line-strong))}
.mykcol.is-dragging{opacity:.5}
/* min-height — чтобы колонки с одно- и двухстрочным названием начинались на одной высоте */
/* #926 п.1 — на «Моих задачах» цвет этапа выбирает человек, и плашка с произвольным цветом дала бы
   непредсказуемый контраст текста. Поэтому здесь остаётся прежний вид: цвет в названии и полоска
   сверху, а плашка главной доски сюда не распространяется. */
.mykcol__head{cursor:grab;gap:6px;align-items:flex-start;padding:10px 10px 8px;min-height:48px;
  background:none;color:inherit;box-shadow:none;border-radius:0}
/* 01.08 — название этапа: мельче, обычным регистром и в две строки, полное — в подсказке.
   Было 12px КАПСОМ с разрядкой в одну строку: на название оставалось ~80px (8–9 знаков), поэтому
   переименование «не отображалось» — видимая часть просто не менялась. */
.mykcol__head .kcol__title{color:var(--sc,var(--ink-2));min-width:0;flex:1 1 auto;
  font-size:var(--fs-label);text-transform:none;letter-spacing:0;line-height:1.3;white-space:normal;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.mykcol__grip{color:var(--ink-3);font-size:11px;line-height:1;cursor:grab;user-select:none;margin-top:3px}
.mykcol__tools{margin-left:auto;display:flex;align-items:center;gap:4px}
.mykcol__color{width:18px;height:18px;padding:0;border:1px solid var(--line);border-radius:5px;
  background:none;cursor:pointer;flex:none}
.mykcol__color::-webkit-color-swatch-wrapper{padding:0}
.mykcol__color::-webkit-color-swatch{border:none;border-radius:4px}
.mykcol__btn{color:var(--ink-3);font-size:12px;line-height:1;padding:2px 4px;border-radius:5px;
  background:none;border:0;cursor:pointer;flex:none}
.mykcol__btn:hover{color:var(--blue);background:var(--panel)}
.mykcol__btn.is-active{color:var(--blue)}
/* #176/#188 — «три точки»: цвет/переименовать/удалить убраны в выпадающее меню, шапка не переполняется */
.mykcol__menu{position:relative;display:inline-flex}
.mykcol__pop{position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:184px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
  box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.14));padding:5px;display:flex;flex-direction:column;gap:2px}
.mykcol__pop[hidden]{display:none}
.mykcol__popitem{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  text-align:left;padding:7px 9px;border:0;border-radius:7px;background:none;cursor:pointer;
  font-size:var(--fs-text);color:var(--ink-2);text-transform:none;letter-spacing:0}
.mykcol__popitem:hover{background:var(--blue-wash);color:var(--ink)}
/* #188 — попап воронки: поля в столбик, шире обычного меню; сама воронка «залита» при активном фильтре */
.mykcol__pop--filter{min-width:212px}
.mykcol__pop--filter .mykcol__popitem{flex-direction:column;align-items:stretch;gap:4px;cursor:default}
.mykcol__pop--filter .mykcol__popitem:hover{background:none;color:var(--ink-2)}
.mykcol__pop--filter [data-f-reset]{cursor:pointer;color:var(--blue);align-items:center}
.mykcol__pop--filter [data-f-reset]:hover{background:var(--blue-wash)}
.mykcol__btn.is-active{color:var(--blue);border-color:var(--blue)}
.mykcol__popitem--danger{color:var(--red)}
.mykcol__popitem--danger:hover{background:rgba(220,38,38,.1);color:var(--red)}
.mystage-add-col{flex:none;padding-top:12px}
.mystage-add{color:var(--ink-2);font-size:13px;border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:8px 14px;white-space:nowrap;background:var(--panel)}
.mystage-add:hover:not(:disabled){color:var(--blue);border-color:var(--blue)}
.mystage-add:disabled{opacity:.5;cursor:not-allowed}

/* #926 п.1 — карточка как в сделках: мягкая тень вместо тяжёлой рамки столбца вокруг. */
.tcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 11px;cursor:grab;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s,transform .15s}
.tcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow-card);transform:translateY(-1px)}
.tcard.is-dragging{opacity:.45}
.tcard__top{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.tcard__pos{font-size:var(--fs-meta);color:var(--ink-3);background:var(--page);border:1px solid var(--line);
  border-radius:6px;padding:1px 6px;font-weight:450;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:170px}
/* #163 — маркер подзадачи на карточке (видно принадлежность главной задаче) */
.tcard__sub{font-size:var(--fs-meta);color:var(--sapphire);background:var(--blue-wash);
  border:1px solid var(--blue-wash);border-radius:6px;padding:1px 6px;font-weight:450;white-space:nowrap}
.tcard__title{display:block;font-weight:450;color:var(--ink);letter-spacing:-.01em;font-size:var(--fs-accent)}
.tcard__title:hover{color:var(--blue)}
/* стадия «Готово» — приглушённая и зачёркнутая (#4) */
.tcard--done{opacity:.7}
.tcard--done .tcard__title,.tcard--canceled .tcard__title{text-decoration:line-through;color:var(--ink-3);font-weight:400}
.tcard--canceled{opacity:.7}
tr.is-done .table__title{color:var(--ink-3)}
tr.is-done .table__title{text-decoration:line-through;font-weight:400}
.tcard__meta{display:flex;align-items:center;gap:8px;margin-top:8px}
.tcard__due{font-size:var(--fs-label);color:var(--ink-3)}
.tcard__start{font-size:var(--fs-label);color:var(--ink-3);white-space:nowrap}  /* #2904 СРОК-2 — «с 12.10», пока дата начала в будущем */
.is-overdue{color:var(--red) !important;font-weight:600}

.prio{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:var(--silver)}
/* #899 — очерёдность 1–5 числом: «Это не приоритетность, а очерёдность». Цветная точка приоритета
   из интерфейса ушла, число читается сразу и не требует расшифровки цвета. */
/* #906 — выпуски обновлений: дата, заголовок, текст, пометка непрочитанного. */
.upd{margin-bottom:var(--sp-3)}
.upd__head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:2px}
.upd__date{font-size:var(--fs-meta);color:var(--ink-3)}
/* Цвет текста берём из фона страницы, а не белым: в тёмной теме янтарный светлее (#d9a441),
   и белые буквы на нём читались бы плохо. --canvas в светлой теме белый, в тёмной — почти чёрный. */
.upd__new{font-size:11px;font-weight:700;color:var(--canvas);background:var(--amber);
  padding:1px 7px;border-radius:var(--radius-pill)}
.upd--unread{border-left:3px solid var(--amber,#d97706)}
.upd__title{margin:0 0 var(--sp-2)}
.upd__body{color:var(--ink-2);font-size:var(--fs-accent)}
.upd__acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.upd--draft{border-style:dashed}
.upd__compose{margin-bottom:var(--sp-3)}
.upd__compose>summary{cursor:pointer;font-weight:450}
.upd__form{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.upd__pick{display:flex;flex-direction:column;gap:var(--sp-1);margin:var(--sp-2) 0 var(--sp-3);
  padding:var(--sp-2) var(--sp-3);background:var(--panel-2);border-radius:var(--radius-sm)}
.upd__pick-h{font-size:var(--fs-meta);font-weight:450;color:var(--ink-3);margin-bottom:2px}

/* #917 п.4 — цвет очерёдности: 1–3 тёплые (раньше остальных), 4–6 янтарные, 7–8 зелёные,
   9–10 синие (позже). Синий у нас цвет действия, поэтому им красим САМОЕ ПОЗДНЕЕ, а не срочное:
   иначе кнопки и «горящая» очерёдность спорили бы за внимание. Оттенки заданы явно, а не
   переменными темы: это шкала, её ступени должны стоять на месте в обеих темах, а читаемость
   держит постоянный белый текст. */

/* #933 — «строка названия длинная, в конце кнопка выбора очерёдности». Ряд из одиннадцати чипов
   съедал полстроки: в панели 600 px на название оставалось узкое поле. Теперь два блока —
   название во всю ширину и узкий блок очерёдности справа, у каждого своя подпись.
   #2668 — возвращено вместе с формой создания задачи (её убрала ПАНЕЛЬ-5). */
.titlerow{display:flex;gap:var(--sp-3);align-items:flex-start;flex-wrap:nowrap}
.titlerow__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.titlerow__side{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--sp-1)}
.titlerow__main>input[type="text"]{width:100%}
/* На телефоне блок очерёдности уходит под название: иначе поле названия сжималось до 97 px
   (замерено, а не на глаз). */
@media (max-width:520px){
  .titlerow{flex-wrap:wrap}
  .titlerow__main{flex:1 1 100%}
}
/* Кнопка очерёдности: показывает выбранную ступень цветным квадратиком, пустую — точкой. */
.ordfield{position:relative}
.ordfield__native{display:none}
.ordfield__btn{display:inline-flex;align-items:center;gap:var(--sp-1);height:38px;min-width:84px;
  padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  background:var(--canvas);color:var(--ink-2);font:inherit;cursor:pointer}
.ordfield__btn:hover{border-color:var(--ink-3)}
.ordfield__btn:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.ordfield__cap{color:var(--ink-3);font-size:var(--fs-label)}
.ordfield__caret{margin-left:auto;display:inline-flex;color:var(--ink-3)}
/* Плашка выбора — «список квадратиком, как на канбане»: «любая» строкой сверху, дальше сетка по
   четыре в ряд, как на приложенном образце. Живёт в <body> (floatpop.js), поэтому её не обрезает
   ни столбец канбана, ни выезжающая панель (#936). */
.ordpop{padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow),0 12px 28px rgba(0,0,0,.12);z-index:80}
.ordpop__any{display:block;width:100%;margin-bottom:7px;padding:4px 6px;border:1px solid var(--line);
  border-radius:7px;background:var(--panel-2);color:var(--ink-2);font:inherit;
  font-size:var(--fs-label);cursor:pointer}
.ordpop__any.is-current{border-color:var(--blue);color:var(--blue)}
.ordpop__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ordpop__one{padding:0;border:0;background:none;cursor:pointer;display:inline-flex}
.ordpop__one .ordchip{width:34px;height:30px;border-radius:8px}
.ordpop__one.is-current .ordchip{box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--blue)}
/* #1087 — «+» вместо аватара, когда у карточки нет исполнителя: тот же размер, что у .ava, и то
   же место в правом углу (.tcard__meta толкает последний элемент margin-left:auto). */
.tcard__assign{width:24px;height:24px;border-radius:50%;flex:none;display:inline-flex;
  align-items:center;justify-content:center;margin-left:auto;cursor:pointer;
  border:1px dashed var(--line-strong);background:var(--panel-2);color:var(--ink-3);
  font-size:15px;line-height:1;font-weight:600}
.tcard__assign:hover{border-color:var(--blue);color:var(--blue)}
/* Плашка выбора исполнителя — строка поиска + список, тот же приём, что .ordpop (floatpop.js). */
.assignpop{padding:8px;width:220px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow),0 12px 28px rgba(0,0,0,.12);z-index:80}
.assignpop__q{width:100%;box-sizing:border-box;margin-bottom:6px;padding:6px 8px;
  border:1px solid var(--line-strong);border-radius:7px;background:var(--canvas);color:var(--ink);
  font:inherit;outline:none}
.assignpop__list{display:flex;flex-direction:column;max-height:calc(6 * 34px);overflow:auto}
.assignpop__row{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:5px 6px;
  border:0;background:none;color:var(--ink);font:inherit;text-align:left;border-radius:7px;
  cursor:pointer}
.assignpop__row:hover{background:var(--panel-2)}
.assignpop__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assignpop__none{margin:6px 2px 0;font-size:var(--fs-label);color:var(--ink-3)}
.ordchip{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 var(--sp-1);
  border-radius:7px;border:1px solid var(--line-strong);background:var(--panel-2);
  color:var(--ink-2);font-size:var(--fs-label);font-weight:700;line-height:1}
.ordnum--none{background:var(--panel-2);border-color:var(--line-strong);color:var(--ink-3)}
button.ordnum{cursor:pointer;font:inherit;font-size:11px;font-weight:700;line-height:1}
/* #938 — «цифра 10 в очереди на канбане не по центру». Причина: у значка была жёсткая ширина
   18 px, а «10» шире, и текст вылезал вправо. Ширина теперь по содержимому, цифры — табличные
   (одинаковой ширины), поэтому «1» и «10» стоят ровно. */
.ordnum{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;
  padding:0 4px;flex:none;border-radius:6px;background:var(--panel-2);
  border:1px solid var(--line-strong);color:var(--ink-2);font-size:11px;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums}
/* #933 — «цвета должны быть пастельных тонов, не яркими». Прежняя шкала была залита насыщенным
   цветом (алый, оранжевый, зелёный) и на доске кричала громче самих задач. Пастель хранится
   токенами: у ночной темы свои значения, иначе светлая пастель на тёмном фоне светится.
   Направление шкалы прежнее: 1 — раньше остальных (тёплое), 10 — позже (холодное).
   Цвета ступеней стоят ПОСЛЕ структурных правил: специфичность одинаковая, и при обратном
   порядке серый фон чипа перебивал бы цвет шкалы (нашлось замером в браузере). */
.ordnum--1{background:var(--o1-bg);border-color:var(--o1-bg);color:var(--o1-fg)}
.ordnum--2{background:var(--o2-bg);border-color:var(--o2-bg);color:var(--o2-fg)}
.ordnum--3{background:var(--o3-bg);border-color:var(--o3-bg);color:var(--o3-fg)}
.ordnum--4{background:var(--o4-bg);border-color:var(--o4-bg);color:var(--o4-fg)}
.ordnum--5{background:var(--o5-bg);border-color:var(--o5-bg);color:var(--o5-fg)}
.ordnum--6{background:var(--o6-bg);border-color:var(--o6-bg);color:var(--o6-fg)}
.ordnum--7{background:var(--o7-bg);border-color:var(--o7-bg);color:var(--o7-fg)}
.ordnum--8{background:var(--o8-bg);border-color:var(--o8-bg);color:var(--o8-fg)}
.ordnum--9{background:var(--o9-bg);border-color:var(--o9-bg);color:var(--o9-fg)}
.ordnum--10{background:var(--o10-bg);border-color:var(--o10-bg);color:var(--o10-fg)}
.prio--low{background:var(--line-strong)}.prio--high{background:var(--amber)}.prio--urgent{background:var(--red)}

.ava{width:24px;height:24px;border-radius:50%;background:var(--blue-wash);color:var(--sapphire);
  font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ava-img{object-fit:cover}
.tcard__meta .ava,.tcard__meta .ava-img{margin-left:auto}
.brand__logo{width:34px;height:34px;border-radius:9px;object-fit:contain;background:var(--panel);
  border:1px solid var(--line);flex:none}

.chip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--radius-pill);
  background:var(--t-slate-bg);color:var(--t-slate-fg);border:1px solid transparent}
.chip--link{background:var(--t-blue-bg);color:var(--t-blue-fg);text-decoration:none}
/* ПЛАН-2 (#1244) — карточка/блок недели по времени тесная, чипу статуса нужен размер поменьше
   (тот же 10px, что раньше писали инлайн в plan.html/list.html — здесь классом, не style=). */
.chip--sm{font-size:10px}
/* #667 — главная задача и сделка выделяются среди связей: они привязки ПО СУЩНОСТИ,
   а не добавленные руками ссылки. Цвет берётся из семантических тинтов, своих не заводим. */
.chip--new{background:var(--t-slate-bg);color:var(--t-slate-fg)}
.chip--in_progress{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.chip--review{background:var(--t-violet-bg);color:var(--t-violet-fg)}
.chip--done{background:var(--t-green-bg);color:var(--t-green-fg)}
.chip--deferred{background:var(--t-zinc-bg);color:var(--t-zinc-fg)}
.chip--tech_cancel{background:var(--t-red-bg);color:var(--t-red-fg)}
.chip--repeat{background:var(--t-blue-bg);color:var(--t-blue-fg)}
/* #86 — чип дополнительной доски + селект добавления + текущий родитель */
.chip--board{background:var(--t-blue-bg);color:var(--t-blue-fg);display:inline-flex;align-items:center;gap:4px}
.chip--ai{background:var(--t-violet-bg);color:var(--t-violet-fg);border-color:rgba(91,66,228,.25);letter-spacing:.03em}
/* #640 — оплата работы AI-сотрудника: проба идёт / оплачен тарифом / проба закончилась */
.chip--probe{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.chip--ok{background:var(--t-green-bg);color:var(--t-green-fg)}
.chip--danger{background:var(--t-red-bg);color:var(--t-red-fg)}
/* #1162 — ряд быстрых пресетов фильтра (Гант + список/доска, tasks/_rolechips.html) */
.rolechips{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3)}
/* #772 — --btn-primary-fg (не --sapphire/--blue-wash): та светлая пара визуально совпадает с
   .chip--link (--t-blue-bg/--t-blue-fg — те же hex), «активный» пресет не читался бы вовсе. */
.chip--active{background:var(--blue);color:var(--btn-primary-fg);font-weight:600}
.board-add{border:1px dashed var(--line-strong);border-radius:var(--radius-input);padding:4px 8px;
  background:var(--canvas);color:var(--ink-2);font:inherit;font-size:12px;cursor:pointer}
.parent-cur{display:flex;align-items:center;gap:6px;font-size:13px;flex-wrap:wrap}

/* ---- Таблицы ---- */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-accent)}
.table th{text-align:left;padding:12px;color:var(--ink-2);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);background:var(--panel-2)}
.table td{padding:12px;border-bottom:1px solid var(--line-2)}
.table--clickable tbody tr{cursor:pointer}
.table--clickable tbody tr:hover{background:var(--page)}
.table__title{font-weight:450;color:var(--ink)}
.table__link{color:inherit;text-decoration:none}
.table__link:hover{color:var(--blue)}
/* #1115 — инлайн-правка ячейки списка задач (tasks_list_inline.js): тот же приём, что у карточки
   сделки (.crm-fld .v[data-dq], Д3.2) — пунктир снизу подсказывает кликабельность значения. */
.table [data-il]{cursor:pointer;border-bottom:1px dashed transparent}
.table [data-il]:hover{border-bottom-color:var(--line-strong)}
.table [data-il].is-editing{border-bottom-color:transparent}

/* #1159/#1170 — ширина столбцов таблицы (colresize.js): colgroup держит ширину только при
   table-layout:fixed (иначе браузер её игнорирует при разном контенте). Риск — заголовки/значения
   в узких столбцах перестают раздвигать колонку и обрезаются: митигация — ellipsis+nowrap на
   td/th ВСЕХ столбцов, КРОМЕ обязательного «Задача»/«Сделка» ([data-resize-key="title"] — там
   бывают чипы/переносы, обрезать нельзя, см. list-columns-architecture.md).
   БЕЗ width:100% нарочно — проверено вживую: с ним браузер (спека CSS2.1 §17.5.2) добавляет
   табличную ширину ДО 100% контейнера и распределяет остаток по столбцам поверх заданных px —
   перетянутая колонка визуально «плывёт» шире, чем сохранили. colresize.js сам держит
   table.style.width РОВНО суммой <col> — это и фиксирует размер, без стороннего правила здесь. */
[data-resizable]{table-layout:fixed}
[data-resizable] th,[data-resizable] td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0}
[data-resizable] [data-resize-key="title"]{overflow:visible;text-overflow:clip;white-space:normal}
/* #1264 — чекбокс/шестерёнка обрезались общим overflow:hidden выше (28px ширины ячейки при 28px
   паддинга не оставляют места содержимому); переопределение точечное, классами — общее правило для
   остальных столбцов не трогаем (иначе вернётся перенос текста в узких колонках данных). */
/* #2792 — к ним же относится столбец флажков Диска (.dsk__pickcell): его в этом списке не было, и
   флажок (13px) в ячейке с внутренней шириной 10px (34 − поля 12+12) обрезался общим overflow:hidden
   с text-overflow:ellipsis — рядом с квадратиком выбора рисовалось «…» (Юрий 03.10.2026: «три
   точки… вводят в заблуждение»). У служебных столбцов нет текста, обрезать нечего: overflow:visible
   И text-overflow:clip — многоточие не нарисуется, даже если overflow когда-нибудь вернётся.
   Поля 4px, обещанные правилом «.bulk-cell,.colpick-cell» в блоке 17.09 ниже, проигрывали
   «.table th/td{padding:12px}» по специфичности и не действовали вовсе: внутри 28px-ячейки оставалось
   4px, флажок торчал вправо от центра. Здесь селектор весит больше — поля наконец применяются, а
   text-align:center нужен и шапке: «.table th{text-align:left}» перебивал центровку, и флажок в шапке
   стоял левее флажков строк. */
[data-resizable] .bulk-cell,[data-resizable] .colpick-cell,[data-resizable] .dsk__pickcell{
  overflow:visible;text-overflow:clip;padding-left:var(--sp-1);padding-right:var(--sp-1);
  text-align:center}
[data-resizable] th[data-resize-key]{position:relative}
/* #1264 — в покое ручка теперь не invisible hit-area, а тонкая (1px, по центру 6px-зоны захвата)
   подсвеченная линия-разделитель: сразу видно, за что тянуть, не только при наведении. Зона
   захвата (6px) не меняется — линия рисуется градиентом внутри нее же, не отдельным элементом.
   :hover/:active — как раньше, сплошной синий на всю зону (это переопределение background целиком
   заменяет градиент, ничего складывать не нужно). */
.colresize__handle{position:absolute;top:0;right:0;bottom:0;width:6px;cursor:col-resize;z-index:2;
  background:linear-gradient(var(--line),var(--line)) no-repeat center/1px 100%;
  transition:background .12s}
.colresize__handle:hover,.colresize__handle:active{background:var(--blue)}

/* ---- Key-value ---- */
.kv{margin-top:16px;border-top:1px solid var(--line);padding-top:6px}
.kv__row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:1px solid var(--line-2);font-size:13.5px}
.kv__k{color:var(--ink-3)}

/* ---- Страницы входа ---- */
.auth-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--page)}
.auth-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:28px;position:relative}
.auth-brand{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:18px}
.auth-title{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
.auth-sub{color:var(--ink-2);font-size:13px;margin:0 0 18px}
.auth-lead{color:var(--ink-2);font-size:14px;line-height:1.5;margin:8px 0 0}
.auth-alt{margin-top:16px;text-align:center;color:var(--ink-2);font-size:13px}
.auth-alt a{color:var(--blue);font-weight:450}
.auth-card .form{max-width:none}
/* #1150 — на телефоне это поле 14px (font:inherit из .form input) держало шрифт ниже 16px:
   порог, с которого iOS Safari молча зумит страницу при фокусе поля. На коротком email/пароле
   это терпимо, но у кода — числовая клавиатура вдвое выше буквенной, и после зума кнопка «Войти»
   уезжала за край экрана: человек вводил код и не находил, чем его отправить. */
.auth-card .form input{font-size:16px}
.auth-toggle{position:absolute;top:20px;right:20px}

/* Гасим анимацию при смене раскладки (ресайз через 960px), чтобы панель не «выезжала» */
.no-anim .sidebar,.no-anim .scrim{transition:none!important}
@media (max-width:960px){
  /* Полноценное off-canvas меню: полная боковая панель выезжает слева поверх контента.
     visibility:hidden в закрытом состоянии убирает панель из порядка табуляции и из
     дерева доступности (иначе скрытые за экраном ссылки остаются фокусируемыми). */
  .navtoggle{display:inline-flex}
  .sidebar{position:fixed;left:0;top:0;height:100dvh;width:min(280px,82vw);
    transform:translateX(-100%);visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s;z-index:60;
    box-shadow:var(--shadow);will-change:transform}
  body.nav-open .sidebar{transform:translateX(0);visibility:visible;
    transition:transform .25s ease, visibility 0s}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;
    opacity:0;visibility:hidden;transition:opacity .25s, visibility 0s linear .25s}
  body.nav-open .scrim{opacity:1;visibility:visible;transition:opacity .25s, visibility 0s}
  body.nav-open{overflow:hidden}
  /* планшетная полоса: топбар переносит правые контролы, а не режет их (сайдбар уже off-canvas) */
  .topbar{flex-wrap:wrap;gap:10px 12px}
  .topbar__right{flex-wrap:wrap}
  /* №1134 — рядом с заголовком стоит бургер (38 px + зазор 12): заголовок не шире остатка строки,
     иначе длинное название уходило на свою строку, а бургер оставался один на первой. */
  .topbar__head{max-width:calc(100% - 50px)}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){
  .sidebar,.scrim{transition:none}
}
@media (max-width:820px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .kanban{grid-template-columns:none;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;gap:12px}
  .kcol{flex:0 0 85%;scroll-snap-align:start}
}
@media (max-width:640px){
  .topbar{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .topbar__right{flex-wrap:wrap;width:100%;margin-left:0;justify-content:flex-start}
  .tabs{margin-right:0}
  .content{padding:16px}
  .grid-cards{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
  /* #585 — на телефоне отступ карточки уменьшаем: 20px с двух сторон съедали десятую часть экрана */
  /* #585 — на телефоне отдельные значения больше не нужны: платформенный вариант
     «Плотный» уже плотнее прежних мобильных, и эти строки его РАЗДУВАЛИ. */
  :root{--card-pad:var(--sp-3); --card-gap:var(--sp-2)}
}

/* ---- Карточка задачи (воркспейс) ---- */
.task-layout{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.task-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.task-aside{position:sticky;top:calc(var(--topbar-h) + 16px)}
.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.block-head h3{margin:0;font-size:15px;font-weight:450}
.muted{color:var(--ink-3);font-size:12.5px}

.statusflow{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.statusflow__step{font:inherit;font-size:12.5px;font-weight:450;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--canvas);color:var(--ink-2);
  border-radius:var(--radius-pill);padding:5px 12px}
.statusflow__step:hover{border-color:var(--blue);color:var(--ink)}
.statusflow__step.is-current{background:var(--blue);border-color:var(--blue);color:#fff}
.statusflow__hint{margin:8px 0 0;font-size:12px;color:var(--ink-3)}
/* #24 — вложить/вынести задачу */
.task-nest{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);display:flex;
  flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.task-nest__label a{color:var(--blue)}
.task-nest__form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* #1290 — вид берётся из базового правила select; здесь остаётся только своя ширина. */
.task-nest__form select{max-width:320px}

.subtasks{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.subtask{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong);
  background:var(--canvas);color:transparent;cursor:pointer;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;line-height:1}
.check--done{background:var(--green);border-color:var(--green);color:#fff}
.subtask__title{flex:1;color:var(--ink);font-size:var(--fs-accent)}
.subtask__title.is-done{color:var(--ink-3);text-decoration:line-through}
.subtask__due{font-size:11px;color:var(--ink-3);white-space:nowrap}
.subtask .ava{width:22px;height:22px;font-size:10px}
/* #32 — компактные inline-контролы подзадачи */
.subtask__assignee,.subtask__duein{border:1px solid var(--line-2);border-radius:8px;background:var(--canvas);
  color:var(--ink-2);font:inherit;font-size:12px;padding:3px 6px;flex:none}
.subtask__assignee{max-width:150px}
.subtask__assignee:hover,.subtask__duein:hover{border-color:var(--line-strong)}
.subtask__assignee:focus,.subtask__duein:focus{outline:none;border-color:var(--blue);color:var(--ink)}
.subtask__duein.is-overdue{color:var(--t-red-fg,#dc2626);border-color:var(--t-red-fg,#dc2626)}
.subtask-add{flex-wrap:wrap}
.subtask-add select,.subtask-add input[type=date]{border:1px solid var(--line-strong);
  border-radius:var(--radius-input);padding:8px 10px;font:inherit;background:var(--canvas);color:var(--ink)}
.subtask-add select{min-width:0;max-width:200px;flex:0 1 auto}
.subtask-add input[name=title]{flex:1 1 100%}

.inline-add{display:flex;gap:8px}
.inline-add input{flex:1;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:8px 11px;font:inherit;background:var(--canvas);color:var(--ink)}
.inline-add input:focus{outline:none;border-color:var(--blue)}

.comments{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.comment{display:flex;gap:10px}
.comment .ava{margin:0}
.comment__body{flex:1;min-width:0;background:var(--page);border:1px solid var(--line-strong);border-radius:12px;padding:8px 12px}
.comment__meta{font-size:12px;color:var(--ink-3);margin-bottom:2px}
.comment__meta b{color:var(--ink);font-weight:600}
.comment-add{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.comment-add textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:9px 11px;font:inherit;background:var(--canvas);color:var(--ink);resize:vertical}
.comment-add textarea:focus{outline:none;border-color:var(--blue)}
.comment__actions{display:inline-flex;gap:10px;margin-left:8px}
.comment__actions form{display:inline}
.linklike{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px;color:var(--blue)}
.linklike:hover{text-decoration:underline}
.linklike--danger{color:var(--t-red-fg,#dc2626)}
.comment-edit{margin-top:6px}
.comment-edit textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:9px 11px;font:inherit;background:var(--canvas);color:var(--ink);resize:vertical}
.comment-edit textarea:focus{outline:none;border-color:var(--blue)}
.comment-edit__btns{display:flex;gap:8px;margin-top:6px}
.comment__text a{color:var(--blue)}
/* #58 — эмодзи-реакции на комментарии */
.reactions{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.react-chip{font-size:12px;line-height:1.4;padding:2px 8px;border:1px solid var(--line);
  border-radius:var(--radius-pill);background:var(--panel);color:var(--ink-2);cursor:pointer}
.react-chip:hover{border-color:var(--line-strong)}
.react-chip--mine{background:var(--blue-wash);border-color:var(--blue);color:var(--ink)}
.react-add{position:relative;display:inline-flex;margin-left:auto}  /* значок ☺+ — в правый край нижней строки (#58) */
.react-btn{font-size:13px;line-height:1.4;padding:2px 7px;border:1px solid transparent;
  border-radius:var(--radius-pill);background:none;color:var(--ink-3);cursor:pointer;opacity:.5;transition:opacity .12s}
.comment:hover .react-btn,.react-add .react-btn:focus{opacity:1}
.react-btn sup{font-size:9px}
.react-pop{position:absolute;bottom:26px;left:0;display:flex;gap:2px;padding:5px 6px;background:var(--panel);
  border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);z-index:40}
.react-pop[hidden]{display:none}
.react-opt{font-size:17px;line-height:1;padding:3px 4px;border:0;background:none;cursor:pointer;border-radius:6px}
.react-opt:hover{background:var(--blue-wash)}

/* ---- Чат-лента задачи (карточка v2, 1b) ---- */
.chat{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow-y:auto;padding:2px 2px 4px}
.chat__msg{display:flex;gap:9px;align-items:flex-start;max-width:82%}
.chat__msg--mine{margin-left:auto;flex-direction:row-reverse}
.chat__ava{flex:0 0 auto;margin:0}
.chat__col{min-width:0;display:flex;flex-direction:column}
.chat__msg--mine .chat__col{align-items:flex-end}
.chat__meta{font-size:var(--fs-label);color:var(--ink-3);margin:0 4px 3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chat__meta b{color:var(--ink);font-weight:600}
.chat__ed{color:var(--ink-3)}
.chat__bubble{background:var(--page);border:1px solid var(--line-strong);border-radius:14px;padding:8px 12px;min-width:0;max-width:100%}
.chat__msg:not(.chat__msg--mine) .chat__bubble{border-top-left-radius:5px}
.chat__msg--mine .chat__bubble{background:var(--blue-wash);border-color:var(--blue);border-top-right-radius:5px}
.chat__bubble .comment__text{overflow-wrap:anywhere}
.chat__bubble pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.chat__bubble:hover .react-btn,.chat__msg:hover .react-btn{opacity:1}
.chat__editform{margin-top:6px;width:100%}
/* min-width даёт полю правки рабочую ширину на широком экране, но 100% не даёт вылезти за узкий пузырь */
.chat__msg--mine .chat__editform{min-width:min(340px,100%)}
.chat__empty{text-align:center;padding:20px 0;margin:0}
/* композер-строка в стиле мессенджера: ввод растёт слева, круглая «отправить» справа, тулбар — по фокусу */
/* #307 — в выезжающей панели поле ввода ЛИПНЕТ к низу: раньше оно жило в общем потоке под лентой
   чата и при прокрутке уезжало за нижний край, а при клике редактор дополнительно вырастал на высоту
   панели форматирования (замер: 53 → 92 px) и «уходил вниз» — было видно половину. Теперь поле
   всегда целиком на месте, независимо от прокрутки и роста редактора. */
.drawer__body .panel>.chat__compose{position:sticky;bottom:0;z-index:3;background:var(--panel);
  margin:0;padding:10px 0 8px;box-shadow:0 -10px 14px -10px rgba(0,0,0,.2)}
.drawer__body{scroll-padding-bottom:120px}
.panel--nochat>.chat__compose{display:none}   /* #307 — на вкладке «История» поле ввода не нужно */
.chat__compose{display:flex;flex-direction:row;align-items:flex-end;gap:8px;margin-top:12px;
  border-top:1px solid var(--line-2);padding-top:12px}
.chat__compose .rt{flex:1;min-width:0;border-radius:18px}
.chat__compose textarea{flex:1;min-width:0}                    /* фолбэк, если richtext не поднялся */
.chat__compose .rt__bar{display:none}                          /* панель форматирования скрыта… */
.chat__compose .rt:focus-within .rt__bar{display:flex}         /* …и появляется при наборе */
.chat__compose .rt__ed{min-height:22px;max-height:140px;padding:9px 13px}
/* Замечание Юрия 18.09.2026 по панели BOSai: «строку ввода в самый низ, сделай её более
   растянутой и более узкой — чтобы была похожа на наш чат».

   Две отдельные причины, обе здесь:

   1) ЛЕНТА НЕ РОСЛА. `.chat` ограничен 52vh и не растягивался, а правило-освободитель было
      написано только под вкладку «Мессенджеров» (.taskchats .chat). В выезжающей панели ленты
      такого предка нет — поэтому поле ввода зависало посреди панели, а под ним оставалось
      полпанели пустоты (видно на скриншоте). Лента должна забирать свободную высоту, тогда
      композитор сам оказывается внизу — без position:sticky и прочих подпорок.

   2) ПОЛЕ БЫЛО УЖЕ КНОПОК. В ряду 380-пиксельной панели на текст оставалось около 220px:
      скрепка, «файл с Диска» и круглая «отправить» съедали остальное. Поле встаёт на всю
      ширину первой строкой, кнопки уходят под него — та же раскладка, что в чате, которым
      Юрий пользуется каждый день. Выше (на вкладке «Мессенджеров») ряд остаётся прежним:
      там ширина не в дефиците. */
.aipanel .chat{max-height:none;flex:1;min-height:0}
/* position:relative — точка отсчёта для меню «+»: кнопка стоит ПОД полем ввода, и всплывающий
   над самой кнопкой список накрыл бы это поле (поймано на стенде 18.09.2026). Отсчёт от всего
   композитора поднимает список над ним — над лентой, как в любом чате. */
.aipanel .chat__compose{position:relative;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);
  padding:var(--sp-2);border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.aipanel .chat__compose:focus-within{border-color:var(--blue)}
.aipanel .chat__compose .rt{flex:1 0 100%;border:0;border-radius:0;background:transparent}
.aipanel .chat__compose .rt__ed{min-height:20px;max-height:120px;padding:2px 4px}
.aipanel .chat__compose textarea{flex:1 0 100%}   /* фолбэк, если richtext не поднялся */
.aipanel .chat__compose .disk__fbtn{width:30px;height:30px}
.aipanel .chat-send{width:32px;height:32px;margin-left:auto}
.aipanel .chat-send svg{width:16px;height:16px}
.chat-send{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,transform .08s}
.chat-send:hover{background:var(--sapphire)}
.chat-send:active{transform:scale(.94)}
.chat-send svg{width:19px;height:19px;margin-left:-2px}
/* #1148 БОСAI-1 — заметка вместо поля ввода (нет прав/бюджет исчерпан), тот же отступ,
   что даёт .chat__compose своим детям, только без формы */
.chat__compose-note{padding:var(--sp-2) var(--sp-3);margin:0}
/* кнопка «новый диалог» над пустым списком тредов BOSAi */
.bosai-newthread{padding:var(--sp-2) var(--sp-3)}
/* #1148 БОСAI-1 — журнал BOSAi (templates/bosai_calls.html) переиспользует .arun__* из
   agent_runs.html (инлайн-<style> там, #894 держит блокам <style> жёсткий предел — не плодим
   второй такой же блок ради идентичных правил). .arun--ok/--blocked — новые статусы,
   которых нет в журнале прогонов агента (там running/stopped, здесь ok/error/blocked). */
.arun__filter{gap:14px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.arun__lbl{font-size:12.5px}
.arun__total{font-size:12.5px;margin-left:auto}
/* №1137 круг 2 — статус стоит на чипе (.chip, фон --t-slate-bg): цвет из парных --t-*-fg, а не голые
   --blue/--red — у голых в тёмной теме 4,36, в светлой у --red 4,23 при норме 4,5. */
.arun--ok{color:var(--t-blue-fg)}
.arun--error{color:var(--t-red-fg)}
.arun--blocked{color:var(--amber)}

/* ---- Раздел «Чаты задач» (мессенджер, инкремент 2) ---- */
.tab--soon{color:var(--ink-3);cursor:default;display:inline-flex;align-items:center;gap:6px}
.taskchats{display:grid;grid-template-columns:326px 1fr;gap:14px;align-items:stretch;
  height:calc(100dvh - var(--topbar-h) - 120px);min-height:440px}
.taskchats__rail{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--canvas);overflow:hidden}
.taskchats__search{padding:10px 10px 8px;border-bottom:1px solid var(--line-2)}
.taskchats__search .ppl-search{width:100%}
.taskchats__list{flex:1;min-height:0;overflow-y:auto;padding:6px}
.taskchats__none{padding:26px 14px;line-height:1.5}
.chatrow{align-items:flex-start}
.chatrow__ava{flex:0 0 auto;margin-top:1px}
.chatrow__top{display:flex;align-items:baseline;gap:8px}
.chatrow__title{flex:1;min-width:0;font-size:var(--fs-accent);font-weight:450;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatrow .ibx__time{flex:0 0 auto;margin-top:0}
.chatrow__preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.chatrow__badge{flex:0 0 auto;align-self:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--blue);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
/* МЕЕТ-6 (01-SPEC-step2.md п.3) — значок «есть запись» у прошедшей встречи в рельсе
   «Видеовстречи»: без подписи (title — подсказка), поэтому только цвет и отступ, шрифт не участвует. */
.chatrow__micons{display:inline-flex;align-items:center;gap:var(--sp-1);margin-left:var(--sp-1)}
.chatrow__micon{display:inline-flex;color:var(--ink-3)}
.ibx--active,.ibx--active:hover{background:var(--page)}
.ibx--active.ibx--unread{background:var(--blue-wash)}
.taskchats__pane{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--canvas);overflow:hidden}
.taskchats__empty{margin:auto;padding:40px;text-align:center}
.chatpane{display:flex;flex-direction:column;min-height:0;height:100%}
.taskchats__head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2);flex:0 0 auto}
.taskchats__title{font-size:15px;font-weight:450;color:var(--ink);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.taskchats__title:hover{color:var(--blue)}
.taskchats__ppl{display:flex;align-items:center;margin-left:4px}
.taskchats__ppl>span{margin-left:-6px}
.taskchats__ppl .ava,.taskchats__ppl .ava-img{width:22px;height:22px;font-size:10px;border:1.5px solid var(--canvas)}
.taskchats__more{margin-left:6px;font-size:var(--fs-label)}
.taskchats__open{margin-left:auto;white-space:nowrap;font-size:var(--fs-text)}
.taskchats__back{display:none;border:0;background:none;font-size:20px;line-height:1;color:var(--ink-2);cursor:pointer;padding:0 2px}
.taskchats__chat{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px}
/* полноразмерная лента в панели-мессенджере (в задаче/выезжающей панели .chat ограничен 52vh) */
.taskchats .chat{max-height:none;flex:1;min-height:0}
@media (max-width:640px){
  /* мобилка: список течёт в странице; открытый чат — полноэкранный оверлей (без хрупкой арифметики топбара) */
  /* №1175 — minmax(0,1fr), не 1fr: у 1fr нижняя граница = min-content рельса, а заголовки строк
     (.chatrow__title, nowrap) давали его шире экрана — рельс вылезал вправо и обрезался. */
  .taskchats{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
  .taskchats__rail,.taskchats__list{overflow:visible}
  .taskchats__pane{display:none}
  .taskchats.is-chat-open .taskchats__rail{display:none}
  /* 100svh = «малый» вьюпорт (нижняя панель браузера показана) → композер НЕ уезжает под неё;
     JS (fitViewport) дополнительно подстраивает под клавиатуру через visualViewport */
  .taskchats.is-chat-open .taskchats__pane{display:flex;position:fixed;left:0;right:0;top:0;bottom:auto;
    z-index:80;border:0;border-radius:0;height:100vh;height:100svh}
  /* поле ввода приподнято над «домашней чертой»/панелью браузера */
  .taskchats.is-chat-open .taskchats__chat{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .taskchats__back{display:inline-block}
  .taskchats__head{flex-wrap:wrap}
  .taskchats__open{display:none}          /* заголовок уже ссылка на задачу — дубль-CTA прячем */
  .taskchats__title{flex:1 1 auto;min-width:8em;max-width:none}
}
/* очень низкий вьюпорт (телефон в ландшафте с клавиатурой): экономим высоту, чтобы поле ввода не ушло под сгиб */
@media (max-height:360px){
  .chat__compose .rt:focus-within .rt__bar{display:none}   /* тулбар не разворачиваем — ~38px обратно */
  .taskchats__head{flex-wrap:nowrap;padding:8px 12px}
  .chat__compose{margin-top:6px;padding-top:6px}
}

/* ---- Rich-text редактор ---- */
.rt{border:1px solid var(--line-strong);border-radius:var(--radius-input);background:var(--canvas);overflow:hidden;width:100%}
/* #917 п.8 — «ввод описания сделай стилизовано красиво… у нас слишком мультяшно». Мультяшность
   давали цветные значки-эмодзи (красная «А», жёлтая «А», рожица, микрофон, картинка) и панель в
   ТРИ строки: список размера шрифта стоял внутри формы и по правилу «.form select{width:100%}»
   растягивался на 521 px, выдавливая остальные кнопки (замерено в браузере). Здесь панель в одну
   строку, значки — тонкой линией одним цветом, группы разделены волоском. */
.rt__bar{display:flex;flex-wrap:wrap;gap:1px;align-items:center;padding:4px 6px;border-bottom:1px solid var(--line);background:var(--panel)}
.rt__b{min-width:28px;height:28px;padding:0 6px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--ink-3);font-size:14px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.rt__b:hover{color:var(--ink)}
/* #1142 — кнопка правки текста: значок плюс буквы «ai» рядом, как просил Юрий. Акцентный цвет
   отличает её от команд форматирования: остальные кнопки меняют разметку, эта обращается к
   модели и тратит токены — разница должна быть видна до нажатия, а не после. */
.rt__b--ai{gap:3px;color:var(--blue)}
.rt__b--ai:hover{color:var(--sapphire)}
.rt__ai{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:lowercase}
.rt__b--ai.is-busy{opacity:.5;cursor:progress}
.rt__sep{width:1px;height:16px;margin:0 5px;background:var(--line);flex:none}
.rt:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.rt__b:hover{background:var(--blue-wash);color:var(--ink)}
.rt__b.is-active{background:var(--blue-wash);color:var(--sapphire)}
.rt__emo{position:relative;display:inline-flex}
.rt__emopop{position:absolute;z-index:30;top:32px;left:0;display:none;grid-template-columns:repeat(9,1fr);gap:2px;padding:8px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);width:288px;max-height:180px;overflow:auto}
.rt__emopop.is-open{display:grid}
.rt__emopop button{border:0;background:none;font-size:18px;cursor:pointer;padding:3px;border-radius:6px;line-height:1}
.rt__emopop button:hover{background:var(--blue-wash)}
/* #41 — палитра цветов текста. .rt__swatch--none (свотч «убрать») не нужен — у палитры
   классов нет кнопки снятия, как и у исходного цвета текста до #2580. */
.rt__swatch{width:22px;height:22px;border-radius:5px;border:1px solid var(--line-strong);cursor:pointer;padding:0}
.rt__swatch:hover{outline:2px solid var(--blue);outline-offset:1px}
/* доработка 26.09 круг 2 — Юрий: «упаковать это всё под один значок в виде таблицы».
   Единое меню блоков (переиспользует .rt__emopop, только раскладка колонкой вместо сетки
   эмодзи): пункты-строки + подразделы «Таблица»/«Цвет»/«Размер» внутри одного попапа. */
.rt__blockmenu{grid-template-columns:none;flex-direction:column;width:max-content;min-width:190px;
  max-width:min(240px,calc(100vw - var(--sp-6)));max-height:min(420px,calc(100vh - var(--sp-7)));overflow:auto}
.rt__blockmenu.is-open{display:flex}
.rt__blockmenu button{border:0;background:none;font:inherit;font-size:13px;text-align:left;
  padding:7px 11px;cursor:pointer;border-radius:6px;color:var(--ink);line-height:1.3}
.rt__blockmenu button:hover,.rt__blockmenu button:focus-visible{background:var(--blue-wash);color:var(--sapphire);outline:none}
.rt__blockmenu-hd{padding:var(--sp-2) 11px 2px;font-size:11px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-3)}
.rt__blockmenu-sep{height:1px;margin:var(--sp-1) var(--sp-2);background:var(--line);flex:none}
.rt__blockmenu-row{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding:2px var(--sp-2) var(--sp-1)}
.rt__blockmenu-row .rt__swatch,.rt__blockmenu-row .rt__sizebtn{flex:none}
.rt__blockmenu-tablesec[hidden]{display:none}
.rt__swatch--round{border-radius:50%}
.rt__ed{min-height:92px;max-height:360px;overflow:auto;padding:10px 12px;color:var(--ink);font:inherit;outline:none}
.rt__ed:empty:before{content:attr(data-ph);color:var(--ink-3)}
.rt__ed img{max-width:100%;height:auto;border-radius:8px}
/* #2580 — было инлайновым style="max-width:100%" на вставке видео/иноlайна; теперь правило
   платформы, как у img/table — санитайзер style больше не пропускает нигде, в т.ч. embed'ам */
.rt-content video,.rt__ed video,.rt-content iframe,.rt__ed iframe{max-width:100%}

/* ---- Отрисовка сохранённого rich-text ---- */
.rt-content{line-height:1.55;overflow-wrap:anywhere;contain:paint}
.rt-content img{max-width:100%;height:auto;border-radius:8px;margin:6px 0}
.rt-content a{color:var(--blue)}
.rt-content [data-mention],.rt__ed [data-mention],.rt__ed .mention{color:var(--sapphire);font-weight:600;
  text-decoration:none;background:var(--blue-wash);border-radius:4px;padding:0 3px}
.rt-mention{position:fixed;z-index:100;min-width:190px;max-height:230px;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.rt-mention__i{padding:7px 11px;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap}
.rt-mention__i.is-sel,.rt-mention__i:hover{background:var(--blue-wash);color:var(--sapphire)}
/* #247 — вставленный контент (таблицы из Битрикс/Excel, длинные ссылки, код) больше не «едет»
   по ширине: таблица и pre скроллятся внутри себя, а не растягивают карточку/панель задачи.
   Стиль ниже — ФОЛБЭК для таблиц БЕЗ class="rt-table" (старый контент/чужой HTML); штатные
   таблицы редактора переопределяет .rt-table ниже — селектор там специфичнее (#2580). */
.rt-content table,.rt__ed table{display:block;width:max-content;max-width:100%;overflow-x:auto;
  border-collapse:collapse;margin:8px 0;font-size:13px}
.rt-content th,.rt-content td,.rt__ed th,.rt__ed td{border:1px solid var(--line);padding:5px 8px;
  text-align:left;vertical-align:top;overflow-wrap:anywhere}
.rt-content th,.rt__ed th{background:var(--page);font-weight:450}
.rt-content pre,.rt__ed pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.rt-content ul,.rt-content ol{margin:6px 0;padding-left:22px}
.rt-content p{margin:0 0 8px}
.rt-content p:last-child{margin-bottom:0}
/* №1136 (находка 8) — цитата и код из статей БЗ (черновики агентов, Markdown «>» и `код`) оформлены штатно:
   цитата — полоса слева, как у выноски, код — моноширинный на фоне панели; в блоке pre код без своей плашки. */
.rt-content blockquote,.rt__ed blockquote{margin:var(--sp-2) 0;padding:var(--sp-1) var(--sp-3);
  border-left:3px solid var(--t-slate-fg);color:var(--ink-2)}
.rt-content code,.rt__ed code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 var(--sp-1)}
.rt-content pre code,.rt__ed pre code{background:none;border:0;border-radius:0;padding:0;font-size:inherit}

/* #2580 (путь А, «Единый вид текстов») — штатные блоки редактора: ровно колонка 3 макета
   (worklog/2026-09-26-2580-unified-text-style/maket_to_blocks.py, константа PROPOSED), плюс
   недостающие цвета палитры (там был только rt-c-blue) и .rt-callout--note явным модификатором.
   Работают и в .rt-content (сохранённый текст), и в .rt__ed (сам редактор) — те же классы. */
.rt-content .rt-table,.rt__ed .rt-table{display:table;width:100%;border-collapse:collapse;
  margin:12px 0;font-size:13.5px}
.rt-content .rt-table th,.rt__ed .rt-table th{background:var(--panel-2);font-weight:600;text-align:left}
.rt-content .rt-table th,.rt-content .rt-table td,.rt__ed .rt-table th,.rt__ed .rt-table td{
  border:1px solid var(--line-strong);padding:8px 12px;vertical-align:top}
.rt-content .rt-table tr:nth-child(even) td,.rt__ed .rt-table tr:nth-child(even) td{background:var(--line-2)}
.rt-hr{border:0;border-top:1px solid var(--line-strong);margin:18px 0}
.rt-callout{border-left:3px solid var(--t-slate-fg);background:var(--t-slate-bg);padding:10px 14px;
  border-radius:8px;margin:12px 0}
.rt-callout--note{border-left-color:var(--t-slate-fg);background:var(--t-slate-bg)}
.rt-callout--warn{border-left-color:var(--t-amber-fg);background:var(--t-amber-bg)}
.rt-callout--ok{border-left-color:var(--t-green-fg);background:var(--t-green-bg)}
.rt-kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 0 6px}
.rt-muted{color:var(--ink-3);font-size:12.5px}
.rt-c-blue{color:var(--t-blue-fg)}
/* 26.09.2026 — штатные размеры шрифта (Юрий: «да, добавь»): три ступени вместо свободного font-size */
.rt-fs-sm{font-size:13px}
.rt-fs-lg{font-size:18px}
.rt-fs-xl{font-size:22px;font-weight:600;line-height:1.3}
/* доработка 26.09 круг 2 — кнопки размера теперь строкой внутри .rt__blockmenu-row, не в своём попапе */
.rt__sizebtn{background:none;border:0;border-radius:6px;padding:4px 10px;text-align:left;color:var(--ink);cursor:pointer}
.rt__sizebtn:hover{background:var(--panel-2)}
.rt-c-green{color:var(--t-green-fg)}
.rt-c-amber{color:var(--t-amber-fg)}
.rt-c-red{color:var(--t-red-fg)}
.rt-c-muted{color:var(--ink-3)}

/* ---- Вложения ---- */
.attachlist{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.attach{display:flex;align-items:center;gap:10px}
.attach__thumb{flex:none;width:40px;height:40px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);display:block}
.attach__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.attach__name{color:var(--blue);font-size:13px;word-break:break-all}
.attach__size{color:var(--ink-3);font-size:12px}
.attach form{display:inline;margin-left:auto}

/* ---- Доски (управление) ---- */
.boards{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.board-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.board-row input,.board-row select{height:34px;border:1px solid var(--line-strong);
  border-radius:var(--radius-input);padding:0 10px;background:var(--canvas);color:var(--ink);font:inherit}
.board-row input{flex:1;min-width:150px}
.board-row__n{font-size:12px;white-space:nowrap;color:var(--ink-3)}

.tcard__chip{font-size:11px;color:var(--ink-3)}
.tcard__chip--unread{color:var(--blue);font-weight:700}
.trow-meta{display:inline-flex;gap:8px;margin-left:8px;vertical-align:middle}
.trow-chip{font-size:11px;color:var(--ink-3);white-space:nowrap}
a.trow-chip:hover{color:var(--blue)}
.trow-sub{color:var(--ink-3);font-weight:700}  /* #85 — маркер подзадачи в списке */
.trow-chip--unread{color:var(--blue);font-weight:700}
.comment__new{background:var(--blue);color:#fff;font-size:10px;font-weight:700;
  border-radius:var(--radius-pill);padding:1px 6px;text-transform:uppercase;letter-spacing:.03em}

/* ---- Недельный план ---- */
.weeknav{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
/* #1292 — загрузка недели переехала в строку навигации: раньше это была карточка на всю ширину
   отдельным этажом, и сетка из-за неё начиналась низко. Здесь она прижата вправо и занимает не
   больше половины строки. */
.weekload{display:flex;align-items:center;gap:8px;margin-left:auto;flex:1 1 280px;
  min-width:240px;max-width:50%}
.weekload__who{font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:170px}
.weekload .dayload__bar{flex:1 1 auto;margin:0}
.weekload__num{font-size:11px;color:var(--ink-2);white-space:nowrap}
/* #1292 (доводка по замечанию Юрия 11.09) — строка недели была разнокалиберной: список сотрудника
   растягивался на 405px при содержимом «— я —», кнопки (37px) и список (34px) стояли разной
   высоты, и строка перевешивала саму сетку. Выравниваем по одной высоте, кнопки делаем мельче,
   ширину списка отдаём содержимому с потолком. Подпись «Сотрудник» получает тот же вид, что
   подписи в планке фильтров: там она уже такая, но правило висит на .filterbar, а здесь класс
   .filterbar__form — предка нет. */
.weeknav .btn,.weeknav select{height:32px;font-size:12px}
.weeknav .btn{padding:0 12px}
.weeknav select{padding:0 8px;width:auto;max-width:200px}
.weeknav label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  font-weight:450}
.weekgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:start}
.wcol{background:var(--page);border:1px solid var(--line);border-radius:12px;min-height:120px;
  display:flex;flex-direction:column}
.wcol.is-today{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.wcol__head{display:flex;align-items:center;gap:6px;padding:9px 10px;border-bottom:1px solid var(--line)}
.wcol__day{font-weight:450;font-size:12px}
.wcol__date{color:var(--ink-3);font-size:11px}
.wcol__head .kcol__add{margin-left:auto}
.wcol__body{display:flex;flex-direction:column;gap:6px;padding:8px;flex:1}
.wcol__empty{color:var(--ink-3);text-align:center;font-size:12px;padding:8px 0}
.wtask{display:block;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 9px;cursor:pointer}
.wtask:hover{border-color:var(--line-strong)}
.wtask.is-dragging{opacity:.5}
.wcol__body.is-over{background:var(--blue-wash);border-radius:9px;outline:1px dashed var(--blue)}
.wtask__title{display:block;font-size:var(--fs-text);font-weight:450;margin-top:5px;color:var(--ink)}
.wtask .ava{width:20px;height:20px;font-size:9px;margin:6px 0 0 0}

@media (max-width:1100px){.weekgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  .task-layout{grid-template-columns:1fr}.task-aside{position:static}
  .weekgrid{grid-template-columns:1fr}
}

/* ---- Неделя по времени (ПЛАН-2, #1244) — тайм-грид час×день, только чтение ---- */
.timeline__row{display:grid;grid-template-columns:56px repeat(7,1fr);gap:8px}
.timeline__spacer{color:var(--ink-3)}
.timeline__spacer--label{font-size:11px}
.timeline__head{background:var(--page);border:1px solid var(--line);border-radius:12px;padding:8px}
.timeline__head.is-today{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.timeline__headtop{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.timeline__headtop .kcol__add{margin-left:auto}
.timeline__weeksum{margin-bottom:16px}
.timeline__unsched{margin-top:8px}
.timeline__unsched-col{display:flex;flex-direction:column;gap:6px;min-height:32px;border-radius:var(--radius-sm)}
/* #1316 п.4 — куда именно уедет задача, видно ДО того, как отпустили кнопку мыши. */
.timeline__unsched-col.is-over{background:var(--blue-wash);box-shadow:inset 0 0 0 1px var(--blue)}
/* сводка загрузки дня/недели — рецепт .cset__bar (app.css:3115, company_settings.html) */
/* 17.09.2026 — дорожка шкалы загрузки была залита --line (#edeff4): почти белым по белому, и вся
   шкала «сливалась» (Юрий: «полосочка абсолютно никак не выделяется»). Берём --line-strong —
   тот же нейтральный тон палитры, но различимый; заливка поверх него читается сразу. Высота 8→10:
   плюс два пикселя делают полосу видимой, не превращая её в акцент экрана. */
.dayload__bar{height:10px;border-radius:5px;background:var(--line-strong);overflow:hidden;
  margin:4px 0}
/* #1292 — светофор загрузки: до 50% бледный серый (недопланировано), 50-80% зелёный,
   80-100% жёлтый (место под незапланированное почти кончилось), выше 100% красный. Имена
   классов совпадают с состояниями из _week_timeline_summary() — менять надо парой. */
.dayload__fill--low{background:var(--silver)}
.dayload__fill--ok{background:var(--green)}
.dayload__fill--high{background:var(--amber)}
.dayload__fill--over{background:var(--red)}
.dayload__text{font-size:11px;color:var(--ink-2)}
.dayload__split{display:flex;gap:10px;font-size:11px;color:var(--ink-3);margin-top:2px}
.dayload--unset,.dayload--off{font-size:11px;color:var(--ink-3);padding:4px 0}
/* Ширина заливки — БАКЕТ шагом 5%, не инлайновый style="width:…%" (бюджет инлайновых стилей
   шаблонов уже на пределе, apps/core/tests.py InlineStyleRatchetTests, #894). 100 — общий верх
   для любого percent≥100 (кламп, контейнер и так режет overflow:hidden). */
.dayload__fill--w0{width:0%}.dayload__fill--w5{width:5%}.dayload__fill--w10{width:10%}
.dayload__fill--w15{width:15%}.dayload__fill--w20{width:20%}.dayload__fill--w25{width:25%}
.dayload__fill--w30{width:30%}.dayload__fill--w35{width:35%}.dayload__fill--w40{width:40%}
.dayload__fill--w45{width:45%}.dayload__fill--w50{width:50%}.dayload__fill--w55{width:55%}
.dayload__fill--w60{width:60%}.dayload__fill--w65{width:65%}.dayload__fill--w70{width:70%}
.dayload__fill--w75{width:75%}.dayload__fill--w80{width:80%}.dayload__fill--w85{width:85%}
.dayload__fill--w90{width:90%}.dayload__fill--w95{width:95%}.dayload__fill--w100{width:100%}
.timegrid__scroll{overflow-y:auto;overflow-x:auto;max-height:528px;border:1px solid var(--line);
  border-radius:12px}                                   /* 528px = 12 часов × 44px по умолчанию */
.timegrid{display:grid;grid-template-columns:56px repeat(7,1fr)}
.timegrid__hours{border-right:1px solid var(--line)}
.timegrid__hourlabel{height:44px;font-size:11px;color:var(--ink-3);padding:2px 6px;box-sizing:border-box}
.timegrid__day{position:relative;border-right:1px solid var(--line-2)}
.timegrid__day:last-child{border-right:none}
.timegrid__day.is-today{background:var(--blue-wash)}
.timegrid__day.is-off{background:var(--line-2);opacity:.6}
.timegrid__hourline{height:44px;border-bottom:1px solid var(--line-2)}
.timeblock{position:absolute;left:2px;right:2px;border-radius:var(--radius-sm);background:var(--panel);
  border:1px solid var(--line);padding:2px 6px;overflow:hidden;font-size:11px;display:block}
/* #1293 п.6 — от четырёх наложений блоки лежат ДРУГ НА ДРУГЕ (режим перекрытия краёв),
   и порядок задаёт z-index, приходящий с сервера в атрибуте style. Чтобы навести на
   прикрытый блок и прочитать его целиком, наведение поднимает блок наверх — перебить
   инлайновое значение можно только !important, у правила из таблицы стилей приоритет ниже.
   Значение 9 заведомо выше любого номера колонки: кучка из девяти наложений в одном дне
   у одного человека — это уже не раскладка, а разговор с руководителем. */
.timeblock:hover{border-color:var(--line-strong);z-index:9 !important}
.timeblock--repeat{border-style:dashed}
.timeblock__title{display:block;font-size:var(--fs-label);font-weight:450;color:var(--ink)}
/* ПЛАН-3 (#1245) — перенос/растягивание блока, static/js/plan_timeline.js */
.timeblock[draggable="true"]{cursor:grab}
.timeblock.is-dragging{opacity:.5}
.timeblock__handle{position:absolute;left:0;right:0;bottom:0;height:6px;cursor:ns-resize}
.timegrid__day.is-over{background:var(--blue-wash);outline:1px dashed var(--blue);outline-offset:-2px}
/* #1307 — линия текущего времени, как в Google-календаре: черта через все дни недели и точка на
   шкале часов слева. Лежит ПОВЕРХ колонок (z-index выше блоков), но событий не ловит — иначе
   перекрывала бы клик по пустому часу и перетаскивание. */
.timegrid{position:relative}
.timegrid__now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--red,#dc2626);
  z-index:3;pointer-events:none}
.timegrid__nowdot{position:absolute;left:-5px;/* #1316 п.3 — линия переехала внутрь колонки сегодняшнего дня, точка садится на её левый край, а не на шкалу часов */top:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--red,#dc2626)}
.wtask[draggable="true"]{cursor:grab}
/* #1307 — карточка «без времени» в момент сохранения: приглушаем, пока сетка не вернёт
   свежую разметку (задача уедет из строки на слот). */
.wtask.is-saving{opacity:.45}
/* #1308 — метка «П» (задача стоит в еженедельном плане): кружок в правом верхнем углу карточки
   и такой же значок в строке списка. Не чип с текстом: на карточке доски место в этом углу
   считанные пиксели, а буква в кружке читается с расстояния. */
.tcard__plan{margin-left:auto;flex:none;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;line-height:1;
  color:var(--sapphire);background:var(--blue-wash);
  border:1px solid color-mix(in srgb,var(--sapphire) 40%,transparent)}
.trow-meta .tcard__plan{margin-left:0;vertical-align:middle}
/* #1263 круг 2 — растягивание упёрлось в конец календарного дня (нельзя утянуть за полночь) */
.timeblock.is-capped{outline:1.5px solid var(--red);outline-offset:-1px}
/* ---- ПЛАН-4 (#1246) — чип доски/направления + различимость регулярных задач ---- */
.timeblock__repeat{position:absolute;top:1px;right:3px;font-size:var(--fs-meta);line-height:1;
  color:var(--ink-3)}                                   /* иконка в углу блока, не только рамка */
.timeblock__meta{display:block;font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.timeline__legend{font-size:var(--fs-meta);color:var(--ink-3);margin:0 0 10px}

/* #1285 — закрытая задача на планах: не прячем, а гасим. Приём НЕ новый: ровно так уже выглядит
   закрытая карточка доски (.tcard--done/.tcard--canceled выше) и строка списка (tr.is-done) —
   перечёркнутое название, тусклый текст, обычный вес. Фон panel-2 приглушает сам блок; обе
   переменные заданы и в светлой, и в тёмной теме, отдельного правила для тёмной не нужно. */
.timeblock--closed,.wtask--closed{background:var(--panel-2)}
.timeblock--closed .timeblock__title,.wtask--closed .wtask__title{text-decoration:line-through;
  color:var(--ink-3);font-weight:400}

/* #2690 (РЕГ-4) — бледный будущий повтор в «Планах»: шаблон «по расписанию» обещает задачу на эту
   дату, но задачи ещё нет. Кнопка (открывает окно шаблона), а не ссылка. «Бледность» — у рамки и
   заливки (--ghost-opacity — доля рамки, заливка --blue-wash на 60%), а НЕ у элемента целиком:
   opacity на блоке гасил и текст (--ink-2 при .62 давал 4,02 : 1 ночью и 3,19 : 1 днём при норме
   4,5, ui-standard §8/§11 п.6). Название и значок остаются непрозрачными --ink-2: 8,5 : 1 днём и
   7,5-8,2 : 1 ночью на любом фоне колонки (расчёт — 02-WORK-reg4.md). Стоит в разметке ДО
   настоящих блоков дня, поэтому те ложатся поверх; по наведению рамка и заливка проявляются. */
.timeblock--ghost{--ghost-opacity:.62;background:color-mix(in srgb,var(--blue-wash) 60%,transparent);
  border:1px dashed color-mix(in srgb,var(--silver) calc(var(--ghost-opacity) * 100%),transparent);
  box-sizing:border-box;width:calc(100% - 4px);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  margin:0;font:inherit;font-size:var(--fs-meta);font-weight:400;text-align:left;
  color:var(--ink-2);cursor:pointer}
.timeblock--ghost:hover{background:var(--blue-wash);border-color:var(--silver)}
.timeblock--ghost:focus-visible{border-color:var(--silver);outline:2px solid var(--blue);outline-offset:-2px}
.timeblock--ghost .timeblock__title{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink-2);text-align:left}
.timeblock--ghost .timeblock__repeat{color:var(--ink-2)}

/* ---- Оргсхема (дерево сверху-вниз) ---- */
.orgbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.zoom{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);padding:3px}
/* #2762 (Максим, встреча 02.10.2026: «привычней вправо») — панель масштаба стоит последней в планке и прижата
   к правому краю; на телефоне планка переносится, и масштаб уходит на свою строку, тоже вправо. */
.orgbar .zoom{margin-left:auto}
.zoom__btn{width:28px;height:28px;border:0;background:none;color:var(--ink);font-size:18px;cursor:pointer;
  border-radius:6px;line-height:1}
.zoom__btn:hover{background:var(--page)}
.zoom__val{min-width:46px;text-align:center;font-size:12px;font-weight:600;color:var(--ink-2)}

/* #884 — схему показываем ТОЛЬКО когда она центрирована. Скрипт центрирования стоит после
   разметки схемы, поэтому браузер успевал нарисовать её нецентрированной, и человек видел прыжок
   («потом она становится по середине»). Скрытие включается лишь при работающем скрипте: класс js
   ставит ранний файл темы, а снимает скрытие сам org.js (со страховкой по таймеру). Без скриптов
   правило не действует вообще — схема видна сразу, просто не центрирована. */
html.js .orgwrap:not(.is-ready){visibility:hidden}
.orgwrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);
  padding:26px;max-height:calc(100vh - 200px);cursor:grab;touch-action:pan-x pan-y}
.orgwrap.grabbing{cursor:grabbing;user-select:none}
.orgwrap.grabbing a{pointer-events:none}
.orgchart{transform-origin:top center;transition:transform .1s;display:inline-block;min-width:100%}
.orgchart ul{display:flex;justify-content:center;padding-top:22px;position:relative;margin:0;list-style:none}
.orgchart li{display:flex;flex-direction:column;align-items:center;position:relative;padding:22px 9px 0;list-style:none}
.orgchart li::before,.orgchart li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:22px;
  border-top:1px solid var(--line-strong)}
.orgchart li::after{right:auto;left:50%;border-left:1px solid var(--line-strong)}
.orgchart li:only-child{padding-top:0}
.orgchart li:only-child::before,.orgchart li:only-child::after{display:none}
.orgchart li:first-child::before,.orgchart li:last-child::after{border:0 none}
.orgchart li:last-child::before{border-right:1px solid var(--line-strong)}
.orgchart>ul{padding-top:0}
.orgchart>ul>li::before,.orgchart>ul>li::after{display:none}
.orgchart ul ul::before{content:"";position:absolute;top:0;left:50%;border-left:1px solid var(--line-strong);
  width:0;height:22px}
.orgchart li.is-collapsed>ul{display:none}
.orgchart li.is-collapsed>.oc-node{border-style:dashed}

.oc-node{position:relative;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--ink-3);
  border-radius:12px;width:212px;text-align:left}
.oc-node:hover{border-color:var(--line-strong)}
.oc-node--company{border-top-color:var(--ink)}
.oc-node--department{border-top-color:var(--blue)}
.oc-node--service{border-top-color:var(--green)}
.oc-node--office{border-top-color:var(--amber)}
.oc-node--council{border-top-color:var(--sapphire)}
/* #1798 п.3859 — узел компактнее: 10 → 8 по вертикали (шаг шкалы). На схеме в полтораста
   узлов это единственное место, где экономия складывается в заметную высоту. */
.oc-link{display:block;padding:var(--sp-2) var(--sp-3)}
.oc-link:hover .oc-name{color:var(--blue)}
.oc-badge{display:inline-block;font-size:var(--fs-meta);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 8px;border-radius:var(--radius-pill);background:var(--t-slate-bg);color:var(--t-slate-fg)}
.oc-node--company .oc-badge{background:var(--ink);color:var(--canvas)}
.oc-node--department .oc-badge{background:var(--t-blue-bg);color:var(--t-blue-fg)}
.oc-node--service .oc-badge{background:var(--t-green-bg);color:var(--t-green-fg)}
.oc-node--office .oc-badge{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.oc-head{display:flex;align-items:center;gap:7px}
.oc-head:empty{display:none}   /* #6 — подписи уровня убраны; у блока без номера шапки нет вовсе */
/* Д2.3 — «пустой» блок (ни людей, ни показателей): серый пунктир и приглушённое название,
   чтобы неукомплектованные посты читались с одного взгляда. Цветной фон блока не трогаем. */
.oc-node:has(> .oc-link--empty){border-style:dashed;border-top-style:solid}
.oc-link--empty .oc-name{color:var(--ink-3)}
/* #446 — ★ главной метрики и ⚠ «нет значения» на карточке схемы */
.oc-gm{color:var(--oc-star-fg);font-size:11px}
.oc-mwarn{color:var(--oc-warn-fg);font-size:11px;margin-left:4px}

/* Д2.1 — спарклайн показателя на карточке: график + последнее значение справа от названия */
.oc-spark{display:inline-flex;align-items:center;gap:4px;margin-left:6px;vertical-align:middle}
.oc-spark svg{display:block;opacity:.9}
.oc-spark b{font-size:var(--fs-meta);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.orgchart.oc-nospark .oc-spark{display:none}
.orgchart.oc-nockp .oc-ckp{display:none}   /* #446 п.8 — компактный вид без продукта */
.orgchart.oc-nockp .oc-rootbar__ckp{display:none}
.oc-num{font-size:12px;font-weight:700;color:var(--ink);background:var(--page);border:1px solid var(--line-strong);
  border-radius:6px;min-width:22px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center}
/* #2762 (встреча 02.10.2026: «название подразделений — большими заглавными буквами и жирным шрифтом»):
   заглавные делает CSS, а не данные — в базе и в подсказках название остаётся как написано. Вес 700 из шкалы
   400/450/600/700. Длинное слово без пробелов («внутриорганизационных») переносится, а не вылезает из карточки. */
.oc-name{font-size:var(--oc-name-fs);font-weight:700;line-height:1.25;text-transform:uppercase;letter-spacing:.01em;
  overflow-wrap:anywhere;color:var(--ink);margin:6px 0 3px}
/* 01.08 — подписи уровня на карточках нет вовсе (решение Юрия): слово уровня пишется только как
   имя нового пустого блока при создании. Уровень остаётся в подсказке и в карточке блока. */
.oc-ckp b{color:var(--ink-3);font-weight:600}   /* #2699 — подпись «Продукт:» жирная (решение Юрия 30.09) */
.oc-ckp{font-size:12px;color:var(--ink-2);line-height:1.4}
.oc-fns{margin:var(--sp-2) 0 0;padding-left:var(--sp-3);font-size:var(--fs-label);color:var(--ink-3);line-height:1.5}
.oc-more{font-size:11px;color:var(--blue);margin-top:3px}
.oc-emp{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line-2)}
.oc-emp .oc-ava{width:22px;height:22px;border-radius:50%;background:var(--blue-wash);color:var(--sapphire);
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* #1320 — совмещённая должность (#1243): тот же человек стоит ещё на одном посту. Помечаем
   тонким кольцом, а не заливкой: заливка читается как статус, а здесь смысл другой —
   «он здесь по совместительству». Без пометки две одинаковые фишки выглядели бы дублем,
   с которого и началась жалоба.*/
.oc-emp--extra .oc-ava,.oc-ava--extra{box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--blue-wash)}
/* #1273 — соисполнители в карточке: список имён с крестиком и строка выбора «добавить».
   Формы внутри строки — inline-flex, чтобы крестик стоял вплотную к имени, а не переносился. */
/* #1308 — «когда» в плашке планирования: день и время рядом, время списком с шагом 15 минут.
   Раньше тут стояло одно datetime-local: пять сегментов, между которыми надо попадать мышью.
   С #2968 правила .planpick__when/__date/__time/__quick не используются: день и время выбирает плашка срока
   (.duepick, режим slot); правила оставлены на случай старой разметки. */
.planpick__when{display:flex;gap:6px;align-items:center}
.planpick__date{flex:1 1 auto;min-width:0}
.planpick__time{flex:0 0 auto;width:92px;font-variant-numeric:tabular-nums}
.planpick__quick{display:flex;gap:10px;margin-top:2px}
.coas{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.coas__item{display:inline-flex;align-items:center;gap:3px}
.coas__rm,.coas__add{display:inline-flex;margin:0}
/* #1321 — в боковой карточке строка выбора встаёт СВОЕЙ строкой под именами: ячейка сетки
   .panel__meta узкая, а список людей в <select> шириной в самое длинное имя — рядом с чипами
   он бы её распирал. Внутри .coas это отдельная строка, наружу ячейка не растёт. */
.panel__meta .coas__add{flex:1 1 100%;min-width:0}
.coas__x{border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:14px;line-height:1;padding:0 2px}
.coas__x:hover{color:var(--red)}
/* #1568 — блок встречи на сетке недели. Отличается от задачи тоном и рамкой: это не работа, а
   занятое время, и перетащить его нельзя — курсор об этом честно говорит. */
.timeblock--meeting{background:var(--t-violet-bg);border-color:var(--t-violet-fg);
  color:var(--t-violet-fg);cursor:default}
.timeblock__kind{flex:none;font-size:11px;opacity:.75}
/* #1769 — короткая подсветка блока, к которому схема вернулась после закрытия его карточки:
   без неё человек видит «схему куда-то проскроллило» и всё равно ищет глазами нужный блок.
   Полторы секунды и тонкое кольцо — заметить достаточно, отвлекать не успевает. */
.oc-link--focus{box-shadow:0 0 0 2px var(--blue),0 0 0 6px var(--blue-wash)}
.oc-vac{font-size:11px;font-weight:450;color:var(--amber);background:var(--t-amber-bg);border-radius:var(--radius-pill);padding:2px 9px}
.oc-collapse{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:22px;height:22px;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2);border-radius:50%;
  cursor:pointer;font-size:15px;line-height:1;z-index:2;display:flex;align-items:center;justify-content:center}
.oc-collapse:hover{border-color:var(--blue);color:var(--blue)}

/* утилиты вместо инлайн-стилей (храповик Д1: style= в шаблонах не растёт) */
.u-g8{gap:8px}.u-wfull{width:100%}.u-nowrap{white-space:nowrap}
.m-inp--num{width:92px;font-variant-numeric:tabular-nums}
/* #446 — «Мой стол»: строка проблемы на карточке показателя */
.mdesk-problem{margin-top:6px;font-size:12px;color:#b91c1c;background:#fef2f2;
  border-radius:6px;padding:3px 8px}
:root[data-theme="dark"] .mdesk-problem{background:#3b1213;color:#fca5a5}

/* #432 — групповая обработка: панель действий над списком (видна при выборе строк) */
.bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;
  padding:8px 12px;background:var(--blue-wash);border:1px solid var(--line);border-radius:var(--radius-sm)}
/* #1119 круг 2 — .bulkbar{display:flex} перебивало браузерное [hidden]{display:none} (та же
   ловушка, что уже закрыта для form.tpan__chkedit[hidden] выше по файлу): панель без единой
   отмеченной задачи была видна всегда — на /tasks/list/ и /crm/deals/list/ рядом со сквозным
   поиском постоянно висела отдельная строка «Статус →/Исполнитель →/Срок →», которую легко
   принять за вторую систему фильтрации. bulk_select.js::refresh() и так выставляет bar.hidden
   по числу отмеченных — скрытость просто нужно закрепить тем же атрибутом. */
.bulkbar[hidden]{display:none}
/* 17.09.2026 — служебные столбцы не помещали собственное содержимое. Ширина 28px (и 32px у выбора
   столбцов) при горизонтальных полях ячейки 14+14 (.table th/td) давала ВНУТРЕННЮЮ ширину ноль:
   галочка вылезала за пределы ячейки, а в шапке её ещё и резал скруглённый угол карточки — Юрий
   17.09: «на верхний квадратик наложение, остальные снизу хорошие». Поля для этих двух столбцов
   задаём свои: содержимое у них фиксированного размера, общие поля таблицы им не нужны. */
.bulk-cell,.colpick-cell{padding-left:4px;padding-right:4px}
.bulk-cell{width:28px;text-align:center}
.bulk-cell input{cursor:pointer}

/* #438 — списки: выбор столбцов и сортировка кликом по заголовку */
.cols-pick{position:relative;display:inline-block;margin-bottom:10px}
.cols-pick summary{list-style:none;cursor:pointer;display:inline-block}
.cols-pick summary::-webkit-details-marker{display:none}
.cols-pick__pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:220px;
  padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.cols-pick__item{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}

/* #1157 — общий компонент «шестерёнка столбцов» (задачи #1168, дальше сделки #1169): кнопка в
   шапке таблицы + панель, открываемая floatPop.pin (colpick.js). Кнопка/hover — тот же приём, что
   .topfilters__gear (та шестерёнка — про ФИЛЬТРЫ, эта — про столбцы, поэтому другая иконка). */
.colpick-cell{width:32px;text-align:center;position:relative}
.colpick__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-6);
  height:var(--sp-6);border:0;border-radius:var(--radius-sm);background:none;color:var(--ink-3);
  cursor:pointer}
.colpick__btn:hover{background:var(--panel-2);color:var(--blue)}
.colpick__btn[aria-expanded="true"]{color:var(--blue);background:var(--t-blue-bg)}
.colpick__pop{z-index:40;min-width:220px;display:flex;flex-direction:column;gap:var(--sp-2);
  box-shadow:0 10px 30px rgba(0,0,0,.14);text-align:left}
.colpick__pop[hidden]{display:none}
.colpick__actions{display:flex;gap:var(--sp-2)}
.colpick__item{display:flex;align-items:center;gap:var(--sp-2);font-size:13px;cursor:pointer}
/* ПЛАН-7 (#1263) — попап привязки задачи к «Еженедельным планам»: «Добавить задачу» на сетке
   (поиск+датавремя) и «Запланировать»/«Изменить» из карточки (только датавремя). Тот же приём
   плавающей карточки, что и .colpick__pop выше, но свой класс — другой модуль, не унифицируем
   без отдельной работы (ui-standard.md §13б). */
.planpick{z-index:80;display:flex;flex-direction:column;gap:var(--sp-2);width:300px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);text-align:left}
.planpick[hidden]{display:none}
.planpick__results{max-height:220px;overflow:auto;border:1px solid var(--line);
  border-radius:var(--radius-sm)}
.planpick__row{display:block;width:100%;text-align:left;padding:var(--sp-2);border:none;
  background:none;cursor:pointer;font-size:var(--fs-text);color:var(--ink)}
.planpick__row:hover{background:var(--blue-wash)}
.planpick__none{padding:var(--sp-2);margin:0}
/* #1298 п.1 — пометка «ничья задача» в строке поиска попапа «Добавить задачу»:
   планирование даст ей исполнителя, и это видно ДО нажатия, а не постфактум. */
.planpick__free{color:var(--ink-3);font-size:11.5px}
/* ── #1322 круг 2 — выбор этапа развития плашкой в правом углу планки схемы ───────────────────
   Юрий 17.09.2026: «в верхнем правом углу отображение оргсхемы… выпадающая плашка, и там выбор:
   микро, малый, средний, крупный». Угол делаем через order и margin-left:auto, а не переносом
   разметки: планка — флекс-строка, и порядок узлов в ней держат другие правила (залипания,
   переключатели), трогать их ради одного элемента незачем. */
/* #2699 — порядок панели задан схемой Юрия от 30.09: [режим] [масштаб] [Этап] свёрнуто·скрыто [Вид ▾] [PDF|⋯];
   прежнее «прижать к правому углу» (order:99; margin-left:auto) снято, плашка стоит на своём месте в ряду. */
.oc-stage{display:flex;align-items:center;gap:var(--sp-2)}
.oc-stage__lbl{font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap}
.oc-stage__sel{border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:var(--sp-1) var(--sp-2);font-size:var(--fs-label);color:var(--ink-2);
  background:var(--panel);max-width:300px}
.oc-stage__sel:focus{outline:none;border-color:var(--blue)}
/* Подсказка этапа и признак «переросли» — строкой ПОД планкой: они говорят о компании, а не
   управляют видом, и в ряду кнопок читались бы как ещё одна кнопка. */
.oc-hint{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3);
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel-2);font-size:var(--fs-label);color:var(--ink-2)}
.oc-hint--grew{background:var(--t-amber-bg);border-color:var(--t-amber-bg);color:var(--t-amber-fg)}
@media (max-width:900px){.oc-stage{order:0;margin-left:0}}
/* ── #1322 — свёрнутая оргсхема: переключатель и панель выбора департаментов ──────────────────
   Панель живёт прямо на планке схемы: сворачивают и разворачивают её во время показа клиенту,
   и уводить за этим в настройки значит прятать инструмент от того, кому он нужен сию секунду. */
.oc-compact{position:relative}
.oc-compact>summary{list-style:none;cursor:pointer}
.oc-compact>summary::-webkit-details-marker{display:none}
.oc-compact__pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:320px;
  display:flex;flex-direction:column;gap:var(--sp-2);box-shadow:var(--shadow-card);text-align:left}
.oc-compact__hd{margin:0;font-size:var(--fs-meta);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);font-weight:600}
.oc-compact__presets{display:flex;flex-direction:column;gap:var(--sp-1)}
.oc-compact__list{display:flex;flex-direction:column;gap:2px;max-height:210px;overflow:auto;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-2)}
.oc-compact__row{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-label);
  color:var(--ink-2);cursor:pointer}
.oc-compact__acts{display:flex;gap:var(--sp-2)}
.oc-compactnote{font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap}
.th-sort{color:inherit;text-decoration:none;cursor:pointer}
.th-sort:hover{color:var(--blue)}
.th-sort.is-on{color:var(--blue)}
/* 19.09.2026, просьба Юрия «хочется сортировка по столбцам» — она БЫЛА, но заголовок
   ничем не показывал, что нажимается: стрелка появлялась только ПОСЛЕ первого нажатия,
   то есть узнать о возможности можно было, лишь наткнувшись на неё случайно. Бледная
   двойная стрелка говорит об этом заранее и не спорит со стрелкой активного столбца. */
/* #1812 — полка выделенного: появляется над списком, когда выделена хотя бы одна строка. */
/* #1135 — flex-wrap: на узком экране (375) кнопки полки переносятся на следующую строку, а не
   уходят за край карточки (там нет прокрутки — «Убрать в корзину» и «Снять выделение» были недоступны). */
.dsk__bulk{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--blue);border-radius:var(--radius);
  background:var(--panel)}
/* #1135 — .dsk__bulk{display:flex} перебивал браузерное [hidden]{display:none}: полка «Выбрано: 0 ·
   Скачать архивом…» стояла над списком всегда, хотя disk_bulk.js прятал её при нуле. Та же ловушка
   у кнопок внутри полки: .btn{display:inline-flex} перебивал hidden у «Скачать архивом» и «Поделиться»,
   поэтому правило накрывает и саму полку, и её потомков. */
.dsk__bulk[hidden],.dsk__bulk [hidden]{display:none}
.dsk__bulkn{font-weight:600}
.dsk__pickcell{width:34px;text-align:center}
/* #1812 — перетаскивание: строка в пути бледнеет, цель подсвечивается. Без подсветки
   человек не понимает, куда именно упадёт, и промахивается мимо нужной ветки. */
.is-dragging{opacity:.45}
.is-droptarget{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px}
.dsk__pickcell input{margin:0}
.th-sort__hint{opacity:.35;font-size:11px}
.th-sort:hover .th-sort__hint{opacity:.7}
.th-sort__ar{font-size:11px}
/* #199 — ручка перетаскивания пункта чек-листа */
.chk-grip{cursor:grab;color:var(--ink-3);font-size:11px;line-height:1;user-select:none;flex:none;padding:2px 2px 2px 0}
/* #1825 — чем закрыт пункт и кем. Отдельной строкой под текстом: приписка в ту же строку ломала бы
   зачёркивание выполненного пункта и прыгала бы по ширине. Мельче и тише самого пункта — это
   доказательство, а не требование. */
.chk-note{display:block;font-size:12px;color:var(--ink-2);text-decoration:none}
.chk-who{display:block;font-size:11px;color:var(--ink-3);text-decoration:none}
.subtask.is-drag{opacity:.5}
.u-inline{display:inline}.u-w280{width:280px}
.u-wrap{flex-wrap:wrap}.u-p0{padding:0}.u-m0{margin:0}.u-f1{flex:1}.tnum{font-variant-numeric:tabular-nums}

/* ---- Экспорт / печать ---- */
.export-body{background:#fff;color:var(--ink);padding:28px;margin:0}
.export-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;
  padding-bottom:16px;border-bottom:2px solid var(--ink)}
.export-brand{display:flex;align-items:center;gap:12px}
.export-title{font-size:18px;font-weight:600}
.export-meta{font-size:12px;color:var(--ink-3)}
/* #2862 — строка выбора листа; объявлена ВЫШЕ @media print, иначе её display:flex перебивает .noprint{display:none} */
.export-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.export-tool{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-meta);color:var(--ink-2)}
.orgchart--print .oc-collapse{display:none}
.orgchart--print{transform:none}
@media print{
  .noprint{display:none}
  .export-body{padding:0}
  @page{size:A3 landscape;margin:12mm}
}
/* #2862 — печать оргсхемы: размер листа выбирает человек (orgprint.js ставит data-sheet на <html>), схема вписывается
   масштабом zoom. Именованные страницы: глобальный @page A3 выше остаётся для остальных печатных экранов. */
@page orgA4{size:A4 landscape;margin:10mm}
@page orgA3{size:A3 landscape;margin:10mm}
@page orgA2{size:594mm 420mm;margin:10mm}
@media print{
  html[data-sheet="a4"] .export-body{page:orgA4}
  html[data-sheet="a3"] .export-body{page:orgA3}
  html[data-sheet="a2"] .export-body{page:orgA2}
}
/* схема печати меряется по содержимому, а не по ширине окна */
.orgchart--print,.orgchart--print .orgstage,.orgchart--print .orgboard:only-child{min-width:0}
/* не рвём карточку блока между листами; целый .oc-dept не трогаем — высокий департамент целиком уехал бы на новый лист */
.orgchart--print .oc-node{break-inside:avoid}

/* ---- Организующая схема (отделения по горизонтали) ---- */
/* #150 — сцена: основная схема + колонки направлений СПРАВА (align-items:flex-start → у верха) */
.orgstage{display:inline-flex;align-items:flex-start;gap:40px;min-width:100%;padding:4px}
/* Полотно центрируем — как было изначально: при вложенной схеме ряд отделений не шире полосы
   руководства, и «шапка» стоит над ними. (Прижатие к левому краю понадобилось только под
   плоский ряд из 7 колонок, от которого отказались: он ломал накрытие и залипание.) */
.orgboard{display:inline-flex;flex-direction:column;align-items:center}
.orgboard:only-child{min-width:100%}  /* #150 — нет направлений → схема снова на всю ширину и по центру */
.orgboard .oc-node{width:auto}
.oc-rootcard{width:280px}
/* #1301 — корень схемы: тонкая полоса с названием компании вместо полной карточки. Полосу
   нельзя убрать совсем — от неё идут стволы связей (.oc-rootstub) к ряду департаментов и к
   совету директоров, на них держится геометрия дерева. Ширина шире карточки, но не во весь
   экран: полоса должна читаться шапкой схемы, а не отдельным блоком. */
/* align-self:stretch — полоса тянется на ВСЮ ширину схемы (её задаёт самый широкий ряд
   дерева). width:100% здесь не работает: .orgboard — inline-flex по контенту, и процент
   считался бы от ширины самой полосы, схлопывая её до текста (поймано на стенде: 135px). */
.oc-rootbar{align-self:stretch;min-width:280px;padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--line);
  text-align:center;box-sizing:border-box}
.oc-rootbar__name{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.oc-rootbar__name:hover{color:var(--blue)}
/* #1933 круг 2 — правил .oc-rootbar__metrics/.oc-rootbar__metric здесь больше нет: показатели из
   полосы корня убраны решением Юрия 21.09.2026 («Вариант 3», см. ИЗМЕНЕНИЕ ТЗ в 01-SPEC.md), и
   стили для класса, которого нет ни в одном шаблоне, — мёртвый груз, вводящий в заблуждение. */
/* #1933 — Продукт компании в верхней полосе */
.oc-rootbar__ckp{margin-top:var(--sp-1);font-size:12.5px;line-height:1.45;color:var(--ink-2);
  max-width:860px;margin-left:auto;margin-right:auto;text-align:center;word-break:break-word}
.oc-rootbar__ckp b{color:var(--ink);font-weight:600}
.oc-rootstub{width:1px;height:24px;background:var(--line-strong)}
.oc-divrow,.oc-govrow{display:flex;gap:var(--sp-5);align-items:flex-start;position:relative;
  padding-top:var(--sp-6)}   /* #1798 — 28 → 24, шаг шкалы */
.oc-divrow::before,.oc-govrow::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:var(--line-strong)}
.oc-govrow{gap:16px;margin-bottom:4px}
.oc-govrow .oc-division{background:var(--panel);border-style:dashed}
/* департамент, подчинённый прямо компании, стоит в том же верхнем ряду, но остаётся департаментом —
   пунктир (признак «руководство») ему не идёт */
.oc-govrow .oc-division--dept{border-style:solid;background:var(--panel-2)}
.oc-division{position:relative}
.oc-division::before{content:"";position:absolute;top:-28px;left:50%;width:1px;height:28px;background:var(--line-strong)}

.oc-division{border:1px solid var(--line);border-top:3px solid var(--divc,var(--line-strong));
  border-radius:14px;padding:12px;background:var(--panel-2)}
.oc-div--0{--divc:#60a5fa}.oc-div--1{--divc:#fbbf24}.oc-div--2{--divc:#c084fc}.oc-div--3{--divc:#fb7185}
.oc-div--4{--divc:#34d399}.oc-div--5{--divc:#94a3b8}.oc-div--6{--divc:#fcd34d}.oc-div--7{--divc:#22d3ee}
.oc-division--hl{--divc:var(--blue)}
.oc-divhead{margin-bottom:12px;background:color-mix(in srgb, var(--divc,transparent) 16%, var(--panel))}
/* Залипание головы верхнего блока (компания/совет/офис исполнительного директора) вынесено под
   тумблер «Залипание ↔» — ниже, вместе с замами и департаментами. Раньше оно было включено ВСЕГДА
   и тумблер на него не действовал, а свёртки до названия у него не было вовсе. */
/* Карточка сотрудника при наведении (#5) */
.emp-card{position:fixed;z-index:200;width:262px;background:var(--panel);border:1px solid var(--line-strong);
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:14px}
.emp-card__head{display:flex;gap:10px;align-items:center}
.emp-card__ava{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--blue-wash);color:var(--sapphire);font-weight:700;font-size:15px}
.emp-card__name{font-weight:450;font-size:15px}
.emp-card__pos{font-size:var(--fs-text);color:var(--ink-2)}
.emp-card__body{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.emp-card__row{font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.emp-card__row a{color:var(--blue)}
.emp-card__link{display:inline-block;margin-top:12px;font-size:13px;color:var(--blue)}
.oc-deptrow{display:flex;gap:12px;align-items:flex-start}
.oc-dept{width:228px;flex:none;display:flex;flex-direction:column}
.oc-sections{margin-top:8px;display:flex;flex-direction:column;gap:8px}

/* ── «Веерные» узлы (зам-Служба, департамент): карточка тянется по ширине ряда своих детей ──
   ВАЖНО (31.07, п.1/п.4): накрытие включаем ТОЛЬКО при наличии ряда подчинённых. У бездетного блока
   width:auto + min-width:100% замыкались друг на друга и давали НУЛЕВУЮ ширину — новый департамент
   рядом с 2-м или под советом просто не было видно (казалось, что он не добавился). */
.oc-dept--service:has(>.oc-deptrow--service),
.oc-dept--department:has(>.oc-sections--row){width:auto;flex:none;align-items:stretch}
/* width:0;min-width:100% — карточка занимает всю ширину ряда детей, но своим текстом НЕ расширяет
   колонку шире ряда (иначе шина-коннектор торчит). sticky — заголовок виден при гор. скролле (как #6). */
.oc-dept--service:has(>.oc-deptrow--service)>.oc-fanhead,
.oc-dept--department:has(>.oc-sections--row)>.oc-fanhead{width:0;min-width:100%;box-sizing:border-box}
/* Закрепление заголовков при прокрутке (#55). Позиционирование sticky включается тумблерами в
   orgbar: .oc-hsticky — по горизонтали, .oc-vsticky — по вертикали. При залипании JS вешает класс
   свёртки — карточка ужимается до названия (тонкая полоса), чтобы не перекрывать нижние карточки. */
.orgchart.oc-hsticky .oc-division>.oc-divhead,
.orgchart.oc-hsticky .oc-dept--service>.oc-fanhead,
.orgchart.oc-hsticky .oc-dept--department>.oc-fanhead{position:sticky;left:6px;z-index:6}
.orgchart.oc-vsticky .oc-dept--department>.oc-fanhead{position:sticky;top:0;z-index:7}
.orgchart.oc-vsticky .oc-sections--row>.oc-item>.oc-node{position:sticky;top:var(--dept-fanh,48px);z-index:4}
/* свёртка залипшей карточки до названия — общая для гор. (.oc-xstuck) и верт. (.oc-ystuck) */
/* #1769 — .oc-people добавлен в список наравне с .oc-foot: люди переехали из подвала наверх, и без
   этой строки в «прилипшей» шапке департамента снова появились бы аватары, которые она как раз и
   сворачивает до одного названия. */
.oc-xstuck .oc-ckp,.oc-xstuck .oc-sec,.oc-xstuck .oc-people,.oc-xstuck .oc-foot,
.oc-ystuck .oc-ckp,.oc-ystuck .oc-sec,.oc-ystuck .oc-people,.oc-ystuck .oc-foot{display:none}
.oc-xstuck .oc-name,.oc-ystuck .oc-name{margin-bottom:0}
.oc-xstuck .oc-head,.oc-ystuck .oc-head{margin-bottom:2px}
/* горизонталь: ужимаем по ширине до текста (нативный sticky:left держит у края) */
.oc-fanhead.oc-xstuck,
.oc-divhead.oc-xstuck{min-width:0;width:max-content;max-width:230px;z-index:8;
  box-shadow:2px 2px 10px rgba(15,23,42,.14)}
/* #758 — департаменты и службы по горизонтали НЕ залипали, а верхние блоки залипали. Причина не в
   JS (класс .oc-xstuck он вешал исправно), а в весе селекторов: правило «веерной» карточки
   `.oc-dept--department:has(>.oc-sections--row)>.oc-fanhead{width:0;min-width:100%}` весит больше,
   чем `.oc-fanhead.oc-xstuck`, поэтому залипшая карточка оставалась во всю ширину ряда своих детей.
   А когда карточка ровно такой же ширины, как её родитель, у position:sticky нет запаса, чтобы
   сдвинуть её к краю — визуально «не залипает». Замер 18.08 на схеме с дирекцией: у департамента
   после .oc-xstuck min-width оставался 100%, ширина 668px = ширина родителя. У верхних блоков веса
   равны и правило свёртки идёт позже, поэтому они работали. Дальше сжатая карточка держится у
   левого края до конца своего департамента и передаёт место следующему — как просил Юрий. */
.oc-dept--service:has(>.oc-deptrow--service)>.oc-fanhead.oc-xstuck,
.oc-dept--department:has(>.oc-sections--row)>.oc-fanhead.oc-xstuck{min-width:0;width:max-content;
  max-width:230px}
/* вертикаль: ширину НЕ трогаем (полоса во всю карточку), лёгкая тень снизу */
.oc-ystuck{z-index:8;box-shadow:0 3px 10px rgba(15,23,42,.16)}
/* горизонтальный ряд детей + соединительная линия сверху и подводки к каждому ребёнку */
.oc-deptrow--service,.oc-sections--row{display:flex;flex-direction:row;align-items:flex-start;
  justify-content:center;gap:16px;position:relative;padding-top:22px;margin-top:8px}
.oc-deptrow--service::before,.oc-sections--row::before{content:"";position:absolute;top:0;
  left:10%;right:10%;height:1px;background:var(--line-strong)}
.oc-deptrow--service>*,.oc-sections--row>*{position:relative}
.oc-deptrow--service>*::before,.oc-sections--row>*::before{content:"";position:absolute;
  top:-22px;left:50%;width:1px;height:22px;background:var(--line-strong)}
/* единственный ребёнок → прячем шину и подводку (иначе лишний «T» над одной карточкой) */
.oc-deptrow--service:has(> *:only-child)::before,.oc-sections--row:has(> *:only-child)::before{display:none}
.oc-deptrow--service > *:only-child::before,.oc-sections--row > *:only-child::before{display:none}
/* управление — колонка фиксированной ширины; его отделы/секции идут ВНИЗ (см. .oc-children) */
.oc-sections--row>.oc-item{--oc-w:var(--oc-w-row);flex:none}
/* #2762 (решение Юрия 02.10.2026: «уменьшать вложенные блоки только до 3-го уровня, глубже — тот же размер,
   вложенность отступом»). Раньше каждый уровень отнимал у карточки шаг вложенности (отступ + линия), и
   блок 5-го уровня становился узкой полоской. Теперь ширина карточки задана по уровню: 1-й уровень —
   колонка управления/департамента (--oc-w), 2-й и 3-й уже на шаг и на два шага, начиная с 4-го ширина та
   же, что у 3-го. Ширину колонки при этом определяет самая глубокая раскрытая ветка (width:max-content): она
   растёт вправо на отступ, а не сжимает карточку; свёрнутая ветка в расчёт не входит. Узлы под
   .oc-sections--row лежат внутри .oc-item, поэтому 1-й уровень тоже задаём явно. */
.oc-dept{--oc-w:var(--oc-w-dept)}
.orgboard .oc-sections>.oc-item>.oc-node{width:var(--oc-w)}
.orgboard .oc-children .oc-node{width:calc(var(--oc-w) - var(--oc-nest-step))}
.orgboard .oc-children .oc-children .oc-node{width:calc(var(--oc-w) - 2 * var(--oc-nest-step))}
.oc-sections .oc-item{width:max-content}
.oc-dept:has(>.oc-sections:not(.oc-sections--row)){width:max-content;min-width:var(--oc-w-dept)}
.orgboard .oc-dept:has(>.oc-sections:not(.oc-sections--row))>.oc-fanhead{width:var(--oc-w-dept)}

/* #150 — направления бизнеса: вертикальные колонки справа от основной схемы */
.oc-directions{display:flex;flex-direction:column;gap:10px;align-self:flex-start}
.oc-directions__label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--sapphire);font-weight:450}
.oc-directions__row{display:flex;gap:24px;align-items:flex-start}
.oc-direction{display:flex;flex-direction:column;align-items:stretch;position:relative;
  border:1px dashed var(--divc,var(--blue));border-radius:16px;padding:14px;
  background:color-mix(in srgb, var(--nc,var(--blue)) 7%, var(--panel))}
.oc-dirhead{width:240px;position:relative;margin-bottom:0}
/* стволик от головы вниз к спине списка департаментов */
.oc-dirhead::after{content:"";position:absolute;left:19px;bottom:-12px;width:1px;height:12px;background:var(--line-strong)}
.oc-direction:has(.oc-deptrow--vert) .oc-dirhead{margin-bottom:0}
/* департаменты направления — ВНИЗ, левой спиной-деревом с подводками к каждому */
.oc-deptrow--vert{display:flex;flex-direction:column;gap:12px;margin-top:12px;margin-left:19px;
  padding-left:18px;border-left:1px solid var(--line-strong)}
.oc-deptrow--vert>.oc-dept{position:relative;width:224px;flex:none}
.oc-deptrow--vert>.oc-dept::before{content:"";position:absolute;top:22px;left:-18px;width:14px;height:1px;background:var(--line-strong)}
.oc-deptrow--vert>.oc-dept:only-child::before{display:none}

.oc-item{position:relative}
.oc-children{margin-top:8px;padding-left:var(--sp-4);border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px}
.oc-children>.oc-item::before{content:"";position:absolute;top:17px;left:-16px;width:12px;height:1px;background:var(--line)}
.oc-item.is-collapsed>.oc-children{display:none}
.oc-item.is-collapsed>.oc-node{border-bottom-style:dashed}
.orgboard .oc-collapse{top:8px;right:8px;bottom:auto;left:auto;transform:none;width:20px;height:20px;font-size:13px}
.oc-grip{position:absolute;left:0;top:0;bottom:0;width:18px;display:flex;align-items:center;justify-content:center;
  cursor:grab;color:var(--ink-3);font-size:12px;line-height:1;user-select:none;z-index:3;border-radius:12px 0 0 12px}
.oc-grip:hover{color:var(--ink);background:var(--page)}
/* #2762 — «а как мне перетащить-то?» (Максим, 02.10.2026): ручка ⠿ была почти невидна. В Правке она получает
   заметную полосу и крупнее значок; перетаскивание за неё работало и раньше (Sortable, /org/reorder/), а не
   работало оно в Просмотре — там ручки нет вовсе (правило ниже), и об этом теперь сказано подсказкой над схемой. */
.orgchart.oc-edit .oc-grip{width:var(--sp-5);font-size:var(--fs-card);color:var(--ink-2);
  background:color-mix(in srgb, var(--ink) 8%, transparent);border-right:1px solid var(--line-strong)}
.orgchart.oc-edit .oc-grip:hover{background:color-mix(in srgb, var(--ink) 16%, transparent);color:var(--ink)}
.orgchart.oc-edit .oc-node:has(.oc-grip) .oc-link{padding-left:calc(var(--sp-5) + var(--sp-2))}
.oc-grip:active{cursor:grabbing}
.oc-node:has(.oc-grip) .oc-link{padding-left:var(--sp-5)}   /* #1798 — 22 → 20 */
.oc-ghost{opacity:.4}
.sortable-drag .oc-grip{cursor:grabbing}
.oc-ckp{overflow-wrap:anywhere}
.oc-foot{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--line-2);flex-wrap:wrap}
.oc-fchip{font-size:11px;color:var(--ink-3);background:var(--page);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:1px 8px}
/* Цветные карточки отделений (#8.3): пастель-фон всегда светлый → тёмный текст в обеих темах */
/* Полоска-подложка карточки — в тон отделения (тёмный оттенок его пастельного цвета) */
.oc-node--nc{border-top-color:color-mix(in srgb, var(--nc), black 42%)}
/* #2699 — фон цветной карточки = цвет департамента (--nc, ставит dynstyle.js с .oc-node) в смеси с белым:
   чем глубже уровень (oc-lv-N, считает views._paint_levels), тем светлее. Первое объявление — запасное
   для браузеров без color-mix; фон всегда светлый, текст #1a1a1a — в обеих темах. */
.oc-link--colored{border-radius:12px;background:var(--nc);
  background:color-mix(in srgb, var(--nc) var(--oc-mix,100%), #fff)}
.oc-lv-1{--oc-mix:var(--oc-mix-1)}
.oc-lv-2{--oc-mix:var(--oc-mix-2)}
.oc-lv-3{--oc-mix:var(--oc-mix-3)}
.oc-lv-4{--oc-mix:var(--oc-mix-4)}
/* №1137 — фон цветной карточки светлый в обеих темах, поэтому внутри неё токены текста и состояний
   берут значения «для пастели». Иначе в тёмной теме имена людей, должность, значения и тренды красились
   светлыми цветами тёмной темы: контраст 1,7–2,7. Значения подобраны по худшему фону палитры ORG_COLORS
   (#B6D6CC, уровень 0; чем глубже уровень, тем фон светлее): --ink-2 6,1 · --ink-3 5,0 · --blue/--sapphire
   5,4 · --green 4,6 · --red 5,2 (WCAG, норма 4,5). Плашки внутри («Вакансия», аватар) — светлые пары.
   №1146 — значки: ★ тёмно-янтарная 4,4 (была #eab308, 1,23), ⚠ красная 5,2 (была #dc2626, 3,10); норма значка 3. */
.oc-link--colored{color-scheme:light;
  --ink:#141e41; --ink-2:#3a4566; --ink-3:#455173; --blue:#4433c4; --sapphire:#4433c4; --blue-wash:#f3f2fe;
  --green:#166534; --red:#9f1239; --amber:#8a5a10; --t-amber-bg:#fdf5ea;
  --oc-star-fg:#854d0e; --oc-warn-fg:#9f1239;
  --line:#edeff4; --line-2:#f4f5f9; --line-strong:#dce0e8; --page:#eef1f6; --canvas:#ffffff; --panel:#ffffff}
.oc-link--colored .oc-name,.oc-link--colored .oc-ckp,.oc-link--colored .oc-ckp b,.oc-link--colored .oc-num{color:#1a1a1a}
.oc-link--colored .oc-num{background:rgba(255,255,255,.65);border-color:rgba(0,0,0,.15)}
.oc-link--colored .oc-fchip{background:rgba(255,255,255,.6);color:#333;border-color:rgba(0,0,0,.12)}
/* Инлайн-редактирование на схеме (#4) */
/* Секции «Работы» (что делать) и «Статистики» (чем измерять) на карточке.
   Видно первые 3 пункта, остальное раскрывается кнопкой «ещё N» (класс .oc-sec--open). */
.oc-sec{margin-top:7px;font-size:var(--fs-label);line-height:1.45}
.oc-sec__hd{display:flex;align-items:center;gap:6px;color:var(--ink-3);margin-bottom:2px}
/* #924 — подписи «Работы» и «Показатели» на карточке схемы были 700: на оргсхеме это почти три
   сотни жирных надписей, отчего экран и читался тяжёлым (замер: 264 элемента весом 700), и их
   облегчили до 450. #2699 — по слову Юрия 30.09 («Названия: Продукт, Работы, Показатели — выделить
   жирным на схеме») вес вернули, но 600 из шкалы 400/450/600/700, а не прежние 700. */
.oc-sec__hd b{font-weight:600}
.oc-sec__cnt{font-size:10px;font-weight:700;background:var(--page);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:0 6px;color:var(--ink-3)}
.oc-sec__more{margin-left:auto;font:inherit;font-size:var(--fs-meta);color:var(--blue);background:none;
  border:none;cursor:pointer;padding:0}
.oc-sec__more:hover{text-decoration:underline}
/* .oc-node-префикс перебивает легаси-правила дерева .orgchart ul/li (flex, padding:22px, коннекторы) */
.oc-node .oc-sec__list{display:block;margin:0;padding:0;color:var(--ink-2);list-style:none;justify-content:initial}
.oc-node .oc-sec__list li{display:list-item;list-style:none;flex-direction:initial;align-items:initial;
  position:relative;margin:2px 0;padding:0 0 0 13px;overflow-wrap:anywhere}
/* чёрная точка-маркер у каждой работы/статистики (перебивает легаси-коннектор .orgchart li::before) */
.oc-node .oc-sec__list li::before{content:"•";position:absolute;left:2px;top:0;width:auto;height:auto;
  border:0;background:none;color:var(--ink);font-weight:700}
.oc-node .oc-sec__list li::after{display:none;content:none}
.oc-node .oc-sec__list li.oc-sec__x{display:none}
.oc-sec--open .oc-sec__list li.oc-sec__x{display:list-item}
.oc-node .oc-sec__list li.oc-sec__add{padding-left:0;color:var(--ink-3);font-style:italic;opacity:.75}
.oc-node .oc-sec__list li.oc-sec__add::before{content:none}
.oc-sec--stat .oc-sec__list li::before{color:var(--sapphire)}
.oc-link--colored .oc-sec__hd,.oc-link--colored .oc-sec__list{color:#1a1a1a}
.oc-link--colored .oc-sec__list li::before{color:#1a1a1a}
.oc-link--colored .oc-sec__cnt{background:rgba(255,255,255,.6);border-color:rgba(0,0,0,.12);color:#333}
/* секции скрыты по умолчанию — раскрываются кареткой ▾ (карточка .oc-open) или тумблером «Развернуть»
   (.orgchart.oc-allexpanded). Залипшая/свёрнутая карточка перекрывает раскрытие — только название. */
.oc-node .oc-sec{display:none}
.oc-node.oc-open .oc-sec,.orgchart.oc-allexpanded .oc-node .oc-sec{display:block}
.oc-node.oc-xstuck .oc-sec,.oc-node.oc-ystuck .oc-sec{display:none!important}
/* каретка раскрытия работ/статистик в конце ЦКП */
.oc-exp{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:6px;
  font-size:14px;line-height:1;color:var(--ink-3);background:none;border:0;cursor:pointer;border-radius:5px;
  vertical-align:middle;transition:transform .12s;flex:none}
.oc-exp:hover{color:var(--blue);background:rgba(0,0,0,.06)}
.oc-node.oc-open .oc-exp,.orgchart.oc-allexpanded .oc-exp{transform:rotate(180deg);color:var(--blue)}
.oc-link--colored .oc-exp{color:#333}
.orgchart.oc-edit .oc-node [data-edit]{cursor:text;border-radius:6px}
.orgchart.oc-edit .oc-node [data-edit]:hover{background:rgba(0,0,0,.05)}
/* #2699 — в Правке название блока ведёт на страницу блока, раздел правки (org.js) */
.orgchart.oc-edit .oc-name,.orgchart.oc-edit .oc-rootbar__name{cursor:pointer}
.orgchart.oc-edit .oc-name:hover,.orgchart.oc-edit .oc-rootbar__name:hover{text-decoration:underline}
.oc-editbox{display:block;width:100%;margin-top:4px;font:inherit;font-size:12px;border:1px solid var(--blue);
  border-radius:6px;padding:4px 6px;resize:vertical;background:var(--canvas);color:var(--ink)}
.is-editing .oc-ckp__val,.oc-sec.is-editing .oc-sec__list,.oc-sec.is-editing .oc-sec__more{display:none}
/* #2699 (решение Юрия 01.10.2026): «＋ назначить сотрудника» и «＋ показатель» со схемы убраны вместе со своими
   стилями (.oc-assign, .oc-addmetric, .oc-add, .oc-assignpop*); сотрудники и показатели — на странице блока и в форме
   нового блока. */
/* Режим «Просмотр» оргсхемы: кнопок правки на схеме нет вовсе (#2699, решение Юрия 30.09.2026: «в Просмотре
   всё скрыто»). Каждый класс — ОТДЕЛЬНЫМ правилом с display:none: в #758 их склеили в один список,
   к которому приклеилось {opacity:.35} (комментарий внутри списка селекторов), display:none пропал,
   и «＋ ниже / ＋ рядом» месяцами висели на схеме бледными, а клик по ним уходил ссылкой на страницу
   блока. Сторож — OrgViewEditModeTests.test_edit_controls_are_hidden_by_their_own_css_rule. */
.orgchart:not(.oc-edit) .oc-grip{display:none !important}
.orgchart:not(.oc-edit) .oc-colplus{display:none !important}
.orgchart:not(.oc-edit) .oc-corner{display:none !important}
.orgchart:not(.oc-edit) .oc-sec--empty{display:none !important}
.orgchart:not(.oc-edit) .oc-sec__add{display:none !important}
/* ручки нет → отступ слева снова симметричный (правило с ручкой — выше, .oc-node:has(.oc-grip)) */
.orgchart:not(.oc-edit) .oc-node:has(.oc-grip) .oc-link{padding-left:var(--sp-3)}
/* тумблер «Редактирование» */
.oc-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13px;color:var(--ink-2)}
.oc-switch input{position:absolute;opacity:0;width:0;height:0}
.oc-switch__track{width:38px;height:22px;border-radius:11px;background:var(--line-strong);position:relative;transition:background .15s;flex:none}
.oc-switch__knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.oc-switch input:checked + .oc-switch__track{background:var(--blue)}
.oc-switch input:checked + .oc-switch__track .oc-switch__knob{left:18px}
.oc-switch input:focus-visible + .oc-switch__track{outline:2px solid var(--blue);outline-offset:2px}
/* заблокированный тумблер (напр. «Развернуть» в режиме редактирования) — серый неактивный вид */
.oc-switch:has(input:disabled){opacity:.5;cursor:not-allowed}
.oc-switch input:disabled + .oc-switch__track{cursor:not-allowed}
/* чекбоксы залипания ↕/↔ в orgbar */
.oc-chk{display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none;
  font-size:13px;color:var(--ink-2);white-space:nowrap}
.oc-chk input{accent-color:var(--blue);width:15px;height:15px;cursor:pointer}
.oc-chk:hover{color:var(--ink)}
/* заблокировано в режиме редактирования — серый неактивный вид */
.oc-chk input:disabled{cursor:not-allowed;accent-color:var(--silver)}
.oc-chk:has(input:disabled){opacity:.45;cursor:not-allowed}
/* ── #2699 круг 3 (решение Юрия 01.10.2026) — «＋» в правом верхнем углу КАЖДОЙ карточки ──
   Открывает форму нового блока (templates/org/node_new.html). «＋» под столбцами (круги 1-2: кружок, затем подписанная
   «таблетка») убраны: у вложенных столбцов они шли лесенкой и было не понять, какой что создаёт. Вне Правки скрыт
   правилом выше (.orgchart:not(.oc-edit) .oc-corner). */
.oc-corner{position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:3;display:inline-flex;align-items:center;
  justify-content:center;width:24px;height:24px;border:1px dashed var(--line-strong);border-radius:50%;
  background:var(--canvas);color:var(--ink-2);font-size:16px;line-height:1;text-decoration:none;cursor:pointer}
.oc-corner:hover{border-color:var(--blue);color:var(--blue)}
.oc-corner:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* кнопка свёртки «−/+» тоже живёт в правом верхнем углу: в Правке она сдвигается левее «＋» */
.orgchart.oc-edit .orgboard .oc-node:has(.oc-corner)>.oc-collapse{right:calc(var(--sp-2) + 24px + var(--sp-1))}
/* название блока не заезжает под угловые кнопки */
.orgchart.oc-edit .oc-node:has(.oc-corner) .oc-link{padding-right:calc(var(--sp-7) + var(--sp-1))}
.orgchart.oc-edit .oc-node:has(.oc-corner):has(.oc-collapse) .oc-link{padding-right:calc(var(--sp-7) + var(--sp-6) + var(--sp-1))}
/* длинное слово без пробелов («внутриорганизационных») не должно вылезать из суженной колонки названия под угол */
.orgchart.oc-edit .oc-node:has(.oc-corner) .oc-name{overflow-wrap:anywhere}
/* у корня остаётся «＋ направление» (колонка справа) — кнопка под рядами схемы */
.oc-colplus{display:flex;justify-content:center;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5)}
.oc-colplus__btn{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--sp-5) + var(--sp-2));
  padding:0 var(--sp-3);border:1px dashed var(--line-strong);border-radius:var(--radius-pill);background:var(--canvas);
  color:var(--ink-2);font:inherit;font-size:var(--fs-label);line-height:1;white-space:nowrap;cursor:pointer}
.oc-colplus__btn:hover{border-color:var(--blue);color:var(--blue)}
.oc-colplus__btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* ── #2699 — режим схемы и выпадающие панели планки ── */
.oc-mode{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--panel)}
.oc-mode__btn{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-text);
  font-weight:450;padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
.oc-mode__btn:hover{background:var(--page);color:var(--ink)}
.oc-mode__btn.is-active{background:var(--t-blue-bg);color:var(--t-blue-fg);font-weight:600}
.oc-mode__btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.orgbar:not(.orgbar--edit) .oc-only-edit{display:none}
.orgbar--edit .oc-only-view{display:none}
.oc-menu{position:relative}
.oc-menu>summary{list-style:none;cursor:pointer}
.oc-menu>summary::-webkit-details-marker{display:none}
.oc-menu__pop{position:absolute;z-index:60;top:calc(100% + var(--sp-2));left:0;min-width:220px;
  max-width:calc(100vw - var(--sp-7));display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);
  box-shadow:var(--shadow-card);text-align:left}
.oc-menu--more>.oc-menu__pop{right:0;left:auto}
.oc-menu__pop>.oc-switch,.oc-menu__pop>.oc-chk{padding:var(--sp-2) var(--sp-3)}
.oc-menu__item{display:flex;align-items:center;width:100%;min-height:var(--sp-7);padding:var(--sp-2) var(--sp-3);
  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:inherit;
  font-size:var(--fs-text);text-align:left;text-decoration:none;cursor:pointer;box-sizing:border-box}
.oc-menu__item:hover{background:var(--page);color:var(--blue)}
.oc-menu__item:disabled{opacity:.5;cursor:not-allowed}
.oc-menu__item:disabled:hover{background:transparent;color:var(--ink)}
.oc-menu__item--danger{color:var(--red)}
.oc-menu__item--danger:hover{background:var(--t-red-bg);color:var(--red)}
.oc-menu__item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.oc-menu__form{display:block;margin:0}
.oc-menu__sep{border:0;border-top:1px solid var(--line);margin:var(--sp-1) 0}
/* «Состав…» раскрывается внутри меню: форма не всплывающая, а обычная секция */
.oc-menu__pop .oc-compact>summary{list-style:none}
.oc-menu__pop .oc-compact__pop{position:static;width:auto;box-shadow:none;padding:var(--sp-2) var(--sp-3)}
@media (max-width:640px){
  /* #2699 — на телефоне панели раскрываются на всю ширину планки, а не от кнопки (иначе уезжают за край) */
  .orgbar{position:relative}
  .oc-menu{position:static}
  .oc-menu__pop,.oc-menu--more>.oc-menu__pop{left:0;right:0;width:auto;max-width:none}
  .oc-menu__item{min-height:calc(var(--sp-6) + var(--sp-4))}
  .oc-stage{width:100%;max-width:100%}
  .oc-stage__sel{flex:1 1 auto;min-width:0;max-width:100%}   /* длинный пункт списка не растягивает плашку за край (375 px) */
  .oc-mode{width:100%}
  .oc-mode__btn{flex:1}
  .oc-colplus__btn{min-height:calc(var(--sp-5) + var(--sp-3))}   /* 32 px под палец */
  .oc-corner{width:32px;height:32px}
  .orgchart.oc-edit .oc-node:has(.oc-corner) .oc-link{padding-right:calc(var(--sp-7) + var(--sp-4))}
  .orgchart.oc-edit .oc-node:has(.oc-corner):has(.oc-collapse) .oc-link{padding-right:calc(var(--sp-7) + var(--sp-7) + var(--sp-4))}
  .orgchart.oc-edit .orgboard .oc-node:has(.oc-corner)>.oc-collapse{right:calc(var(--sp-2) + 32px + var(--sp-1))}
}
/* #1769 (встреча 17.09.2026) — люди переехали из подвала карточки под название должности и стоят
   СТОЛБИКОМ: «после названия должности должна идти иконка с фотографией и рядом как зовут этого
   человека». margin-left:auto (прижатие вправо, «дальний угол») снят вместе с переездом. */
/* #2762 (Максим, встреча 02.10.2026: «кружки друг на друга наезжают — расстояние между»; Юрий: «ну ладно, давай
   расстояние сделаем») — между людьми шаг шкалы --sp-2 (был 3 px: кружки с кольцом «по совместительству» вплотную
   касались друг друга), а строка человека не сжимается (flex:none), так что кружок не заходит на соседа. Размер кружка
   тот же (20 px): Юрий просил именно расстояние. Фото в кружке — object-fit:cover, оно не растягивает строку. */
.oc-people{display:flex;flex-direction:column;gap:var(--sp-2);margin:6px 0 0;position:relative;align-items:flex-start}
.oc-people .oc-emp{display:flex;align-items:center;gap:5px;max-width:100%;flex:none;
  margin:0;padding:0;border-top:0}
.oc-emp__name{font-size:11.5px;line-height:1.25;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Размер вернулся к мелкому по просьбе Юрия («какие раньше были»): 34px были рассчитаны на строку
   в подвале, где рядом ничего не стояло. Под должностью, да ещё с именем рядом, такой кружок
   перевешивал само название блока. Кто это — теперь читается по имени, а не только по лицу;
   подробности о сотруднике по-прежнему всплывают подсказкой при наведении. */
.oc-people .oc-ava{width:20px;height:20px;border-radius:50%;background:var(--blue-wash);color:var(--sapphire);
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}

/* ── #2762 — мини-карта схемы (Юрий и Максим 02.10.2026: «мини-карта — вообще огонь»: обзор всей схемы, рамка
   видимой области, двигаешь рамку — едешь куда надо) и подсказка режима «Правка» ──
   Карта живёт в углу .orgview (обёртка вокруг .orgwrap — сама .orgwrap прокручивается, и карта внутри неё уехала
   бы вместе со схемой). Размер миниатюры считает org_minimap.js по размеру схемы и потолку --oc-map-w/--oc-map-h;
   положение рамки и размеры ставятся через CSSOM — style="" в разметке запрещён. На телефоне карты нет вовсе: схема
   там двигается пальцем и щипком, а карта закрыла бы половину экрана. */
.orgview{position:relative}
.orgmap{position:absolute;z-index:10;right:var(--sp-4);bottom:var(--sp-4);width:max-content;
  max-width:calc(100% - var(--sp-7));padding:var(--sp-2);border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-card)}
.orgmap[hidden]{display:none}
.orgmap:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.orgmap__body{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--panel-2);
  cursor:pointer;touch-action:none;user-select:none}
.orgmap__cv{display:block;width:100%;height:100%}
.orgmap__view{position:absolute;box-sizing:border-box;border:2px solid var(--blue);
  border-radius:var(--radius-sm);background:color-mix(in srgb, var(--blue) 14%, transparent);cursor:grab}
.orgmap__view:active{cursor:grabbing}
html.js .orgwrap:not(.is-ready) ~ .orgmap{visibility:hidden}
@media (max-width:640px){
  .orgmap{display:none}
}
.oc-edithint{margin:0 0 var(--sp-3);font-size:var(--fs-label);line-height:1.45;color:var(--ink-2)}
.orgbar:not(.orgbar--edit)+.oc-edithint{display:none}

/* ---- Глазок пароля ---- */
.pw-wrap{position:relative}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;
  color:var(--ink-3);padding:4px;display:flex;align-items:center}
.pw-eye:hover{color:var(--ink)}
.pw-eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- Выезжающая панель задачи (#3) ---- */
.btn--sm{padding:4px 10px;font-size:12px}
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;
  z-index:60;transition:opacity .2s, visibility 0s .2s}
/* затемнение — по своей панели: задача (#taskScrim) и сделка (#dealScrim, #185/#194) независимы,
   иначе открытие одной панели зажигало бы оба оверлея (двойное затемнение + перехват кликов) */
body.drawer-open #taskScrim{opacity:1;visibility:visible;transition:opacity .2s}
body.deal-open #dealScrim{opacity:1;visibility:visible;transition:opacity .2s}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(600px,94vw);background:var(--panel);
  border-left:1px solid var(--line);z-index:61;transform:translateX(100%);transition:transform .22s ease, width .18s ease;
  display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.14)}
.drawer[aria-hidden="false"]{transform:translateX(0)}
/* ПАНЕЛЬ-4 (#2600) — кнопка «Шире»: по умолчанию ширина как раньше (94vw/600px), «Шире» —
   примерно 2/3 экрана с верхней границей, чтобы не разъезжалось на широких мониторах. Двойная
   специфичность .drawer.drawer--wide — тот же приём, что уже применён для .drawer--filters
   выше (перебивает базовое правило .drawer при равной специфичности по порядку в файле). */
.drawer.drawer--wide{width:min(66vw,1100px)}
/* Мобильный порог 640px — уже используемая в этом же компоненте граница (static/js/taskchats.js
   isMobile(): max-width:640px) и самый частый брейкпоинт в app.css. На телефоне панель ВСЕГДА на
   весь экран независимо от «Шире» — специфичность решает эту гонку: .drawer{width:100vw} внутри
   media имеет специфичность (0,1,0), а .drawer.drawer--wide вне media — (0,2,0), и при открытой
   ширине на телефоне ПОБЕДИЛО БЫ ШИРЕ, несмотря на порядок правил в файле. Поэтому мобильное
   правило продублировано для .drawer--wide явно, с той же специфичностью (0,2,0) — только так
   media query гарантированно выигрывает у состояния «Шире». */
/* Возврат ОТК #2600 круг 1 (28.09.2026): правило — ТОЛЬКО для панели задачи (#taskDrawer). На общем
   .drawer оно раскрывало на телефоне во весь экран и чужие панели (сделка CRM #dealDrawer, Диск
   #diskRightsDrawer/#diskShareDrawer). Специфичность id (1,0,0) и так выше .drawer.drawer--wide. */
@media (max-width:640px){
  #taskDrawer{width:100vw;border-left:0}
}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid var(--line);flex:none}
.drawer__ttl{font-weight:450;font-size:13px;color:var(--ink-2)}
.drawer__close{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;
  background:var(--canvas);color:var(--ink-2);cursor:pointer;font-size:14px}
.drawer__close:hover{border-color:var(--blue);color:var(--ink)}
.drawer__body{overflow-y:auto;padding:16px;flex:1}
.drawer__loading{padding:48px 20px;text-align:center;color:var(--ink-3)}

/* #637 — шапка панели: номер, название и кнопки в одну строку. flex-wrap оставлен ради узкого
   экрана (панель там 94vw): кнопки уходят на свою строку целой группой, а не по одной. */
.panel__bar{margin-bottom:var(--sp-2);display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.panel__acts{display:flex;gap:6px;align-items:center;flex:none;margin-left:auto}
.pnl-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border:1px solid var(--line);border-radius:8px;background:var(--canvas);color:var(--ink-2);
  cursor:pointer;font-size:15px;line-height:1;text-decoration:none}
.pnl-icon:hover{border-color:var(--blue);color:var(--ink)}
.panel__bar form{display:inline;margin:0}
/* #637 — номер задачи: виден в карточке, по нему её ищут в сквозном поиске.
   Имя НЕ .tnum — это занятая утилита tabular-nums (см. выше), перебить её значило бы
   превратить полсотни числовых ячеек в отчётах в серые пилюли. */
.tasknum{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink-3);padding:3px 7px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--canvas);user-select:all;white-space:nowrap;flex:none}
/* #2795 — закреплённая строка панели задачи. Раньше в верхней строке ящика (.drawer__head) стояло
   только «Задача» и ✕, а номер, название и кнопки (Шире, ссылка, дублировать, видеовстреча) лежали
   в прокручиваемом теле и уезжали вверх: к кнопке «Шире» или к ссылке приходилось листать наверх.
   Теперь .panel__bar — липкая первая строка тела (position:sticky внутри .drawer__body, она и есть
   прокручиваемый контейнер), а ✕ из .drawer__head ложится поверх её правого края: одна строка
   «#номер · название · кнопки · закрыть», без копий кнопок. Строка одной высоты и не переносится:
   название сжимается с многоточием (полный текст — в подсказке title). Работает только когда в ящике
   есть панель задачи (:has(.panel__bar)) — «Загрузка…», форма новой задачи и чужие ящики прежние.
   Ловушки fixed внутри transform-ящика (floatpop.js::place()) тут нет: sticky считается от
   прокручиваемого .drawer__body, а ✕ — absolute относительно самого ящика. */
#taskDrawer{--ptb-h:calc(var(--sp-7) + var(--sp-6))}
#taskDrawer:has(.panel__bar) .drawer__head{position:absolute;top:0;right:0;z-index:5;height:var(--ptb-h);
  padding:0 var(--sp-4);border-bottom:0;pointer-events:none}
#taskDrawer:has(.panel__bar) .drawer__ttl{display:none}
#taskDrawer:has(.panel__bar) .drawer__close{pointer-events:auto}
#taskDrawer:has(.panel__bar) .drawer__body{padding-top:0;scroll-padding-top:var(--ptb-h)}
#taskDrawer .panel__bar{position:sticky;top:0;z-index:4;box-sizing:border-box;height:var(--ptb-h);flex-wrap:nowrap;
  margin:0 calc(-1 * var(--sp-4)) var(--sp-2);
  padding:0 calc(var(--sp-4) + var(--sp-7) + var(--sp-2)) 0 var(--sp-4);
  background:var(--panel);border-bottom:1px solid var(--line)}
#taskDrawer .panel__bar .panel__title{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* #2796 — стрелка «назад» к предыдущей задаче стоит первой в этой строке, перед #номером. В разметке
   она всегда есть и скрыта (hidden): показывает её panel.js, когда панель открыта переходом из другой
   задачи. Явное правило нужно, потому что .pnl-icon задаёт display и перебил бы атрибут hidden.
   Шапка ящика (✕) в base.html стоит ПОСЛЕ тела — чтобы Tab шёл в порядке «строка панели → … → ✕»;
   order:-1 оставляет её на экране сверху, как и было (для «Загрузки…» и формы новой задачи). */
#taskDrawer .panel__bar .panel__back[hidden]{display:none}
#taskDrawer .drawer__head{order:-1}
/* #2828 — список задач цепочки на стрелке «назад» (panel.js, floatpop.js). Плашка живёт в <body>
   (ящик держит transform), поэтому правила от #taskDrawer на неё не действуют, и z-index выше ящика
   (61), как у других плашек floatpop (.ordpop), но ниже модальных окон (200). Строка: номер, название
   с многоточием, у текущей задачи метка «открыта». Стрелке отключаем системное меню долгого нажатия
   и выделение текста — иначе на телефоне вместо списка вылезает «Копировать». */
#taskDrawer .panel__bar .panel__back{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  touch-action:manipulation}
.backlist{z-index:80;display:flex;flex-direction:column;gap:var(--sp-1);box-sizing:border-box;
  min-width:240px;max-width:min(420px,calc(100vw - 2 * var(--sp-2)));max-height:60vh;overflow-y:auto;
  padding:var(--sp-1);background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
  box-shadow:var(--shadow),0 12px 28px rgba(0,0,0,.12)}
.backlist__item{display:flex;align-items:baseline;gap:var(--sp-2);width:100%;box-sizing:border-box;
  text-align:left;padding:var(--sp-2) var(--sp-3);border:0;border-radius:7px;background:none;
  cursor:pointer;font:inherit;font-size:var(--fs-text);color:var(--ink-2)}
.backlist__item:hover{background:var(--blue-wash);color:var(--ink)}
.backlist__item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;color:var(--ink)}
.backlist__item.is-current{color:var(--ink);font-weight:600;cursor:default}
.backlist__num{flex:none;font:600 var(--fs-label)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink-3)}
.backlist__title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.backlist__mark{flex:none;font-size:var(--fs-meta);font-weight:450;color:var(--blue)}
@media (max-width:640px){
  #taskDrawer .panel__bar{gap:var(--sp-1)}
  #taskDrawer .panel__acts{gap:var(--sp-1)}
  #taskDrawer .panel__bar .panel__title{font-size:var(--fs-card);padding-inline:var(--sp-1)}
  /* #2828 — в строку добавилась «Открыть в новой вкладке»; на телефоне панель и так всегда на весь экран
     (правило выше), «Шире» там ничего не меняет — прячем её, чтобы название не сжималось до нескольких букв */
  #taskDrawer .panel__acts [data-act="panel-toggle-wide"]{display:none}
}
/* участники задачи (#13) */
.ppl-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.ppl{position:relative;display:inline-flex}
.ppl .ava,.ppl .ava-img{width:24px;height:24px;font-size:10px}
.ppl__x{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;border:0;
  background:var(--red);color:#fff;font-size:11px;line-height:1;cursor:pointer;padding:0;display:none}
.ppl:hover .ppl__x{display:block}
.ppl-add{position:relative;display:inline-flex;align-items:center}
.ppl-add .pnl-icon{width:24px;height:24px;font-size:13px}
.ppl-search{width:150px;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:5px 8px;font:inherit;font-size:12.5px;background:var(--canvas);color:var(--ink);margin-left:5px}
.ppl-search:focus{outline:none;border-color:var(--blue)}
.ppl-results{position:absolute;top:100%;left:5px;z-index:5;min-width:200px;max-height:220px;overflow:auto;
  margin-top:3px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.ppl-result{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:7px 10px;font:inherit;font-size:13px;color:var(--ink)}
.ppl-result:hover{background:var(--page)}
.ppl-email{color:var(--ink-3);font-size:11px}
.ppl-none{padding:7px 10px;color:var(--ink-3);font-size:12px}
/* Входящие (#15) */
.inbox{display:flex;flex-direction:column}
.ibx{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;cursor:pointer}
.ibx+.ibx{border-top:1px solid var(--line-2)}
.ibx:hover{background:var(--page)}
.ibx--unread{background:var(--blue-wash)}
.ibx--unread:hover{background:var(--blue-wash)}
.ibx__body{flex:1;min-width:0}
.ibx__text{font-size:13.5px;color:var(--ink-2)}
.ibx__text b{color:var(--ink);font-weight:600}
.ibx__tag{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:5px;
  background:var(--blue);color:#fff;font-weight:700;font-size:11px;margin-right:4px}
.ibx__time{color:var(--ink-3);font-size:11.5px;margin-top:2px}
/* #1568 — ответ на приглашение прямо в строке «Входящих»: пока ответа нет, план врёт обеим
   сторонам, и уводить человека ради двух слов в отдельную карточку значит терять ответы. */
.ibx__ans{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
/* #1799 — решённая заявка агента: след без кнопок. Тише самой строки, потому что действовать по
   ней уже нечего, а убирать её совсем нельзя — тогда непонятно, чем кончилось. */
.ibx__ans--done{color:var(--ink-3);font-size:12px}
/* Запись встречи (ТЗ 22.09.2026) — блок внутри «Транскрибаций»: кнопка, зона перетаскивания,
   прогресс и плашка стадий. Пунктир у зоны — тот же язык, что у зоны загрузки файлов Диска:
   «сюда можно бросить». Подсветка при наведении файла — общий класс is-droptarget (#1812). */
.meet{border:1px dashed var(--line);border-radius:var(--radius-sm);padding:var(--sp-3);
      margin-bottom:var(--sp-3)}
.meet.is-droptarget,.meet__drop.is-droptarget{border-color:var(--blue);background:var(--blue-wash)}
.meet__drop{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
/* Одна строка: кнопка, подсказка (во время загрузки — полоса и проценты). Решение Юрия
   22.09.2026 «всё компактно, в одну строчку»: блок из четырёх строк читался как отдельный раздел
   экрана, хотя это одно действие. wrap — чтобы на узком окне строка переносилась, а не выдавливала
   кнопку за край. */
/* Значок служебной папки: не кнопка, а пометка. Выглядит приглушённо и не реагирует на
   наведение — чтобы по нему не пытались нажать. 22.09.2026, защита «Транскрибаций». */
.dsk__act--lock{opacity:.5;cursor:default}
.meet__line{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.meet__hint{font-size:13px;color:var(--ink-2)}
/* Полоса КОРОТКАЯ и в ряд с кнопкой (23.09.2026, Юрий: «слишком длинная на всю ширину, нужно
   сделать её короче и поставить в ряд с кнопкой»). Дорожка красится var(--line) — тем же цветом,
   что все разделители интерфейса: на тёмной теме она видна, потому что её видно ВЕЗДЕ, а не
   потому, что подобран особый оттенок.

   #2057 (24.09.2026, сверка ТРАНС-1) — заливка была var(--accent), а такого токена в этом файле
   НЕТ (он есть только в disk_preview.css): заливка выходила прозрачной, и на экране оставалась
   одна бледная дорожка var(--line) — ровно жалоба «линия не видна, сливается, видны только
   проценты». Замер в браузере: background-color заливки rgba(0,0,0,0). Теперь дорожка — серый
   желоб var(--page) с рамкой var(--line-strong), заливка — var(--blue); все три определены в
   :root и в тёмной теме. Сторож — apps.disk.tests (токены блока .meet обязаны существовать). */
.meet__bar{position:relative;display:inline-block;width:180px;height:8px;
           border-radius:999px;background:var(--page);border:1px solid var(--line-strong);
           overflow:hidden;vertical-align:middle}
.meet__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blue);
            border-radius:999px;transition:width .2s linear}
.meet__bar[hidden],.meet__pct[hidden],.meet__hint[hidden]{display:none}
.meet__pct{font-size:14px;font-weight:700;color:var(--ink);min-width:46px;text-align:right}
/* Строка под полосой — вспомогательная и появляется только во время загрузки: числа нужны затем,
   чтобы на долгой записи было видно, что движение не остановилось. */
.meet__note{margin:var(--sp-1) 0 0;font-size:12px;color:var(--ink-2)}
.meet__jobs{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1)}
/* #1135 — пустой блок «На сервере» стоял и без работ: display:flex перебивал hidden. */
.meet__jobs[hidden]{display:none}
/* Строка прогресса — не подсказка мелким шрифтом: пока идёт загрузка, это главное, что есть на
   экране, и человек смотрит именно на неё. */
/* Строка под полосой — вспомогательная: числа нужны затем, чтобы на долгой записи было видно,
   что движение не остановилось. Главное на экране — полоса. */
.meet__note{margin:0;font-size:13px;color:var(--ink-2)}

.meet__row{display:flex;flex-direction:column;gap:var(--sp-1);font-size:13px;color:var(--ink-2)}
.meet__rowhead{display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
/* Ошибка обязана отличаться от «идёт»: одинаковые строки читаются как «всё нормально, просто
   долго», и человек ждёт того, что уже не случится. */
.meet__row--bad{color:var(--red)}
/* 01-SPEC ТРАНС-1 — «Текст»/«Видео»/«Папка»/«Создать задачу» у готовой (или упавшей) записи. */
.meet__rowacts{display:flex;gap:var(--sp-2);flex-wrap:wrap;font-size:12px}
.meet__warn{margin:0 0 var(--sp-2);font-size:12px;color:var(--ink-2)}
.meet__warn[hidden]{display:none}
/* #2057 круг 2 — подписи блоков панели по макету («Новая запись», «На сервере»). */
.meet__head{margin-bottom:var(--sp-2)}
/* #2057, сверка ТРАНС-1 — путь, куда ляжет запись (макет Юрия: «Транскрибации / ФИО / дата»). */
.meet__where{margin:var(--sp-1) 0 0;font-size:var(--fs-label);color:var(--ink-3)}
/* #2057, сверка ТРАНС-1 — блок «На сервере» по макету: этапы цепочкой «загружено → сжатие →
   распознавание → готово», а не одно слово текущей стадии. Пройденные — зелёные,
   текущая — акцентом, упавшая на текущей — красным. */
.meet__steps{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);margin:0;padding:0;
  list-style:none;font-size:var(--fs-label);color:var(--ink-3)}
.meet__step+.meet__step::before{content:"→";margin-right:var(--sp-1);color:var(--silver)}
.meet__step.is-done{color:var(--green)}
.meet__step.is-current{color:var(--blue);font-weight:600}
.meet__row--bad .meet__step.is-current{color:var(--red)}
/* #894 — то, что на этом экране было инлайновым стилем. Значения взяты из шкалы: было
   padding:6px у карточки и 40px 20px у пустого состояния — оба шага вне шкалы (#1797). */
.inbox-card{padding:var(--sp-2)}
.inbox-empty{padding:var(--sp-7) var(--sp-5)}
.ibx__actions{display:flex;gap:4px;flex:none}
.ibx__btn{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:var(--canvas);
  color:var(--ink-3);cursor:pointer;font-size:13px;line-height:1}
.ibx__btn:hover{border-color:var(--blue);color:var(--ink)}
.ibx__btn.is-on{color:var(--amber);border-color:var(--amber)}
.rt__b.is-rec{color:var(--t-red-fg);background:var(--t-red-bg);gap:var(--sp-1)}
/* №1164 — «как в Claude»: на кнопке микрофона во время записи пульсирующая точка и таймер */
.rt__micdot,.rt__rectime{display:none}
.rt__b.is-rec .rt__micdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;
  animation:rtRecPulse 1.1s ease-in-out infinite}
.rt__b.is-rec .rt__rectime{display:inline;font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
.rt__b--vset{min-width:24px;padding:0 var(--sp-1)}
.rt__vset{min-width:220px;max-width:min(280px,calc(100vw - 24px))}
.rt__vset-opt{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-text);color:var(--ink);cursor:pointer}
.rt__vset-hint{margin:0;padding:0 var(--sp-3) var(--sp-2);font-size:var(--fs-label);color:var(--ink-2)}
/* №1164 — полоса автооформления надиктованного: «Оформляю…» → «Оформлено ИИ · Вернуть как было» */
.rt__aiv[hidden],.rt__aivundo[hidden]{display:none}
.rt__aiv{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-text);color:var(--t-blue-fg);background:var(--t-blue-bg);border-bottom:1px solid var(--line)}
.rt__aiv.is-busy .rt__aivlbl::before{content:"";display:inline-block;width:8px;height:8px;margin-right:var(--sp-2);border-radius:50%;
  background:currentColor;vertical-align:middle;animation:rtRecPulse 1.1s ease-in-out infinite}
.rt__aiv.is-err{color:var(--t-amber-fg);background:var(--t-amber-bg)}
.rt__aivundo{border:1px solid currentColor;border-radius:6px;background:none;color:inherit;font:inherit;font-weight:600;
  padding:2px var(--sp-2);cursor:pointer}
.rt__aivundo:hover,.rt__aivundo:focus-visible{background:var(--canvas)}
.rt__live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* #22 — индикатор голосовой записи + live-текст */
.rt__rec[hidden]{display:none}
.rt__rec{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:13px;color:var(--ink-2);
  background:var(--t-red-bg,#fef2f2);border-bottom:1px solid var(--line)}
.rt__recdot{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;animation:rtRecPulse 1.1s ease-in-out infinite}
.rt__reclbl{color:var(--t-red-fg,#b91c1c);font-weight:450;white-space:nowrap}
.rt__recint{color:var(--ink-2);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes rtRecPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion: reduce){.rt__recdot,.rt__b.is-rec .rt__micdot,.rt__aiv.is-busy .rt__aivlbl::before{animation:none}}
/* Диаграмма Ганта (#24) */
/* #1294 (ГАНТ-1) — пиксельная шкала времени вместо подгонки под экран.
   Раскладка: слева неподвижный («липкий») столбец задач шириной --g-label, справа лента времени
   шириной --g-total в своей горизонтальной прокрутке. Ширина единицы шкалы (--g-unit) приходит
   с сервера вместе с уровнем масштаба; все три переменные ставятся ОДНИМ атрибутом style на
   .gantt — храповик инлайновых стилей (#894) исчерпан, новых атрибутов в шаблоне не появляется. */
.gantt{--g-label:230px;--g-unit:34px;--g-total:1000px;display:block}
.gantt__card{overflow:hidden;min-width:0}
.gantt__head{display:grid;grid-template-columns:var(--g-label) minmax(0,1fr);align-items:stretch;
  border-bottom:1px solid var(--line);background:var(--panel-2)}
.gantt__body{display:grid;grid-template-columns:var(--g-label) minmax(0,1fr);align-items:start;position:relative}
/* Полоса с названиями остаётся на месте при горизонтальной перемотке времени */
.gantt__labels,.gantt__labelhd{position:sticky;left:0;z-index:3;background:var(--panel)}
.gantt__labelhd{background:var(--panel-2)}
.gantt__labelhd{padding:8px 12px;font-weight:450;font-size:12px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:var(--sp-2);
  border-right:1px solid var(--line);position:relative}
.gantt__labelhd-t{flex:1;overflow:hidden;text-overflow:ellipsis}
/* Счётчик непрочитанных в шапке столбца «Задача» (15.09.2026, решение Юрия). Раньше это была
   широкая кнопка «Прочитать всё (N)» в строке действий: она появлялась и исчезала, каждый раз
   перекраивая верхнюю строку, и стояла вровень с главным действием экрана. Здесь она читается
   как пометка на самих строках диаграммы, к которым и относится.
   Форма — inline-flex без своих отступов: шапка уже раскладывает детей флексом с общим зазором. */
.gantt__unread{display:inline-flex}
.gantt__unreadbtn{min-width:20px;height:20px;padding:0 6px;border:1px solid var(--line-strong);
  border-radius:var(--radius-pill,999px);background:var(--panel);color:var(--ink-2);
  font:inherit;font-size:11px;font-weight:600;line-height:1;cursor:pointer;
  font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.gantt__unreadbtn:hover{border-color:var(--blue);color:var(--blue)}
/* кнопки масштаба: − текущий уровень + */
.gantt__zoom{display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0}
.gantt__zoombtn{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:6px;color:var(--ink-2);text-decoration:none;
  font-size:13px;line-height:1;background:var(--panel)}
.gantt__zoombtn:hover{border-color:var(--blue);color:var(--blue)}
.gantt__zoombtn.is-off{opacity:.35;cursor:not-allowed}
.gantt__zoomnow{font-size:11px;color:var(--ink-3);min-width:44px;text-align:center}
/* ручка резинового столбца задач — та же, что у столбцов списков (#1159) */
.gantt__labelgrip{position:absolute;top:0;right:-3px;bottom:0;width:6px;cursor:col-resize;z-index:4}
/* #1295 — значок принтера в шапке диаграммы, рядом с масштабом */
/* #1300 — живые подсказки сквозного поиска: панель под строкой в шапке. Кладётся через
   floatPop (в шапке есть трансформированные предки, position:fixed внутри них считается не от
   окна — #1263 круг 4), поэтому здесь только вид, без позиционирования. */
.searchhints{position:absolute;z-index:60;min-width:320px;max-width:460px;max-height:70vh;
  overflow:auto;padding:var(--sp-2);text-align:left}
/* #1852 — граница между «на этом экране» и «по всей платформе»: один подзаголовок, не рамка
   и не вторая колонка. Список подсказок узкий, и любая линия в нём стоит дороже слова. */
.searchhints__scope{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:var(--fs-meta);
  color:var(--ink-3);border-top:1px solid var(--line);margin-top:var(--sp-1)}
.searchhints__group{font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink-3);padding:var(--sp-2) var(--sp-2) 2px}
.searchhints__row{display:block;padding:5px var(--sp-2);border-radius:6px;text-decoration:none;
  color:var(--ink)}
.searchhints__row:hover,.searchhints__row.is-cur{background:var(--blue-wash);color:var(--sapphire)}
.searchhints__t{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.searchhints__s{display:block;font-size:11.5px;color:var(--ink-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.searchhints__more{padding:2px var(--sp-2) var(--sp-1);font-size:11.5px;color:var(--ink-3)}
.searchhints__none{padding:var(--sp-2);margin:0;font-size:13px;color:var(--ink-3)}
/* #1311 — экран регулярных задач: пустой список и приостановленная строка */
.recur__empty{padding:24px}
.is-paused{opacity:.6}
/* #1297 — перетаскивание столбцов в панели «Настроить столбцы» */
.colpick__hint{margin:0 0 var(--sp-1);font-size:11.5px;color:var(--ink-3)}
.colpick__list{display:flex;flex-direction:column}
.colpick__grip{cursor:grab;color:var(--ink-3);font-size:12px;line-height:1;user-select:none}
.colpick__item.is-drag{opacity:.5}
.gantt__printbtn{width:22px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:6px;background:var(--panel);color:var(--ink-2);
  cursor:pointer;font-size:12px;line-height:1;padding:0}
.gantt__printbtn:hover{border-color:var(--blue);color:var(--blue)}
.gantt__printpop{width:260px;max-width:80vw}
.gantt__printpop .check-inline{font-size:12.5px;margin-top:var(--sp-1)}
/* Печатная версия: лента разворачивается целиком (прокрутки на листе нет), рамка — по флажку */
.gantt--print .gantt__scroll{overflow:visible}
.gantt--print .gantt__labels,.gantt--print .gantt__labelhd{position:static}
.gantt--print .gantt__label{white-space:normal}
.gantt-print{padding:10px 12px}
.gantt-print--frame .gantt{border:1.5px solid var(--ink-3);border-radius:6px;overflow:hidden}
.gantt-print .export-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-3)}
.gantt__label{padding:8px 12px;font-size:13px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;border-right:1px solid var(--line-2);min-height:36px;box-sizing:border-box;
  border-top:1px solid var(--line-2)}
.gantt__labels .gantt__label:first-child{border-top:none}
.gantt__label--sub{padding-left:28px}
.gantt__label a{color:var(--ink);text-decoration:none}
.gantt__label a:hover{color:var(--blue)}
/* лента времени: собственная горизонтальная прокрутка, отдельная от прокрутки страницы */
/* min-width:0 — иначе колонка grid/flex распирается содержимым ленты (у неё min-width:auto по
   умолчанию) и прокрутка не включается, а страница уезжает вбок */
.gantt__scroll{overflow-x:auto;overflow-y:hidden;min-width:0}
.gantt__scroll--body{overflow-x:auto}
.gantt__head .gantt__scroll{overflow-x:hidden}   /* шапку двигает скрипт вслед за полотном */
.gantt__lane{width:var(--g-total);min-width:var(--g-total)}
/* двухуровневая шапка: верх — крупная единица (год/месяц/дата), низ — мелкая (месяцы/дни/часы) */
.gantt__htop{display:grid}
.gantt__hcell{padding:4px 6px;font-size:11.5px;font-weight:450;color:var(--ink-2);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line-2);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gantt__hbot{display:grid;grid-auto-flow:column;grid-auto-columns:var(--g-unit)}
.gantt__hunit{padding:3px 0;font-size:10.5px;color:var(--ink-3);text-align:center;
  border-right:1px solid var(--line-2);overflow:visible;white-space:nowrap}
.gantt__hunit.is-weekend{background:var(--line-2)}
.gantt__track{position:relative;min-height:36px;border-top:1px solid var(--line-2)}
.gantt__track:first-child{border-top:none}
.gantt__tick{position:absolute;top:8px;font-size:11px;color:var(--ink-3);transform:translateX(-50%);white-space:nowrap;
  border-left:1px solid var(--line-2);padding-left:3px;height:100%}
.gantt__bar{position:absolute;top:8px;height:20px;border-radius:5px;background:var(--blue);color:var(--gantt-bar-fg);font-size:11px;
  line-height:20px;padding:0 6px;overflow:hidden;white-space:nowrap;box-shadow:var(--shadow);cursor:pointer}
.gantt__bar--new{background:var(--silver);color:var(--gantt-bar-new-fg)}.gantt__bar--in_progress{background:var(--amber)}
.gantt__bar--review{background:var(--t-violet-fg)}.gantt__bar--done{background:var(--green)}
.gantt__bar--deferred{background:var(--t-zinc-fg)}.gantt__bar--tech_cancel{background:var(--t-red-fg)}
.gantt__none{color:var(--ink-3);font-size:12px;line-height:36px;padding-left:8px}
/* #1162 (часть 2) — хэндл переноса срока: только на баре, где t.can_quick_fields (см. gantt.html) */
.gantt__handle{position:absolute;top:0;right:0;bottom:0;width:var(--sp-2);cursor:ew-resize}
.gantt__handle:hover,.gantt__handle:active{background:rgba(255,255,255,.35)}
/* #30 — связи-зависимости на Ганте (SVG-оверлей над треком) */
.gantt__body{position:relative}
.gantt__deps{position:absolute;left:0;top:0;width:var(--g-total);pointer-events:none;overflow:visible;z-index:2}
.gantt__deps path{stroke:var(--ink-3);stroke-width:1.5;fill:none;stroke-dasharray:4 3;opacity:.75}
/* #30 — блок зависимостей в карточке задачи */
.deps{display:flex;flex-direction:column;gap:14px}
.deps__lbl{font-size:12px;color:var(--ink-3);font-weight:450;margin-bottom:6px}
.deps__item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13.5px}
.deps__item a{color:var(--ink)}.deps__item a:hover{color:var(--blue)}
.deps__add{margin-top:8px}
.deps__add select{flex:1;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:8px 10px;font:inherit;background:var(--canvas);color:var(--ink);min-width:0}
.panel__flow{display:flex;gap:var(--sp-1);flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-4)}
/* #637 — стадия задачи полосками вместо шести подписанных пилюль. Полоска сама тонкая (5 px), но
   кнопка вокруг неё высотой 18 px — по такой цели попадают мышью и пальцем. Название стадии живёт
   в подсказке и в aria-label, поэтому подпись .stbar__cap скрыта визуально, а не выброшена. */
.stbar{position:relative;flex:1 1 0;min-width:18px;padding:6px 0;margin:0;border:0;background:none;
  cursor:pointer;line-height:0;font:inherit}
.stbar::before{content:"";display:block;height:5px;border-radius:var(--radius-pill);
  background:var(--stbar-c,var(--silver));opacity:.3}
.stbar:hover::before{opacity:.65}
.stbar.is-current::before{opacity:1;height:6px}
.stbar:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--radius-pill)}
.stbar--ro{cursor:default}
.stbar--ro:hover::before{opacity:.3}
.stbar--ro.is-current:hover::before{opacity:1}
.stbar--new{--stbar-c:var(--silver)}
.stbar--in_progress{--stbar-c:var(--blue)}
.stbar--review{--stbar-c:var(--amber)}
.stbar--deferred{--stbar-c:var(--t-violet-fg)}
.stbar--done{--stbar-c:var(--green)}
.stbar--tech_cancel{--stbar-c:var(--red)}
.stbar__cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.panel__flowcur{flex:none;font-size:var(--fs-label);font-weight:600;color:var(--ink-2);white-space:nowrap;
  padding-left:var(--sp-1)}
.panel__title{flex:1 1 240px;min-width:0;font-size:18px;font-weight:600;letter-spacing:-.01em;border:1px solid transparent;
  border-radius:8px;padding:6px 8px;background:transparent;color:var(--ink);font-family:inherit}
.panel__title:hover{border-color:var(--line)}
.panel__title:focus{outline:none;border-color:var(--blue);background:var(--canvas)}
/* #247 — колонка minmax(0,1fr), а не 1fr: у `1fr` min-width:auto, а минимальная ширина <select>
   равна САМОМУ ДЛИННОМУ пункту («Проекты текущие · Департамент предоставления»), поэтому сетка
   распирала выезжающую панель и «ширина ехала» — особенно на мобильном и в неполном экране. */
.panel__meta{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px 10px;align-items:center}
/* #1321 — СТРАХОВКА, а не лечение: подпись всегда начинает строку в узкой колонке. Сетка
   раскладывает детей по порядку, поэтому один лишний ребёнок (форма, попап) раньше сдвигал
   ВСЕ пары ниже — поле влево, подпись вправо. Теперь лишнее займёт свою строку, а подписи
   останутся на месте. Саму парность держит тест PanelGridPairsTests. */
.panel__meta>label{grid-column:1}
.panel__meta label{font-size:12px;color:var(--ink-3);font-weight:450;min-width:0;overflow-wrap:anywhere}
.panel__meta select,.panel__meta input{width:100%;max-width:100%;min-width:0;border:1px solid var(--line-strong);
  border-radius:var(--radius-input);padding:6px 8px;background:var(--canvas);color:var(--ink);font:inherit;font-size:13px}
/* сам текст выбранного пункта не должен раздувать контрол */
.panel__meta select{text-overflow:ellipsis}
.panel__meta>*{min-width:0}
.panel__meta select:focus,.panel__meta input:focus{outline:none;border-color:var(--blue)}
.panel__ro{font-size:13px;color:var(--ink-2)}
/* #87 — режим только чтения (не постановщик): заголовок и воронка без активных стилей */
.panel__title--ro{cursor:default}
.panel__title--ro:hover{border-color:transparent}
.statusflow__step--ro{cursor:default}
.statusflow__step--ro:hover{border-color:var(--line-strong);color:var(--ink-2)}
/* #61 — делегирование */
.delegate-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel__sec{border-top:1px solid var(--line);padding-top:14px;margin-top:16px}
.panel__sec .block-head{margin-bottom:10px}

/* ---- Обзор досок (#9) ---- */
.boardbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--page);border:1px solid var(--line);padding:3px;border-radius:10px}
.seg__btn{padding:5px 12px;border-radius:7px;font-size:13px;font-weight:450;color:var(--ink-2)}
.seg__btn.is-active{background:var(--canvas);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.bcard{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:14px;transition:border-color .12s,box-shadow .12s}
.bcard:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.bcard__name{font-weight:450;letter-spacing:-.01em;color:var(--ink)}
.bcard__node{align-self:flex-start;font-size:11px;padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--t-blue-bg);color:var(--t-blue-fg)}
.bcard__node--proj{background:var(--t-slate-bg);color:var(--t-slate-fg)}
.bcard__n{color:var(--ink-3);font-size:12px;margin-top:auto}
.blist{padding:6px}
.blist__row{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:8px}
.blist__row:hover{background:var(--page)}
.blist__row+.blist__row{border-top:1px solid var(--line-2)}
.blist__name{font-weight:450;color:var(--ink);flex:1;min-width:120px}
.blist__node{color:var(--ink-2);font-size:13px}
.blist__n{white-space:nowrap}

/* карточка задачи v2: чип-ряд разделов (Bitrix-подобная компактность) */
.tsec-chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 14px;padding-top:14px;border-top:1px solid var(--line-2)}
.tsec-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-text);font-weight:450;
  padding:6px 13px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);
  background:var(--panel);color:var(--ink-2);cursor:pointer;transition:.12s;line-height:1.1}
.tsec-chip:hover{border-color:var(--ink-3);background:var(--page)}
.tsec-chip.is-active{background:var(--t-blue-bg);color:var(--t-blue-fg);border-color:transparent}
.tsec-chip__n{font-size:11px;color:var(--ink-3);font-weight:600}
.tsec-chip.is-active .tsec-chip__n{color:inherit;opacity:.7}
.tsec{display:none;margin-bottom:14px}
.tsec.is-open{display:block}

/* ============================================================
   Мобильная адаптивность (аудит 2026-07-19). После .main{overflow-x:clip}
   любой не-переносящийся ряд обрезался бы по правому краю (контролы прятались),
   поэтому ряды контролов ПЕРЕНОСИМ, длинные токены — тоже, а всплывашки держим в экране.
   ============================================================ */
/* ряды контролов переносятся на любой ширине (десктопу не мешает) */
.orgbar{flex-wrap:wrap}
.tcard__top{flex-wrap:wrap;row-gap:5px}
.mygroup{display:flex;flex-wrap:wrap;row-gap:6px}
.inline-add{flex-wrap:wrap}
.inline-add select{min-width:0}
.agent-row__actions{flex-wrap:wrap}
.deps__item{flex-wrap:wrap}
.deps__item a{flex:1;min-width:0;overflow-wrap:anywhere}
.blist__name,.blist__node{min-width:0}
/* 23.09.2026 — nowrap убран. Он держал действия в одну строку, а строка не помещалась в столбец:
   у сотрудника без входа там поле со ссылкой-приглашением и до четырёх кнопок. Содержимое вылезало
   за таблицу, и на узком окне «Изменить» с «Уволить» обрезались краем экрана. */
.staff-actions{text-align:right;white-space:normal}
/* Контейнер действий: переносит строки ВНУТРИ ячейки. flex, а не inline-flex — строчный считает
   ширину по содержимому и растягивает таблицу. */
.staff-acts{display:flex;align-items:center;gap:var(--sp-1);justify-content:flex-end;
            flex-wrap:wrap}
/* Уволенный сотрудник виден, но приглушён. Было инлайновым style= прямо в строке (#894). */
.is-fired{opacity:.55}
/* Пустое состояние таблицы. Было инлайновым style= (#894); шаг отступа взят из шкалы
   (--sp-4 = 24px), а не набран числом. */
.staff-empty{padding:var(--sp-4);text-align:center;color:var(--ink-2)}
/* #1798/#1812 — ширину списка штата задаёт СУММА СТОЛБЦОВ, а не ограничение на карточке.
   Сначала (#1798) здесь стоял max-width:980px: столбцов было три, и на широком экране строка
   расползалась. Он же и помешал, как только человек добавил четвёртый и пятый столбец —
   таблица упёрлась в 980 и уехала под ползунок, хотя место на экране было (замечание Юрия
   18.09.2026). Правильный ответ дал colresize.js: он ставит таблице ширину ровно суммой
   столбцов, и она не растягивается сама по себе — внешнее ограничение стало лишним. */
/* #1812 — таблица Диска: имя со значком типа в одной ячейке, как в проводнике. */
/* #1135 — max-width:100%: без потолка ссылка (inline-flex) росла по длине имени, ячейка резала её
   overflow:hidden посреди слова, и многоточие у .dsk-table__nm не включалось — ему было куда расти. */
.dsk-table__name{display:inline-flex;align-items:center;gap:var(--sp-2);color:inherit;
  text-decoration:none;min-width:0;max-width:100%}
.dsk-table__name:hover .dsk-table__nm{text-decoration:underline}
.dsk-table__ic{flex:none;width:28px;height:20px;display:grid;place-items:center;border-radius:4px;
  font-size:9px;font-weight:700;letter-spacing:.02em;background:var(--page);color:var(--ink-3)}
/* min-width:0 — флекс-элемент иначе не сжимается уже своего текста (min-width:auto). */
.dsk-table__nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* #2791 — «новое» на Диске: число непросмотренных файлов у папки (в дереве, в строке и плитке) и
   метка «новый» у файла. Один вид на всё: тот же синий, что у счётчика в меню (.navlink__count), —
   человек узнаёт в нём тот самый «Диск 2» и идёт по цепочке чисел до файлов. */
.dsk__new{flex:none;min-width:var(--sp-5);padding:0 var(--sp-2);border-radius:var(--radius-pill);
  background:var(--blue);color:var(--btn-primary-fg);font-size:var(--fs-meta);font-weight:700;
  line-height:1.6;text-align:center;white-space:nowrap}
.dsk__new--file{font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.dsk-table td{vertical-align:middle}
/* #1798 — то, что в списке штата было инлайновым стилем, стало классами вместе с переводом
   таблицы на общий механизм столбцов. */
.staff-name{display:inline-flex;align-items:center;gap:var(--sp-2);color:inherit}
.staff-dim{color:var(--ink-2)}
.staff-none{color:var(--ink-3)}
/* длинные неразрывные токены (URL/ID/e-mail) переносим, а не выпираем за экран */
.ibx__text{overflow-wrap:anywhere}
.act__line{overflow-wrap:anywhere}
.kv__row>span:last-child{min-width:0;overflow-wrap:anywhere;text-align:right}
/* всплывающие палитры/выпадашки не уходят за правый край экрана */
.ppl-results,.boardswitch__menu{max-width:calc(100vw - 24px)}
.react-pop{flex-wrap:wrap;max-width:min(260px,80vw)}
.chat__msg--mine .react-pop{left:auto;right:0}
.rt__emopop:not(.rt__blockmenu){width:min(288px,calc(100vw - 24px));grid-template-columns:repeat(auto-fill,28px)}

@media (max-width:640px){
  /* вкладки (Канбан/Список/Гант/Доски, Входящие, Чат/История) переносятся, а не режутся */
  .tabs{margin-right:0;display:flex;flex-wrap:wrap;gap:4px 6px}
  /* подзадачи в правке: имя на всю строку, исполнитель+срок делят вторую */
  .subtask{flex-wrap:wrap}
  .subtask__title{flex:1 1 100%;min-width:0}
  .subtask__assignee{max-width:none;flex:1 1 45%}
  .subtask__duein{flex:1 1 45%}
  .tcard__pos{max-width:120px}
  .invite-link{width:100%;max-width:none;flex:1 1 100%}
  .staff-actions{white-space:normal}
}
/* печатная выгрузка оргструктуры: на экране скроллим, в печати — как есть */
.orgchart-print-wrap{overflow-x:auto}
@media print{.orgchart-print-wrap{overflow:visible}}

/* ---- База знаний (модуль kb) ---- */
.kb{display:flex;gap:18px;align-items:flex-start}
.kb__side{width:260px;flex:none;display:flex;flex-direction:column;gap:14px}
.kb__filters{display:flex;flex-direction:column;gap:2px}
.kb__f{padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.kb__f:hover{background:var(--page);color:var(--ink)}
.kb__f.is-active{background:var(--blue-wash);color:var(--sapphire);font-weight:600}
.kb__badge{margin-left:auto;background:var(--blue);color:#fff;border-radius:9px;min-width:18px;
  height:18px;padding:0 5px;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.kb__treehd{display:flex;align-items:center;justify-content:space-between;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:450;padding:0 4px;margin-top:4px}
.kb__addf{width:20px;height:20px;border:1px solid var(--line);border-radius:6px;color:var(--ink-2);line-height:1}
.kb__addf:hover{color:var(--blue);border-color:var(--blue)}
.kb__folders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.kb__folders--sub{margin-left:12px;border-left:1px solid var(--line);padding-left:6px}
.kb__folder{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;font-size:13.5px;color:var(--ink-2)}
.kb__folder:hover{background:var(--page)}
.kb__folder.is-active{background:var(--blue-wash);color:var(--sapphire);font-weight:600}
.kb__fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb__fbtns{display:none;gap:2px}
.kb__folder:hover .kb__fbtns{display:flex}
.kb__fbtn{color:var(--ink-3);font-size:11px;padding:1px 3px;border-radius:5px}
.kb__fbtn:hover{color:var(--blue);background:var(--panel)}
.kb__main{flex:1;min-width:0}
.kb__search{margin-bottom:14px}
.kb__search input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink)}
.kb__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.kb__item{border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.kb__item:hover{border-color:var(--line-strong)}
.kb__itemlink{display:block;padding:12px 14px}
.kb__ititle{font-weight:450;font-size:15px;color:var(--ink)}
.kb__badges{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle}
.kb__prev{display:block;margin-top:4px;font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip--warn{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
:root[data-theme="dark"] .chip--warn{background:#3b1213;border-color:#7f1d1d;color:#fca5a5}
/* статья */
.kb-article{display:flex;gap:20px;align-items:flex-start}
.kb-article__body{flex:1;min-width:0}
.kb-article__side{width:300px;flex:none;display:flex;flex-direction:column;gap:12px}
.kb-ack{border:1px solid var(--blue);background:var(--blue-wash);border-radius:12px;padding:14px 16px;
  margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kb-ack__t{font-weight:450;color:var(--sapphire)}
.kb-ack--done{border-color:var(--green,#16a34a);background:color-mix(in srgb,var(--green,#16a34a) 12%,var(--panel));
  color:var(--green,#16a34a);display:block}
.kb-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.kb-sec{padding:14px 16px}
.kb-sec h4{margin:0 0 10px;font-size:13px}
.kb-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;font-size:13.5px;border-top:1px solid var(--line-2)}
.kb-row:first-of-type{border-top:0}
/* #1079 -- задача, выделенная во вкладке «Задачи» как текущая (открытая, ближайший срок) */
.kb-row--current{background:var(--t-blue-bg);border-radius:8px}
.kb-assignform,.kb-grantform{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.kb-assignform select,.kb-grantform select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.kb-chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2)}
/* форма статьи */
.kb-form{display:flex;flex-direction:column;gap:16px;max-width:920px}
.kb-field{display:flex;flex-direction:column;gap:6px}
/* #1135 — форма показателя показывала поля «Формула» и «Свод» при любом источнике:
   display:flex перебивал hidden, который ставят шаблон и metric_form.js. */
.kb-field[hidden]{display:none}
.kb-field--row{flex-direction:row;gap:20px;align-items:center;flex-wrap:wrap}
.kb-lbl{font-size:12px;font-weight:450;color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em}
.kb-lbl2{font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.kb-field input[type=text],.kb-field select,.kb-lbl2 select{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink)}
.kb-field textarea.richtext{min-height:280px}
.kb-form__actions{display:flex;gap:10px}
@media (max-width:900px){.kb{flex-direction:column}.kb__side{width:100%}.kb-article{flex-direction:column}.kb-article__side{width:100%}}

/* ---- Диск (модуль disk, #708/#709) ---- своя разметка .disk__*, НЕ переиспользует .kb__*:
   .kb__f/.kb__item/.kb__addf выше нарушают шкалу стандарта (padding:7px 10px, font-size:13.5px,
   border-radius:12px — не значения --sp-*, docs/design/ui-standard.md §3). Здесь все
   отступы/радиусы/размеры шрифта — только из переменных шкалы. */
.disk{display:flex;gap:var(--sp-5);align-items:flex-start}
/* #1341 волна 2 (замечание Юрия 18.09.2026: «структуру слева оставить, но сделать компактнее»).
   Уже 230px: дерево — указатель, а не содержимое; содержимое справа, и каждый лишний пиксель
   слева отъедается у таблицы файлов. */
.disk__side{width:230px;flex:none;display:flex;flex-direction:column;gap:var(--sp-3)}
.disk__treehd{font-size:var(--fs-meta);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding:0 var(--sp-1)}
.disk__folders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* Отступ уровня — 12px вместо прежних 20px. На дереве в четыре уровня это 32 пикселя, которые
   раньше уходили в пустоту, а имена папок обрывались многоточием. */
.disk__folders--sub{margin-left:var(--sp-3);border-left:1px solid var(--line)}
/* Строка ветки: стрелка + ссылка на папку. Стрелка вынесена из ссылки намеренно — «раскрыть» и
   «перейти» разные действия (см. комментарий в templates/disk/_folder.html). */
.disk__row{display:flex;align-items:center;min-width:0}
.disk__twist{flex:none;width:18px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;color:var(--ink-3);font-size:var(--fs-text);line-height:1;
  cursor:pointer;transition:transform .12s ease}
.disk__twist:hover{color:var(--ink)}
.disk__twist--leaf{cursor:default}
.disk__node.is-open>.disk__row>.disk__twist{transform:rotate(90deg)}
.disk__node:not(.is-open)>.disk__folders--sub{display:none}
.disk__folder{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);font-size:var(--fs-text);color:var(--ink-2);line-height:1.25}
.disk__folder:hover{background:var(--page)}
.disk__folder.is-active{background:var(--blue-wash);color:var(--sapphire);font-weight:600}
.disk__fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* #716 — «пилюля» типа папки (клиент/доска), по образцу .tcard__pos */
.disk__badge{font-size:var(--fs-meta);color:var(--ink-3);background:var(--page);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:0 var(--sp-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:var(--badge-max-w);flex:none}
.disk__fbtns{display:none;gap:var(--sp-1)}
.disk__folder:hover .disk__fbtns{display:flex}
/* СПЕК-2 (07.09.2026) — тред BOSai в _bosairow.html переиспользует эти же классы (тот же визуальный
   язык «иконка на строке списка»), но лежит внутри .chatrow, не .disk__folder — тот же триггер показа. */
.chatrow:hover .disk__fbtns{display:flex}
.disk__fbtn{color:var(--ink-3);font-size:var(--fs-meta);padding:var(--sp-1);border-radius:var(--radius-sm)}
.disk__fbtn:hover{color:var(--blue);background:var(--panel)}
/* #1342 волна 1b — диалог «Поделиться». Свой набор классов, а не переиспользование панели прав:
   панель прав отвечает на вопрос «кому вообще видна эта папка», диалог — «кому Я это открыл».
   Разные вопросы и разные действия; общая вёрстка склеила бы их в один экран. */
.shr__words{margin:0 0 var(--sp-3);font-weight:600}
.shr__tabs{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.shr__tab{padding:var(--sp-2) var(--sp-3);border:0;background:none;color:var(--ink-2);
  border-bottom:2px solid transparent;cursor:pointer;font-size:var(--fs-text)}
.shr__tab.is-on{color:var(--ink);border-bottom-color:var(--blue);font-weight:600}
.shr__list{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.shr__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.shr__row--off{color:var(--ink-3)}       /* срок вышел — строка остаётся как след выдачи */
.shr__del{flex:none}
.shr__add{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-end;margin-bottom:var(--sp-2)}
/* #1135 — форма «Кому / Что можно делать» видна была и тому, кому делиться нельзя (disk_share.js
   ставит hidden по can_share/can_issue, display:flex его перебивал). */
.shr__add[hidden]{display:none}
.shr__f{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-meta);color:var(--ink-2)}
/* #1813 — предупреждение о скачивании. Тем же тёплым тоном, что чип «ждут решения»: это не
   ошибка, а последствие, о котором человек должен узнать ДО нажатия, а не после. */
.shr__warn{color:var(--t-amber-fg);background:var(--t-amber-bg);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-input)}
/* Поле с флажком — в СТРОКУ: у остальных полей подпись сверху, а у флажка подпись и есть
   сам вопрос, и поставленная над ним она читается как заголовок раздела. */
.shr__f--check{flex-direction:row;align-items:center;gap:var(--sp-2);white-space:nowrap}
.shr__link{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.shr__link .m-inp{flex:1;min-width:0}
/* Строка «чего тут ещё нет» на вкладке ссылки — отделена чертой, чтобы не читалась как
   продолжение объяснения про текущую ссылку. Замечание Юрия 19.09.2026. */
.shr__soon{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line)}
/* Строка ссылки наружу: адрес, кнопки и «открывали N раз» — в столбик, потому что адрес
   длинный и в одну строку с кнопками он не помещается даже в широкой панели. */
.shr__row--out{display:grid;gap:6px;align-items:start;grid-template-columns:minmax(0,1fr)}
/* #2012 — колонка явно на всю ширину: у .shr__row justify-content:space-between, и у сетки он
   сжимал единственную колонку по содержимому — поле адреса было 199px в панели шириной 567px. */
.shr__row--out .shr__outurl{width:100%;font-size:var(--fs-label)}
/* #2012 — ссылка на файл Диска выглядит как ссылка: значок файла, цвет ссылки и подчёркивание.
   Было: адрес показывался сплошным текстом, и ни в панели «Поделиться», ни в комментарии задачи
   нельзя было понять, что это кликабельная ссылка и что за ней файл.
   В тексте комментариев и описаний ссылку узнаём по адресу (files.<домен>/s/<ключ>/), а не по
   классу: такие тексты уже лежат в базе, и класс в старые записи никто не допишет. Значок —
   маской цвета текста, поэтому он сам следует за светлой и тёмной темой.
   Значок — строчный, с неразрывным пробелом внутри, а НЕ inline-block: после inline-block у строки
   есть законное место переноса, и длинный адрес уезжал на следующую строку, бросив значок висеть
   в конце предыдущей. Неразрывный пробел склеивает значок с адресом. */
.filelink,
.comment__text a[href*="//files."][href*="/s/"],
.rt-content a[href*="//files."][href*="/s/"]{color:var(--blue);text-decoration:underline;
  text-underline-offset:2px;overflow-wrap:anywhere}
.filelink::before,
.comment__text a[href*="//files."][href*="/s/"]::before,
.rt-content a[href*="//files."][href*="/s/"]::before{content:"\00a0";padding-left:1.05em;
  margin-right:var(--sp-1);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.5h5.2L13 5.3V14a.5.5 0 0 1-.5.5h-8.5A.5.5 0 0 1 3.5 14V2a.5.5 0 0 1 .5-.5zM9 1.5V5.5h4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") left center/1.05em no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.5h5.2L13 5.3V14a.5.5 0 0 1-.5.5h-8.5A.5.5 0 0 1 3.5 14V2a.5.5 0 0 1 .5-.5zM9 1.5V5.5h4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") left center/1.05em no-repeat}
.filelink{font-weight:600;justify-self:start}
.shr__outacts{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.shr__seen{display:block;color:var(--ink-3);font-size:var(--fs-label)}
.shr__note--bad{color:var(--red)}
.disk__main{flex:1;min-width:0;position:relative}  /* #1321 — отсчёт для .dsk__drop */
/* #1726, 17.09.2026 — дорога назад на файловом экране это основной орган управления, а не подпись.
   Кегль был --fs-label (12px) серым: человек проваливался в папку и не находил, чем вернуться.
   Поднимаем до размера текста и добавляем кнопку «вверх» слева, как в проводнике. */
.disk__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-text);color:var(--ink-2)}
.disk__up{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);
  color:var(--ink-2);text-decoration:none;flex:none;font-size:14px;line-height:1}
.disk__up:hover{border-color:var(--blue);color:var(--sapphire)}
/* #1298 п.5 — удаление отдельного файла/ссылки: крестик в строке списка и заголовки двух
   половин корзины (папки / поштучно удалённые файлы). Крестик тот же, что у чипов
   (.chip__x), — отдельного вида для него не заводим. */
.disk__rowacts{white-space:nowrap}
.disk__rowacts .chip__x{margin-left:var(--sp-2);vertical-align:middle}
.disk__trashhd{font-size:var(--fs-label);font-weight:600;color:var(--ink-2);
  margin:var(--sp-4) 0 var(--sp-2)}
.disk__trashhd:first-of-type{margin-top:0}
.disk__crumbs a{color:var(--ink-2)}
.disk__crumbs a:hover{color:var(--sapphire)}
.disk__crumbsep{color:var(--ink-3)}
.disk__crumbnow{color:var(--ink);font-weight:600}
.disk__toolbar{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
/* #724 (ДИСК-3) — поиск по имени (файлы+ссылки), прижат вправо в тулбаре; своя разметка, НЕ
   .ppl-search: та использует padding 5px/8px мимо шкалы --sp-* (ui-standard.md §3), копировать
   этот долг в .disk__* нельзя — та же причина, по которой блок выше не берёт .kb__*. */
.disk__searchform{margin-left:auto;display:flex;align-items:center}
.disk__search{border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:var(--sp-1) var(--sp-2);font:inherit;font-size:var(--fs-label);background:var(--canvas);
  color:var(--ink);width:200px}
.disk__search:focus{outline:none;border-color:var(--blue)}
/* #724 — иконка ссылки в списке папки, отличает строку ссылки от строки файла (чек-лист п.3) */
.disk__linkicon{color:var(--ink-3);margin-right:var(--sp-1)}
@media (max-width:900px){.disk{flex-direction:column}.disk__side{width:100%}.disk__main{width:100%}}
/* #713 (волна 5) — без .disk__main{width:100%} на мобильном срезе align-items:flex-start (заданный
   для десктопной раскладки) не растягивает cross-axis: колонка получает ширину по контенту, и
   широкая таблица (templates/disk/trash.html, 6 колонок с кнопками) раздувает страницу за экран
   вместо скролла внутри .u-scroll — обнаружено проверкой в браузере на узком вьюпорте. */

/* ---- Диск: панель прав папки (#712) ---- та же дисциплина токенов, что блок выше */
.disk__rightsnote{background:var(--page);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--sp-3);margin-bottom:var(--sp-3);font-size:var(--fs-label);color:var(--ink-2)}
.disk__rightslist{display:flex;flex-direction:column;margin-bottom:var(--sp-4)}
.disk__rightrow{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;
  border-top:1px solid var(--line-2);font-size:var(--fs-text)}
.disk__rightrow:first-child{border-top:0}
.disk__rightrow>span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis}
.disk__rightform{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.disk__rightform select{border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:var(--sp-2);font:inherit;background:var(--canvas);color:var(--ink)}
.disk__rightlevel{border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:var(--sp-1) var(--sp-2);font-size:var(--fs-label);background:var(--canvas);color:var(--ink)}
.disk__rightlevel:disabled{opacity:.5;cursor:not-allowed}
.disk__rightdel:disabled{opacity:.4;cursor:not-allowed;text-decoration:none}

/* ---- Диск: карточка версий файла (#723, ДИСК-2.3) ---- та же дисциплина токенов, что блок выше */
/* ── #1321 — список файлов Диска: список и плитка из ОДНОЙ разметки ───────────────────────────
   Юрий 16.09.2026: «нужно убрать вот эту вот строку просмотр и там наименование файла… нужно
   чтобы там просто был файл и возможность его нажать и просмотреть». Строка файла была таблицей
   с четырьмя ссылками подряд («Просмотр · имя · Редактировать» плюс «Версии»), и ни одна из них
   не была самим файлом. Теперь строка — это файл: значок рода, имя-кнопка, бледные метаданные,
   действия по наведению.

   Список и плитка отличаются ТОЛЬКО правилами ниже, разметка одна (templates/disk/index.html).
   Два вида на двух разметках неизбежно разошлись бы содержимым — ровно тот класс расхождения,
   что уже ловили между карточкой задачи и её панелью. */
.dsk{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.dsk[data-view="list"]{display:flex;flex-direction:column}
.dsk__i{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  border-top:1px solid var(--line-2);min-width:0}
.dsk__i:first-child{border-top:0}
.dsk__i:hover{background:var(--panel-2)}
.dsk__open{display:flex;align-items:center;gap:var(--sp-3);flex:1;min-width:0;color:var(--ink);
  text-decoration:none;border-radius:var(--radius-sm)}
.dsk__open:hover .dsk__name{color:var(--sapphire);text-decoration:underline}
.dsk__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-text);
  font-weight:450}
.dsk__thumb{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:var(--radius-sm);background:var(--t-slate-bg);color:var(--t-slate-fg);overflow:hidden}
.dsk__ext{font-size:9px;font-weight:700;letter-spacing:.03em}
.dsk__img{width:100%;height:100%;object-fit:cover;display:block}
/* Цвет значка = род файла: картинка, документ, таблица, презентация и архив различаются до того,
   как человек прочитал имя. */
.dsk__thumb--image{background:var(--t-violet-bg);color:var(--t-violet-fg)}
.dsk__thumb--pdf{background:var(--t-red-bg);color:var(--t-red-fg)}
.dsk__thumb--doc{background:var(--t-blue-bg);color:var(--t-blue-fg)}
.dsk__thumb--sheet{background:var(--t-green-bg);color:var(--t-green-fg)}
.dsk__thumb--slides{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.dsk__thumb--video,.dsk__thumb--audio{background:var(--t-zinc-bg);color:var(--t-zinc-fg)}
.dsk__thumb--link{background:var(--t-blue-bg);color:var(--t-blue-fg)}
/* #1726 — папка строкой в списке: заметно отличается от файла цветом значка, как в проводнике. */
.dsk__thumb--folder{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.dsk__thumb--folder::before{content:"📁";font-size:15px;line-height:1}
.dsk__count{white-space:nowrap}
.dsk__meta{flex:none;display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-meta);
  color:var(--ink-3);white-space:nowrap}
.dsk__who{max-width:140px;overflow:hidden;text-overflow:ellipsis}
.dsk__where{background:var(--page);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:1px var(--sp-2);max-width:var(--badge-max-w);overflow:hidden;text-overflow:ellipsis}
/* Действия проявляются по наведению — и НИКОГДА не прячутся от клавиатуры: без :focus-within до
   «Скачать» нельзя было бы добраться табом, а мышь есть не у всех и не всегда. */
.dsk__acts{flex:none;display:flex;align-items:center;gap:var(--sp-1);opacity:0}
.dsk__i:hover .dsk__acts,.dsk__i:focus-within .dsk__acts{opacity:1}
.dsk__act{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:var(--fs-accent);
  border-radius:var(--radius-sm);text-decoration:none;line-height:1}
.dsk__act:hover{background:var(--page);color:var(--sapphire)}
.dsk__act--del:hover{color:var(--red)}
/* Плитка — та же строка карточкой. Миниатюра настоящая только у картинок: первую страницу PDF или
   документа нечем нарисовать на сервере (ни poppler, ни конвертера), и рисовать вместо неё
   «похожий» квадрат значило бы врать глазом. Остальным — крупная метка расширения. */
.dsk[data-view="tiles"]{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:var(--sp-3);padding:0;background:transparent;border:0;overflow:visible}
.dsk[data-view="tiles"] .dsk__i{position:relative;flex-direction:column;align-items:stretch;
  gap:var(--sp-2);border:1px solid var(--line);border-top:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);padding:var(--sp-2)}
.dsk[data-view="tiles"] .dsk__i:hover{background:var(--panel);border-color:var(--line-strong)}
.dsk[data-view="tiles"] .dsk__open{flex-direction:column;align-items:stretch;gap:var(--sp-2);flex:1}
.dsk[data-view="tiles"] .dsk__thumb{width:100%;height:104px;border-radius:var(--radius-sm)}
/* #2791 — в плитке имя и значок «новое» стоят колонкой: значок не растягиваем на всю ширину плитки */
.dsk[data-view="tiles"] .dsk__new{align-self:flex-start}
.dsk[data-view="tiles"] .dsk__ext{font-size:var(--fs-label)}
.dsk[data-view="tiles"] .dsk__name{white-space:normal;overflow-wrap:anywhere;max-height:2.6em}
.dsk[data-view="tiles"] .dsk__meta{flex-wrap:wrap;gap:var(--sp-2)}
.dsk[data-view="tiles"] .dsk__acts{position:absolute;top:var(--sp-2);right:var(--sp-2);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm)}
/* планка: вид, «везде», приёмная площадка */
.dsk__view{display:flex;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  overflow:hidden;margin-left:var(--sp-2)}
.dsk__vbtn{border:0;background:var(--panel);cursor:pointer;color:var(--ink-3);
  padding:var(--sp-1) var(--sp-2);font-size:var(--fs-accent);line-height:1.4}
.dsk__vbtn+.dsk__vbtn{border-left:1px solid var(--line)}
.dsk__vbtn.is-on{background:var(--blue-wash);color:var(--sapphire)}
.dsk__scope{display:inline-flex;align-items:center;gap:var(--sp-1);margin-left:var(--sp-2);
  font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap;cursor:pointer}
.dsk__found{margin:0 0 var(--sp-2);font-size:var(--fs-meta);color:var(--ink-3)}
.dsk__drop{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--blue);border-radius:var(--radius);background:var(--blue-wash);
  color:var(--sapphire);font-size:var(--fs-accent);font-weight:600;pointer-events:none;
  text-align:center;padding:var(--sp-4)}
.dsk__drop[hidden]{display:none}

/* ── #725 — рамка редактора документов ────────────────────────────────────────────────────────
   17.09.2026, Юрий прислал экран: нажал «Редактировать», а вместо редактора — белая коробка
   примерно 300×150. Это РАЗМЕР IFRAME ПО УМОЛЧАНИЮ: правил у .docedit__frame не существовало
   вовсе, и браузер нарисовал рамку своим стандартным размером. Сам редактор при этом, скорее
   всего, загружался — просто внутри коробки, в которой ничего не разглядеть.

   Класс поломки знакомый: разметка и сервер работают, а на экране пусто — и со стороны это
   неотличимо от «не выкатили». Поэтому правило закреплено сторожем uicheck, как остальные
   случаи такого рода. Высота — от окна, а не фиксированная: у редактора своя панель
   инструментов и своя прокрутка, ему нужен весь доступный экран под шапкой. */
.docedit{height:calc(100dvh - var(--topbar-h) - 120px);min-height:480px;overflow:hidden}
.docedit__frame{display:block;width:100%;height:100%;border:0;background:var(--page)}
@media (max-width:900px){.docedit{height:calc(100dvh - var(--topbar-h) - 80px);min-height:360px}}
/* 17.09.2026 — «чтобы на всю рамку» (Юрий). Обычная страница платформы держит поля 24px и предел
   ширины 1680px: для списков и форм это правильно — строка длиной во весь монитор не читается.
   Редактору документа наоборот: у него своя линейка, свои панели и свой масштаб страницы, и
   каждый отданный ему пиксель — это видимая часть документа. Поэтому на ЭТОЙ странице (и только
   на ней, по классу на body) поля и предел снимаются. */
.page--docedit .content{padding:0;max-width:none}
.page--docedit .docedit{height:calc(100dvh - var(--topbar-h));min-height:520px;border-radius:0;border-left:0;border-right:0}
/* ── #1321 — окно просмотра файла ─────────────────────────────────────────────────────────────
   «Всё это открывается прямо в приложении» (Юрий). Само содержимое по-прежнему рисуется на
   отдельном origin files.<PORTAL_BASE> и приезжает сюда РАМКОЙ: изоляция чужих байтов от страницы
   платформы не ослабляется, меняется только то, что человек не теряет место, где стоял. */
.dpv{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5)}
.dpv[hidden]{display:none}
.dpv__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.dpv__box{position:relative;display:flex;flex-direction:column;width:min(1180px,100%);
  height:min(88vh,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}
.dpv__head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border-bottom:1px solid var(--line)}
.dpv__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-card);font-weight:600;color:var(--ink)}
.dpv__nav{border:1px solid var(--line-strong);background:var(--panel);border-radius:var(--radius-sm);
  width:26px;height:26px;cursor:pointer;color:var(--ink-2);line-height:1;flex:none}
.dpv__nav:disabled{opacity:.35;cursor:default}
.dpv__x{border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:20px;line-height:1;
  padding:0 var(--sp-1)}
.dpv__x:hover{color:var(--red)}
.dpv__body{flex:1;min-height:0;display:flex}
.dpv__frame{flex:1;min-width:0;border:0;background:var(--page)}
.dpv__side{flex:none;width:236px;border-left:1px solid var(--line);padding:var(--sp-3);display:flex;
  flex-direction:column;gap:var(--sp-2);background:var(--panel-2);overflow:auto}
.dpv__sidehd{margin:0;font-size:var(--fs-meta);letter-spacing:.04em;color:var(--ink-3);
  font-weight:600;text-transform:uppercase}
.dpv__kv{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-label);
  color:var(--ink-3);border-bottom:1px solid var(--line-2);padding-bottom:var(--sp-1)}
.dpv__kv b{color:var(--ink-2);font-weight:450;text-align:right;overflow-wrap:anywhere}
.dpv__kv[hidden]{display:none}
.dpv__versions{margin-top:var(--sp-1);font-size:var(--fs-label)}
.dpv__versions[hidden],.dpv__edit[hidden]{display:none}
@media (max-width:900px){
  .dpv{padding:var(--sp-2)}
  .dpv__box{height:100%}
  .dpv__body{flex-direction:column}
  .dpv__side{width:auto;border-left:0;border-top:1px solid var(--line);max-height:36%}
  .dsk[data-view="list"] .dsk__meta{display:none}
}
.disk-fv{display:flex;flex-direction:column;gap:var(--sp-4)}
.disk-fv__back{margin:0}
/* Обсуждение — та же форма, что .kb-c…, .kb-clist, .kb-cform (templates/kb/article.html), но СВОИМ
   классом .disk-c*: копия визуала, не общий CSS с БЗ (архитектура §7 — «общего кода с apps.kb
   нет» относится и к разметке, не только к правам). */
.disk-c__list{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.disk-c__row{border:1px solid var(--line-2);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);background:var(--panel-2)}
.disk-c__hd{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.disk-c__who{font-weight:450;font-size:var(--fs-text)}
.disk-c__when{font-size:var(--fs-meta)}
.disk-c__del{margin-left:auto}
.disk-c__body{font-size:var(--fs-text)}
.disk-c__form{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start;border-top:1px solid var(--line-2);padding-top:var(--sp-3)}
.disk-c__form textarea{width:100%}

/* ---- Обучение (модуль learning) ---- */
.lc-sec{margin-bottom:24px}
.lc-h{font-size:15px;margin:0 0 12px}
.lc-badge{background:var(--blue);color:#fff;border-radius:9px;min-width:18px;height:18px;padding:0 5px;
  font-size:11px;font-weight:700;line-height:18px;display:inline-block;text-align:center}
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.lc-card{display:block;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px}
.lc-card:hover{border-color:var(--line-strong)}
.lc-card__t{font-weight:450;font-size:15px;color:var(--ink);margin-bottom:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lc-card__meta{font-size:var(--fs-text);color:var(--ink-3)}
.lc-bar{height:6px;border-radius:4px;background:var(--line-2);overflow:hidden;margin:6px 0}
.lc-bar>span{display:block;height:100%;background:var(--blue);border-radius:4px}
.lc-course{display:flex;gap:20px;align-items:flex-start}
.lc-course__main{flex:1;min-width:0}
.lc-course__side{width:300px;flex:none;display:flex;flex-direction:column;gap:12px}
.lc-lessons{list-style:none;margin:0 0 14px;padding:0;counter-reset:les;display:flex;flex-direction:column;gap:6px}
.lc-lesson{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.lc-lesson>a{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px}
.lc-lesson>a::before{counter-increment:les;content:counter(les)". ";color:var(--ink-3);font-weight:600;margin-right:6px}
.lc-lesson__t{flex:1;font-weight:450}
.lc-lesson__meta{font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.lc-lesson>form{padding-right:10px}
.lc-ok{color:var(--green,#16a34a);font-weight:600;font-size:12.5px}
.lc-addform{display:flex;flex-direction:column;gap:8px;padding:14px}
.lc-addform input[type=text],.lc-addform select,.lc-addform textarea{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.lc-addform textarea.richtext{min-height:120px}
.lc-inline{display:flex;gap:8px;margin-top:10px}
.lc-inline select{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.lc-inline.u-g4{gap:4px}   /* #894 — заявка на оплату: узкая форма кассы+кнопки (fin_request_pay) */
/* Подпись над полем, а не впритык слева (замечание Юрия 19.09.2026 по форме контакта). Отдельным
   модификатором, а не правкой .lc-inline: тот же класс несёт десяток других форм платформы, где
   подпись и поле в строку — осознанный вид. */
.lc-inline--stack{gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3)}
.lc-inline--stack>label{display:flex;flex-direction:column;gap:var(--sp-1);
  font-size:var(--fs-meta);color:var(--ink-2)}
.lc-lessonpage{max-width:840px}
.lc-task{padding:16px;margin-top:10px}
.lc-task__prompt{font-weight:450;margin-bottom:10px;white-space:pre-wrap}
.lc-sub{border-left:3px solid var(--line-strong);padding:6px 12px;margin:8px 0;border-radius:0 8px 8px 0;background:var(--page)}
.lc-sub--approved{border-color:var(--green,#16a34a)}
.lc-sub--rejected{border-color:#dc2626}
.lc-sub--pending{border-color:var(--amber,#f59e0b)}
.lc-review{margin-top:6px;font-size:13px;color:var(--ink-2)}
.lc-subform{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.lc-subform textarea.richtext{min-height:100px}
.lc-complete{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center}
.lc-check{padding:16px;margin-bottom:12px}
.lc-check__hd{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13.5px;flex-wrap:wrap}
.lc-reviewform{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.lc-reviewform input[type=text]{flex:1;min-width:200px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
@media (max-width:900px){.lc-course{flex-direction:column}.lc-course__side{width:100%}}

/* ---- Найм (модуль hiring) + публичные страницы отклика ---- */
.hir-list{display:flex;flex-direction:column;gap:10px}
.hir-vac{display:block;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 16px}
.hir-vac:hover{border-color:var(--line-strong)}
.hir-vac__hd{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.hir-vac__t{font-weight:450;font-size:15px;color:var(--ink);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hir-vac__pos{font-size:12.5px;color:var(--ink-3)}
.hir-funnel{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.hir-funnel b{color:var(--ink);font-size:15px;margin-left:3px}
.hir-funnel__ok b{color:var(--green,#16a34a)}
.hir-funnel__no b{color:var(--ink-3)}
.hir-vacpage,.hir-cand{display:flex;gap:20px;align-items:flex-start}
.hir-vacpage__main,.hir-cand__main{flex:1;min-width:0}
.hir-vacpage__side,.hir-cand__side{width:300px;flex:none;display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){.hir-vacpage,.hir-cand{flex-direction:column}.hir-vacpage__side,.hir-cand__side{width:100%}}
/* публичные страницы отклика/демонстрации */
.pub-body{background:var(--page);min-height:100vh;margin:0;color:var(--ink)}
.pub-wrap{max-width:720px;margin:0 auto;padding:28px 16px 60px}
.pub-brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);margin-bottom:18px}
.pub-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px}
.pub-h1{font-size:24px;margin:0 0 10px}
.pub-h2{font-size:17px;margin:20px 0 10px}
.pub-desc{margin-bottom:8px}
.pub-form{display:flex;flex-direction:column;gap:14px}
.pub-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink-2)}
.pub-form input[type=text]{padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-size:15px}
.pub-note{font-size:13px;color:var(--ink-3);margin:6px 0 0}
.pub-done{text-align:center;padding:24px 8px}
.pub-done h2{font-size:20px;margin:0 0 8px}
.pub-steps{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pub-step{font-size:12.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:20px;padding:4px 12px}
.pub-step.is-done{color:var(--green,#16a34a);border-color:var(--green,#16a34a)}
.pub-step.is-current{color:var(--sapphire);border-color:var(--blue);font-weight:600}
.pub-lesson{border-top:1px solid var(--line);padding-top:16px}

/* ── KB-обвязка: публичная ссылка, вложения, обсуждение, аналитика ── */
.kb-public{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:12px 16px}
.kb-public__ic{font-size:18px}
.kb-public__t{font-weight:450}
.kb-public__url{flex:1;min-width:200px;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:6px 10px;background:var(--canvas);color:var(--ink-2);font-size:12.5px}
.kb-comments{margin-top:16px;padding:16px 18px}
.kb-comments h4{margin:0 0 12px}
.kb-clist{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.kb-c{border:1px solid var(--line-2);border-radius:12px;padding:10px 14px;background:var(--panel-2)}
.kb-c__hd{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.kb-c__who{font-weight:450;font-size:13px}
.kb-c__when{font-size:12px}
.kb-c__del{margin-left:auto}
.kb-c__body{font-size:14px}
.kb-cform{display:flex;flex-direction:column;gap:8px;align-items:flex-start;border-top:1px solid var(--line-2);padding-top:12px}
.kb-cform textarea{width:100%}
.kb-an{display:flex;flex-direction:column;gap:16px}
.kb-an__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kb-anc{padding:16px 18px}
.kb-anc__n{font-size:26px;font-weight:700;line-height:1.1}
.kb-anc__l{color:var(--ink-2);font-size:12.5px;margin-top:4px}
.kb-anc--warn .kb-anc__n{color:var(--amber)}
.kb-sec .kb-antable{width:100%;border-collapse:collapse;font-size:var(--fs-accent)}
.kb-antable th{text-align:left;color:var(--ink-2);font-weight:450;font-size:12px;padding:6px 10px;border-bottom:1px solid var(--line)}
.kb-antable td{padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.kb-antd{white-space:nowrap}
.kb-anpct{font-weight:700}
.kb-anpct--warn{color:var(--amber)}
.kb-anpop{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.pub-card--center{text-align:center}

/* ── Тесты уроков (Обучение + демонстрация Найма) ── */
.quiz-block,.quiz-edit{margin-top:16px;padding:16px 18px}
.quiz-q{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px}
.quiz-q legend{font-weight:450;font-size:14px;padding:0 6px}
.quiz-c{display:flex;align-items:flex-start;gap:8px;padding:6px 4px;cursor:pointer;font-size:14px}
.quiz-c input{margin-top:3px}
.quiz-res{border-radius:10px;padding:10px 14px;margin:10px 0;font-size:14px;font-weight:600}
.quiz-res--ok{background:color-mix(in srgb,var(--green,#16a34a) 12%,transparent);color:var(--green,#16a34a)}
.quiz-res--fail{background:color-mix(in srgb,var(--red,#dc2626) 12%,transparent);color:var(--red,#dc2626)}
.quiz-edit__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.quiz-eq{border:1px solid var(--line-2);border-radius:12px;padding:10px 14px;margin-bottom:10px;background:var(--panel-2)}
.quiz-eq__hd{display:flex;align-items:center;gap:8px}
.quiz-eq__choices{list-style:none;margin:6px 0 8px;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.quiz-correct{color:var(--green,#16a34a);font-weight:700}

/* ── #162: сквозной поиск (топбар + страница результатов) ── */
/* #918 — поиск фиксированной ширины: свободное место в строке нужно планке выбранных фильтров
   (при flex:1 поиск забирал всё, и планка получала ноль пикселей — замерено). */
/* №1134 — минимум 180 px: при 140 px в поле оставалось 92 px и подсказка «Поиск по всему…» обрезалась. */
.topsearch{display:flex;align-items:center;gap:6px;flex:0 1 200px;min-width:180px;margin:0 6px;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:5px 12px;background:var(--panel)}
.topsearch__ic{color:var(--ink-3);flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.topsearch input{flex:1;border:0;background:none;color:var(--ink);font-size:13.5px;outline:none;min-width:60px}
@media (max-width:720px){.topsearch{display:none}}
.gsearch-form{display:flex;gap:8px;margin:0 0 20px;max-width:640px}
.gsearch-form input{flex:1;border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:9px 12px;
  background:var(--panel);color:var(--ink);font-size:14px}
.gsearch{display:flex;flex-direction:column;gap:20px}
.gsearch-group__h{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px}
.gsearch-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.gsearch-item{padding:8px 10px;border-radius:10px}
.gsearch-item:hover{background:var(--panel-2)}
.gsearch-item__title{font-weight:450;font-size:14px;color:var(--ink);text-decoration:none}
.gsearch-item__title:hover{color:var(--blue)}
.gsearch-item__snip{font-size:12.5px;margin-top:2px}

/* ── Метрики (МЕТ-1): карточки, спарклайн, тренд ── */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.mcard{display:block;padding:16px;text-decoration:none;color:var(--ink)}
.mcard:hover{border-color:var(--line-strong)}
.mcard__hd{display:flex;align-items:center;gap:8px;justify-content:space-between}
.mcard__name{font-weight:450;font-size:var(--fs-accent)}
.mcard__pos{font-size:12px;margin-top:2px}
.mcard__val{display:flex;align-items:baseline;gap:6px;margin:10px 0 8px}
.mcard__num{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.mtrend{font-size:16px;font-weight:700;margin-left:auto}
.mtrend--good{color:var(--green,#16a34a)}
.mtrend--bad{color:var(--red,#dc2626)}
.mtrend--flat{color:var(--ink-3)}
/* №1139 круг 2 — «▲ 12%» не рвётся между стрелкой и процентом (apps/metrics/trends.py); строка переносит целые элементы */
.mtrend{white-space:nowrap}
.m-chart__head,.dw__num,.dw__sub{flex-wrap:wrap}
.spark{display:flex;align-items:flex-end;gap:2px;height:34px}
.spark--lg{height:72px;gap:3px}
.spark__b{flex:1;min-height:2px;background:var(--blue,#2563eb);border-radius:2px 2px 0 0;opacity:.85}
.spark__b--empty{background:var(--line-strong);opacity:.4;min-height:2px}
.m-detail{display:flex;flex-direction:column;gap:16px;max-width:760px}
.m-chart{padding:16px 18px}
.m-chart__head{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.m-formula{padding:12px 16px;font-size:13.5px}
.m-formula code{background:var(--panel-2);padding:2px 6px;border-radius:6px}
.m-enter{padding:14px 16px}
.m-enter__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:8px}
.m-enter label{display:flex;flex-direction:column;font-size:12.5px;color:var(--ink-2);gap:3px}
.m-inp{width:120px;border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:6px 9px;background:var(--panel);color:var(--ink)}
.m-enter select{border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:6px 9px;background:var(--panel);color:var(--ink)}
.m-table{padding:8px 14px 14px}
.m-row--cur{background:color-mix(in srgb,var(--blue,#2563eb) 7%,transparent)}

/* ── МЕТ-2: двойная (вторичный ряд), проверочный список ── */
.spark--sec .spark__b{background:var(--ink-3);opacity:.6}
.m-check{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.m-check__it{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}

/* ── МЕТ-3: состояния статистики ── */
.m-state{margin-top:14px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2)}
.m-state__hd{font-size:13px;color:var(--ink-2)}
.m-state__hint{font-size:13px;margin-top:4px}
.m-state--good{border-color:color-mix(in srgb,var(--green,#16a34a) 40%,transparent)}
.m-state--bad{border-color:color-mix(in srgb,var(--red,#dc2626) 45%,transparent);background:color-mix(in srgb,var(--red,#dc2626) 7%,transparent)}
.m-state-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;margin-left:6px;white-space:nowrap}
/* №1133 (находка 5) — фон и текст чипа из пар токенов темы: --ok-soft не существовал, и в тёмной теме «Рост»
   был светлой плашкой (контраст 1,9). Контраст ≥ 4,5 у всех четырёх чипов в обеих темах сторожит тест. */
.m-state-chip--good{background:var(--t-green-bg);color:var(--t-green-fg)}
.m-state-chip--bad{background:var(--t-red-bg);color:var(--t-red-fg)}
.m-state-chip--ok{background:var(--line-2);color:var(--ink-2)}
.m-state-chip--flat{background:var(--line-2);color:var(--ink-3)}

/* ── МЕТ-4: справочник статистик ── */
.cat-group{margin-bottom:22px}
.cat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cat-item{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.cat-item__hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cat-item__name{font-weight:450;font-size:14px}
.cat-item__dep{font-size:12px}
.cat-item__desc{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.cat-item__apply{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.cat-item__apply select{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:6px 8px;background:var(--panel);color:var(--ink);font-size:13px}

/* ── МЕТ-5: дашборды и виджеты ── */
.dw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:18px}
.dw-card{position:relative;padding:16px}
.dw-card__del{position:absolute;top:8px;right:10px}
.dw{display:flex;flex-direction:column;gap:8px;min-height:120px}
.dw__t{font-weight:450;font-size:13.5px}
.dw__num{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;display:flex;align-items:baseline;gap:6px}
.dw__unit{font-size:14px;font-weight:400;color:var(--ink-2)}
/* №1145 — значение виджета «число» всегда помещается в карточку. Строка числа — контейнер (@container): число
   больше не распирает колонку сетки, а уменьшает шрифт по ширине строки. Ступень --dw-val-chars = длина записи
   числа (фильтр mfit, apps/metrics/templatetags/metric_extras.py), --dw-val-em — ширина знака с запасом
   (цифра Inter 700 ≈ 0,57 em). Шрифт не больше прежнего (1em: 30 на дашборде, 44 в киоске).
   Круг 2 — нижний предел --fs-card (16 px, ui-standard §5). Если полная запись в N знаков на пределе не встаёт
   (строка уже N × 0,6 × 16 = 9,6·N px), полная прячется (.dw__val--cut — только когда короткая отличается)
   и видна короткая .dw__val--short («1,8 млн», mshort; полная — в title). Пороги ниже = 9,6·N − 0,02 px:
   в @container переменные не работают, сверка порогов с формулой — WidgetNumberFits1145Tests.
   Сжимается так только сетка дашборда шире 900 px: в киоске и на телефоне строка шире порогов. */
.dw--number .dw__num{container-type:inline-size}
.dw__val{--dw-val-chars:2;--dw-val-em:0.6;font-size:clamp(var(--fs-card),calc(100cqi / (var(--dw-val-chars) * var(--dw-val-em))),1em);max-width:100%;overflow-wrap:anywhere}
.dw__val--short{display:none;overflow-wrap:normal}
@container (max-width:47.98px){.dw__val--cut.dw__val--n5{display:none}.dw__val--cut.dw__val--n5+.dw__val--short{display:inline}}
@container (max-width:57.58px){.dw__val--cut.dw__val--n6{display:none}.dw__val--cut.dw__val--n6+.dw__val--short{display:inline}}
@container (max-width:67.18px){.dw__val--cut.dw__val--n7{display:none}.dw__val--cut.dw__val--n7+.dw__val--short{display:inline}}
@container (max-width:76.78px){.dw__val--cut.dw__val--n8{display:none}.dw__val--cut.dw__val--n8+.dw__val--short{display:inline}}
@container (max-width:86.38px){.dw__val--cut.dw__val--n9{display:none}.dw__val--cut.dw__val--n9+.dw__val--short{display:inline}}
@container (max-width:95.98px){.dw__val--cut.dw__val--n10{display:none}.dw__val--cut.dw__val--n10+.dw__val--short{display:inline}}
@container (max-width:105.58px){.dw__val--cut.dw__val--n11{display:none}.dw__val--cut.dw__val--n11+.dw__val--short{display:inline}}
@container (max-width:115.18px){.dw__val--cut.dw__val--n12{display:none}.dw__val--cut.dw__val--n12+.dw__val--short{display:inline}}
@container (max-width:124.78px){.dw__val--cut.dw__val--n13{display:none}.dw__val--cut.dw__val--n13+.dw__val--short{display:inline}}
@container (max-width:134.38px){.dw__val--cut.dw__val--n14{display:none}.dw__val--cut.dw__val--n14+.dw__val--short{display:inline}}
@container (max-width:143.98px){.dw__val--cut.dw__val--n15{display:none}.dw__val--cut.dw__val--n15+.dw__val--short{display:inline}}
@container (max-width:153.58px){.dw__val--cut.dw__val--n16{display:none}.dw__val--cut.dw__val--n16+.dw__val--short{display:inline}}
@container (max-width:191.98px){.dw__val--cut.dw__val--n20{display:none}.dw__val--cut.dw__val--n20+.dw__val--short{display:inline}}
@container (max-width:230.38px){.dw__val--cut.dw__val--n24{display:none}.dw__val--cut.dw__val--n24+.dw__val--short{display:inline}}
@container (max-width:307.18px){.dw__val--cut.dw__val--n32{display:none}.dw__val--cut.dw__val--n32+.dw__val--short{display:inline}}
.dw__val--n1{--dw-val-chars:1}.dw__val--n2{--dw-val-chars:2}.dw__val--n3{--dw-val-chars:3}.dw__val--n4{--dw-val-chars:4}
.dw__val--n5{--dw-val-chars:5}.dw__val--n6{--dw-val-chars:6}.dw__val--n7{--dw-val-chars:7}.dw__val--n8{--dw-val-chars:8}
.dw__val--n9{--dw-val-chars:9}.dw__val--n10{--dw-val-chars:10}.dw__val--n11{--dw-val-chars:11}.dw__val--n12{--dw-val-chars:12}
.dw__val--n13{--dw-val-chars:13}.dw__val--n14{--dw-val-chars:14}.dw__val--n15{--dw-val-chars:15}.dw__val--n16{--dw-val-chars:16}
.dw__val--n20{--dw-val-chars:20}.dw__val--n24{--dw-val-chars:24}.dw__val--n32{--dw-val-chars:32}
.dw__sub{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.dw__frame{width:100%;height:220px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dw__frame iframe{width:100%;height:100%;border:0}
.dw-add{padding:14px 16px}
.dw-add__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:8px}
.dw-add label{display:flex;flex-direction:column;font-size:12.5px;color:var(--ink-2);gap:3px}
.dw-add select,.dw-add input{border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:6px 9px;background:var(--panel);color:var(--ink)}
/* kiosk «на экран» */
.kiosk-body{background:var(--canvas);color:var(--ink);margin:0;padding:24px;min-height:100vh}
.kiosk-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.kiosk-head h1{margin:0;font-size:26px}
.dw-grid--kiosk{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.dw-card--kiosk{padding:22px}
.dw-card--kiosk .dw__num{font-size:44px}
.dw-card--kiosk .spark--lg{height:110px}

/* ===== CRM (CRM-1): канбан с цветными этапами + карточка сделки ===== */
/* #437 (06.08) — как у задач: колонка листается внутри себя, шапка стадии всегда видна */
.crm-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:stretch;
  max-height:calc(100vh - var(--topbar-h) - 128px)}
.crm-col{flex:0 0 250px;display:flex;flex-direction:column;gap:8px}
.crm-col [data-track]{overflow-y:auto;flex:1}
.crm-colhd{border-radius:10px;padding:9px 12px;color:#fff;box-shadow:var(--shadow);
  background:linear-gradient(135deg,var(--sc,#5b8def),color-mix(in srgb,var(--sc,#5b8def) 65%,#fff))}
/* #673 — шапка стадии: одна строка на всё. Название длиннее колонки уезжало на вторую строку,
   и плашки стадий получались разной высоты. Теперь обрезаем многоточием, а счётчик и сумма
   не переносятся: важнее ровный ряд, полное название видно по наведению. */
.crm-colhd__nm{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-colhd__mt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-top:3px;font-size:11.5px;opacity:.96;white-space:nowrap}
.crm-colhd__mt span{overflow:hidden;text-overflow:ellipsis}
.crm-colhd__mt .sum{font-weight:700;flex:none}
.crm-track{display:flex;flex-direction:column;gap:8px;min-height:50px}
.crm-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.crm-card:hover{border-color:var(--blue);box-shadow:var(--shadow-card);transform:translateY(-1px)}
.crm-card__t{font-weight:600;font-size:13px;line-height:1.3}
.crm-card__amt{font-weight:700;font-size:13px;margin-top:4px;font-variant-numeric:tabular-nums}
.crm-card__cli{color:var(--ink-2);font-size:12px;margin-top:2px}
.crm-card__foot{display:flex;align-items:center;gap:6px;margin-top:8px}
.crm-ava{width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;flex:0 0 20px}
.crm-quick{border:1px dashed var(--line-strong);border-radius:10px;padding:8px;color:var(--ink-3);font-size:var(--fs-text);
  text-align:center;text-decoration:none;display:block}
.crm-quick:hover{border-color:var(--blue);color:var(--blue)}
.crm-topcount{margin:-4px 0 12px;font-size:13px;color:var(--ink-2)}.crm-topcount b{color:var(--ink)}

/* карточка сделки: поля | лента */
.crm-deal{display:grid;grid-template-columns:330px 1fr;gap:14px}
/* #433 — поля и подписи не липнут к краям карточки: равные ~20px (≈5 мм) со всех сторон */
.crm-deal__l{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;align-self:start}
.crm-stages{display:flex;gap:3px;margin:4px 0 14px}
.crm-stages i{flex:1;height:6px;border-radius:3px;background:var(--line)}
/* 02.08 — полоса стадий кликабельна: сегмент-кнопка переводит сделку на этап (как в amoCRM/Bitrix24) */
.crm-stages__seg{flex:1;height:6px;border-radius:3px;border:0;padding:0;cursor:pointer;
  transition:height .1s, box-shadow .1s}
.crm-stages__seg:hover{height:10px;box-shadow:0 1px 4px rgba(15,23,42,.25)}
.crm-stages__seg.is-cur{outline:1.5px solid var(--ink-3);outline-offset:1px}
.crm-fld{padding:var(--sp-2) 0;border-top:1px solid var(--line-2);display:flex;gap:var(--sp-3)}
.crm-fld:first-of-type{border-top:0}
.crm-fld .k{width:112px;flex:0 0 112px;color:var(--ink-3);font-size:var(--fs-label);padding-top:1px}
/* #585 — на телефоне подпись 112px забирала треть строки: ставим её над значением */
@media (max-width:640px){
  .crm-fld{flex-direction:column;gap:2px}
  .crm-fld .k{width:auto;flex:none}
}
.crm-fld .v{font-size:13px}.crm-fld .v .sub{color:var(--ink-2);font-size:12px}
/* Д3.2 — поле правится инлайн по клику: лёгкая подсказка редактируемости при наведении */
.crm-fld .v[data-dq]{cursor:pointer;border-bottom:1px dashed transparent}
.crm-fld .v[data-dq]:hover{border-bottom-color:var(--line-strong)}
.crm-fld .v[data-dq].is-editing{border-bottom-color:transparent;flex:1}
.crm-deal__r{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.crm-comp{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.crm-comp__tabs{display:flex;gap:2px;background:var(--line-2);padding:4px}
.crm-comp__tabs button{padding:5px 12px;font-size:var(--fs-text);border-radius:6px;color:var(--ink-2);background:none;border:0;cursor:pointer}
.crm-comp__tabs button.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.crm-ev{display:flex;gap:8px;padding:8px 0;border-top:1px solid var(--line-2)}
.crm-ev:first-child{border-top:0}
.crm-evi{width:26px;height:26px;border-radius:7px;flex:0 0 26px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;background:var(--line-2)}
.crm-evi.sys{background:var(--blue-wash)}.crm-evi.task{background:var(--blue-wash)}
.crm-ev__m{font-size:12px;color:var(--ink-3)}.crm-ev__m b{color:var(--ink-2);font-weight:600}
.crm-ev__c{font-size:13px;margin-top:1px}
.crm-note{background:var(--blue-wash);border-radius:8px;padding:8px 10px}
@media(max-width:760px){.crm-deal{grid-template-columns:1fr}}
.crm-bar{height:8px;border-radius:5px;background:var(--line-2);overflow:hidden;margin-bottom:3px}
.crm-bar span{display:block;height:100%;border-radius:5px}
.crm-tabs{margin-bottom:12px}
.crm-msg{padding:8px 0;border-top:1px solid var(--line-2)}
.crm-msg:first-child{border-top:0}
.crm-msg--mine .crm-note{background:var(--blue-wash)}
.oc-levelpad{height:0;flex:none}   /* #256 — подкладка на пропущенный уровень; высоту задаёт org.js */
/* #256 — карточки заместителей в ряду одной высоты, иначе их ряды отделений идут «лестницей».
   Не применяем к свёрнутым при залипании карточкам, чтобы не мешать свёртке до названия. */
.oc-deptrow>.oc-dept--service>.oc-fanhead:not(.oc-xstuck):not(.oc-ystuck){min-height:var(--svc-head-h,0)}
.chip--req{color:#b45309;border-color:#f59e0b55}
.demo-card{margin-top:var(--card-gap)}
.demo-list{margin:8px 0 14px;padding-left:20px;font-size:13.5px;display:flex;flex-direction:column;gap:4px}
.finrep__filters{gap:12px;margin-bottom:10px;flex-wrap:wrap}
.finrep__lbl{font-size:12.5px}
.finrep__presets{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.finrep__preset{display:inline-flex;gap:2px;align-items:center}
.finrep__save{gap:6px}
/* #894 — предупреждение об отсутствующем курсе валюты поверх .card (border-color:var(--warn)) */
div.finrep__warn{border-color:var(--amber)}
/* #894 — finance/requests.html: подпись согласовавшего под статусом заявки, мельче .muted */
.fin-req__meta{color:var(--ink-3);font-size:11px}
/* Шапка кассовой группы на «Финансах»: код валюты слева, итог по ней справа. Классы в разметке
   стояли с самого начала, а правил под них не было вовсе — из-за этого код валюты и сумма
   слипались в «RUB329885» (видно на скриншоте Юрия 18.09.2026 и на стенде). */
.fin-cur__hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-2)}
.fin-cur__total{font-weight:600;font-variant-numeric:tabular-nums}
.oc-headtitle{font-size:11.5px;color:var(--ink-2);font-style:italic;margin-top:1px}
.crm-pipemove{display:block;margin-top:10px}
.crm-pipehint{display:block;font-size:12px;margin-top:4px}
.m-product{font-size:13px;margin:0 0 10px}
/* #481 — панель показателя на оргсхеме + усреднённый тренд на карточке */
.oc-mrow{cursor:pointer;border-radius:6px}
.oc-mrow:hover{background:var(--line-2,#eef1f4)}
/* #1298 п.6 — строка показателя, цифры которого человеку не открыты: панель по клику
   всё равно не отдаст их (тот же metrics_scope), поэтому и вида кликабельной у неё нет. */
.oc-mrow--noopen{cursor:default}
.oc-mrow--noopen:hover{background:transparent}
.oc-trend{font-variant-numeric:tabular-nums;margin-right:6px}
/* №1132 — оценка тренда цветом: правило `.oc-spark b{color:var(--ink-2)}` (0,1,1) перебивало
   одноклассовые .oc-trend--* (0,1,0), и зелёный/красный на карточке не включались ни в одной теме.
   Стрелка — по знаку изменения (apps/org/views.py::_avg_trend), цвет — по оценке. */
.oc-spark .oc-trend--good{color:var(--green)}
.oc-spark .oc-trend--bad{color:var(--red)}
.oc-spark .oc-trend--flat{color:var(--ink-3)}
/* №1132 — панель показателя ПОВЕРХ липкой шапки страницы (.topbar, z 50), как ящик задачи (.drawer
   60/61): с z 40/41 шапка закрывала название панели, а клик по ✕ попадал в «Сменить тему»; на
   телефоне шапка в две строки (~120 px) прятала и название, и ✕ целиком. Ниже шапки панель не
   ставим: высота шапки плавает (переносы кнопок), --topbar-h — только её минимум. Затемнение
   поверх шапки — пока панель открыта, кнопки шапки не жмутся сквозь неё. Фон — --panel (обе
   темы); прежний фон «--bg с запасным #fff» ссылался на несуществующий токен и в тёмной теме давал белое. */
.mpan__scrim{position:fixed;inset:0;background:rgba(15,20,27,.28);z-index:60}
.mpan{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--panel);
  border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(15,20,27,.12);z-index:61;
  transform:translateX(100%);transition:transform .18s ease;overflow-y:auto;padding:20px 22px}
.mpan[aria-hidden="false"]{transform:translateX(0)}
.mpan__x{position:absolute;top:12px;right:14px;border:none;background:none;cursor:pointer;font-size:16px;color:var(--ink-3)}
.mpan__load{color:var(--ink-3);padding:20px 0}
.mpan__name{font-size:17px;font-weight:450;padding-right:24px}
.mpan__own,.mpan__prod{font-size:12.5px;margin-top:3px}
.mpan__big{display:flex;gap:10px;align-items:baseline;margin:14px 0 6px;flex-wrap:wrap}
.mpan__val{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.mpan__unit{font-size:14px;color:var(--ink-3);margin-left:4px}
/* №1138 — две подписанные меры тренда в панели, расчёт и правило процента — apps/metrics/trends.py */
.mpan__trends{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:0 0 var(--sp-2);font-size:var(--fs-text);color:var(--ink-2)}
.mpan__trv{font-weight:600;font-variant-numeric:tabular-nums}
.mpan__trv--good{color:var(--green)}
.mpan__trv--bad{color:var(--red)}
.mpan__trv--flat{color:var(--ink-3)}
.spark--xl{height:96px}
.mpan__tbl{width:100%;margin-top:14px}
.mpan__acts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}

/* #482 — сетка сводной панели: плитки в единицах (до 12) */
/* №1148 — ширина плитки зависит только от её размера и ширины сетки, не от содержимого (у 1fr нижняя граница
   колонки — содержимое, в смешанном ряду w2 сжималась до 34 px).
   №1155 — размеры различимы и на обычном экране. Колонок не 12 по 1/12 сетки, а столько по ≥ 120 px, сколько
   влезает (120 px нужно плитке в одну единицу — чип «Опасность», тренд «▲ >999%», поля Ш/В): сетка 725 px (окно 1024
   с меню) — 5 колонок, 981 — 7, 1141 — 8, 1301 — 9, от 1594 — 12 (наибольшая сетка 1632: .content 1680 минус поля).
   Плитка wN — N колонок; если колонок меньше N, она на всю строку (grid-column:1/-1, лишних неявных колонок нет).
   Так w1 < w2 < w3 < w4 на сетке от 522 px, ряд не шире сетки. Цена: wN — не N/12 сетки (w6 на 7 колонках не половина).
   Шаг для wN: сетка уже N·120 + (N−1)·14 px (14 — gap .dw-grid), т.е. N колонок не влезают; в @container переменные
   не работают, сверка порогов с формулой — DashGridHonest1148Tests. */
.dw-grid--12{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));container:dw-grid/inline-size}
.dw-card--w1{grid-column:span 1}
.dw-card--h1{min-height:40px}
.dw-card--w2{grid-column:span 2}
.dw-card--h2{min-height:80px}
.dw-card--w3{grid-column:span 3}
.dw-card--h3{min-height:120px}
.dw-card--w4{grid-column:span 4}
.dw-card--h4{min-height:160px}
.dw-card--w5{grid-column:span 5}
.dw-card--h5{min-height:200px}
.dw-card--w6{grid-column:span 6}
.dw-card--h6{min-height:240px}
.dw-card--w7{grid-column:span 7}
.dw-card--h7{min-height:280px}
.dw-card--w8{grid-column:span 8}
.dw-card--h8{min-height:320px}
.dw-card--w9{grid-column:span 9}
.dw-card--h9{min-height:360px}
.dw-card--w10{grid-column:span 10}
.dw-card--h10{min-height:400px}
.dw-card--w11{grid-column:span 11}
.dw-card--h11{min-height:440px}
.dw-card--w12{grid-column:span 12}
.dw-card--h12{min-height:480px}
@container dw-grid (width < 1594px){.dw-card--w12{grid-column:1/-1}}
@container dw-grid (width < 1460px){.dw-card--w11{grid-column:1/-1}}
@container dw-grid (width < 1326px){.dw-card--w10{grid-column:1/-1}}
@container dw-grid (width < 1192px){.dw-card--w9{grid-column:1/-1}}
@container dw-grid (width < 1058px){.dw-card--w8{grid-column:1/-1}}
@container dw-grid (width < 924px){.dw-card--w7{grid-column:1/-1}}
@container dw-grid (width < 790px){.dw-card--w6{grid-column:1/-1}}
@container dw-grid (width < 656px){.dw-card--w5{grid-column:1/-1}}
@container dw-grid (width < 522px){.dw-card--w4{grid-column:1/-1}}
@container dw-grid (width < 388px){.dw-card--w3{grid-column:1/-1}}
@container dw-grid (width < 254px){.dw-card--w2{grid-column:1/-1}}
/* №1148 — карточка больше не растёт под содержимое: слово или запись числа, которые длиннее строки (название
   без пробелов, число графика до 21 знака), переносятся внутри карточки, а не вылезают на соседку. Неразрывные
   подписи (тренд .mtrend, чип .m-state-chip — white-space:nowrap) не рвутся. «Мой стол» и «Показатели» (.mtile
   без .dw) не затронуты. */
.dw{overflow-wrap:anywhere}
/* №1156 — плитки одного ряда выровнены по верху. Правило соседей .card + .card{margin-top} (для столбца карточек)
   внутри сетки давало всем плиткам, кроме первой, 8 px сверху — первая стояла выше ряда. В сетке зазор держит gap,
   отступ соседа не нужен (дашборд и киоск; вне .dw-grid правило соседей как было). Тот же вес, что у .card + .card,
   поэтому правило обязано стоять ниже его в файле — сторож DashTilesTopAndTitle1156Tests. */
.dw-grid>.card{margin-top:0}
/* №1156 — крестик «Убрать» (.dw-card__del, абсолютно в правом верхнем углу) не ложится на заголовок: когда крестик
   есть, заголовок (.dw__t и шапка графика .mtile__hd) отступает справа под него. Длинное слово переносится
   (overflow-wrap:anywhere выше), а не обрезается: название показателя на плитке должно читаться целиком, и у шапки
   графика нет title с полным текстом. Без крестика (просмотр без прав, киоск) отступа нет. */
.dw-card__del+.dw>.dw__t,.dw-card__del+.dw>.mtile__hd{padding-right:var(--sp-4)}
.dw-size{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--ink-3)}
.dw-size input[type=number]{width:44px;padding:2px 4px;border:1px solid var(--line);border-radius:6px}
.dw-size label{display:inline-flex;gap:3px;align-items:center}
.dw__cmp{font-size:12px;margin-top:2px}
.dw-add__chk{flex-direction:row!important;align-items:center;gap:6px!important}
/* П4 (#2971) — плитки показателей: «Мой стол», «Показатели», дашборд, киоск (bos78) */
.mtiles-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.mtiles-bar__tools{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.mtiles-bar__info{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-7);
  height:var(--sp-7);border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  color:var(--ink-3);text-decoration:none;font-size:var(--fs-card)}
.mtiles-bar__info:hover{color:var(--ink)}
.mtiles-bar__info.is-on{color:var(--blue);border-color:var(--blue)}
.mtiles{display:grid;gap:var(--card-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.mtiles--c1{grid-template-columns:minmax(0,1fr)}
.mtiles--c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mtiles--c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mtiles--c4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* №1161 — то же, что №1156 для .dw-grid: в сетке плиток («Показатели», «Мой стол») правило соседей .card + .card
   давало всем плиткам, кроме первой, 8 px сверху — первая стояла выше ряда. Зазор держит gap; вне .mtiles правило
   соседей как было. Вес равный, поэтому стоит ниже .card + .card — сторож MetricTilesTop1161Tests. */
.mtiles>.card{margin-top:0}
.mtile{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;text-decoration:none;color:var(--ink)}
a.mtile:hover{border-color:var(--line-strong)}
.mtile__hd{display:flex;align-items:flex-start;gap:var(--sp-2)}
.mtile__name{flex:1;min-width:0;font-weight:450;font-size:var(--fs-accent);overflow-wrap:anywhere}
.mtile__own{font-size:var(--fs-label);color:var(--ink-3)}
.mtile__desc{margin:0;font-size:var(--fs-label);color:var(--ink-2);display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mtile__val{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2)}
.mtile__num{font-size:var(--fs-page);font-weight:700;line-height:1}
.mtile__unit{font-size:var(--fs-label);color:var(--ink-3)}
.mtile__val .mtrend{margin-left:0}
.mtile__val .m-state-chip{margin-left:0}
.mchart__xlab--future{fill:var(--silver)}
@media (max-width:900px){
  .mtiles--c3,.mtiles--c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .mtiles,.mtiles--c2,.mtiles--c3,.mtiles--c4{grid-template-columns:minmax(0,1fr)}
  .mtiles-bar .mtiles-bar__cols{display:none}      /* перебивает .segmented{display:flex} из блока ниже */
}
@media(max-width:900px){.dw-grid--12{grid-template-columns:1fr}.dw-card[class*="dw-card--w"]{grid-column:span 1}}
.dash-viewers{display:flex;flex-wrap:wrap;gap:8px 16px;max-height:180px;overflow-y:auto;padding:6px 0}
.dash-viewer{display:inline-flex;gap:6px;align-items:center;font-size:13px}
.preset__opt{margin-top:8px}

/* ---- #585 Образец визуального стандарта (/settings/styleguide/) ----
   Варианты стиля переопределяют только переменные: разметка блоков не меняется. */
.sg[data-sg-scope="pastel"]{--blue:#4a7ba7;--sapphire:#375f80;--blue-wash:#eaf1f7;
  --line:#e8ebee;--line-strong:#d9dee3;--radius:16px;--radius-sm:10px;--card-pad:var(--sp-6)}
/* «Плотный» = платформенный вариант с 18.08 (#585): значения совпадают с :root и оставлены
   здесь намеренно — образец должен показывать вариант целиком, не полагаясь на текущий выбор. */
.sg[data-sg-scope="dense"]{--radius:10px;--radius-sm:6px;--card-pad:var(--sp-3);--card-gap:var(--sp-2)}
.sg-scale div{display:flex;align-items:center;gap:var(--sp-2);padding:2px 0}
.sg-scale i{display:block;height:10px;background:var(--blue);border-radius:2px}
/* #894 — по одному классу на строку шкалы: ширина сама и есть демонстрируемое значение токена */
.sg-w1{width:var(--sp-1)}.sg-w2{width:var(--sp-2)}.sg-w3{width:var(--sp-3)}.sg-w4{width:var(--sp-4)}
.sg-w5{width:var(--sp-5)}.sg-w6{width:var(--sp-6)}.sg-w7{width:var(--sp-7)}

/* #590 — витрина AI-должностей в разделе «Наём» */
/* min() в minmax и min-width:0 у карточки: иначе длинное название поста в списке распирает
   колонку сетки (grid-элемент не сжимается ниже своего min-content) и карточки уезжают за экран */
.hir-ai{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:var(--card-gap);margin-top:var(--sp-3)}
.hir-ai__card{display:flex;flex-direction:column;min-width:0}
.hir-ai__name{font-weight:450;font-size:var(--fs-accent)}
.hir-ai__desc{margin-top:var(--sp-1)}
.hir-ai__card .crm-fld{gap:var(--sp-2)}
.hir-ai__card .crm-fld .k{width:96px;flex:0 0 96px}
/* форма найма прижата к низу карточки: список постов на всю ширину, имя и кнопка — строкой */
.hir-ai__card form.form-row{margin-top:auto;padding-top:var(--sp-3)}
.hir-ai__card form.form-row select{flex:1 1 100%}
.hir-ai__card form.form-row input{flex:1 1 120px}

/* ---- #626 Систематизация AI-штата ----
   Сегментированный фильтр списка штата (Все · Люди · AI · Архив) и вкладки пульта AI.
   Один визуальный приём на оба случая: тот же чип, что и в остальных разделах. */
.segmented{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding:var(--sp-1);background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--radius-pill);width:max-content;max-width:100%}
.segmented__item{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-pill);
  font-size:var(--fs-text);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.segmented__item:hover{color:var(--ink);background:var(--canvas)}
.segmented__item.is-on{background:var(--canvas);color:var(--ink);font-weight:600;
  box-shadow:var(--shadow)}
.segmented__n{font-size:var(--fs-meta);color:var(--ink-3)}
.segmented__item.is-on .segmented__n{color:var(--blue)}
.aitabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-4)}
.aitabs__item{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);
  border-radius:var(--radius-pill);background:var(--panel);color:var(--ink-2);text-decoration:none;
  font-size:var(--fs-text);white-space:nowrap}
.aitabs__item:hover{border-color:var(--line-strong);color:var(--ink)}
.aitabs__item.is-on{background:var(--ink);border-color:var(--ink);color:var(--canvas);font-weight:600}
.aitabs__n{font-size:var(--fs-meta);padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--t-amber-bg);color:var(--t-amber-fg)}
.aitabs__item.is-on .aitabs__n{background:var(--canvas);color:var(--ink)}
.hir-ai__more{margin-top:var(--sp-2);font-size:var(--fs-text)}
.hir-ai__more summary{cursor:pointer;color:var(--blue)}
.hir-ai__pre{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--sp-3);white-space:pre-wrap;font-size:12.5px;line-height:1.55;margin:var(--sp-2) 0}
.hir-ai__tools{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.hir-ai--deny{color:var(--red)}
.hir-ai--approve{color:var(--amber)}
/* #626 — «первый рабочий день» агента: что осталось сделать человеку */
.agstart{border-color:var(--blue);background:linear-gradient(0deg,var(--blue-wash),var(--panel) 70%)}
.agstart__list{margin:0;padding-left:20px;font-size:var(--fs-text)}
.agstart__list li{margin-bottom:var(--sp-1)}
.agprob{border-color:var(--amber);background:linear-gradient(0deg,var(--t-amber-bg),var(--panel) 70%)}

/* #640 — оплата работы AI-сотрудника: проба идёт / агент остановлен */
.aiprobe{border-color:var(--amber,#d97706);background:var(--t-amber-bg)}
.aiprobe--stop{border-color:var(--red,#dc2626);background:var(--t-red-bg)}

/* ---- #644. Карточка сотрудника: плотная сетка вместо дефолтных отступов dl ----
   Карточка строилась на инлайновых стилях и обычном <dl>, из-за чего строки разъезжались на всю
   ширину и экран растягивался. Ключ и значение — сеткой, строки в одну линию, заголовки мельче. */
.ecard__dl{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:6px 14px;margin:0}
.ecard__dl dt{color:var(--ink-3);font-size:12.5px;line-height:1.45;margin:0}
.ecard__dl dd{margin:0;font-size:13.5px;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.ecard__h{font-size:11px;font-weight:450;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
/* #738 — расхождение адреса входа с e-mail карточки: заметно, но не паникой */
.ecard__warn{color:var(--amber)}
.ecard__grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ecard__grid--t{border-top:1px solid var(--line)}
.ecard__cell{padding:16px 20px;min-width:0}
.ecard__cell--r{border-right:1px solid var(--line)}
.ecard__row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 0;font-size:13.5px;min-width:0}
.ecard__row a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecard__overdue{color:var(--red)}
@media (max-width:860px){
  .ecard__grid{grid-template-columns:1fr}
  .ecard__cell--r{border-right:0;border-bottom:1px solid var(--line)}
}
/* карточка AI-сотрудника: паспорт вместо контактов, плотнее по вертикали */
.ecard--agent .ecard__cell{padding:14px 20px}
.ecard--agent .ecard__dl{gap:5px 14px}
.ecard__pass{display:flex;flex-wrap:wrap;gap:6px}

/* #894 — шапка карточки (фото+имя+должность+чипы) и секции ниже сетки (навыки/о себе/коллеги) */
.ecard__wrap{padding:0;overflow:hidden}
.ecard__hero{display:flex;gap:18px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.ecard__hero>div{min-width:0}
.ecard__name{font-size:20px;font-weight:600;line-height:1.2}
.ecard__pos{color:var(--ink-2);margin-top:4px}
.ecard__chips{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.ecard__danger{color:var(--red)}
.ecard__dim{color:var(--ink-3)}
.ecard__sec{padding:20px 24px;border-top:1px solid var(--line)}
.ecard__about{white-space:pre-line;line-height:1.6}
.ecard__peers{display:flex;gap:14px;flex-wrap:wrap}
.ecard__peer{display:inline-flex;align-items:center;gap:8px;color:inherit}

/* #720 — диалог закрытия темы с незакрытыми подзадачами. Всплывающий слой: единственное
   место, где по стандарту (§7) уместна тень. Отступы — только шкалой --sp-*. */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);background:rgba(0,0,0,.4)}
/* #796 — в диалоге стало три кнопки и поле причины: бокс — колонка, скроллится ТЕЛО, а кнопки
   всегда видны. Раньше при 19 подзадачах скролл уносил кнопки за нижний край экрана. */
.modal__box{width:min(560px,100%);max-height:85vh;overflow:auto;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.modal__box .field__hint{margin:var(--field-gap) 0 0}
.modal__list{list-style:none;margin:var(--sp-4) 0 0;padding:0;max-height:40vh;overflow:auto;
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.modal__row{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-text)}
.modal__row + .modal__row{border-top:1px solid var(--line-2)}
.modal__row-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* #968 — окна платформы (dialog.js): сообщение, вопрос, ввод причины. Раньше это были нативные
   окна браузера: при тёмной теме системы Chrome рисует их чёрными, и на показе клиенту они
   выглядели чужими и сломанными. */
.modal--dlg .modal__box{width:min(460px,100%)}
.dlg__text{margin:0 0 var(--sp-3);color:var(--ink-2)}
.modal--dlg .block-head{margin-bottom:var(--sp-2)}
.dlg__input{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:9px 11px;font:inherit;background:var(--canvas);color:var(--ink);resize:vertical}
.dlg__input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.modal__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);
  margin-top:var(--sp-4)}
@media (max-width:600px){
  /* #796 — порядок кнопок задан разметкой (Отмена → Только эту → Закрыть подзадачи);
     column-reverse ставил «Отмена» последней и делал её самой доступной для случайного тапа */
  .modal__foot{flex-direction:column}
  .modal__foot .btn{justify-content:center}
}

/* #855 — форма-фильтр с data-autosubmit: кнопку «Показать» прячем только когда скрипт ЖИВ.
   Без этого правила отключённая (или запрещённая политикой) отправка по выбору оставляла бы
   экран без единого способа применить фильтр. */
.js-on .form-auto__go{display:none}
/* #913 — экран «Доступы компаний»: карточка компании, сетка модулей и подписи зависимостей.
   Правила переехали сюда из блока <style> в самом шаблоне (#894): пока такие блоки есть,
   style-src 'unsafe-inline' снять нельзя. */
.pm{margin-bottom:var(--sp-3)}
.pm__head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  margin-bottom:10px}
.pm__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-2);
  margin-bottom:var(--sp-3)}
.pm__cell{display:flex;align-items:flex-start;gap:var(--sp-2);padding:7px 10px;
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.pm__cell input{margin-top:2px}
.pm__cell--grant{border-color:var(--line-strong)}
.pm__cell--off{opacity:.65;background:var(--panel-2)}
/* модуль включён, а то, на чём он держится, — закрыто: так быть не должно, поэтому видно сразу */
.pm__cell--hang{border-color:var(--amber)}
.pm__cell--auto{border-color:var(--blue)}
.pm__dep,.pm__warn,.pm__auto{display:block;font-size:var(--fs-meta);line-height:1.35}
.pm__dep{color:var(--ink-3)}
.pm__warn{color:var(--amber)}
.pm__auto{color:var(--blue)}
.pm__note{font-size:12px;margin-top:var(--sp-2)}

/* #902 — поддержка: плашка в шапке, формы обращений с памяткой, список и состояния заявок. */
.supbtn{position:relative}
.supbtn__dot{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;
  line-height:16px;text-align:center}
.supmenu{position:absolute;z-index:60;width:min(340px,92vw);padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.14)}
.supmenu__head{font-size:var(--fs-meta);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);padding:6px 8px}
.supmenu__upd{display:flex;gap:8px;align-items:baseline;padding:7px 8px;border-radius:var(--radius-sm);
  color:inherit;text-decoration:none;font-size:var(--fs-text)}
.supmenu__upd:hover{background:var(--page)}
.supmenu__upd.is-new .supmenu__t{font-weight:600}
.supmenu__t{flex:1;min-width:0}
.supmenu__d{color:var(--ink-3);font-size:var(--fs-meta);white-space:nowrap}
.supmenu__sep{height:1px;background:var(--line);margin:6px 4px}
.supmenu__it{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-sm);
  color:inherit;text-decoration:none;font-size:var(--fs-text)}
.supmenu__it:hover{background:var(--page)}
.supmenu__n{margin-left:auto;color:var(--ink-3);font-size:var(--fs-meta)}
.supmenu__empty{padding:8px;color:var(--ink-3);font-size:var(--fs-label)}

/* форма обращения и памятка рядом: на узком экране памятка уходит под форму */
.sup2{display:grid;grid-template-columns:minmax(0,560px) minmax(240px,340px);gap:var(--sp-4);
  align-items:start}
.sup2__form{max-width:none}
@media (max-width:900px){.sup2{grid-template-columns:1fr}}
.sup-req{color:var(--red)}
.sup-memo__box{padding:10px 12px;border-radius:var(--radius-sm);margin-bottom:var(--sp-2)}
.sup-memo__box--good{background:var(--t-green-bg);border:1px solid var(--line)}
.sup-memo__box--bad{background:var(--t-red-bg);border:1px solid var(--line)}
.sup-memo__h{font-weight:600;font-size:var(--fs-label);margin-bottom:4px}
.sup-memo__box p{margin:0;font-size:var(--fs-text)}
.sup-memo__list{margin:var(--sp-2) 0 0;padding-left:18px;color:var(--ink-2);font-size:var(--fs-label)}
.sup-acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.sup-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-3)}

/* Состояния заявки берут те же тона, что стадии задач: «принята» = как «Новые», «в работе» = как
   «В работе», и человек не учит вторую палитру. */
.sup-state--accepted{background:var(--t-slate-bg);color:var(--t-slate-fg)}
.sup-state--work{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.sup-state--postponed{background:var(--t-zinc-bg);color:var(--t-zinc-fg)}
.sup-state--solved{background:var(--t-green-bg);color:var(--t-green-fg)}
.sup-state--rejected{background:var(--t-red-bg);color:var(--t-red-fg)}

/* #902 — панель платформы вместо непонятной ссылки «Админка» */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3)}
.hub__it{display:block;text-decoration:none;color:inherit}
.hub__it:hover{border-color:var(--blue)}
.hub__t{font-weight:600;margin-bottom:4px}
.hub__d{color:var(--ink-3);font-size:var(--fs-label)}

/* #918 п.2 — сохранённые наборы фильтров в панели: чипы сверху, строка сохранения снизу. */
.fdr__saved{padding:0 0 var(--sp-3);margin-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.fdr__saved-h{font-size:var(--fs-meta);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);margin-bottom:6px}
.fdr__saved-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-2)}
.fdr__set{display:inline-flex;align-items:center;gap:4px}
.fdr__save{display:flex;gap:6px;align-items:center}
.fdr__save input[type=text]{flex:1;min-width:0;border:1px solid var(--line-strong);
  border-radius:var(--radius-input);padding:6px 9px;background:var(--canvas);color:var(--ink);
  font:inherit}

/* #1257 — выбор направления переехал в панель фильтров (crm/_filterdrawer.html), строка теперь
   только считает сделки. Разметку .fpick (<details>-список, #918 п.4) убрал вместе с ней. */
.crm-topline{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:12px}

/* #894 — экран должности (org/node.html): правила вместо 70 инлайновых стилей. Пока style= есть в
   шаблонах, style-src 'unsafe-inline' снять нельзя, и политика не защищает от подмены стилей. */
.ntab-pane{padding:18px}
.nodep__h2{margin:8px 0 12px;font-size:var(--fs-page);letter-spacing:-.02em}
.nodep__ckp{font-size:var(--fs-accent)}
.nodep__sec{font-size:var(--fs-text);margin-top:10px}
.nodep__sec-h{color:var(--ink-3)}
.nodep__list{margin:4px 0 0;padding-left:18px}
.nodep__list--work{color:var(--ink-2)}
.nodep__list--stat{color:var(--sapphire)}
.nodep__hint{font-size:var(--fs-label)}
.nodep__hint--seed{margin:4px 0 8px}
.nodep__hint--mb{margin-bottom:8px}
.nodep__lead{margin:0 0 12px}
.nodep__lead8{margin:0 0 8px}
.nodep__lead10{margin:0 0 10px}
.nodep__chip{font-size:var(--fs-meta)}
.nodep__task{display:flex;gap:10px;align-items:center;padding:9px 2px;color:inherit}
.nodep__plain{color:inherit}
.nodep__side{margin-bottom:16px}
.nodep__form{max-width:none}
.nodep__row{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap}
.nodep__row2{gap:10px;align-items:flex-end}
.nodep__chips{display:flex;gap:6px;flex-wrap:wrap}
.nodep__box{margin-top:14px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--page)}
.nodep__box-h{font-size:var(--fs-text);color:var(--ink-2)}
.nodep__seedbox{max-width:none;margin-top:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius)}
.nodep__seedform{display:inline-block;margin:0 6px 8px 0}
.nodep__seedform2{display:inline-block;margin:4px 6px 0 0}
.nodep__summary{display:inline-block;cursor:pointer}
.nodep__sel{flex:1;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:8px 11px;background:var(--canvas);color:var(--ink);font:inherit}
.nodep__pick{flex:1;min-width:220px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm)}
.nodep__num{max-width:120px}
.nodep__num--co{max-width:90px}
.nodep__num--unit{max-width:130px}
.nodep__delzone{border-top:1px solid var(--line-2);margin-top:var(--sp-3);padding-top:var(--sp-3)}
.nodep__mb6{margin-bottom:6px}
.nodep__mb10{margin-bottom:10px}


/* #894 — карточка сделки: правила вместо инлайновых стилей. */
.m-inp--auto{width:auto}
.m-inp--area{width:100%;resize:vertical}
.dealp__hint{font-size:var(--fs-label)}
.dealp__subh{font-size:var(--fs-label);font-weight:600;margin-bottom:6px}
.dealp__inline{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:var(--fs-label)}
/* #1135 — поле «срок (для задачи)» стояло и у примечания, и у звонка: display:inline-flex
   перебивал hidden, который ставит crm_composer.js. */
.dealp__inline[hidden]{display:none}
.dealp__sum{font-weight:700;font-variant-numeric:tabular-nums}
.dealp__danger{color:var(--red)}
.dealp__mt6{margin-top:6px}
.dealp__mb10{margin-bottom:10px}
.dealp__w80{width:80px}
.dealp__w110{width:110px}
.dealp__w180{width:180px}
/* Выравнивание вправо. Утилите нужен префикс тега: у заголовков таблиц свои правила вида
   «.kb-antable th{text-align:left}» — они весят больше одного класса, и без этого «сумма справа»
   в шапке не срабатывала (проверено в браузере). */
.u-right{text-align:right}
th.u-right,td.u-right{text-align:right}
.dealp__w150{width:150px}
/* Тоже с префиксом тега: «.form-row > input{min-width:0}» весит больше одного класса, и без
   этого поле названия задачи в карточке сделки сжималось до 120 px. */
input.dealp__mw220{min-width:220px}
.dealp__pad{padding:8px 10px}
.dealp__sep{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.dealp__row-h{font-size:var(--fs-text);margin-bottom:3px}

/* #997 — «в канбане снизу столбцов сильно большое расстояние от края нижней карточки до конца
   окна. То же в сделках, где оно ещё больше». Причина была в запасе на глаз: высота доски считалась
   как 100vh минус высота шапки минус 118 px (в сделках 128) — и если шапка переносилась на две
   строки, запас превращался в пустую полосу. Теперь доска просто занимает остаток окна, а запас
   считать не нужно. Растягиваем ТОЛЬКО на страницах доски (класс page--board): на обычных страницах
   такая растяжка увела бы содержимое вниз. */
body.page--board .main{display:flex;flex-direction:column;height:100vh;overflow:hidden}
/* Шапка и сообщения не сжимаются: во флекс-колонке элементы по умолчанию сжимаются, и шапка
   ужалась с 114 до 56 px — правый блок с вкладками уехал за её край (замер на стенде). */
body.page--board .topbar,body.page--board .messages{flex:0 0 auto}
body.page--board .content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;padding-bottom:var(--sp-2)}
body.page--board .kanban,body.page--board .crm-board{flex:1 1 auto;min-height:0;max-height:none}
/* Высота ИМЕННО height, а не min-height: при min-height доска с тридцатью карточками вырастала на
   3227 px и прокручивалась вся страница вместо столбца (замер на стенде). Столбцы прокручиваются
   внутри себя — так канбан и должен себя вести. */

/* МЕЕТ-6.6 (01-SPEC-MEET6.md, п.9 фактов 28.09 — «комната не влезает в экран, прокрутка внутри
   встречи») — тот же приём, что page--board выше: страница комнаты занимает остаток окна без
   прокрутки ВСЕЙ страницы, 100dvh вместо 100vh (мобильная адресная строка не откусывает низ комнаты
   на телефоне — просьба архитектора «100dvh-подобное решение»). */
body.page--vmeet .main{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
body.page--vmeet .topbar,body.page--vmeet .messages{flex:0 0 auto}
body.page--vmeet .content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* #2771 (решение Юрия 02.10.2026) — «Шире» (#2675/#2729: прятанье меню и шапки по признаку на <html>) убрана вместе с кнопкой:
   её заменил «Полный экран» в нижней панели комнаты (см. .vmeet__room.is-full ниже). Потолок ширины .content (1680 px) теперь постоянный. */
/* МЕЕТ-6 п.26(в) — то же для страницы гостя (hiring/base_public.html, топбара и .main нет): колонка
   .pub-wrap занимает окно по высоте без прокрутки всей страницы, комната (.vmeet выше) забирает остаток;
   ширина — потолок как у .content сотрудника. Обычные публичные страницы не тронуты:
   всё под классом page--vmeet-guest. */
body.page--vmeet-guest .pub-wrap{display:flex;flex-direction:column;box-sizing:border-box;height:100dvh;
  max-width:1680px;padding-block:var(--sp-4)}
body.page--vmeet-guest .pub-brand,body.page--vmeet-guest .vmeet-guesthead{flex:0 0 auto}
body.page--vmeet-guest .pub-brand{margin-bottom:var(--sp-3)}
.vmeet-guesthead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-3)}
body.page--vmeet-guest .vmeet-guesthead{padding:var(--sp-3) var(--sp-4)}
body.page--vmeet-guest .vmeet-guesthead .pub-h1{font-size:var(--fs-card);margin:0}
/* Видимая часть комнаты (все .vmeet__card и .vmeet__room) заполняет остаток .content без своей
   прокрутки страницы — внутренний скролл остаётся только там, где он и должен быть в видеозвонке
   (список участников/чат уже был .vmeet__side{overflow:auto}, сетка плиток — ниже). */
.vmeet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.vmeet__card{flex:1 1 auto;min-height:0;overflow:auto}
.vmeet__room{flex:1 1 auto;min-height:0}
.vmeet__body{flex:1 1 auto;min-height:0;overflow:hidden}
.vmeet__grid{overflow:auto}
/* #997 — «карточки по размеру сделать такими же, как в задачах, и чтобы входило больше столбцов».
   Столбец сделок был жёстким (250 px) — на широком экране влезало меньше стадий, чем в задачах,
   а на узком он не сжимался. Делаем как в задачах: тянется, но не уже 216 px. */
.crm-col{flex:1 1 0;min-width:216px}
.crm-card__t{font-weight:450;font-size:var(--fs-accent);line-height:1.3}

/* #997 — у быстрой сделки два поля: название и сумма. Сумма уже, чтобы строка не выглядела
   двумя одинаковыми полями и было видно, где что. */
.kquick__inp--sum{width:60%}

/* #997 — «+» в шапке стадии сделок: то же место и тот же смысл, что у задач. Плашка стадии —
   блок, а не строка флексов, поэтому «+» ставим в угол абсолютно и оставляем под него место в
   названии: иначе длинное название уезжало бы под кнопку. */
.crm-colhd{position:relative}
.crm-colhd__nm{padding-right:16px}
.crm-colhd__add{position:absolute;top:5px;right:8px;color:#fff;text-decoration:none;font-size:16px;
  line-height:1;opacity:.85}
.crm-colhd__add:hover{opacity:1}

/* #894 — общие утилиты для перевода инлайновых стилей. Значения берём из шкалы (#585), поэтому
   12px — это var(--fs-label), а не «примерно двенадцать».

   #1797 — отступные утилиты живут ТОЛЬКО здесь и выражены переменными шкалы. Раньше их было два
   ряда в разных концах файла, и в них накопились шаги вне шкалы: 6, 10, 14, 22. Утилита названа
   своим значением, поэтому «поправить значение» было нельзя — имя начало бы врать; каждую
   переименовали в ближайший шаг вместе со всеми местами употребления. Сторож
   SpacingUtilitiesStayOnTheScaleTests держит этот набор. */
.u-fs12{font-size:var(--fs-label)}
.u-mt4{margin-top:var(--sp-1)}
.u-mt8{margin-top:var(--sp-2)}
.u-mt12{margin-top:var(--sp-3)}
.u-mt24{margin-top:var(--sp-6)}
.u-mb16{margin-bottom:var(--sp-4)}
.u-mb12{margin-bottom:var(--sp-3)}
.u-danger{color:var(--red)}
.m-inp--wide{width:100%}

/* #894 — экран источников лидов (crm/sources): своё, что утилитами не выражается. */
.srcp__head{justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.srcp__grid{margin-top:10px;display:grid;gap:var(--sp-2)}
.srcp__more{font-size:var(--fs-label);cursor:pointer}
.srcp__code{width:100%;font-family:monospace;font-size:var(--fs-label);margin-top:6px}
.srcp__name{min-width:240px}

/* #894 — карточка показателя (metrics/metric): правила вместо инлайновых стилей.
   Классы ярлыков объявлены с префиксом тега: внутри формы ввода действует «.m-enter label», а оно
   весит больше одного класса — без префикса вид не изменился бы (проверено анализатором каскада). */
.mtr__hint{font-size:12.5px;margin-top:6px}
.mtr__my6{margin:6px 0}
.mtr__sec{font-size:12.5px;margin:var(--sp-3) 0 4px}
.mtr__sec--b{font-weight:600;margin:10px 0 4px}
.mtr__grp{font-weight:600;margin:var(--sp-2) 0 2px;font-size:12.5px;width:100%}
.mtr__right{margin-left:auto;font-size:12.5px}
.mtr__pts{width:80px}
.mtr__tpl{width:auto;max-width:100%}
.mtr__warn{padding:12px 14px;border-color:var(--amber)}
label.mtr__chk{font-size:12.5px;display:inline-flex;align-items:center;gap:4px}
label.mtr__field{display:block;margin:var(--sp-2) 0;font-size:12.5px;color:var(--ink-2)}
label.mtr__field--mt{margin:var(--sp-2) 0 0}

/* #894 — экран интеграции (integrations/detail): правила вместо инлайновых стилей. */
.u-ok{color:var(--green)}
.intd__field{display:block;margin-bottom:var(--sp-2)}
.intd__note{font-size:var(--fs-label);margin:-4px 0 10px}
.intd__mb10{margin-bottom:10px}
.intd__h{margin:0 0 10px}
.intd__h--tight{margin:0 0 var(--sp-2)}
.intd__sep{border-top:1px solid var(--line-2);padding-top:10px;margin-bottom:var(--sp-2)}
.intd__b{font-size:var(--fs-text)}
.intd__run{padding:10px;margin-bottom:var(--sp-2)}
.intd__td-b{font-weight:600}
.intd__log{white-space:pre-wrap;font-size:var(--fs-label);margin:6px 0 0}
.intd__dom{gap:var(--sp-2);margin-bottom:6px}
.intd__dom.is-dim{opacity:.55}

/* #1000 — переписка по заявке: наши ответы прижаты вправо и подкрашены, чтобы «кто сказал» читалось
   без подписи. Одна разметка на две стороны (клиент и панель платформы). */
.thr{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.thr__msg{max-width:min(560px,88%);padding:8px 11px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--panel)}
.thr__msg--us{align-self:flex-end;background:var(--blue-wash);border-color:var(--blue-wash)}
.thr__who{font-size:var(--fs-meta);color:var(--ink-3);margin-bottom:3px}
.thr__at{margin-left:6px}
.thr__body{font-size:var(--fs-text);white-space:pre-wrap}
.thr__form{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.thr__form textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:8px 10px;background:var(--canvas);color:var(--ink);font:inherit;resize:vertical}
/* «новое» в списке обращений и в плашке: тот же смысл, что у счётчика на значке */
.sup-new{margin-left:6px}
.supmenu__n--hot{color:var(--blue);font-weight:600}

/* #1019 — предупреждение над экраном. Отдельного примитива не было: такие сообщения либо писали
   инлайновым стилем, либо втискивали в чип, а «у компании нет владельца» чипом не расскажешь. */
.notice{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--t-slate-bg);color:var(--ink);font-size:var(--fs-text);margin-bottom:var(--sp-3)}
.notice--warn{background:var(--t-amber-bg);color:var(--t-amber-fg);border-color:var(--t-amber-bg)}
.notice b{font-weight:600}
/* передача прав владельца: строка под чипами карточки */
.ownpass{margin-top:var(--sp-2)}

/* #1028 — постраничный список задач и «показать ещё» в столбце канбана. Оба элемента новые: раньше
   в разметку уходил весь список и весь столбец. */
.pager{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);flex-wrap:wrap}
.pager__now{font-size:var(--fs-label);color:var(--ink-2)}
.kcol__more{display:block;text-align:center;padding:8px;margin-top:4px;font-size:var(--fs-label);
  color:var(--blue);border:1px dashed var(--line-strong);border-radius:var(--radius-sm)}
.kcol__more:hover{border-color:var(--blue);background:var(--blue-wash)}

/* #894 — экран задачи: то, что было инлайновыми объявлениями в templates/tasks/detail.html.
   Селекторы с тегом там, где на элементе уже висит класс с теми же свойствами: инлайновый стиль
   перебивал их своим весом, класс-утилита без тега — не перебьёт. */
.tdet__chips{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tdet__ord{color:var(--ink-2);font-size:13px}
/* #1311 — прошлые круги регулярной задачи: в покое ОДНА строка, раскрывается списком.
   Спрятано за <details> нарочно: у задачи с годовой историей это 50 строк, которые
   каждый раз отодвигали бы описание и статусы вниз.

   #1572 — здесь же починен тег-селектор: блок #1311 вклинился МЕЖДУ «h2» и «.tdet__title»,
   и с тех пор правило читалось как «h2 .recur-rounds» (никогда не совпадает), а заголовок
   карточки терял свой тег. Оба селектора возвращены на место. */
.recur-rounds{margin:0 0 10px}
.recur-rounds__sum{cursor:pointer;font-size:var(--fs-meta);color:var(--ink-3)}
.recur-rounds__sum:hover{color:var(--ink-2)}
.recur-rounds__list{list-style:none;margin:8px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.recur-rounds__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--fs-meta)}
.recur-rounds__period{font-weight:450;color:var(--ink);text-decoration:none}
.recur-rounds__period:hover{text-decoration:underline}
.recur-rounds__meta{color:var(--ink-3)}
.recur-rounds__more{margin:8px 0 0;font-size:var(--fs-meta);color:var(--ink-3)}
/* #1572 — строка «это регулярная работа и когда она придёт снова». Стоит НАД прошлыми кругами и
   видна уже на первом круге, когда кругов ещё нет. */
/* #1568 — КАРТОЧКА ВСТРЕЧИ. Полосы стадий здесь нет намеренно: у встречи их не существует,
   вместо стадии — ответ участника (docs/design/meetings-vs-tasks.md). */
.mtg__head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.mtg__kind{color:var(--blue);font-size:18px;line-height:1}
.mtg__title{margin:0;font-size:20px;letter-spacing:-.02em}
.mtg__when{margin:0 0 var(--sp-2);font-weight:600}
.mtg__where,.mtg__org{margin:0 0 var(--sp-2);color:var(--ink-2)}
.mtg__lbl{color:var(--ink-3);font-size:var(--fs-meta);margin-right:var(--sp-1)}
.mtg__desc{color:var(--ink-2);margin:var(--sp-3) 0}
.mtg__answer{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  margin:var(--sp-4) 0;padding:var(--sp-3);border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--page)}
.mtg__people{margin-top:var(--sp-4)}
.mtg__list{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;
  flex-direction:column;gap:var(--sp-2)}
.mtg__row{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-text)}
.mtg__name{flex:1;min-width:0}
.mtg__ans{font-size:var(--fs-meta);color:var(--ink-3)}
.mtg__ans--accepted{color:var(--green)}
.mtg__ans--declined{color:var(--red)}
.mtg__acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}

/* #1568 — выбор «Задача / Встреча» на «плюсике». Раскрытие на <details>: ни нового скрипта,
   ни слоя позиционирования — меню работает и в выезжающей панели, и без JS. Маркер треугольника
   у <summary> снят: кнопка должна выглядеть кнопкой. */
.pickadd{position:relative;display:inline-block}
.pickadd__sum{list-style:none;cursor:pointer}
.pickadd__sum::-webkit-details-marker{display:none}
.pickadd__menu{position:absolute;z-index:60;right:0;margin-top:var(--sp-1);padding:var(--sp-1);
  width:max-content;min-width:200px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.pickadd--day .pickadd__menu{right:auto;left:0;min-width:140px}
.pickadd__it{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2);
  border-radius:var(--radius-sm);color:inherit;text-decoration:none;font-size:var(--fs-text)}
.pickadd__it:hover{background:var(--page)}
.pickadd__ic{flex:none;width:18px;text-align:center;color:var(--ink-3)}
.pickadd__d{display:block;color:var(--ink-3);font-size:var(--fs-meta)}

.recur-tpl{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px;
  font-size:var(--fs-meta);color:var(--ink-2)}
.recur-tpl__mark{font-size:var(--fs-meta);line-height:1}
.recur-tpl__next{color:var(--ink-3)}
.recur-tpl__link{color:var(--blue);text-decoration:none}
.recur-tpl__link:hover{text-decoration:underline}
/* ── #2688 (РЕГ-2) — значок ↻ «Повтор задачи» у «Крайнего срока» и его окно ────────────────────────
   Значок стоит в одной ячейке с полем срока (.duecell), а не отдельным ребёнком сетки .panel__meta:
   сетка раскладывает детей парами «подпись + значение». Окно (.recurpop) — плавающая форма по образцу
   .planpick: в разметке остаётся на месте, координаты ставит floatpop.js::pin (position:fixed здесь
   писать нельзя — внутри выезжающей панели с transform он уехал бы за экран). Только токены. */
.duecell{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);min-width:0}
.duecell>input,.duecell>.panel__ro{flex:1 1 auto;min-width:0}
.duecell>.duepick{flex:1 1 auto;min-width:0}  /* #2899 У5 — span.duepick не input: правило выше его не видит */
/* #2904 СРОК-2 У8 — «Дата начала позже срока»: мягкая подсказка отдельной строкой внутри ячейки срока
   (новых детей в сетку .panel__meta не добавляем). Селектор с классом ячейки — поверх .field__hint. */
.duecell>.duecell__warn{flex:0 0 100%;margin:0;color:var(--amber)}
.recur-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;
  height:28px;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--panel);color:var(--ink-3);font:inherit;font-size:var(--fs-accent);line-height:1;
  cursor:pointer}
.recur-btn:hover{color:var(--ink);background:var(--blue-wash)}
.recur-btn.is-on,.recur-btn[aria-expanded="true"]{color:var(--blue);border-color:var(--blue);
  background:var(--blue-wash)}
.recur-btn--ro{cursor:default}
.recurpop{z-index:80;display:flex;flex-direction:column;gap:var(--sp-2);
  width:min(320px,calc(100vw - 2*var(--sp-3)));box-shadow:0 10px 30px rgba(0,0,0,.14);text-align:left}
/* #2905 — «После выполнения» с временем и флажком выше окна на низком экране: floatpop.js ставит max-height,
   без прокрутки «Сохранить» оставалась за краем. */
.recurpop{overflow-y:auto;overscroll-behavior:contain}
.recurpop[hidden]{display:none}
.recurpop__h{margin:0;font-size:var(--fs-accent);font-weight:600;color:var(--ink)}
.recurpop__text{margin:0;font-size:var(--fs-text);color:var(--ink-2)}
.recurpop__modes{display:flex;flex-direction:column;gap:var(--sp-1)}
.recurpop__mode{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-text);
  color:var(--ink);cursor:pointer}
.recurpop__mode-t{font-weight:600}
.recurpop__mode-h{margin:0 0 var(--sp-1) var(--sp-5)}
.recurpop__sec{display:flex;flex-direction:column;gap:var(--sp-2)}
.recurpop__lab{display:flex;flex-direction:column;gap:var(--sp-1)}
.recurpop__lab select,.recurpop__lab input{width:100%;min-width:0}
.recurpop__days,.wcal__days{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.recurpop__day,.wcal__day{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:var(--fs-label);
  color:var(--ink-2);cursor:pointer}
.recurpop__day:has(input:checked),.wcal__day:has(input:checked){color:var(--blue);border-color:var(--blue);background:var(--blue-wash)}
/* #2905 (круг 2) — рабочий календарь компании в «Настройках»: выбор дней — тот же вид, что в окне ↻ (выше),
   чипы дат группами «Каждый год» / по годам; цвета — только из .chip--repeat и .chip--ok */
.wcal__groups{display:flex;flex-direction:column;gap:var(--sp-2)}
.wcal__group{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-2)}
.wcal__glabel{font-size:var(--fs-meta);color:var(--ink-3);min-width:6ch}
.wcal__chips{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.wcal__chip{display:inline-flex;align-items:center;gap:var(--sp-1)}
.wcal__chip .chip__x{min-width:24px;min-height:24px}
.recurpop__after{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-text);
  color:var(--ink)}
.recurpop__after input{width:72px;min-width:0}
.recurpop__after select{min-width:0}
.recurpop__acts{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3)}
.recurpop__stop{color:var(--red);font-size:var(--fs-label)}
/* #2905 СРОК-3 — «Пропускать выходные»: флажок с подписью одной строкой, подсказка под ним */
.recurpop__check{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-text);
  color:var(--ink);cursor:pointer}
.recurpop__check input{width:auto;margin:0;accent-color:var(--blue)}
/* блоки окна переключаются атрибутом hidden (recur_pop.js), а display:flex у них перебивает его */
.recurpop__sec[hidden],.recurpop__days[hidden],.recurpop__month[hidden]{display:none}
.recur-next{margin:0;font-size:var(--fs-meta);color:var(--ink-3)}
.recur-after-row__ctl{display:flex;align-items:center;gap:var(--sp-2)}
.recur-after-row__ctl input{width:96px}
h2.tdet__title{margin:0 0 12px;font-size:20px;letter-spacing:-.02em}
div.tdet__desc{color:var(--ink-2);margin:0}          /* поверх .rt-content */
p.tdet__nodesc{color:var(--ink-3);margin:0}
form.tdet__stage{gap:8px;margin:0 0 12px;flex-wrap:wrap}   /* поверх .lc-inline */
.tdet__stage-lbl{font-size:12px;font-weight:600}
select.tdet__stage-sel{width:auto}                    /* поверх .m-inp */
p.tdet__empty{margin:0 0 10px}
p.tdet__empty6{margin:0 0 6px}
div.tdet__warn{border-color:var(--amber);margin-bottom:var(--sp-3)}   /* поверх .card */
p.tdet__m0{margin:0}
form.tdet__chkedit{display:none;flex:1;gap:6px}       /* состояние показывает скрипт, см. #894 */
.lc-inline input.tdet__chkinp{flex:1}
.tdet__right{margin-left:auto}
div.tdet__kv{margin-top:0;border-top:0}               /* поверх .kv */
/* #894 — экран аналитики продаж (crm/analytics.html): то, что было инлайновыми объявлениями.
   Селекторы с префиксом тега там, где на элементе уже висит класс с теми же свойствами: «.muted»
   задаёт font-size:12.5px, а «.card + .card» — margin-top, и раньше их перебивал инлайновый стиль
   своим весом. Класс-утилита весит меньше и не перебьёт (проверено анализатором каскада), поэтому
   без тега вид экрана поехал бы. На порядок правил в файле не опираемся.
   Кегли 18px и 22px оставлены числами: в шкале (#585) таких ступеней нет, а #894 — про политику
   содержимого, менять вид экрана она не должна. */
.cana__kpi{margin-bottom:var(--sp-4)}
div.cana__cap{font-size:var(--fs-label)}                          /* поверх .muted */
.cana__val{font-size:22px;font-weight:700}                        /* число: конверсия, цикл */
.cana__sum{font-size:18px;font-weight:700}                        /* деньги: чек, прогноз */
p.cana__note{font-size:var(--fs-label);margin-top:var(--sp-2)}    /* поверх .muted */
/* Числовые столбцы в шапке воронки. «.u-right» уже объявлен с префиксом тега (th.u-right), но весит
   ровно столько же, сколько «.kb-antable th{text-align:left}», и выигрывает только порядком в файле.
   Закрепляем результат весом, чтобы перестановка правил не вернула выравнивание влево. */
.kb-antable th.u-right{text-align:right}

/* #894 — настройки компании: то, что было инлайновыми объявлениями в templates/company_settings.html.
   Селектор с тегом там, где на элементе уже висит класс с теми же свойствами: .field__hint задаёт
   color, .tiles — grid-template-columns и margin-bottom, .block-head h3 — font-size. Инлайновый
   стиль перебивал их своим весом, класс-утилита (вес 0,1,0) не перебьёт, а на порядок правил в
   файле опираться нельзя: он переживёт одну правку и рассыплется на следующей. */
p.cset__warn{color:var(--amber)}                                      /* поверх .field__hint */
div.cset__tiles2{grid-template-columns:1fr 1fr;margin-bottom:12px}    /* поверх .tiles, в т.ч. в @media */
.cset__tile-of{font-size:13px;color:var(--ink-3)}
.cset__bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:16px}
div.cset__quota-over{color:var(--red);margin-bottom:8px}    /* поверх .field__hint */
.block-head h3.cset__subh{font-size:14px}                             /* поверх .block-head h3 (вес 0,1,1) */
.cset__dim{color:var(--ink-3)}


/* #894 — экран фондов (finance/funds.html): то, что было инлайновыми объявлениями.
   Почти всё уже выражено утилитами (u-right, tnum, u-nowrap, u-inline, u-wrap), поэтому своих
   правил здесь четыре (пятое, зазор до карточки «Новый фонд», свёрнуто в общее
   правило div.card.u-cardgap ниже: тот же приём стоял в 11 шаблонах). Там, где на элементе
   уже висит класс с тем же свойством, селектор идёт С
   ТЕГОМ: инлайновое объявление перебивало такой класс своим весом, а класс-утилита (вес 0,1,0) —
   не перебьёт, и на порядок правил в файле полагаться нельзя. */
p.ffnd__lead{margin:0 0 14px;font-size:var(--fs-text)}   /* поверх .muted (font-size:12.5px) */
/* Чип перерасхода. В разметке он был «chip chip--ai» с инлайновой заливкой поверх фиолетовой:
   модификатор AI-пометки взяли ради формы, а цвет тут же перекрасили. Модификатор убран, его
   межбуквенный интервал перенесён сюда — вид не меняется ни на пиксель. Два класса в селекторе
   нужны, чтобы перебить заливку и цвет из .chip. */
.chip.ffnd__over{background:#c0392b;color:#fff;letter-spacing:.03em}
input.ffnd__w-lim{width:150px}   /* поверх .m-inp (width:120px) — поле лимита */
input.ffnd__w-cur{width:70px}    /* поверх .m-inp — поле валюты, три знака */
/* #894 — выезжающая панель задачи: то, что было инлайновыми объявлениями в
   templates/tasks/_panel.html. Селекторы с тегом там, где на элементе уже висит класс с теми же
   свойствами: инлайновый стиль перебивал его своим весом, а класс-утилита (вес 0,1,0) — не
   перебьёт, и на порядок правил в файле опираться нельзя. Правила повторяют блок tdet__ выше:
   панель и полная страница задачи — один и тот же экран в двух видах. */
form.tpan__inline{display:inline}                  /* поверх .lc-inline{display:flex} */
p.tpan__empty{margin:0 0 10px}                     /* поверх .rt-content p и отступа абзаца */
div.tpan__warn{border-color:var(--amber);margin-bottom:var(--sp-3)}   /* поверх .card */
p.tpan__m0{margin:0}
form.tpan__chkedit{flex:1;gap:6px}
/* .lc-inline{display:flex} перебило бы браузерное [hidden]{display:none}, и форма правки пункта
   была бы видна всегда — поэтому скрытость закрепляем правилом с тем же атрибутом (panel_chk.js). */
form.tpan__chkedit[hidden]{display:none}
.lc-inline input.tpan__chkinp{flex:1}              /* поверх .m-inp и .inline-add input */
.tpan__right{margin-left:auto}
div.tpan__tabs{margin-bottom:10px}                 /* поверх .task-tabs{margin-bottom:14px} */
/* #894 — зазор до следующей карточки. Один и тот же «class="card" style="margin-top:14px"» стоял в
   11 шаблонах (13 раз): экраны CRM, финансов и интеграций. Это общий приём, а не свойство экрана,
   поэтому правило одно, а частные клоны (cana__mt14, ffnd__gap) убраны. Тег в селекторе обязателен:
   «.card + .card{margin-top:var(--card-gap)}» весит (0,2,0), и без тега зазор стал бы 8px. */
div.card.u-cardgap{margin-top:14px}

/* ---- МЕЕТ-2 «Видеовстречи»: раздел, кнопка «сейчас», страница встречи, итог ----
   worklog/2026-09-23-video-meetings/01-SPEC.md, раздел «МЕЕТ-2». Плитки видео тёмные в ОБЕИХ
   темах (видеокадр не перекрашивается), поэтому их фон и текст — свои переменные с неизменной
   парой: светлый текст на тёмной подложке проходит контраст в любой теме. */
:root{--vmeet-tile-bg:#161c2b;--vmeet-tile-fg:#f4f6fb;--vmeet-tile-shade:rgba(8,11,20,.62);
  --vmeet-tile-min:220px;--vmeet-strip-tile:88px;--vmeet-side-w:300px;--vmeet-ava:64px;
  --vmeet-shared-strip:160px;--vmeet-shared-min:200px;--vmeet-menu-w:260px;--vmeet-setmenu-h:60vh;--vmeet-devfail-w:480px;
  --vmeet-share-col:220px;--vmeet-ribbon-h:96px;--vmeet-fade:.25s;--vmeet-rooms-num:72px;--vmeet-rooms-wide:120px}
.vmeet [hidden]{display:none!important}
.vmeet-now{display:inline}
/* №1175 — «Новая встреча» и «Новый вебинар» над списком встреч «Мессенджеров»: одна строка, две
   кнопки равной ширины и высоты, зазор --sp-2. Не влезают в одну строку — переносятся целиком
   (минимум формы = ширина текста без переноса), без обрезки и горизонтальной прокрутки. Боковой
   отступ --sp-1 + 6px списка = 10px поля поиска над ним: края кнопок встают по краям поля. */
.vmeet-nowrow{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-2) var(--sp-1) var(--sp-3)}
.vmeet-nowrow>.vmeet-now{display:flex;flex:1 1 0}
.vmeet-nowrow .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
/* МЕЕТ-6.4 (В12) — «Архив» видеовстреч: свёрнутый <details> внизу списка «Мессенджеров», тот же
   приём без скриптов, что .cswitch/.tabmore. Числа — шкала --sp-*. */
.vmeet__archive{margin-top:var(--sp-3);border-top:1px solid var(--line)}
.vmeet__archive-sum{list-style:none;cursor:pointer;user-select:none;padding:var(--sp-3) var(--sp-2);
  color:var(--ink-2);font-size:var(--fs-label)}
.vmeet__archive-sum::-webkit-details-marker{display:none}
.vmeet__archive-sum::marker{content:""}
.vmeet__archive-sum::before{content:"▸";display:inline-block;margin-right:var(--sp-2)}
.vmeet__archive[open]>.vmeet__archive-sum::before{content:"▾"}
/* МЕЕТ-6.5 — таблица заходов в панели комнаты («Мессенджеры»): узкая панель, поэтому плотнее общей
   .table и с горизонтальной прокруткой, а не с ломкой вёрстки. Числа — шкала --sp-*. */
.vmeet__visits{margin-top:var(--sp-2);overflow-x:auto}
.vmeet__visits .table th,.vmeet__visits .table td{padding:var(--sp-2);vertical-align:top}
/* #2778 — «Кто говорил» в строке захода: раскрывающийся список «имя — время · доля» */
.vmeet__speech{margin-top:var(--sp-2);font-size:var(--fs-meta)}
.vmeet__speech>summary{cursor:pointer;color:var(--blue)}
.vmeet__speechlist{list-style:none;margin:var(--sp-1) 0 0;padding:0}
.vmeet__speechlist li{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-1) 0;color:var(--ink-2)}
.vmeet__spname{min-width:0;overflow-wrap:anywhere}
/* #2879 — «Поручить протокол» в строке захода: выбор исполнителя компактный, не растягивает колонку «Папка» */
:root{--vmeet-protocol-w:130px}
.vmeet__protocol{width:var(--vmeet-protocol-w);max-width:100%}
.vmeet__protocol .entpick__ctl{min-height:30px;padding:3px 26px 3px 8px;font-size:var(--fs-label)}
.vmeet-now__ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linejoin:round;vertical-align:middle}
.vmeet-list{list-style:none;margin:0;padding:0}
.vmeet-list__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-2) 0;border-top:1px solid var(--line-2)}
.vmeet-list__row:first-child{border-top:0}
.vmeet-list__title{font-weight:600;color:var(--ink)}
.vmeet-list__meta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-label);color:var(--ink-3)}
/* Формат встречи «Очная / Видеовстреча» в форме встречи — сегмент из радиокнопок. */
.segmented__item--radio{position:relative;cursor:pointer}
.segmented__item--radio input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.segmented__item--radio:has(input:checked){background:var(--canvas);color:var(--ink);font-weight:600;
  box-shadow:var(--shadow)}
.segmented__item--radio:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:1px}
/* Блок видеовстречи в карточке назначенной встречи. */
.mtg__video{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0;
  padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2)}
.mtg__video .mtg__lbl{margin-right:auto}

.vmeet__card{max-width:960px;margin:0 auto}
.vmeet__h{margin:0 0 var(--sp-2);font-size:var(--fs-card);font-weight:600;color:var(--ink)}
.vmeet__acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0}
.vmeet__join{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sp-4);align-items:start}
.vmeet__preview{position:relative;aspect-ratio:16/9;background:var(--vmeet-tile-bg);
  border-radius:var(--radius-sm);overflow:hidden}
.vmeet__preview video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.vmeet__preview-off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--vmeet-tile-fg);font-size:var(--fs-text)}
.vmeet__preview.is-live .vmeet__preview-off{display:none}
.vmeet__level{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);height:var(--sp-1);
  border-radius:var(--radius-pill);background:var(--vmeet-tile-shade);overflow:hidden}
.vmeet__level span{display:block;height:100%;width:100%;background:var(--green);transform-origin:left center;
  transform:scaleX(0);transition:transform .08s linear}
.vmeet__joinside{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.vmeet__joinside .field{margin:0}
.vmeet__me{font-size:var(--fs-accent);font-weight:600;color:var(--ink)}
.vmeet__opt{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-text);color:var(--ink-2)}
.vmeet__hint--bad{color:var(--t-amber-fg)}
.vmeet__joinbtn{align-self:flex-start;min-width:160px}
.vmeet__linkrow{display:flex;gap:var(--sp-2);flex:1;min-width:0}   /* №1136: значение — на всю ячейку .crm-fld */
.vmeet__linkrow input{flex:1;min-width:0}
/* Круг 2 (замечание ОТК 7): поле ссылки в панели участников — та же .form, без её нижнего
   отступа (зазор держит сама панель). */
.vmeet__sideform .field{margin:0}

.vmeet__room{display:flex;flex-direction:column;gap:var(--sp-2);position:relative}
.vmeet__timer{font-size:var(--fs-accent);font-weight:600;color:var(--ink);white-space:nowrap}
.vmeet__notice{padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:var(--fs-text);
  background:var(--t-amber-bg);color:var(--t-amber-fg)}
.vmeet__body{display:flex;gap:var(--sp-2);align-items:flex-start}
.vmeet__grid{flex:1;min-width:0;display:grid;gap:var(--sp-2);align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(var(--vmeet-tile-min),1fr))}
.vmeet__tile{position:relative;aspect-ratio:16/9;background:var(--vmeet-tile-bg);border-radius:var(--radius-sm);
  overflow:hidden;outline:2px solid transparent;outline-offset:-2px}
.vmeet__tile video{width:100%;height:100%;object-fit:cover;display:block}
.vmeet__tile.is-local:not(.vmeet__tile--screen) video{transform:scaleX(-1)}
.vmeet__tile--screen video{object-fit:contain}
.vmeet__tile.is-camoff video{visibility:hidden}
.vmeet__tile--screen.is-main{grid-column:1/-1}
/* #2708 — показ экрана виден ЦЕЛИКОМ (video остаётся contain, без обрезки; сетка занимает высоту области, align-self:stretch).
   #2771 (решение Юрия 02.10.2026, как в Zoom/Meet) — демонстрация занимает максимум слева и прижата влево, справа колонка окошек участников
   (прокрутка вниз); «Скрыть участников» — демонстрация на всю ширину. Признак .is-sharing на сетке ставит room.js::pickMain, окошки
   участников лежат в .vmeet__strip: в обычном виде это display:contents (плитки — прямо в сетке, как раньше), при показе экрана —
   колонка. На телефоне (<=720) колонка становится лентой окошек снизу, она листается вправо. */
.vmeet__grid{align-self:stretch;position:relative}
.vmeet__strip{display:contents}
.vmeet__sharetoggle{position:absolute;z-index:2;top:var(--sp-2);right:var(--sp-2)}
@media (min-width:721px){
  .vmeet__grid.is-sharing{display:flex;gap:var(--sp-2);overflow:hidden}
  .vmeet__grid.is-sharing > .vmeet__tile--screen.is-main{flex:1 1 0;min-width:0;aspect-ratio:auto}
  .vmeet__grid.is-sharing > .vmeet__tile--screen.is-main video{object-position:left center}
  .vmeet__grid.is-sharing .vmeet__strip{display:flex;flex-direction:column;gap:var(--sp-2);flex:0 0 var(--vmeet-share-col);
    min-height:0;overflow-y:auto}
  .vmeet__grid.is-sharing .vmeet__strip .vmeet__tile{flex:none}
  .vmeet__grid.is-sharing:not(.is-strip-off) .vmeet__sharetoggle{right:calc(var(--vmeet-share-col) + var(--sp-4))}
}
.vmeet__grid.is-sharing.is-strip-off .vmeet__strip{display:none}
.vmeet__tile.is-speaking{outline-color:var(--green)}
.vmeet__ava{position:absolute;inset:0;margin:auto;width:var(--vmeet-ava);height:var(--vmeet-ava);border-radius:50%;
  display:none;align-items:center;justify-content:center;background:var(--blue);color:var(--btn-primary-fg);
  font-size:var(--fs-page);font-weight:600}
.vmeet__tile.is-camoff .vmeet__ava{display:flex}
.vmeet__label{position:absolute;left:var(--sp-2);bottom:var(--sp-2);max-width:calc(100% - var(--sp-4));
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-pill);background:var(--vmeet-tile-shade);
  color:var(--vmeet-tile-fg);font-size:var(--fs-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vmeet__hand{margin-left:var(--sp-1)}
/* #2569 п.3 — значок «полоски сигнала» вместо подписи «связь: …» (пояснение в title/aria-label). */
.vmeet__q{position:absolute;right:var(--sp-2);top:var(--sp-2);width:26px;height:26px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--vmeet-tile-shade);color:var(--vmeet-tile-fg)}
.vmeet__q svg{width:16px;height:16px;fill:currentColor}
.vmeet__qdim{opacity:.35}
/* МЕЕТ-6.6 — max-height был числом вручную от 100vh (magic number, ломающийся при правке шапки —
   тот же класс бага, что уже чинили в канбане, #997 выше). Родитель .vmeet__body теперь сам
   ограничен flex (page--vmeet выше) — боковой панели достаточно 100% его высоты. */
.vmeet__side{width:var(--vmeet-side-w);flex:none;display:flex;flex-direction:column;gap:var(--sp-2);
  max-height:100%;overflow:auto}
.vmeet__side .block-head{margin:0}
.vmeet__people{list-style:none;margin:0;padding:0}
.vmeet__person{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);padding:var(--sp-2) 0;
  border-top:1px solid var(--line-2);font-size:var(--fs-text)}
.vmeet__person:first-child{border-top:0}
.vmeet__pname{flex:1 1 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.vmeet__pstate{flex:1 1 auto;font-size:var(--fs-meta);color:var(--ink-3)}
/* #2778 — «речь 2 мин 5 с» в строке участника (живая оценка, room.js::paintSpeech); пустая — скрыта атрибутом hidden */
.vmeet__ptime{flex:0 0 auto;font-size:var(--fs-meta);color:var(--ink-3)}
.vmeet__ptime[hidden]{display:none}
/* #2958 — «Кого позвать?»: свёрнут в кнопку «Позвать» (экран входа и «Участники»), на «Новой встрече» раскрыт сразу. Живёт внутри страницы комнаты
   (не плашкой в <body>, как entpick): в полном экране комнаты [data-screen="room"] плашка в <body> не видна. Два числа — переменные: высота списка с
   прокруткой и минимальная высота строки (попадание пальцем). */
.vmeet__call{--vmeet-call-list-h:280px;--vmeet-call-row:40px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);min-width:0;max-width:100%}
.vmeet__call [hidden]{display:none}
.vmeet__call-body{display:flex;flex-direction:column;align-self:stretch;gap:var(--sp-2);min-width:0;padding:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2)}
.vmeet__call-body .block-head{margin:0}
.vmeet__call-body input[type=search]{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  padding:var(--sp-2) var(--sp-3);font:inherit;background:var(--canvas);color:var(--ink)}
.vmeet__call-body input[type=search]:focus{outline:none;border-color:var(--blue)}
.vmeet__call-list{list-style:none;margin:0;padding:0;max-height:var(--vmeet-call-list-h);overflow:auto;
  border:1px solid var(--line);border-radius:var(--radius-input);background:var(--canvas)}
.vmeet__call-list li{border-top:1px solid var(--line-2)}
.vmeet__call-list li:first-child{border-top:0}
.vmeet__call-list li[hidden]{display:none}
.vmeet__call .vmeet__call-item{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--vmeet-call-row);padding:var(--sp-1) var(--sp-2);
  box-sizing:border-box;cursor:pointer;font-size:var(--fs-text);font-weight:400;color:var(--ink)}
.vmeet__call .vmeet__call-item:hover{background:var(--blue-wash)}
.vmeet__call .vmeet__call-item input{flex:none;width:auto;margin:0;padding:0;accent-color:var(--blue);cursor:pointer}
.vmeet__call-item .ava,.vmeet__call-item .ava-img{flex:none}
.vmeet__call-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vmeet__call-item .field__hint{flex:none;margin:0}
.vmeet__call-acts{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vmeet__call-body .field__hint,.vmeet__call-body .field__err,.vmeet__call>.field__hint{margin:0}
.vmeet__chat{display:flex;flex-direction:column;gap:var(--sp-2);min-height:120px;max-height:50vh;overflow:auto}
.vmeet__msg{font-size:var(--fs-text);color:var(--ink)}
.vmeet__msg b{font-weight:600}
.vmeet__msg.is-mine b{color:var(--blue)}
.vmeet__msgtime{margin-left:var(--sp-1);font-size:var(--fs-meta);color:var(--ink-3)}
.vmeet__msgtext{overflow-wrap:anywhere}
.vmeet__chatform{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vmeet__chatform input{flex:1;min-width:0}
/* №1158 — вложения в чате встречи (static/js/meet/chat.js, ui-standard.md §24): карточка файла .vmeet__file под именем автора — ссылка на
   /meet/<uuid>/chat-file/<id>/ (картинка — превью ?inline=1, остальное — значок расширения). Кнопки «Прикрепить»/«Снимок экрана» — .vmeet__chatbtn
   второй строкой формы под полем (поле — первая строка во всю ширину, flex-wrap у формы). Числа — только в переменных
   (--vmeet-chatbtn, --vmeet-chatbtn-ic, --vmeet-thumb-w/-h), на телефоне превью во всю ширину панели. Имя файла и автор — textContent, никакого innerHTML с данными. */
[data-panel="chat"]{--vmeet-chatbtn:36px;--vmeet-chatbtn-ic:18px;--vmeet-thumb-w:160px;--vmeet-thumb-h:120px}
/* панель чата узкая (300 px на компьютере, 375 на телефоне): у того, кто прикладывает файлы (data-chat-upload на #vmeet),
   поле — первой строкой во всю ширину, кнопки — второй, «Отправить» прижата вправо; иначе три кнопки сжимают поле до ~90 px.
   У гостя кнопок вложений нет — поле и «Отправить» остаются одной строкой (круг 2, М3) */
[data-chat-upload="1"] .vmeet__chatform input{flex-basis:100%}
[data-chat-upload="1"] .vmeet__chatform [type="submit"]{margin-left:auto}
.vmeet__chatbtn{flex:none;min-width:var(--vmeet-chatbtn);padding-inline:var(--sp-2)}
.vmeet__chatbtn .vmeet__ic{width:var(--vmeet-chatbtn-ic);height:var(--vmeet-chatbtn-ic)}
.vmeet__msg--file .vmeet__file{display:flex;gap:var(--sp-2);align-items:center;margin-top:var(--sp-1);padding:var(--sp-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--canvas);color:inherit;text-decoration:none;max-width:100%;box-sizing:border-box}
.vmeet__filethumb{flex:none;max-width:var(--vmeet-thumb-w);max-height:var(--vmeet-thumb-h);border-radius:var(--radius-sm);object-fit:cover}
.vmeet__fileicon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--sp-7);height:var(--sp-7);border-radius:var(--radius-sm);
  background:var(--line);color:var(--ink-2);font-size:var(--fs-meta);font-weight:600;text-transform:uppercase}
.vmeet__filebody{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.vmeet__filename{font-size:var(--fs-text);overflow-wrap:anywhere}
.vmeet__filemeta{font-size:var(--fs-meta);color:var(--ink-3)}
.vmeet__file.is-uploading{opacity:.6}
.vmeet__file[aria-disabled="true"]{pointer-events:none;opacity:.6}
[data-panel="chat"].is-drop{outline:2px dashed var(--blue);outline-offset:calc(-1 * var(--sp-1))}
/* карточка встречи (templates/messengers/_meetpane.html): строка чата читается слева направо — время, автор, текст; не «по краям», как строки времени речи */
.vmeet__speechlist [data-chat-row]{justify-content:flex-start;gap:var(--sp-2)}
/* #2771 — нижняя панель: ВСЁ управление в одной строке (образец Meet/Телемост/Zoom). Слева таймер, «Настройки», «Транскрибировать», запись; по центру микрофон,
   камера, экран, фон, жесты; справа чат, участники, «Полный экран», «Выйти». Левая и правая группы одной ширины (flex:1 1 0) — центральная
   стоит по центру панели. Плашки (о фоне, о состоянии связи) — отдельными строками над рядом кнопок, внутри панели. */
.vmeet__controls{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);padding:var(--sp-2);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.vmeet__controls > .vmeet__notice{flex:1 1 100%}
.vmeet__cg{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.vmeet__cg--left{flex:1 1 0;justify-content:flex-start}
.vmeet__cg--mid{flex:0 0 auto;justify-content:center}
.vmeet__cg--right{flex:1 1 0;justify-content:flex-end}
/* #2788 (круг 2) — чипы «● Идёт запись · сохранится у <организатор>» и «Идёт расшифровка» лежат отдельной строкой панели рядом с плашками, а не в левой
   группе (она — треть панели и держит таймер, «Настройки», T и R в одну строку, #2771). Строки нет, пока оба чипа скрыты; длинное имя обрезается
   многоточием в одну строку (полный текст — в title), чип не раздувает панель. */
/* #2817 (решение Юрия 03.10.2026, прод 2f071f6) — чип записи/расшифровки показывается ~5 с (room.js), поэтому строка чипов лежит ПОВЕРХ видео над панелью
   (absolute, bottom:100%), а не в потоке панели: панель той же высоты с чипом и без. Без :has() — пустая абсолютная строка не занимает места. Постоянный знак — точка
   у таймера (.vmeet__tdot ниже). */
.vmeet__recrow{display:contents}
/* #2778 (круг 2) — плавающая стопка плашек над панелью: чип записи/расшифровки #2817 (.vmeet__recrow, его чипы — прямые элементы стопки), подсказка слабой связи #2778
   (.vmeet__nethint) и подсказка про микрофон #2777 (.vmeet__mutehint). ОДНА абсолютная обёртка поверх видео (bottom:100%) с переносом строк: на широком экране плашки в
   одну строку (микрофон справа), на телефоне каждая на своей строке — друг на друга не наезжают. В потоке панели обёртки нет: панель и область видео не растут ни с одной
   плашкой. Сама обёртка кликов не ловит, плашки — ловят. Пустая (всё скрыто) — нулевой высоты. */
.vmeet__floats{position:absolute;z-index:4;left:0;right:0;bottom:calc(100% + var(--sp-2));display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2);min-width:0;pointer-events:none}
.vmeet__floats > *{pointer-events:auto}
.vmeet__rec{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;box-shadow:var(--shadow)}
/* #2777 — «Вы говорите с выключенным микрофоном» (static/js/meet/audio.js + room.js): плашка поверх видео над панелью, у правого края (чип записи #2817 — у левого),
   панель не растёт; скрыта, пока нечего сказать. Янтарная, как остальные плашки комнаты. Строка «Шумоподавление микрофона» в меню «Настройки» — .vmeet__nsrow. */
.vmeet__mutehint{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);max-width:100%;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:var(--fs-text);background:var(--t-amber-bg);color:var(--t-amber-fg);box-shadow:var(--shadow)}
.vmeet__mutehint[hidden]{display:none}
.vmeet__nsrow{display:flex;flex-direction:column;gap:var(--sp-1)}
.vmeet__nsrow .field__hint{margin:0}
/* #2817 — таймер и точка «идёт запись / расшифровка» у него. Красная — запись видео, фиолетовая — только расшифровка (цвета темы: контраст к --panel в обеих темах не ниже 3:1). */
.vmeet__tm{display:inline-flex;align-items:center;gap:var(--sp-2);min-width:0}
.vmeet__tdot{position:relative;display:block;flex:none;width:var(--sp-3);height:var(--sp-3);border-radius:50%;background:var(--red);cursor:help}
.vmeet__tdot[hidden]{display:none}
.vmeet__tdot--tr{background:var(--t-violet-fg)}
.vmeet__tdot:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Подсказка при фокусе с клавиатуры (нативный title на фокус не показывается); при наведении мыши — штатный title, свою не рисуем. */
.vmeet__tdot:focus-visible::after{content:attr(data-tip);position:absolute;z-index:7;left:0;bottom:calc(100% + var(--sp-2));width:max-content;max-width:min(320px,calc(100vw - var(--sp-7)));
  padding:var(--sp-1) var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);
  font-size:var(--fs-meta);font-weight:400;line-height:1.3;box-shadow:var(--shadow)}
/* #2788 (круг 2) — левая группа теперь четыре элемента (таймер, «Настройки», T, R) и ~202 px (с таймером «1:00:00» ~213): в одну строку она должна
   помещаться в своей трети панели. Зазор в ней равен зазору остальных групп (--sp-2, было --sp-3): это закрывает 1001–1018 px при встрече дольше часа.
   В узком окне ПК (721–760 px, ниже — телефонная раскладка) трети панели ~190 px, поэтому зазор всех групп --sp-1: левая ~189, правая ~188. */
@media (min-width:721px) and (max-width:760px) {
  .vmeet__cg{gap:var(--sp-1)}
}
/* #2569 п.1: кнопки — значки, не текст; .vmeet__ic на/выкл переключается классом .is-off
   (тот же приём, что .theme-toggle .t-sun/.t-moon). */
.vmeet__ctl{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-1);min-width:44px;height:44px;padding:0 var(--sp-2);border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);background:var(--canvas);color:var(--ink);font:inherit;
  font-size:var(--fs-meta);cursor:pointer}
.vmeet__ctl:hover{border-color:var(--blue)}
.vmeet__ctl.is-off{background:var(--t-red-bg);color:var(--t-red-fg);border-color:transparent}
.vmeet__ctl.is-on{background:var(--blue-wash);color:var(--blue);border-color:var(--blue)}
.vmeet__ctl--leave{background:var(--t-red-bg);color:var(--t-red-fg);border-color:var(--t-red-fg)}
/* #2771 — «Полный экран»: стрелки по диагонали («войти»), в режиме — красная сплошная и стрелки внутрь («выйти»). Красный сплошной, а не
   светлый, как у «Выйти» рядом: режим должен быть виден с первого взгляда. */
.vmeet__ctl--full .vmeet__ic--exit{display:none}
.vmeet__ctl--full.is-full{background:var(--red);color:var(--btn-primary-fg);border-color:var(--red)}
.vmeet__ctl--full.is-full .vmeet__ic--enter{display:none}
.vmeet__ctl--full.is-full .vmeet__ic--exit{display:block}
/* МЕЕТ-6.3 (п.4 решений Юрия 28.09): кнопка записи — красная И залитая, когда запись идёт; белая
   (обычная кнопка), когда нет. Не .is-off: у микрофона/камеры красный = «выключено», здесь
   красный = «пишет», поэтому свой класс. */
.vmeet__ctl--rec.is-rec{background:var(--t-red-bg);color:var(--t-red-fg);border-color:var(--t-red-fg)}
.vmeet__ctl--rec.is-rec .vmeet__ic circle{fill:currentColor}
/* #2788 — «Транскрибировать»: нажата (расшифровка идёт) — цвет чипа «Идёт расшифровка» (chip--ai, те же переменные). Пока идёт «Запись», кнопка
   нажата и недоступна: курсор обычный, цвет не гасим — состояние должно читаться. */
.vmeet__ctl--tr.is-tr{background:var(--t-violet-bg);color:var(--t-violet-fg);border-color:var(--t-violet-fg)}
.vmeet__ctl:disabled{cursor:default}
.vmeet__ctl:disabled:hover{border-color:var(--line-strong)}
.vmeet__ctl--tr.is-tr:disabled:hover{border-color:var(--t-violet-fg)}
.vmeet__ctl--rec.is-rec:disabled:hover{border-color:var(--t-red-fg)}
.vmeet__ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.vmeet__ic--off{display:none}
.vmeet__ctl.is-off .vmeet__ic--on{display:none}
.vmeet__ctl.is-off .vmeet__ic--off{display:block}
.vmeet__ctlnum{font-size:var(--fs-meta)}
.vmeet__dot{position:absolute;top:var(--sp-1);right:var(--sp-1);width:var(--sp-2);height:var(--sp-2);
  border-radius:50%;background:var(--red)}
/* #2569 п.2 — «Жест»: <details>/<summary>, тот же приём без своего слоя позиционирования, что
   .pickadd у выбора «Задача/Встреча» (#1568). Меню — над кнопкой (панель управления внизу экрана). */
.vmeet__gest{padding:0}
.vmeet__gest>summary{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  list-style:none;cursor:pointer}
.vmeet__gest>summary::-webkit-details-marker{display:none}
.vmeet__gest>summary::marker{content:""}
.vmeet__gmenu{position:absolute;z-index:60;left:50%;bottom:calc(100% + var(--sp-2));
  transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);
  width:max-content;max-width:calc(100vw - 24px);border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.14)}
.vmeet__gitem{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border:0;
  border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:inherit;
  font-size:var(--fs-text);cursor:pointer;text-align:left;white-space:nowrap}
.vmeet__gitem:hover{background:var(--page)}
.vmeet__gitem--hand[aria-checked="true"]{color:var(--blue);background:var(--blue-wash)}
.vmeet__greacts{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.vmeet__greacts .vmeet__gitem{padding:var(--sp-2);font-size:20px;line-height:1}
/* #2885 — меню «Ещё» (⋯): кнопка в правой группе, меню раскрывается вверх и прижато к ПРАВОМУ краю кнопки (по центру, как у «Жеста», на телефоне оно уходило бы за правый край экрана).
   Пункты «Общая доска»/«Опросы» — не .vmeet__ctl, поэтому подсветка «открыто» и точка «новое» заведены отдельно. */
.vmeet__ic--dots circle{fill:currentColor;stroke:none}
.vmeet__moremenu{left:auto;right:0;transform:none}
.vmeet__gitem.is-on{color:var(--blue);background:var(--blue-wash)}
.vmeet__dot--item{position:static;flex:none;margin-left:auto}
/* #2760 — «Настройки»: выбор микрофона/камеры/динамика в комнате (то же меню-приём <details>). #2771 — кнопка-шестерёнка слева в нижней
   панели, меню раскрывается вверх от неё (на телефоне — на всю ширину панели, см. @media ниже). */
.vmeet__setmenu{left:0;transform:none;width:var(--vmeet-menu-w);gap:var(--sp-3)}
.vmeet__setmenu .field{margin:0}
.vmeet__setmenu select{width:100%}
/* МЕЕТ-6.7 (01-SPEC-MEET6.md) — «Фон»: то же меню-приём <details>/.vmeet__gmenu, что «Жест»
   (#2569 п.2) — «Без фона»/«Размытие» как обычные .vmeet__gitem, 3–4 готовые картинки —
   миниатюры в сетке, «Своя картинка» — тот же .vmeet__gitem, но с превью и file-input внутри. */
.vmeet__gitem[data-bg-choice][aria-checked="true"]{color:var(--blue);background:var(--blue-wash)}
.vmeet__bgmenu{width:220px}
.vmeet__bgswatches{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1)}
/* #2761 — подпись группы готовых фонов и строка «фон отключён: устройство не тянет» (role=status, ставит background.js) */
.vmeet__bglabel{margin:var(--sp-1) 0 0;font-size:var(--fs-meta);font-weight:600;color:var(--ink-3)}
.vmeet__bgnote{margin:0;max-width:100%;white-space:normal;font-size:var(--fs-label);line-height:1.4;color:var(--amber)}
.vmeet__bgnote[hidden]{display:none}
/* #2810 — скрытая строка диагностики фона (?bgdiag=1 / двойной щелчок по подписи группы): модель, делегат, уровень, острова, мс на кадр, откаты, ошибки WebGL */
.vmeet__bgdiag{margin:var(--sp-1) 0 0;padding:var(--sp-2);max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-meta);line-height:1.4;
  font-weight:400;color:var(--ink-2);background:var(--line-2);border-radius:var(--radius-sm)}
.vmeet__bgdiag[hidden]{display:none}
.vmeet__bgtoast{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.vmeet__bgtoast[hidden]{display:none}
.vmeet__bgswatch{position:relative;padding:0;border:2px solid transparent;border-radius:var(--radius-sm);
  overflow:hidden;cursor:pointer;background:var(--page);line-height:0}
.vmeet__bgswatch img{display:block;width:100%;height:44px;object-fit:cover}
.vmeet__bgswatch:hover{border-color:var(--line-strong)}
.vmeet__bgswatch[aria-checked="true"]{border-color:var(--blue)}
.vmeet__bgswatch:disabled,.vmeet__gitem:disabled{opacity:.45;cursor:not-allowed}
.vmeet__bgupload[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.vmeet__bgupload{cursor:pointer}
.vmeet__bgthumb{width:28px;height:28px;flex:none;border-radius:var(--radius-sm);object-fit:cover}
/* #2569 п.2 — короткая реакция всплывает на плитке отправителя и гаснет сама (JS её и убирает).
   МЕЕТ-6.6 (01-SPEC-MEET6.md, п.10 фактов 28.09 — «всплывать снизу-слева вверх и гаснуть, а не
   стоять на месте»): раньше поднималась из центра плитки, теперь — из нижнего левого угла, тем же
   таймингом (3.5 с, JS убирает узел тем же числом). */
.vmeet__reactpop{position:absolute;left:10%;bottom:8%;font-size:40px;
  line-height:1;pointer-events:none;animation:vmeetReact 3.5s ease-out forwards}
@keyframes vmeetReact{
  0%{opacity:0;transform:translateY(20%) scale(.6)}
  15%{opacity:1;transform:translateY(0) scale(1)}
  70%{opacity:1;transform:translateY(-70%) scale(1)}
  100%{opacity:0;transform:translateY(-110%) scale(1)}
}
/* МЕЕТ-3 — панель ожидающих гостей (templates/meet/room.html, static/js/meet/waiting.js). */
.vmeet__waiting{padding-top:var(--sp-2);border-top:1px solid var(--line-2)}
.vmeet__waiting h4{margin:0;font-size:var(--fs-text);font-weight:600}
.vmeet__modacts{padding-top:var(--sp-2);border-top:1px solid var(--line-2)}
/* №1159 (W1) — вебинар: блок «Спикеры» ведущего (W2 — и «Подняли руку»), строка «Зрителей · Спикеров · Рук» и метка роли у имени
   (templates/meet/room.html, guest_room.html; наполняет room.js). Только токены — ui-standard «BOS Meet: вебинар». */
.vmeet__speakers,.vmeet__hands{padding-top:var(--sp-2);border-top:1px solid var(--line-2)}
.vmeet__speakers h4,.vmeet__hands h4{margin:0;font-size:var(--fs-text);font-weight:600}
.vmeet__people-stats{margin:0}
/* №1159 (W2) — форма встречи: поле «Спикеры» видно, только пока отмечена галочка «Вебинар» (templates/tasks/_meeting_form_body.html) */
.field--check:has(input[name="webinar"]:not(:checked)) + .field--webinar-speakers{display:none}
.vmeet__role{flex:0 0 auto;padding:0 var(--sp-2);border-radius:var(--radius-pill);background:var(--t-blue-bg);
  color:var(--t-blue-fg);font-size:var(--fs-meta);font-weight:600}
/* #2731 — «Долго никто не говорит» (templates/meet/_idle_banner.html): тот же янтарный баннер и та же
   строка с кнопкой, что у «Ждёт впуска» ниже; текст и отсчёт рисует room.js. */
/* #2730 — «Ждёт впуска»: баннер поверх комнаты (templates/meet/room.html, static/js/meet/waiting.js).
   Тот же янтарный .vmeet__notice, что у баннера связи, плюс строка с кнопками; [hidden] перечислен
   явно — display:flex класса перебил бы атрибут. */
.vmeet__notice--wait,.vmeet__notice--idle{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.vmeet__notice--wait[hidden],.vmeet__notice--idle[hidden]{display:none}
.vmeet__noticetxt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-weight:600}
/* #2818 — просьба ведущего «включить микрофон» и тост «Ведущий выключил ваш микрофон» (templates/meet/_controls.html, static/js/meet/room.js): плашки ПОВЕРХ видео в левом верхнем
   углу комнаты (absolute) — нижняя панель не растёт, чип записи #2817 и подсказка «выключенный микрофон» #2777 лежат внизу и не перекрываются. Контейнер сам клики не ловит,
   ловят только плашки; [hidden] перечислен явно — display:flex класса перебил бы атрибут. Янтарные, как остальные плашки комнаты. */
.vmeet__asks{--vmeet-ask-w:480px;position:absolute;z-index:7;top:var(--sp-2);left:var(--sp-2);right:var(--sp-2);display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-2);pointer-events:none}
.vmeet__notice--ask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);box-sizing:border-box;max-width:min(100%,var(--vmeet-ask-w));pointer-events:auto;box-shadow:var(--shadow)}
.vmeet__notice--ask[hidden]{display:none}
.vmeet__muteall{align-self:flex-start}
.vmeet__muteall[hidden]{display:none}
/* #2821 — группы (комнаты для групп, зонтик #2780). Баннер участника и гостя (templates/meet/_rooms_banner.html, static/js/meet/breakout.js) и плашка «Написать всем группам» лежат в нижней плавающей стопке
   .vmeet__floats (#2778) поверх видео над панелью: панель не растёт, верхние баннеры комнаты и просьба ведущего #2818 не перекрываются. Спокойная синяя плашка (приглашение, «Группа N · осталось»); за минуту до конца — янтарная, на нуле и при сбое
   перехода — красная. Текст и кнопки в строку, на телефоне кнопки переносятся под текст. Панель ведущего (templates/meet/_rooms_panel.html) — обычная боковая панель
   .vmeet__side, на телефоне на весь экран. Отступы только --sp-*, единственное число (ширина поля «минуты/число групп») — переменная --vmeet-rooms-num. */
.vmeet__notice--rooms{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);box-sizing:border-box;background:var(--t-blue-bg);color:var(--t-blue-fg);box-shadow:var(--shadow)}
.vmeet__roomsay{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);box-sizing:border-box;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  font-size:var(--fs-text);background:var(--t-amber-bg);color:var(--t-amber-fg);box-shadow:var(--shadow)}
.vmeet__notice--rooms.is-warn{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.vmeet__notice--rooms.is-bad{background:var(--t-red-bg);color:var(--t-red-fg)}
.vmeet__roomsnote{flex:0 1 auto;font-size:var(--fs-meta);font-weight:450}
.vmeet__roomsstat{margin:0}
.vmeet__roomsform{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.vmeet__roomsform label{font-size:var(--fs-text);color:var(--ink)}
.vmeet__roomsnum{width:var(--vmeet-rooms-num)}
.vmeet__roomsnum--wide{width:var(--vmeet-rooms-wide)}
.vmeet__roomstext{flex:1 1 0;min-width:0;width:auto}
.vmeet__roomsdraft,.vmeet__roomsrun{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.vmeet__roomslist{display:flex;flex-direction:column;gap:var(--sp-2)}
.vmeet__roomsh{margin:0;font-size:var(--fs-text);font-weight:600;color:var(--ink)}
.vmeet__roomsgrp{padding-top:var(--sp-2);border-top:1px solid var(--line-2)}
.vmeet__roomshead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.vmeet__roomssel{width:auto;max-width:100%}
/* #2778 (круг 2) — подсказка «слабая связь»: в плавающей стопке .vmeet__floats поверх видео (не в потоке панели), вид как у подсказки про микрофон: янтарная плашка с тенью,
   текст и две кнопки в строку, на телефоне текст на всю ширину, кнопки под ним */
.vmeet__nethint{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0;max-width:100%;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  font-size:var(--fs-text);background:var(--t-amber-bg);color:var(--t-amber-fg);box-shadow:var(--shadow)}
.vmeet__nethint[hidden]{display:none}
/* #2778 → #2897 — режим «только звук»: у плиток собеседников, чью камеру держим МЫ (room.js::paintHold ставит .is-vhold), подпись «видео выключено вами» вместо прежней пометки
   «· без видео» в имени (она читалась как «у него нет камеры»). Одна строка сверху плитки, на узкой плитке обрезается многоточием (полный текст — в title). Своя плитка — камера передаётся как была. */
.vmeet__vnote{display:none;position:absolute;left:var(--sp-2);right:var(--sp-2);top:var(--sp-2);margin:0 auto;width:fit-content;max-width:calc(100% - var(--sp-4));
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-pill);background:var(--vmeet-tile-shade);color:var(--vmeet-tile-fg);
  font-size:var(--fs-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vmeet__tile.is-vhold .vmeet__vnote{display:block}
/* #2897 — плашка «Вернуть видео» в плавающей стопке .vmeet__floats: пока выбрано «Низкое» или «Только звук»; не гаснет сама. Синяя, как плашка «Идёт опрос» (янтарь занят подсказками про связь и микрофон). */
.vmeet__vmhint{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0;max-width:100%;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  font-size:var(--fs-text);background:var(--t-blue-bg);color:var(--t-blue-fg);box-shadow:var(--shadow)}
.vmeet__vmhint[hidden]{display:none}
.vmeet__vmhint .vmeet__noticetxt{font-weight:400}
/* #2732 — «Скопировать ссылку встречи»: одна кнопка вместо блока приглашения. Временное поле для запасного
   копирования (execCommand) уводим за экран, не display:none — иначе браузер не даст его выделить. */
.vmeet__copylink{align-self:flex-start}
/* #2771 — «Полный экран» (решение Юрия 02.10.2026). Контейнер — .vmeet__room: браузер, умеющий Fullscreen API (ПК, Android), открывает его на весь
   экран как F11 (псевдокласс :fullscreen, размер даёт сам браузер), iPhone Safari не умеет — тогда room.js ставит data-fs="page", и комната
   закрывает всю страницу (position:fixed; меню и шапка платформы остаются под ней). В режиме сверху ничего, кроме видео: нижняя панель лежит
   поверх видео и прячется через 3 с без движения (класс .is-idle, ставит room.js), «Идёт запись» остаётся маленькой точкой в углу. */
.vmeet__room.is-full{background:var(--page);padding:var(--sp-2);box-sizing:border-box}
.vmeet__room.is-full[data-fs="page"]{position:fixed;inset:0;z-index:90;height:100dvh}
.vmeet__room.is-full .vmeet__controls{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);z-index:5;
  transition:opacity var(--vmeet-fade),transform var(--vmeet-fade)}
.vmeet__room.is-full.is-idle .vmeet__controls{opacity:0;transform:translateY(calc(100% + var(--sp-3)));pointer-events:none}
.vmeet__room.is-full.is-idle{cursor:none}
.vmeet__recdot{display:none;position:absolute;z-index:6;top:var(--sp-3);left:var(--sp-3);width:var(--sp-3);height:var(--sp-3);
  border-radius:50%;background:var(--red)}
.vmeet__room.is-full.is-idle .vmeet__recdot{display:block}
/* #2788 — горит и при одной расшифровке (без «Запись»): цвет чипа «Идёт расшифровка» вместо красного. */
.vmeet__recdot--tr{background:var(--t-violet-fg)}
.vmeet__copytmp{position:fixed;top:0;left:-9999px;opacity:0}
/* Телефон (00-TASK.md §4.4): крупно говорящий, остальные — узкой полосой ниже; панели участников
   и чата — во весь экран поверх комнаты. */
@media (max-width:720px){
  /* #2958 — строки по содержимому (max-content): карточка входа высотой с экран прокручивается, а не сжимает строки сетки. Без этого предпросмотр
     (overflow:hidden, строка сетки ему тесна) налезал на блок под ним — в том числе на «Вас увидят как» и на «Кого позвать?». */
  .vmeet__join{grid-template-columns:1fr;grid-auto-rows:max-content}
  .vmeet__call{--vmeet-call-list-h:160px}
  .vmeet__grid{grid-template-columns:repeat(auto-fill,minmax(var(--vmeet-strip-tile),1fr))}
  .vmeet__tile{aspect-ratio:4/3}
  .vmeet__tile.is-main{grid-column:1/-1;order:-1;aspect-ratio:auto;height:min(48vh,420px)}
  .vmeet__tile:not(.is-main){--vmeet-ava:32px}
  .vmeet__tile:not(.is-main) .vmeet__ava{font-size:var(--fs-label)}
  .vmeet__tile:not(.is-main) .vmeet__q{display:none}
  .vmeet__side{position:fixed;left:0;right:0;bottom:0;top:var(--topbar-h);width:auto;max-height:none;
    z-index:60;border-radius:0}
  /* №1158 — превью картинки из чата на телефоне во всю ширину панели */
  [data-panel="chat"]{--vmeet-thumb-w:100%}
  /* #2569 п.4 — 375 px: значки в одну строку без горизонтальной прокрутки (экран показа на телефоне
     и так скрыт JS — isHandheld()). */
  .vmeet__controls{flex-wrap:wrap;justify-content:center;gap:var(--sp-1);padding:var(--sp-1)}
  .vmeet__ctl{min-width:38px;height:38px;padding:0 var(--sp-1)}
  .vmeet__ic{width:18px;height:18px}
  /* #2771 — на телефоне панель в две строки: сверху таймер, «Настройки», запись; ниже один ряд кнопок (микрофон … «Выйти»). Центральная и
     правая группы «растворяются» (display:contents), чтобы кнопки шли одним рядом и переносились только при нехватке ширины. */
  .vmeet__cg--left{order:-1;flex:1 1 100%;justify-content:space-between}
  .vmeet__cg--mid,.vmeet__cg--right{display:contents}
  /* Круг 2 (ОТК) — узкое окно ПК, где «Экран» видна (9 кнопок): базис кнопки — --sp-7, растут до 38 px; перенос считается по базису, а не по 38, поэтому
     все девять остаются одним рядом и «Выйти» не уезжает одна на вторую строку. Кнопка «Участники» с числом не сжимается ниже своего содержимого. */
  .vmeet__cg--mid > .vmeet__ctl,.vmeet__cg--right > .vmeet__ctl{flex:1 1 var(--sp-7);min-width:0;max-width:38px}
  .vmeet__cg--right > .vmeet__ctl[data-ctl="people"]{min-width:fit-content}
  /* #2760 — меню настроек шире кнопки: на телефоне тянем его на всю ширину панели (кнопка-родитель
     перестаёт быть опорой позиции, опорой становится сама панель, у неё position:relative). */
  .vmeet__ctl.vmeet__gest--wide{position:static}
  .vmeet__setmenu{left:0;right:0;width:auto;max-width:none}
  /* #2777 — на телефоне плашка «выключенный микрофон» на всю ширину панели, текст переносится, кнопки остаются справа.
     #2778 (круг 2) — то же у плашки «слабая связь»; обе встают каждая на свою строку стопки .vmeet__floats над чипом записи. */
  .vmeet__mutehint,.vmeet__nethint,.vmeet__vmhint{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end}
  .vmeet__mutehint .vmeet__noticetxt,.vmeet__nethint .vmeet__noticetxt,.vmeet__vmhint .vmeet__noticetxt{flex:1 1 100%}
  /* #2818 — на телефоне плашки просьбы выше открытой панели «Участники» (она на весь экран, z-index:60) и на всю ширину. */
  .vmeet__asks{z-index:61}
  .vmeet__notice--ask{width:100%}
  /* #2771 — показ экрана на телефоне: демонстрация сверху на всё свободное место, окошки участников — лентой снизу, листается вправо. */
  .vmeet__room.is-full .vmeet__side{top:0}
  .vmeet__grid.is-sharing{display:flex;flex-direction:column;gap:var(--sp-2);overflow:hidden}
  .vmeet__grid.is-sharing > .vmeet__tile--screen.is-main{flex:1 1 0;min-height:0;height:auto;aspect-ratio:auto}
  .vmeet__grid.is-sharing .vmeet__strip{display:flex;flex-direction:row;gap:var(--sp-2);flex:0 0 auto;min-width:0;
    overflow-x:auto;overflow-y:hidden}
  .vmeet__grid.is-sharing .vmeet__strip .vmeet__tile{flex:none;height:var(--vmeet-ribbon-h);aspect-ratio:4/3}
}

/* #2779 — общая доска и опросы во встрече (templates/meet/_live.html; static/js/meet/live.js, board.js, polls.js).
   Доска занимает место сетки видео внутри .vmeet__body: при .is-board окошки участников уходят в узкую колонку слева (как колонка показа экрана), на телефоне доска
   закрывает экран поверх страницы (как панели «Участники» и «Чат»). Лист всегда белый и в тёмной теме: цвет пера читается одинаково и совпадает с картинкой на Диске.
   Опросы — обычная боковая панель .vmeet__side. Плашка «Ведущий запустил опрос» — в плавающей стопке .vmeet__floats, панель не растёт. */
:root{--vmeet-board-paper:#ffffff;--vmeet-board-edge:#d9dee3;--vmeet-btool:36px;--vmeet-bsw:22px;
  --vmeet-pen-ink:#1d1d1f;--vmeet-pen-red:#e5484d;--vmeet-pen-blue:#2f6fed;--vmeet-pen-green:#2e9d5c;--vmeet-pen-orange:#f08c1b;--vmeet-pen-violet:#7c4dff}
.vmeet__board{flex:1 1 0;min-width:0;min-height:0;align-self:stretch;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2)}
.vmeet__board[hidden]{display:none}
.vmeet__boardbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
.vmeet__bgrp{display:flex;align-items:center;gap:var(--sp-1)}
.vmeet__bspace{flex:1 1 auto}
.vmeet__btool{display:inline-flex;align-items:center;justify-content:center;width:var(--vmeet-btool);height:var(--vmeet-btool);padding:0;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--canvas);color:var(--ink);cursor:pointer}
.vmeet__btool:hover{border-color:var(--blue)}
.vmeet__btool.is-on{background:var(--blue-wash);color:var(--blue);border-color:var(--blue)}
.vmeet__bsw{width:var(--vmeet-bsw);height:var(--vmeet-bsw);padding:0;border:2px solid var(--vmeet-board-paper);border-radius:50%;cursor:pointer;
  outline:1px solid var(--line-strong);background:var(--vmeet-pen-ink)}
.vmeet__bsw--ink{background:var(--vmeet-pen-ink)}
.vmeet__bsw--red{background:var(--vmeet-pen-red)}
.vmeet__bsw--blue{background:var(--vmeet-pen-blue)}
.vmeet__bsw--green{background:var(--vmeet-pen-green)}
.vmeet__bsw--orange{background:var(--vmeet-pen-orange)}
.vmeet__bsw--violet{background:var(--vmeet-pen-violet)}
.vmeet__bsw.is-on{outline:2px solid var(--blue)}
.vmeet__bsw:hover{outline-color:var(--blue)}
.vmeet__bsize{display:inline-flex;align-items:center;justify-content:center;width:var(--vmeet-btool);height:var(--vmeet-btool);padding:0;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--canvas);cursor:pointer}
.vmeet__bsize span{display:block;border-radius:50%;background:var(--ink)}
.vmeet__bsize--s span{width:var(--sp-1);height:var(--sp-1)}
.vmeet__bsize--m span{width:var(--sp-2);height:var(--sp-2)}
.vmeet__bsize--l span{width:var(--sp-3);height:var(--sp-3)}
.vmeet__bsize:hover{border-color:var(--blue)}
.vmeet__bsize.is-on{background:var(--blue-wash);border-color:var(--blue)}
.vmeet__boardstage{flex:1 1 0;min-height:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.vmeet__boardcanvas{display:block;width:var(--bw,100%);height:var(--bh,auto);background:var(--vmeet-board-paper);
  border:1px solid var(--vmeet-board-edge);border-radius:var(--radius-sm);touch-action:none;cursor:crosshair}
.vmeet__boardnote{margin:0}
@media (min-width:721px){
  /* --vmeet-hint-h: высота плашки «Идёт опрос» (polls.js), она встаёт поверх нижней кромки — оставляем ей место, подпись доски остаётся видна (на телефоне доска закрывает экран, там плашка выше подписи) */
  .vmeet__board{padding-bottom:calc(var(--sp-2) + var(--vmeet-hint-h,0px))}
  .vmeet__body.is-board .vmeet__grid{flex:0 0 var(--vmeet-share-col);display:flex;flex-direction:column;gap:var(--sp-2);overflow-y:auto}
  .vmeet__body.is-board .vmeet__grid .vmeet__tile{flex:none;aspect-ratio:16/9}
  .vmeet__body.is-board .vmeet__tile--screen.is-main,.vmeet__body.is-board .vmeet__sharetoggle{display:none}
}
.vmeet__pollform{display:flex;flex-direction:column;gap:var(--sp-2)}
.vmeet__pollopts{display:flex;flex-direction:column;gap:var(--sp-1)}
.vmeet__pollacts{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vmeet__polls{display:flex;flex-direction:column;gap:var(--sp-3)}
.vmeet__poll{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-sm)}
/* #2878 — открытый опрос выделен фоном, закрытый остаётся без фона; форма нового опроса стоит под списком */
.vmeet__poll:not(.is-closed){background:var(--panel-2)}
.vmeet__polls + .vmeet__pollform{margin-top:var(--sp-3)}
.vmeet__pollq{margin:0;font-size:var(--fs-text);font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.vmeet__popts{display:flex;flex-direction:column;gap:var(--sp-1)}
.vmeet__popt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);width:100%;min-height:var(--vmeet-btool);
  padding:var(--sp-1) var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--canvas);color:var(--ink);
  font:inherit;font-size:var(--fs-text);text-align:left;overflow:hidden}
.vmeet__popt--btn{cursor:pointer}
.vmeet__popt--btn:hover{border-color:var(--blue)}
.vmeet__popt.is-mine{border-color:var(--blue)}
.vmeet__pbar{position:absolute;left:0;top:0;bottom:0;width:var(--pct,0%);background:var(--blue-wash)}
.vmeet__ptxt{position:relative;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.vmeet__pnum{position:relative;flex:none;color:var(--ink-3)}
.vmeet__popt.is-mine .vmeet__ptxt{font-weight:600}
.vmeet__pfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.vmeet__pfoot .field__hint{margin:0}
.vmeet__pollhint{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0;max-width:100%;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  font-size:var(--fs-text);background:var(--t-blue-bg);color:var(--t-blue-fg);box-shadow:var(--shadow)}
.vmeet__pollhint[hidden]{display:none}
.vmeet__pollhint .vmeet__noticetxt{overflow-wrap:anywhere}
/* карточка встречи (Мессенджеры -> Видеовстречи): результат опроса захода */
.vmeet__respoll{margin-top:var(--sp-2)}
.vmeet__respq{margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:720px) {
  .vmeet__board{position:fixed;left:0;right:0;bottom:0;top:var(--topbar-h);z-index:60;border-radius:0}
  .vmeet__room.is-full .vmeet__board{top:0}
  .vmeet__pollhint{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end}
  .vmeet__pollhint .vmeet__noticetxt{flex:1 1 100%}
  /* две новые кнопки панели («Доска», «Опрос»): десять кнопок при базисе --sp-7 не помещались в одну строку на 375 px («Выйти» уезжала вниз, панель росла).
     Базис меньше (перенос считается по нему) — кнопки всё равно растут до max-width, а панель остаётся в две строки, как до #2779. */
  .vmeet__cg--mid > .vmeet__ctl,.vmeet__cg--right > .vmeet__ctl{flex-basis:var(--sp-6)}
}

/* #2838 — (1) плашка «микрофон/камера не включились» (room.js::devFail): в плавающей стопке .vmeet__floats поверх видео, как подсказка про микрофон, панель не растёт; текст
   длинный (причина и как разрешить на iPhone) — переносится. (2) «Фон» на телефоне (≤ 720 px, решение Юрия 05.10.2026): room.js переносит узел <details data-ctl="bg"> из нижней
   панели в гнездо .vmeet__bgslot меню «Настройки» и ставит ему .is-inmenu — здесь он выглядит строкой с подписью и раскрывается вниз, а не всплывающим окном; кнопок в панели на одну
   меньше, остальные шире. На ПК класса нет — вид прежний. Подпись «Фон» (.vmeet__gsumtxt) скрыта везде, кроме строки в меню. */
.vmeet__devfail{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0;max-width:min(100%,var(--vmeet-devfail-w));
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:var(--fs-text);background:var(--t-amber-bg);color:var(--t-amber-fg);box-shadow:var(--shadow)}
.vmeet__devfail[hidden]{display:none}
.vmeet__devfail .vmeet__noticetxt{font-weight:400}
.vmeet__gsumtxt{display:none}
.vmeet__bgslot{min-width:0}
.vmeet__ctl.is-inmenu{display:block;position:static;min-width:0;width:100%;height:auto;padding:0;border-radius:var(--radius-sm);background:var(--canvas)}
.vmeet__ctl.is-inmenu > summary{justify-content:flex-start;gap:var(--sp-2);height:auto;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-text)}
.vmeet__ctl.is-inmenu .vmeet__gsumtxt{display:inline}
.vmeet__ctl.is-inmenu > summary::after{content:"▾";margin-left:auto;color:var(--ink-3)}
.vmeet__ctl.is-inmenu[open] > summary::after{content:"▴"}
.vmeet__ctl.is-inmenu .vmeet__gmenu{position:static;transform:none;width:auto;max-width:none;padding:var(--sp-1) var(--sp-3) var(--sp-3);border:0;border-radius:0;
  background:transparent;box-shadow:none}
@media (max-width:720px) {
  .vmeet__devfail{flex:1 1 100%;max-width:100%;justify-content:flex-end}
  .vmeet__devfail .vmeet__noticetxt{flex:1 1 100%}
  /* меню «Настройки» с раскрытым «Фоном» выше свободного места над панелью — прокручивается внутри */
  .vmeet__setmenu{max-height:var(--vmeet-setmenu-h);overflow-y:auto}
}

/* МЕЕТ-4a — счётчик часов записи за месяц (templates/meet/settings.html), тот же вид числа, что
   у .cana__val/.mpan__val, своё имя — страница не разделяет компонент ни с одним из них. */
.mset__hours{font-size:22px;font-weight:600;margin:0;font-variant-numeric:tabular-nums}

/* #2580 А3 пачка 2 — crm/finance
   Убраны style= из templates/crm/** и templates/finance/** (задача #2580, часть А3). Правило: сперва
   переиспользовать то, что уже есть (u-*, .muted, .lc-inline, tnum, .dealp__* и т.п. — см. правки в
   самих шаблонах), новое — только здесь, с префиксом модуля. Оставлены инлайновыми ТОЛЬКО значения,
   которые реально держит запись (цвет этапа/статьи, ширина/цвет полосы плана, --stbar-c/--sc) — их
   не выразить классом; список — в 02-WORK-A3-p2.md. */

/* --- формы создания/правки: подпись блоком над полем, обёртка кнопки «Сохранить» --- */
.crm-dealform{max-width:640px}
.crm-field{display:block;margin-bottom:10px}
.crm-field--top{display:block;margin-top:10px}
.fin-field--plain{display:block}

/* --- узкие поля форм (ширина как была, значения не на шкале — фиксируем как есть) --- */
.crm-w80,.fin-w80{width:80px}
.crm-w120{width:120px}
.crm-w150{width:150px}
.crm-minw220{min-width:220px}
.crm-minw160{min-width:160px}
.crm-wauto{width:auto}
.crm-col44{width:44%}
.crm-flexend{justify-content:flex-end}
.fin-w70{width:70px}
.fin-w90{width:90px}
.fin-w130{width:130px}
.fin-between{justify-content:space-between}

/* --- .lc-inline: те же составные модификаторы, что уже даёт .u-g4 (static/css/app.css:3343) —
   переопределяем только то, что отличается от базовых gap:8px/margin-top:10px. --- */
.lc-inline.crm-g10{gap:10px}
.lc-inline.crm-stageform{gap:6px;margin:12px 0;flex-wrap:wrap}
.lc-inline.fin-g6{gap:6px}
.lc-inline.fin-mb14{margin-bottom:14px}
.crm-panelhead{margin-bottom:10px}

/* --- заголовки блоков (margin/размер, как были в style=) --- */
.crm-h-tight{margin:0 0 8px}
.crm-h-tight--lg{font-size:var(--fs-card)}
.crm-h-tight--sm{font-size:var(--fs-text)}
.crm-h-tight--top16{margin:16px 0 8px}

/* --- crm-fld: разделено на статику (класс) и то, что реально держит цвет этапа (остаётся в style=) --- */
.crm-fld__stagecolor{font-weight:600}
.crm-fld__amt{font-weight:700}
.crm-stages--tight{margin-bottom:10px}
.crm-panel__chatwrap{border-top:1px solid var(--line-2);margin-top:12px;padding-top:10px}

/* --- цветной маркер этапа/статьи (аналитика, скрипты по этапам): статика классом, сам цвет
   держит запись — background остаётся в style=, как уже сделано в crm/analytics.html (#894). --- */
.crm-dot{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle}
.crm-dupchip{color:var(--amber)}
.crm-stagechip{border-color:transparent}

/* --- честная форма Лидов (crm/intake.html): хани-пот от ботов и отступ тоста об ошибке --- */
.crm-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.crm-intake__err{margin-bottom:10px}
.crm-fs13{font-size:var(--fs-text)}

/* --- общее: подпись-абзац крупнее muted, отступ снизу перед списком; шаг margin-top у мелких
   подсказок под формой (13px/13.5px не на шкале --sp — уже были такими в style=). --- */
.crm-intro,.fin-intro{margin:0 0 14px;font-size:var(--fs-text)}
.crm-mt6,.fin-mt6{margin-top:6px}

/* --- finance: вложенная статья (articles.html/pnl_articles.html) и мелкие подсказки настроек.
   font-size:12.5px в style= было ИЗБЫТОЧНО — это и так значение по умолчанию у .muted
   (static/css/app.css:1452); оставлен только отступ, которого в .muted нет. --- */
.fin-row--sub{padding-left:18px}
.crm-m0010,.fin-m0010{margin:0 0 10px}
.fin-m8-0-10{margin:8px 0 10px}
.fin-m6-0{margin:6px 0}
.fin-ml8{margin-left:8px}
.fin-mt10{margin-top:10px}
.fin-mt14{margin-top:14px}
.fin-mt16{margin-top:var(--sp-4)}
.fin-warncard{border-color:var(--amber)}

/* #2580 А3 пачка 3 — шаблоны вне crm/finance и редактора без style=; 19 файлов «<style>» перенесены
   сюда (org/node.html содержал два блока). Общие атомарные утилиты продолжают семью u-mt4/u-mb16/…,
   остальное — точечные классы под конкретный шаблон (их имена совпадают с первым словом файла). */
.u-flex{display:flex}
.u-block{display:block}
.u-iflex{display:inline-flex}
.u-iblock{display:inline-block}
.u-hide{display:none}
.u-mt16{margin-top:16px}
.u-mt20{margin-top:20px}
.u-mb8{margin-bottom:8px}
.u-ml8{margin-left:8px}
.u-ml12{margin-left:12px}
.u-mla{margin-left:auto}
/* u-mt6/u-mt10/u-mt14/u-mt18, u-mb6/u-mb10/u-mb14, u-ml10 — НЕ заведены: SpacingUtilitiesStayOnTheScaleTests
   (apps/tasks/tests.py) держит утилиты `u-mt`, `u-mb`, `u-ml`, `u-mr`, `u-g` с числом строго на шкале 4/8/12/16/20/24/32,
   u-mt6/u-mt10/u-mt14/u-mb14 к тому же в списке RETIRED — их однажды уже свели в шкалу и обратно не
   возвращают. Значения вне шкалы из этих же шаблонов — точечными классами ниже, у каждого свой шаблон
   в имени, шкалу они не изображают и повторного отлова не будет. */
.u-pb8{padding-bottom:8px}
.u-p24{padding:var(--sp-6)}
.u-p2y{padding:2px 0}
/* «Обнулить, кроме низа» — для p/h*, у которых браузер сам ставит верхний/нижний отступ. */
.u-mzb6{margin:0 0 6px}
.u-mzb8{margin:0 0 8px}
.u-mzb10{margin:0 0 10px}
.u-mzb12{margin:0 0 12px}
.u-mzb14{margin:0 0 14px}
.u-mzb16{margin:0 0 16px}
.checklist__section-h{margin:10px 0 4px}
.u-mt26-b10{margin:26px 0 10px}
.u-mt26-b12{margin:26px 0 12px}
.u-fs10{font-size:10px}
.u-fs11{font-size:11px}
.u-fs13{font-size:var(--fs-text)}
.u-fs14{font-size:var(--fs-accent)}
.u-fs16{font-size:var(--fs-card)}
.u-fw600{font-weight:600}
.u-lh17{line-height:1.7}
.u-w34p{width:34%}
.u-w70{width:70px}
.u-w120{width:120px}
.u-w200{width:200px}
.u-w230{width:230px}
.u-w-auto{width:auto}
.u-minw200{min-width:200px}
.u-minw240{min-width:240px}
.u-maxw520{max-width:520px}
.u-maxw640{max-width:640px}
.u-maxw680{max-width:680px}
.u-maxw720{max-width:720px}
.u-gap6{gap:6px}
.u-gap10{gap:10px}
.u-ai-center{align-items:center}
.u-jc-between{justify-content:space-between}
.u-jc-center{justify-content:center}
.u-tc{text-align:center}
.u-oauto{overflow:auto}
.u-border-amber{border-color:var(--amber)}
.u-inherit-color{color:inherit}
.u-avatar64{width:64px;height:64px;border-radius:50%;object-fit:cover}
.u-empty-cell{padding:var(--sp-6);text-align:center;color:var(--ink-2)}

/* access_settings.html — было три голых <div style=…>/<h2 style=…>. */
.accset__mrow-sep{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.accset__namerow{margin-bottom:14px}
.accset__actrow{margin-top:14px}

/* hiring/candidate.html — карточка приглашения кандидата. */
.hire__field{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px}
.hire__note{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.hire__invite-link{margin-top:10px}
.hire__save-btn{margin-top:6px}

/* hiring/vacancy.html — публичные ссылки и поле источника. */
.vac__pub-link{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--page);font-size:12px}
.vac__pub-link--sm{width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--page);font-size:11px;margin-bottom:6px}
.vac__src-input{flex:1;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}

/* learning/course.html — описание курса поверх .rt-content.card. */
.course__desc{padding:var(--sp-4);margin-bottom:var(--sp-4)}

/* messengers/_dealpane.html — сноска только для чтения. */
.dealpane__note{padding:8px 12px;margin:0}

/* org/templates.html — заголовок, подсказка и «показаны все схемы» отраслевых схем. */
.org__tpl-hint{font-size:12px;margin:-6px 0 12px}
.org__tpl-note{margin-top:14px}

/* partials/agent_creds.html — подсказка под токеном подключения. */
.creds__hint{margin:2px 0 8px}

/* agents.html — шапка блока «Смены идут сейчас», сноска под ним и заголовок агентов без токена. */
.agents__hd{padding:14px 16px 0}
.agents__note{margin:6px 16px 12px}
.agents__orphanhd{margin-top:18px}

/* Отступы вне шкалы 4/8/12/16/20/24/32 (SpacingUtilitiesStayOnTheScaleTests не пускает их в
   общие u-mt, u-mb, u-ml с числом (см. комментарий у той же шкалы выше)) — точечные классы, у каждого
   свой шаблон/страница в имени, значение то же, что было в style=. */
/* auth/{login,password_reset,password_reset_confirm,signup_confirm,password_reset_complete}.html —
   один и тот же отступ формы/кнопки от текста над ней на публичных auth-страницах. */
.auth-lead-gap{margin-top:14px}
/* auth/register.html — тост «приглашение недействительно» над формой регистрации. */
.auth-toast--mb{margin-bottom:14px}
/* hiring/apply_landing.html и meet/guest_join.html — тот же публичный каркас (см. комментарий в
   guest_join.html), тот же тост об ошибке над формой отклика/входа гостя. */
.pub-toast--mb{margin-bottom:10px}
/* hiring/apply_demo.html — подзаголовок «Проверьте себя» перед тестом демо-урока. */
.apply-demo__quiz-h{margin-top:18px}
/* kb/article.html — блок «Вложения». */
.kb-article__attach{margin-top:14px}
/* kb/import.html и learning/import.html — идентичная сноска «как это работает / форматы». */
.import-note{font-size:var(--fs-text);margin-top:14px;line-height:1.7}
/* learning/lesson.html — формы добавления задания/вопроса и удаления задания. */
.lesson__task-del{margin-top:6px}
.lesson__addform{margin-top:14px}
.lesson__addq{margin-top:10px}
/* messengers/index.html и tasks/chats.html — одна и та же полоска вкладок «Чаты». */
.tabs--mb{margin-bottom:14px}
/* metrics/checklists.html — обёртка групп пунктов проверочного списка. */
.checklist__groups{margin-top:10px}
/* metrics/metric_form.html — поле второго показателя и подсказки под формулой/сводом. */
.metric-form__mt6{margin-top:6px}
/* metrics/wizard.html — кнопка «Создать показатели». */
.wizard__submit{margin-top:14px}
/* tasks/boards.html — блок управления досками и заголовок «Новая доска». */
.boards__mt18{margin-top:18px}
/* tasks/my_board.html — переключатель «Только активные» рядом с описанием доски. */
.myboard__filter-toggle{margin-left:10px}

/* ==== перенесённые блоки <style> (были в самих шаблонах) ==== */

/* было в templates/access_settings.html */
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.preset__matrix{display:flex;flex-direction:column;gap:6px}
.preset__mrow{display:flex;align-items:center;gap:10px;justify-content:space-between}
.preset__mlabel{font-size:13.5px}
.preset__mrow select{width:130px;flex:none}
.preset__default{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--ink-2)}
.preset__default input{width:auto}
.chip--soon{font-size:10px;color:var(--ink-3)}
/* .btn--danger сама по себе платформенная (:424, только color) — border-color тут добавляла
   ТОЛЬКО эта страница через свой <style>, до других мест с .btn--danger (crm/finance и т.д.)
   не доставало. Оставляю то же самое, но в явном виде — через .preset, а не переопределением
   класса на весь сайт, иначе кнопки «Удалить» посереди CRM/Финансов тоже обвелись бы в красное. */
.preset .btn--danger{border-color:var(--red)}

/* было в templates/agent_approvals.html */
.appr{margin-bottom:12px}
.appr__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.appr__action{font-weight:600}
.appr__subject{margin-top:2px;color:var(--ink-2,#3c3c46)}
.appr__meta{margin-top:6px;font-size:12px;color:var(--ink-3)}
.appr__details{margin:10px 0 0;padding-left:18px;font-size:13px}
.appr__preview{margin-top:10px;font-size:13px}
.appr__preview summary{cursor:pointer;color:var(--ink-3)}
.appr__preview pre{white-space:pre-wrap;margin:8px 0 0;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;max-height:320px;overflow:auto}
.appr__effect{margin:10px 0 0;font-size:13px;color:var(--ink-2,#3c3c46)}
.appr__form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:12px}
.appr__form input{padding:4px 7px;border:1px solid var(--line);border-radius:6px;font:inherit;min-width:200px}
.appr__decided{margin:10px 0 0;font-size:13px}
.appr--pending{color:var(--amber)}
.appr--approved{color:var(--green,#16a34a)}
.appr--rejected{color:var(--red,#dc2626)}
.appr__note{font-size:12px;margin-top:12px}

/* было в templates/agent_connect.html */
.acon__note{padding:16px 18px;margin-bottom:14px}
.acon__note p{margin:0 0 8px;font-size:13.5px}
.acon__note p:last-child{margin-bottom:0}
.acon__block{padding:16px 18px;margin-bottom:14px}
.acon__h{font-weight:600;margin-bottom:6px}
.acon__pre{background:var(--panel-2,#f6f7f9);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;overflow-x:auto;font-size:12.5px;line-height:1.5;margin:10px 0 0}
.acon__filter{gap:10px;margin:4px 0 12px}
.acon__lbl{font-size:12.5px}
.acon__tt{font-size:12px}
.acon__hint{font-size:12px;margin-top:10px}
.acon--appr{color:var(--amber)}
.acon--deny{color:var(--red,#dc2626)}

/* было в templates/agent_outbound.html */
.oeg__filter{gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap;align-items:center}
.oeg__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-4)}
.oeg__tile{padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:2px}
.oeg__tile b{font-size:var(--fs-page)}
.oeg__tile span{font-size:var(--fs-label);color:var(--ink-2)}
.oeg__tile--warn b{color:var(--red)}
.oeg__alert{padding:var(--sp-4);border-color:var(--amber);margin-bottom:var(--sp-4)}
.oeg__list{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:var(--sp-2) 0 0}
.oeg--bad td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.oeg--bad td{background:color-mix(in srgb,var(--red) 8%,transparent)}
.oeg--refused{background:var(--t-red-bg);color:var(--t-red-fg)}
.oeg--issue{background:var(--t-blue-bg);color:var(--t-blue-fg)}
.oeg__note{margin-top:var(--sp-3);max-width:900px}

/* было в templates/agent_oversight.html */
.ovs__filter{gap:12px;margin-bottom:14px}
.ovs__lbl{font-size:12.5px}
.ovs__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.ovs__tile{padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.ovs__tile b{font-size:24px}
.ovs__tile span{font-size:12px;color:var(--ink-2)}
.ovs__tile--link{text-decoration:none;color:inherit}
.ovs__tile--link:hover{border-color:var(--blue)}
.ovs__tile--warn b{color:var(--red)}
.ovs__alert{padding:16px 18px;border-color:var(--red,#dc2626);margin-bottom:16px}
.ovs__alert p{margin:6px 0 0;font-size:13.5px}
.ovs__ok{padding:12px 16px;margin-bottom:16px;font-size:13.5px;color:var(--ink-2)}
.ovs__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ovs__block{padding:16px 18px}
.ovs__h{font-weight:600;margin-bottom:10px}
.ovs__note{font-size:12px;margin-top:16px}
/* #2580 А3 пачка 3 — шаблон использовал общую .ecard__row (карточка сотрудника, #644): её
   правило в app.css совпадало с локальным <style> employee_card.html только частично — после
   переноса того блока сюда же класс задвоился бы с другим видом (см. ecard__h/__dl/__cell ниже,
   которые остаются переопределением только для employee_card.html). Даём этой странице свой
   класс с ТЕМИ ЖЕ значениями, что были у общей .ecard__row до переноса, — вид не меняется, но
   от чужого переопределения больше не зависит. */
.ovs__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;
  font-size:13.5px;min-width:0}
@media(max-width:800px){.ovs__cols{grid-template-columns:1fr}}

/* было в templates/agent_roles.html */
.arole__note{padding:16px 18px;margin-bottom:14px}
.arole__note p{margin:0 0 8px;font-size:13.5px}
.arole__note p:last-child{margin-bottom:0}
.arole{padding:16px 18px;margin-bottom:14px}
.arole__h{font-weight:600;font-size:16px}
.arole__d{margin:6px 0 4px;font-size:13.5px}
.arole__p{font-size:12.5px;margin:0}
.arole__more{margin-top:10px;font-size:13px}
.arole__more summary{cursor:pointer;color:var(--blue)}
.arole__pre{background:var(--panel-2,#f6f7f9);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;white-space:pre-wrap;font-size:12.5px;line-height:1.55;margin:10px 0}
.arole__tools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.arole--deny{color:var(--red,#dc2626)}
.arole--approve{color:var(--amber)}
.arole__sched{font-size:12px;margin:0}
.arole__form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.arole__form label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-2)}
.arole__form input{padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit}

/* было в templates/agent_runs.html */
.arun__filter{gap:14px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.arun__lbl{font-size:12.5px}
.arun__total{font-size:12.5px;margin-left:auto}
.arun--running{color:var(--t-blue-fg)}
.arun--error{color:var(--t-red-fg)}
.arun--stopped{color:var(--amber)}
.arun__note{font-size:12px;margin-top:12px}

/* было в templates/dictionaries.html */
.dict__add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 16px;margin:14px 0}
.dict__name{flex:1;min-width:220px}
.dict__marker{width:110px}
.dict__warn{color:var(--red,#dc2626)}

/* было в templates/employee_card.html */
.ava--xl{width:72px;height:72px;font-size:26px;border-radius:50%}
.ecard__h{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-bottom:12px}
.ecard__dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.ecard__dl dt{color:var(--ink-2)}
.ecard__dl dd{margin:0;text-align:right;word-break:break-word}
.ecard__row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13px}
.ecard__grid--t{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.ecard__cell{padding:20px 24px}
.ecard__cell--r{border-right:1px solid var(--line)}
.ecard__cell--t{border-top:1px solid var(--line)}
.ecard__overdue{color:var(--red,#dc2626)}
.ecard__plan{margin-bottom:12px}
.ecard__planhd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ecard__step{display:flex;gap:8px;align-items:baseline;padding:3px 0;font-size:13px}
.ecard__chk{border:none;background:none;cursor:pointer;padding:0;font-size:14px;color:var(--ink-3)}
.ecard__chk--on{color:var(--green,#16a34a)}
.ecard__done{text-decoration:line-through;color:var(--ink-3)}
.ecard__assign{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ecard__runmeta{display:flex;gap:8px;align-items:center;white-space:nowrap}
.apol__form{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.apol__row{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px}
.apol__row select{font-size:12.5px;padding:2px 4px}
.asus__form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.asus__form input{padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13px}
.asus__btns{display:flex;gap:8px;flex-wrap:wrap}
.abud__form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:10px;font-size:12.5px}
.abud__form label{display:flex;flex-direction:column;gap:3px;color:var(--ink-2)}
.abud__form input[type=text],.abud__form input[type=number]{width:92px;padding:4px 6px;border:1px solid var(--line);border-radius:6px}
.abud__chk{flex-direction:row!important;align-items:center;gap:5px!important}
.abud--warn{color:var(--amber)}
.abud--stopped,.abud--paused{color:var(--red,#dc2626)}
.apass{margin-top:10px;font-size:13px}
.apass summary{cursor:pointer;color:var(--blue)}
.apass__form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.apass__form label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-2)}
.apass__form input,.apass__form textarea{padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit}
.apass__hint{font-size:11.5px;margin:0}
@media(max-width:640px){.ecard__grid{grid-template-columns:1fr!important}.ecard__grid>div{border-right:none!important;border-top:1px solid var(--line)}}
/* #2725 — «Вызов по назначению» и журнал доставки в карточке цифрового сотрудника */
.adsp__form{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3)}
.adsp__form .field__hint{margin:0}
.adsp__chk{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-text)}
.adsp__field{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-label);color:var(--ink-2)}
.adsp__field input{box-sizing:border-box}
.adsp__field input::placeholder{color:var(--ink-3);opacity:1}
.adsp__chk input{accent-color:var(--blue)}
.adsp__btns{display:flex;gap:var(--sp-2)}
.adsp__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-2)}
.adsp__row{flex-wrap:wrap;align-items:flex-start;padding:var(--sp-2) 0;border-bottom:1px solid var(--line)}
.adsp__row:last-child{border-bottom:none}
.adsp__what{flex:1 1 12em;min-width:0}
.adsp__err{display:block;font-size:var(--fs-label)}
.adsp__st{white-space:normal}
.adsp__st--ok{background:var(--t-green-bg);color:var(--t-green-fg)}
.adsp__st--warn{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.adsp__st--bad{background:var(--t-red-bg);color:var(--t-red-fg)}
.adsp__st--wait{background:var(--t-blue-bg);color:var(--t-blue-fg)}

/* было в templates/model_prices.html */
.mp__note{padding:16px 18px;margin-bottom:14px}
.mp__note p{margin:0 0 8px;font-size:13.5px}
.mp__note p:last-child{margin-bottom:0}
.mp__warn{padding:14px 18px;margin-bottom:14px;border-color:var(--amber)}
.mp__warn p{margin:6px 0 0;font-size:13px}
.mp__form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:14px 18px;margin-bottom:14px}
.mp__form label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-2)}
.mp__form input{padding:5px 7px;border:1px solid var(--line);border-radius:6px;font:inherit;width:130px}
.mp__note-in input{width:200px}

/* было в templates/auth/two_factor.html */
.tfa__lead{font-size:var(--fs-text);color:var(--ink-2);margin:0 0 var(--sp-4)}
.tfa__go{width:100%}
.tfa__resend{margin-top:var(--sp-3)}
.tfa__backup{margin-top:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-3)}
.tfa__backup>summary{cursor:pointer;color:var(--ink-2);font-size:var(--fs-label)}
.tfa__backup .field__hint{margin:var(--sp-2) 0}
.tfa__lost{margin-top:var(--sp-4)}

/* было в templates/auth/two_factor_codes.html */
.tfc__lead{font-size:var(--fs-text);margin:0 0 var(--sp-4)}
.tfc__list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin:0 0 var(--sp-4);
  padding-left:var(--sp-5)}
.tfc__list code{font-size:var(--fs-accent);letter-spacing:.08em}
.tfc__go{width:100%;text-align:center;text-decoration:none}
@media(max-width:420px){.tfc__list{grid-template-columns:1fr}}

/* было в templates/hiring/adapt_templates.html */
.adt{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start;margin-top:6px}
.adt__form{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.adt__h{font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.adt__row{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
.adt__row select{margin-left:6px}
.adt__tpl{padding:16px 18px;margin-bottom:12px}
.adt__steps{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.adt__del{margin-left:auto}
.adt__hint{font-size:12px;margin:8px 0 0}
@media(max-width:900px){.adt{grid-template-columns:1fr}}

/* было в templates/learning/report.html */
.lc-miss{color:var(--red,#dc2626)}

/* было в templates/metrics/checks.html */
.qc{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start;margin-top:14px}
.qc__counters{padding:16px 18px;display:flex;gap:18px;justify-content:space-between}
.qc__cnt{display:flex;flex-direction:column;gap:2px}
.qc__cnt b{font-size:20px}
.qc__cnt span{font-size:12px}
.qc__form,.qc__block{padding:16px 18px;margin-top:14px}
.qc__block:first-child{margin-top:0}
.qc__h{font-weight:600;margin-bottom:10px}
.qc__sec{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin:10px 0 4px}
.qc__item{display:flex;gap:8px;align-items:flex-start;padding:4px 0;font-size:13.5px;cursor:pointer}
.qc__hint{font-size:12px;margin:4px 0 8px;word-break:break-all}
.qc__calib{padding:8px 0;border-bottom:1px solid var(--line-2)}
.qc__calib:last-child{border-bottom:none}
.qc__row{display:flex;justify-content:space-between;gap:10px;padding:2px 0 2px 14px;font-size:13px}
.qc__warn{color:var(--red,#dc2626)}
@media(max-width:900px){.qc{grid-template-columns:1fr}}

/* было в templates/tasks/home.html */
.thome{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;margin-top:14px}
.thome__col{padding:16px 18px}
.thome__h{font-weight:600;margin-bottom:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.thome__row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px;border-bottom:1px solid var(--line-2)}
.thome__row:last-of-type{border-bottom:none}
.thome__meta{display:flex;gap:8px;white-space:nowrap}
.thome__od{color:var(--red,#dc2626)}
@media(max-width:900px){.thome{grid-template-columns:1fr}}

/* было в templates/news.html */
.nws{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start;margin-top:6px}
.nws__compose{padding:12px 18px;margin-bottom:12px}
.nws__compose summary{cursor:pointer;font-weight:600}
.nws__form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.nws__item{padding:16px 18px;margin-bottom:12px}
.nws__t{font-weight:600;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.nws__meta{font-weight:400;font-size:12.5px;margin-left:auto}
.nws__body{margin-top:8px;line-height:1.55;contain:paint}
.nws__reacts{display:flex;gap:6px;margin-top:10px;align-items:center}
.nws__react{border:1px solid var(--line);background:none;border-radius:14px;padding:2px 10px;cursor:pointer;font-size:13px}
.nws__react--mine{border-color:var(--blue);background:var(--blue-wash)}
.nws__pin{font-size:13px;display:flex;gap:6px;align-items:center}
.nws__bar{position:relative;border:1px solid var(--line);border-radius:8px;margin-top:6px;overflow:hidden}
.nws__barfill{position:absolute;inset:0;width:0;background:var(--blue-wash)}
.nws__barlbl{position:relative;display:block;padding:5px 10px;font-size:13px}
.nws__bar--mine .nws__barlbl{font-weight:600}
.nws__voteform{display:flex;flex-direction:column;gap:6px;margin-top:8px;align-items:flex-start}
.nws__opt{display:flex;gap:8px;align-items:center;font-size:13.5px;cursor:pointer}
.nws__dates{padding:14px 18px;margin-bottom:12px}
.nws__h{font-weight:600;margin-bottom:8px}
.nws__drow{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:13px}
@media(max-width:900px){.nws{grid-template-columns:1fr}}

/* было в templates/profile.html */
.tfp{margin-top:var(--card-gap);padding:var(--sp-4)}
.tfp__row{margin:0 0 var(--sp-2);display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
  font-size:var(--fs-text)}
.tfp__acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
/* #2845 (D-10, ОТК круг 1) — поле «Текущий пароль» у резервных кодов живёт в строке действий, вне
   .form, и без этого правила рисовалось нативным. Вид — как у поля (§10а ui-standard: рамка
   --line-strong, радиус --radius-input, фон --canvas), размер — как у соседней .btn--sm (4px 10px, 12px),
   чтобы поле и кнопка стояли одной высоты. Форма с полем и кнопкой — в линию с зазором --sp-2. */
.tfp__acts form{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.tfp__acts input{border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:4px 10px;
  font:inherit;font-size:12px;background:var(--canvas);color:var(--ink);max-width:100%}
.tfp__acts input:focus{outline:none;border-color:var(--blue)}

/* было в templates/org/node.html (два блока <style>). У .ntab--active вес начертания был 500 —
   шкала платформы держит только 400/450/600/700 (FontWeightScaleTests, #924): 500 и 600 рисуются
   Segoe UI одинаково (Semibold), так что правка на 600 не меняет ни одного пикселя. */
.ntabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:0 10px}
.ntab{background:none;border:none;padding:12px 12px;font:inherit;font-size:13.5px;color:var(--ink-2);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ntab:hover{color:var(--ink)}
.ntab--active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.colorpick{display:flex;flex-wrap:wrap;gap:8px}
.colorpick__sw{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-strong);
  cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}
.colorpick__sw input{position:absolute;opacity:0}
.colorpick__sw--none{background:var(--canvas);color:var(--ink-3);font-size:13px}
.colorpick__sw:has(input:checked){outline:2px solid var(--ink);outline-offset:1px}
.node__pool{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line-2);font-size:13px}
.node__poolstate{color:var(--ink-2)}

/* #2580 А4 — CSP style-src без 'unsafe-inline': последний литеральный style="display:none" на
   платформе (templates/crm/products.html, кнопка #pf_cancel) снят на атрибут hidden. Простое
   [hidden]{display:none} браузера проигрывает .btn{display:inline-flex} (та же специфичность,
   .btn объявлен раньше по каскаду) — тот же приём, что уже стоит у .bulkbar[hidden]/.planpick[hidden]
   выше в этом файле, специфичность через id выше любого класса. */
#pf_cancel[hidden]{display:none}

/* duepick (#2899 СРОК-1) — единый выбор срока задачи: кнопка с датой на месте поля и плашка с календарём,
   «Временем» и списком шагом 30 минут (static/js/duepick.js, templates/tasks/_duepick.html).
   Кнопка выглядит как поле ввода (ui-standard §10а): рамка --line-strong, радиус --radius-input, высота
   как у соседних полей панели. Плашка живёт в <body> и ставится floatPop.open — координат здесь нет.
   Только токены; веса шрифта 400/450/600/700. */
.duepick{display:block;min-width:0}
.duepick__btn{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;text-align:left;
  border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:6px var(--sp-2);
  background:var(--canvas);color:var(--ink);font:inherit;font-size:var(--fs-text);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.duepick__btn:hover{border-color:var(--blue)}
.duepick__btn:focus-visible{outline:none;border-color:var(--blue)}
.duepick__btn--empty{color:var(--ink-3)}
.duepick__pop{z-index:80;display:flex;flex-direction:column;gap:var(--sp-2);box-sizing:border-box;
  width:280px;max-width:calc(100vw - 2 * var(--sp-4));padding:var(--sp-3);background:var(--panel);
  color:var(--ink);font-size:var(--fs-text);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.14);text-align:left;
  overflow-y:auto}  /* floatPop ограничивает высоту на низком окне — плашка тогда прокручивается */
.duepick__pop [hidden]{display:none}
.duepick__field{display:flex;flex-direction:column;gap:var(--sp-1)}
.duepick__date,.duepick__timeinput{width:100%;min-width:0;box-sizing:border-box;
  border:1px solid var(--line-strong);border-radius:var(--radius-input);padding:6px var(--sp-2);
  background:var(--canvas);color:var(--ink);font:inherit;font-size:var(--fs-text);
  font-variant-numeric:tabular-nums}
.duepick__date:focus,.duepick__timeinput:focus{outline:none;border-color:var(--blue)}
.duepick__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.duepick__month{font-weight:600;color:var(--ink)}
.duepick__nav{flex:none;width:28px;height:28px;padding:0;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--panel);color:var(--ink-2);font:inherit;
  font-size:var(--fs-accent);line-height:1;cursor:pointer}
.duepick__nav:hover{color:var(--ink);background:var(--blue-wash)}
.duepick__dow,.duepick__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.duepick__dow{text-align:center;color:var(--ink-3);font-size:var(--fs-meta)}
.duepick__day{height:32px;padding:0;border:0;border-radius:var(--radius-sm);background:none;
  color:var(--ink);font:inherit;font-size:var(--fs-text);font-variant-numeric:tabular-nums;cursor:pointer}
.duepick__day:hover{background:var(--blue-wash)}
.duepick__day.is-out{color:var(--ink-3)}
.duepick__day.is-today{color:var(--blue);font-weight:600;box-shadow:inset 0 0 0 1px var(--blue)}
.duepick__day.is-selected{background:var(--blue);color:var(--btn-primary-fg);font-weight:600}
.duepick__day:focus-visible,.duepick__opt:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.duepick__quick{display:flex;gap:var(--sp-3)}
.duepick__time{display:flex;flex-direction:column;gap:var(--sp-2)}
.duepick__timebody{display:flex;flex-direction:column;gap:var(--sp-1)}
.duepick__times{position:relative;max-height:200px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);
  border-radius:var(--radius-sm)}
.duepick__opt{display:block;width:100%;padding:var(--sp-1) var(--sp-2);border:0;background:none;
  text-align:left;color:var(--ink);font:inherit;font-size:var(--fs-text);
  font-variant-numeric:tabular-nums;cursor:pointer}
.duepick__opt:hover{background:var(--blue-wash)}
.duepick__opt.is-selected{background:var(--blue-wash);color:var(--blue);font-weight:600}
/* #2903 кр.2 — «Очистить»/«Готово» закреплены у нижнего края плашки: на низком окне (375×812 со «Временем»)
   прокручивается середина, а не кнопки. Отрицательные bottom/margin-bottom добирают padding плашки, чтобы под полосой не просвечивал список. */
.duepick__acts{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  position:sticky;bottom:calc(-1 * var(--sp-3));z-index:1;background:var(--panel);
  padding:var(--sp-2) 0 var(--sp-3);margin-bottom:calc(-1 * var(--sp-3))}
/* #2968 — в режиме slot «Очистить» скрыта: «Готово» остаётся у правого края, а не прыгает влево. */
.duepick__acts .btn{margin-left:auto}
/* #2968 — кнопка выбора дня и времени в форме «План» занимает всю ширину формы (форма — колонка flex). */
.planpick .duepick__btn{width:100%}
/* od-badge (#2899 СРОК-1) — «просрочено N дней»: красная пилюля рядом со сроком. Цвета — токены
   --t-red-bg/--t-red-fg, они уже есть в обеих темах. */
.od-badge{display:inline-block;flex:none;padding:1px var(--sp-2);border-radius:var(--radius-pill);
  background:var(--t-red-bg);color:var(--t-red-fg);font-size:var(--fs-meta);font-weight:600;
  line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums}
.od-badge[hidden]{display:none}
td .od-badge,.thome__meta .od-badge,.ecard__row .od-badge,.subtask .od-badge{margin-left:var(--sp-2)}
/* Ячейка срока в списке: ширина столбца фиксирована (160), и таблица обрезает всё, что не влезло, —
   плашка «N дней» пропала бы под многоточием. Здесь ячейка переносит плашку на вторую строку. */
[data-resizable] td.tdue{overflow:visible;text-overflow:clip;white-space:normal}
td.tdue>span:first-child{white-space:nowrap}
td.tdue .od-badge{display:block;width:fit-content;margin:var(--sp-1) 0 0}

/* ── №1178 W3 — страница ИИ-опроса для человека /i/<токен>/ (templates/interviews/public/base.html,
   static/js/interviews/chat.js). Только токены, веса 400/450/600/700. Поле ввода прилипает к низу окна
   (sticky + safe-area), на 375 px без горизонтальной прокрутки, цель — в одну строку с многоточием. ── */
:root{--iv-w:720px;--iv-code-w:180px;--iv-msg-w:85%;--iv-msg-w-phone:92%;--iv-ring:20px;--iv-hit:32px;
  --iv-logo-h:32px;--iv-logo-w:160px;
  /* №1248, решение ведущего: логотип ВСЕГДА на светлой плашке — в обеих темах (тёмный логотип на прозрачном фоне
     сливался с ночной --panel). Значения дневных --panel / --line-strong; в тёмной теме не переопределяются. */
  --iv-logo-bg:#ffffff;--iv-logo-line:#dce0e8;--iv-mic:40px}
.iv-body{margin:0;min-height:100vh;background:var(--page);color:var(--ink);font-size:var(--fs-text)}
.iv{max-width:var(--iv-w);margin:0 auto;padding:var(--sp-6) var(--sp-4) 0;box-sizing:border-box}
.iv [hidden]{display:none}
.iv-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-6)}
.iv-card--center{text-align:center}
/* №1248 — полоса бренда: логотип компании сессии справа сверху, без логотипа — название. На экране кода нет. */
.iv-brand{display:flex;justify-content:flex-end;margin-bottom:var(--sp-3)}
.iv-brand__logo{display:block;max-height:var(--iv-logo-h);max-width:var(--iv-logo-w);object-fit:contain;
  background:var(--iv-logo-bg);border:1px solid var(--iv-logo-line);border-radius:var(--radius-sm);padding:var(--sp-1)}
.iv-brand__name{font-size:var(--fs-label);font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:60%}
.iv-card--center .iv-wide{align-self:center}
.iv-title{font-size:var(--fs-page);font-weight:600;margin:0 0 var(--sp-3);overflow-wrap:anywhere}
.iv-text{font-size:var(--fs-accent);line-height:1.5;margin:0 0 var(--sp-4);color:var(--ink-2)}
.iv-form{display:flex;flex-direction:column;gap:var(--sp-3)}
.iv-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.iv-field__label{font-size:var(--fs-label);color:var(--ink-3)}
.iv-code,.iv-input{font:inherit;border:1px solid var(--line-strong);border-radius:var(--radius-input);background:var(--canvas);color:var(--ink)}
.iv-code:focus,.iv-input:focus{border-color:var(--blue);outline:none}
.iv-code{max-width:var(--iv-code-w);font-size:var(--fs-page);letter-spacing:.2em;padding:var(--sp-2) var(--sp-3)}
.iv-wide{justify-content:center;align-self:flex-start}
.iv-error{margin:0;color:var(--red);font-size:var(--fs-label)}
.iv-error:empty{display:none}
.iv-check{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-accent);line-height:1.5;margin:0 0 var(--sp-4);cursor:pointer}
.iv-check input{margin-top:var(--sp-1);flex:none}
.iv-wide:disabled,.iv-send:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.iv-chat{display:flex;flex-direction:column;gap:var(--sp-3);min-height:calc(100vh - var(--sp-6))}
.iv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.iv-head__text{min-width:0;flex:1}
.iv-head__title{font-size:var(--fs-card);font-weight:600;margin:0;overflow-wrap:anywhere}
.iv-head__sub{margin:var(--sp-1) 0 0;font-size:var(--fs-label);color:var(--ink-3)}
.iv-head__goal{margin:var(--sp-1) 0 0;font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.iv-stub{margin:0;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);background:var(--t-amber-bg);
  color:var(--t-amber-fg);font-size:var(--fs-label)}
.iv-earlier{align-self:center}
.iv-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.iv-msg{max-width:var(--iv-msg-w);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel);overflow-wrap:anywhere;box-sizing:border-box}
.iv-msg--user{align-self:flex-end;background:var(--blue-wash);border-color:var(--blue-wash)}
.iv-msg--ai{align-self:flex-start}
.iv-msg--note{align-self:center;max-width:100%;background:var(--panel-2);color:var(--ink-3);font-size:var(--fs-label);
  text-align:center}
.iv-msg__who{display:block;font-size:var(--fs-meta);color:var(--ink-3);margin-bottom:var(--sp-1)}
.iv-msg__text{margin:0;white-space:pre-wrap;font-size:var(--fs-accent);line-height:1.5}
/* №1248 — реплика ИИ из дерева `blocks` (apps/interviews/markup.py): абзацы, жирный, списки; без pre-wrap. */
.iv-msg__body{font-size:var(--fs-accent);line-height:1.5}
.iv-msg__body p,.iv-msg__body ul,.iv-msg__body ol{margin:0 0 var(--sp-2)}
.iv-msg__body>:last-child{margin-bottom:0}
.iv-msg__body ul,.iv-msg__body ol{padding-left:var(--sp-5)}
.iv-msg__body li+li{margin-top:var(--sp-1)}
.iv-msg__body strong{font-weight:600}
.iv-msg__error{margin:0 0 var(--sp-2);color:var(--red)}
.iv-typing{margin:0;color:var(--ink-3);font-style:italic}
.iv-saved,.iv-unsaved,.iv-notice{margin:var(--sp-2) 0 0;padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);
  font-size:var(--fs-label)}
.iv-saved{background:var(--t-green-bg);color:var(--t-green-fg)}
.iv-unsaved{background:var(--t-red-bg);color:var(--t-red-fg)}
.iv-notice{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.iv-composer{position:sticky;bottom:0;background:var(--page);border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom))}
.iv-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.iv-chip{font:inherit;font-size:var(--fs-label);max-width:100%;text-align:left;padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--canvas);color:var(--ink);
  cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-chip:hover{border-color:var(--blue);color:var(--blue)}
.iv-meter{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-label);color:var(--ink-2)}
.iv-meter__done{white-space:nowrap}
.iv-meter__bar{flex:1;min-width:0;height:var(--sp-2);accent-color:var(--blue)}
.iv-row{display:flex;gap:var(--sp-2);align-items:flex-end}
.iv-input{flex:1;min-width:0;resize:none;font-size:var(--fs-accent);line-height:1.5;padding:var(--sp-2) var(--sp-3);
  box-sizing:border-box}
.iv-send{flex:none}
/* №1248 И-2 — микрофон в строке ввода перед «Отправить»; во время записи красный, пока распознаётся — неактивен.
   Строка .iv-voice под строкой ввода: время записи и «Запись не сохраняется — в поле попадёт только текст». */
.iv-mic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--iv-mic);
  height:var(--iv-mic);padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-input);
  background:var(--canvas);color:var(--ink-2);cursor:pointer}
.iv-mic svg{width:var(--sp-5);height:var(--sp-5)}
.iv-mic:hover{color:var(--blue);border-color:var(--blue)}
.iv-mic--rec,.iv-mic--rec:hover{color:var(--red);border-color:var(--red)}
.iv-mic:disabled{opacity:.5;cursor:not-allowed}
.iv-voice{margin:0;font-size:var(--fs-label);color:var(--ink-3)}
.iv-under{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);font-size:var(--fs-meta);
  color:var(--ink-3)}
/* №1248 — кольцо лимита сообщений справа в строке счётчика знаков (образец — .aipanel__ring). Остаток убывает;
   заполнение — атрибутом SVG stroke-dasharray, не стилем. По нажатию — строка .iv-limitline под полем. */
.iv-under .iv-count{margin-left:auto}
.iv-ring{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--iv-hit);
  height:var(--iv-hit);padding:0;border:0;border-radius:var(--radius-pill);background:none;cursor:pointer}
.iv-ring svg{width:var(--iv-ring);height:var(--iv-ring)}
.iv-ring__bg{stroke:var(--line)}
.iv-ring__fg{stroke:var(--blue);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.iv-ring--warn .iv-ring__fg{stroke:var(--amber)}
.iv-ring--low .iv-ring__fg{stroke:var(--red)}
.iv-limitline{margin:0;font-size:var(--fs-label);color:var(--ink-2)}
.iv-hint--warn,.iv-count--over{color:var(--red)}
.iv-thanks{margin:0;padding:var(--sp-3);border-radius:var(--radius-sm);background:var(--t-green-bg);
  color:var(--t-green-fg);font-weight:600;text-align:center}
.iv-withdraw{margin:0;text-align:center}
.iv-linkbtn{font:inherit;font-size:var(--fs-label);background:none;border:0;padding:0;color:var(--ink-3);
  text-decoration:underline;cursor:pointer}
.iv-linkbtn:hover{color:var(--red)}
@media (max-width:600px){
  .iv{padding:var(--sp-3) var(--sp-3) 0}
  .iv-card{padding:var(--sp-4)}
  .iv-msg{max-width:var(--iv-msg-w-phone)}
  /* подсказки на телефоне переносятся в две строки, а не режутся многоточием в одну */
  .iv-chip{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .iv-under .iv-hint{display:none}
  .iv-under .iv-hint.iv-hint--warn{display:inline}
}