/* 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:#f6f7f9; --panel:#ffffff; --panel-2:#fafafa;
--line:#e5e5e5; --line-2:#eef0f2; --line-strong:#d4d4d4;
--ink:#171717; --ink-2:#525252; --ink-3:#737373; --silver:#a3a3a3;
--blue:#2563eb; --sapphire:#1e40af; --blue-wash:#dbeaff;
/* #772 — текст на основной кнопке отдельной переменной: в тёмной теме её фон
ЯРКИЙ (--blue светлеет, чтобы ссылки читались на тёмном), и белый текст давал
3.22:1 при норме 4.5 — а на наведении 1.84:1. Затемнять сам --blue нельзя:
он же служит цветом ссылок на тёмном фоне и упал бы до 3.94:1. */
--btn-primary-fg:#ffffff;
--green:#16a34a; --amber:#b45309; --red:#dc2626;
/* семантические тинты (чипы/бейджи) — day */
--t-blue-bg:#dbeaff; --t-blue-fg:#1e40af;
--t-green-bg:#dcfce7; --t-green-fg:#166534;
--t-amber-bg:#fff7ed; --t-amber-fg:#9a3412;
--t-red-bg:#fef2f2; --t-red-fg:#b91c1c;
--t-slate-bg:#f1f5f9; --t-slate-fg:#475569;
--t-violet-bg:#f5f3ff; --t-violet-fg:#6d28d9;
--t-zinc-bg:#e4e4e7; --t-zinc-fg:#52525b;
/* #585 — выбор Юрия 18.08: платформенный вариант «Плотный». Раньше здесь стояли числа
«Спокойного» (radius 14/8, отступ карточки sp-5): на экран влезало меньше строк, а
платформа живёт таблицами и списками. Варианты на /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:rgba(0,0,0,.05) 0 1px 2px 0;
--topbar-h:56px;
/* #585 — шкала отступов (4-кратная): единственный источник значений для padding/gap/margin.
Раньше отступы писали числами по месту, из-за этого блоки разъезжались. */
/* #926 — цвет плашки стадии на канбане. Держим в корне: в тёмной теме текст на плашке
ТЁМНЫЙ, и глубокий цвет там читается хуже — значения ниже заменяются светлыми.
Подобраны замером контраста, а не на глаз. */
/* #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:#dbeafe; --o10-fg:#1d4ed8;
--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:#0f141b; --page:#0b0e13; --panel:#151b23; --panel-2:#1a212b;
--line:#232b36; --line-2:#1b222c; --line-strong:#2f3947;
/* Ночью пастель обратная: тёмный тон фона, светлая буква — иначе десять светлых квадратиков
светились бы на тёмной доске ярче карточек. */
--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:#16264a; --o10-fg:#93c5fd;
/* #585 — ночная тема: --ink-3 был #6b7683 и давал контраст 3.75 на панели (норма 4.5):
подписи полей, подсказки и ячейки таблиц читались плохо. Теперь 5.48. */
--ink:#e6edf3; --ink-2:#9aa5b1; --ink-3:#8792a0; --silver:#5b6673;
--blue:#4f8cff; --sapphire:#9dc0ff; --blue-wash:#17263f;
--btn-primary-fg:#0f141b; /* #772 — 5.75:1 на кнопке, 10.05:1 на наведении */
--green:#3fb950; --amber:#d9a441; --red:#f85149;
--t-blue-bg:#17263f; --t-blue-fg:#9dc0ff;
--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:#1e2732; --t-slate-fg:#aab4c0;
--t-violet-bg:#241a3a; --t-violet-fg:#c4b5fd;
--t-zinc-bg:#26292e; --t-zinc-fg:#a1a1aa;
--shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
font-feature-settings:"cv02","cv03","cv04","cv11"}
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(--panel);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(--sapphire);font-weight:600}
.navlink__icon{display:grid;place-items:center;width:17px;height:17px;flex:none;opacity:.85}
.navlink--active .navlink__icon{opacity:1}
/* #1155 — на наведении значок подсвечивается тем же ярким синим, что и у активного пункта;
остальной вид (фон, насыщенность подписи) не трогаем, чтобы hover не слипался с «я тут» */
.navlink:hover .navlink__icon{color:var(--sapphire);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}
.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)}
.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}
.topbar{display:flex;align-items:center;gap:16px;min-height:var(--topbar-h);padding:12px 24px;
background:var(--canvas);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.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;align-items:center;gap:10px;flex:none}
.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}
/* ---- Кнопки ---- */
.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}
.btn:hover{background:var(--page);border-color:var(--ink-3)}
.btn--primary{background:var(--blue);border-color:var(--blue);color:var(--btn-primary-fg)}
.btn--primary:hover{background:var(--sapphire);border-color:var(--sapphire)}
.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}
/* #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:.05em;color:var(--ink-3);
font-weight:450;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);
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{width:100%;overflow:hidden}
.mchart svg{display:block;width:100%;height:auto}
.mchart--empty{padding:14px 0;font-size:12.5px}
.mchart__grid{stroke:var(--line-2);stroke-width:1}
.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:11px;font-variant-numeric:tabular-nums}
.mchart__seg{stroke-width:2.2;fill:none;stroke-linecap:round}
.mchart__seg.is-good{stroke:var(--green)}
.mchart__seg.is-bad{stroke:var(--red)}
.mchart__seg.is-flat{stroke:var(--silver)}
.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{stroke:var(--blue);stroke-width:1.2;stroke-dasharray:2 3;opacity:.8}
.mchart__planlab{fill:var(--blue);font-size:10.5px}
.mchart__dot{fill:var(--canvas);stroke:var(--ink-2);stroke-width:1.4}
.mchart__dot--last{fill:var(--ink);stroke:var(--canvas);stroke-width:2}
.mchart__val{fill:var(--ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:560px){.mchart__xlab{font-size:10px}}
/* #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}
.form label{font-weight:450;font-size:13px}
.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}
.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:6px;align-items:center}
.crmlinks__chip{display:inline-flex;align-items:center;gap:6px}
.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)}
/* #917 п.6 / #923 — ОДИН выбор сущности на платформе: строка, по нажатию — плашка со списком.
Было: строка поиска НАД раскрытым списком (два способа выбора рядом, у соисполнителей ещё и
полоса прокрутки в карточке). Стало: строка показывает выбранных кружком-аватаром, список
приезжает плашкой. Плашка живёт в (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}
.invite-link{width:200px;max-width:38vw;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:6px 12px;border-radius:7px;font-size:13px;font-weight:450;color:var(--ink-2)}
button.tab{background:none;border:0;cursor:pointer;font:inherit}
.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}
.filterbar 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}
/* #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:14px;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:6px}
/* #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}
.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:10px;
padding:10px 11px;cursor:grab;box-shadow:var(--shadow)}
.tcard:hover{border-color:var(--line-strong)}
.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)}
.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 на название оставалось узкое поле. Теперь два блока —
название во всю ширину и узкий блок очерёдности справа, у каждого своя подпись. */
.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:5px}
.titlerow__side{flex:0 0 auto;display:flex;flex-direction:column;gap:5px}
.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)}
/* Плашка выбора — «список квадратиком, как на канбане»: «любая» строкой сверху, дальше сетка по
четыре в ряд, как на приложенном образце. Живёт в (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)}
.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);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:11px 14px;color:var(--ink-3);font-weight:450;font-size:11px;
text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
.table td{padding:11px 14px;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 РОВНО суммой — это и фиксирует размер, без стороннего правила здесь. */
[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}
[data-resizable] th[data-resize-key]{position:relative}
.colresize__handle{position:absolute;top:0;right:0;bottom:0;width:6px;cursor:col-resize;z-index:2}
.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}
}
@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}
.task-nest__form select{border:1px solid var(--line-strong);border-radius:var(--radius-input);
padding:6px 9px;font:inherit;background:var(--canvas);color:var(--ink);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}
.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 (инлайн-