/* СМ Планер — стили разделов. Ядро (токены, каркас, формы, таблицы) — в base.css. */

/* роли в областях (ADR-0004) */
.badge.role-head { background: var(--violet-bg); color: var(--violet); }
.badge.role-head .dot { background: var(--violet-dot); opacity: 1; }
.badge.role-manager { background: var(--info-bg); color: var(--info); }
.badge.role-manager .dot { background: var(--info-dot); opacity: 1; }
.badge.role-specialist { background: var(--unknown-bg); color: var(--unknown); }
.badge.role-specialist .dot { background: var(--unknown-dot); opacity: 1; }

/* категории статусов (ADR-0002): new / in_progress / paused / done */
.badge.cat-new { background: var(--unknown-bg); color: var(--unknown); }
.badge.cat-new .dot { background: var(--unknown-dot); opacity: 1; }
.badge.cat-in_progress { background: var(--accent-soft); color: var(--accent); }
.badge.cat-in_progress .dot { background: var(--accent); opacity: 1; }
.badge.cat-paused { background: var(--warn-bg); color: var(--warn); }
.badge.cat-paused .dot { background: var(--warn-dot); opacity: 1; }
.badge.cat-done { background: var(--ok-bg); color: var(--ok); }
.badge.cat-done .dot { background: var(--ok-dot); opacity: 1; }

/* форма выдачи роли: поля в ряд */
.grant-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.grant-form p { margin: 0; min-width: 180px; flex: 1; }
.grant-form select { width: 100%; }
.grant-form .grant-submit { flex: none; min-width: 0; }

/* ── Задачи: приоритеты — чипы с иконкой ─────────────── */
/* приоритет — иконка и текст, без пилюли (пилюля с фоном — только у статуса) */
.prio-chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13.5px; white-space: nowrap; color: var(--ink); }
.prio-chip svg { flex: none; }
.prio-chip.p-blocker { color: var(--crit); }
.prio-chip.p-critical { color: var(--warn); }
.prio-chip.p-low { color: var(--info); }
.prio-chip.p-trivial { color: var(--unknown); }
/* выпадающий список с иконками (data-dd) */
.dd { position: relative; min-width: 0; }
/* кнопки-поля (выпадашка, даты): снимаем системный вид button, рисуем как поле ввода */
.dd-btn, .dates-btn { appearance: none; -webkit-appearance: none; background: var(--card-solid); color: var(--ink); border: 1px solid var(--border-strong);
  border-radius: 12px; font: inherit; font-size: 14px; padding: 8px 13px; min-height: var(--ctl-h); line-height: 1.3; transition: border-color .15s, box-shadow .15s; }
.dd-btn:hover, .dates-btn:hover { border-color: rgba(var(--ink-rgb), .3); }
.dd-btn:focus-visible, .dates-btn:focus-visible, .dd[aria-expanded="true"] .dd-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .14); }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.dd-value { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; min-width: 0; }
.dd-caret { color: var(--faint); flex: none; }
.dd-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 120; min-width: 100%; margin: 0; padding: 5px; list-style: none;
  background: var(--card-solid); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); }
.dd-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.dd-group { padding: 8px 10px 3px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.dd-item:hover, .dd-item.focus { background: var(--hover-solid); }
.dd-item.active { background: var(--accent-soft); color: var(--accent); }
.dd-item svg { flex: none; }
/* аватары, теги, значения с иконкой */
.av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; font-size: 11px; flex: none; object-fit: cover; }
.av-stack { display: inline-flex; } .av-stack .av { margin-left: -6px; border: 2px solid var(--paper); } .av-stack .av:first-child { margin-left: 0; }
.val-ico { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } .val-ico > svg { color: var(--muted); flex: none; }
.val-ico.overdue { color: var(--crit); font-weight: 600; }
/* даты: сам диапазон не рвётся, «через N дн.» целиком уходит на вторую строку, если не влезает */
.dates-val { flex-wrap: wrap; row-gap: 0; }
.dates-main { white-space: nowrap; }
.dates-rel { white-space: nowrap; font-size: 12.5px; }
.dates-rel::before { content: "· "; }
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
/* теги — один нейтральный цвет (2026-10-15): цвет по названию был случайным, а глаз искал в нём смысл */
.tag { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(var(--ink-rgb), .07); color: var(--ink); }
/* редактируемое значение: спокойное, по наведению — фон и карандаш; клик открывает поле */
.ed { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; margin: -3px -6px; border-radius: 8px; cursor: pointer; transition: background .15s; max-width: 100%; min-width: 0; }
.ed .ed-pen { opacity: 0; color: var(--faint); transition: opacity .15s; flex: none; }
.ed:hover, .ed:focus-visible { background: rgba(var(--accent-rgb), .08); outline: none; } .ed:hover .ed-pen, .ed:focus-visible .ed-pen { opacity: 1; }
/* крестик «очистить» рядом с карандашом: появляется вместе с ним; на тач-экранах наведения нет — виден всегда */
.ed-clear { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: -2px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity .15s, color .15s, background .15s; }
.ed:hover .ed-clear, .ed:focus-within .ed-clear { opacity: 1; }
.ed-clear:hover, .ed-clear:focus-visible { color: var(--crit); background: rgba(var(--ink-rgb), .07); outline: none; }
@media (hover: none) { .ed-clear { opacity: 1; } }
/* панель свойств без фона */
.side-plain { padding: 8px 4px 0; }
.plist { display: flex; flex-direction: column; gap: 11px; }
.prow { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13.5px; min-height: 28px; }
/* поля в панели не выше строки: вид и редактор занимают одинаковую высоту */
.task-props .prop-select, .task-props .prop-input, .task-props .dd-btn, .task-props .dates-btn { min-height: 28px; height: 28px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; border-radius: 8px; }
.task-props .with-me .btn.small { min-height: 28px; }
.task-props .ed { min-height: 28px; box-sizing: border-box; }
.dates-text.muted { color: var(--muted); }
.prow.sub { font-size: 12.5px; min-height: 20px; } .plabel { color: var(--muted); font-size: 12.5px; } .plain { color: var(--ink); }
.prow form.inline, .prow [data-ed-form] { min-width: 0; }
.watch-edit { display: flex; flex-direction: column; gap: 6px; }
/* подзадачи и связи */
.sub-dot.cat-in_progress { background: var(--accent); } .sub-dot.cat-done { background: var(--ok-dot); } .sub-dot.cat-paused { background: var(--warn-dot); }
.progress { width: 140px; height: 6px; border-radius: 999px; background: rgba(var(--ink-rgb), .08); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--ok-dot); transition: width .3s; }
.due.overdue { color: var(--crit); font-weight: 600; }

/* ── Карточка задачи ────────────────────────────────── */
.task-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.task-side { position: sticky; top: 18px; }
.task-head { margin-bottom: 16px; }
.task-key { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.task-title { margin: 0; font-size: 26px; cursor: text; border-radius: 8px; padding: 2px 6px; margin-left: -6px; }
.task-title:hover { background: rgba(var(--ink-rgb), .04); }
/* правка названия (2026-10-20): тем же шрифтом и на том же месте, что заголовок, без рамки поля — как название при
   создании задачи; длинное переносится. Enter — сохранить, Esc — отменить (static/tasks.js) */
textarea.task-title-input { display: block; width: calc(100% + 6px); height: auto; min-height: 0; margin: -2px 0 -2px -6px; padding: 2px 6px; border: 0;
  border-radius: 8px; resize: none; overflow: hidden; background: rgba(var(--ink-rgb), .04); box-shadow: none; color: var(--ink);
  font-family: var(--head); font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
textarea.task-title-input:focus { border: 0; box-shadow: none; outline: none; }
/* клиент в начале названия (tasks/client_prefix.py): «SM ::» — тем же цветом, что название (решение 2026-10-21:
   отдельный цвет размывает фокус); при правке стоит в начале первой строки поля и не правится */
.tt-pre { color: inherit; font-weight: inherit; white-space: nowrap; }
/* длинное название клиента без кода (аудит 2026-10-22, №59): в заголовке переносится, а не уезжает за край экрана;
   в полях правки и создания — обрезается многоточием, целиком — в подсказке */
.task-title .tt-pre { white-space: normal; overflow-wrap: anywhere; }
.tt-edit > .tt-pre, .tn-pre { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
.tt-edit { position: relative; }
.tt-edit:has(> textarea[hidden]) { display: none; }
/* при правке «SM ::» лежит поверх начала первой строки поля, отступ первой строки ставит static/tasks.js */
.tt-edit > .tt-pre { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; color: var(--ink);
  font-family: var(--head); font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
/* строки заголовка задачи задаёт он сам, а не высота строки формы: иначе строки длинного названия шли шагом 30,5 px, а в
   поле правки — 29,9 и расходились. Шрифт формы прежний — пробел и звёздочка после названия на своих местах (у проекта
   форма — flex, там строки и так по заголовку) */
.task-head .title-form:not(.pj-title-form) { line-height: 0; }
.task-head .title-form .ptpl-macros { line-height: 1.3; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.props { display: grid; grid-template-columns: 96px 1fr; gap: 10px 12px; margin: 0; font-size: 13.5px; align-items: center; }
.props dt { color: var(--muted); font-size: 12.5px; }
.props dd { margin: 0; min-width: 0; }
.props form { margin: 0; }
.prop-select, .prop-input { min-height: var(--ctl-h-sm); padding: 4px 10px; border-radius: 9px; font-size: 13.5px; width: 100%; }
.prop-select.small { font-size: 12.5px; }
.watchers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.watchers .pill { display: inline-flex; align-items: center; gap: 6px; padding-left: 3px; }   /* наблюдатель — с аватаркой */
.watchers .pill .av { width: 18px; height: 18px; font-size: 9.5px; flex: none; }
.rp-who { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; } .rp-who .av { flex: none; } .rp-who > span { white-space: nowrap; }   /* человек в отчётах */
.watchers:empty { display: none; }

/* связи */
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline-form .grow { min-width: 260px; }
.icon-btn { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.icon-btn:hover { color: var(--crit); background: var(--crit-bg); }

/* вложения */
.file-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.file-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* комментарии */
.task-desc .actions { margin-top: 8px; }

/* лёгкий редактор и просмотр HTML */
.editor { border: 1px solid var(--border-strong); border-radius: 12px; background: var(--card-solid); overflow: hidden; }
.editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .14); }
.editor-bar { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: rgba(var(--ink-rgb), .03); }
.editor-bar button { border: 0; background: none; cursor: pointer; width: 30px; height: 26px; border-radius: 6px; color: var(--muted); font-size: 13px; }
.editor-bar button:hover { background: var(--hover-solid); color: var(--ink); }
.editor-body { min-height: 110px; padding: 10px 13px; outline: none; }
.rich p, .editor-body p { margin: 0 0 8px; }
.rich ul, .rich ol, .editor-body ul, .editor-body ol { margin: 0 0 8px; padding-left: 22px; }
.rich a, .hp-body a:not([class]), .bubble a:not([class]) { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(var(--accent-rgb), .35); }   /* ссылки в тексте — тонкая линия всегда */
.rich a:hover, .hp-body a:not([class]):hover, .bubble a:not([class]):hover { text-decoration-color: currentColor; }
/* ссылка в редакторе описания — видно сразу, что текст стал ссылкой */
.editor-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rich code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: rgba(var(--ink-rgb), .06); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 991px) {
  .task-layout { grid-template-columns: minmax(0, 1fr); }   /* не «1fr»: колонка не раздувается шире экрана */
  .task-side { position: static; }
  .props { grid-template-columns: 88px 1fr; }
}

/* форма создания (вариант 1 — как карточка) */
.m0 { margin: 0; }
/* название — просто текст: без рамки и фона, рамка появляется только в фокусе */
input.title-plain { width: 100%; font-family: var(--head); font-size: 26px; font-weight: 650; letter-spacing: -.02em;
  padding: 4px 6px; margin-left: -6px; min-height: 48px; border: 1px solid transparent; background: transparent; border-radius: 8px; }
input.title-plain::placeholder { color: var(--faint); font-weight: 600; }
input.title-plain:focus { background: rgba(var(--ink-rgb), .03); border-color: transparent; box-shadow: none; }
/* выбор направления над названием — крупно, как подпись раздела */
.division-pick { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.division-pick .sel { flex: 0 1 auto; }
.division-name { color: var(--muted); font-weight: 600; }
.task-key .sep { color: var(--faint); }
/* «Я» рядом с полем: поле тянется, кнопка фиксированная */
.with-me { display: flex; gap: 6px; align-items: center; }
.with-me > select, .with-me > form, .with-me > input, .with-me > .sel { flex: 1; min-width: 0; }
.with-me .btn { flex: none; min-width: 34px; padding: 0 10px; }
.chip-x { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; margin-left: 4px; padding: 0 2px; font-size: 13px; line-height: 1; }
.chip-x:hover { opacity: 1; }
/* компактное прикрепление файлов */
.attach { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-block { flex-basis: 100%; margin-top: 6px; }
.file-block-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 6px; }
.editor-body.editor-tall { min-height: 200px; }
.editor-body:empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }

/* ── Представления: переключатель, список, доска (заход 3) ─────── */
.view-switch .chip { gap: 6px; }
th.sorted a { color: var(--accent); } th a { color: inherit; } th a:hover { color: var(--accent); text-decoration: none; }
.sort-arrow { margin-left: 4px; font-size: 11px; }
.pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; justify-content: center; }
/* доска */
/* Доска — компонент из commercial-offer (решение 2026-10-11): строка заголовков над колонками и сами колонки — в одной
   прокрутке, ширины совпадают (одни правила flex у заголовка и колонки); пустая колонка — узкая полоска 44px */
.board-scroll { overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; }
.board-heads, .board { display: flex; gap: 12px; width: 100%; }   /* ширина одна у обеих строк — колонки и заголовки совпадают; лишнее уходит в прокрутку */
.board-heads { margin-bottom: 6px; }
.board { align-items: stretch; }
.bhead, .bcol { flex: 1 0 228px; max-width: 320px; min-width: 0; transition: flex-basis .2s, max-width .2s, opacity .15s; }   /* 228: стандартный процесс (4 колонки + схлопнутая) помещается на 1440 при отступе страницы 48 */
.bhead { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; padding: 8px 14px 9px; border-bottom: 2px solid var(--border-strong); font-size: 13px; }
.bhead .bcol-title { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.bhead .bname { overflow: hidden; text-overflow: ellipsis; }
.bhead .bcol-meta { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bhead .bproc { flex-basis: 100%; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.cat-new > .bcol-title .bdot { background: var(--unknown-dot); } .cat-in_progress > .bcol-title .bdot { background: var(--accent); }
.cat-paused > .bcol-title .bdot { background: var(--warn-dot); } .cat-done > .bcol-title .bdot { background: var(--ok-dot); }
.cat-break > .bcol-title .bdot { background: var(--info-dot); }
.bhead.cat-break .bname::after { content: " · ставит таймер"; font-weight: 500; color: var(--muted); }
.bcol { display: flex; flex-direction: column; background: rgba(var(--ink-rgb), .04); border-radius: 0 0 18px 18px; padding: 10px; min-height: 160px; }
.bcol > header { display: none; }                         /* шапки — в строке над доской */
.bcol-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 60px; min-width: 0; }
/* схлопнутая пустая колонка: в строке заголовков — только точка по центру, в колонке — название боком */
.bhead.is-empty, .bcol.is-empty { flex: 0 0 44px; max-width: 44px; }
.bhead.is-empty { justify-content: center; padding-left: 0; padding-right: 0; }
.bhead.is-empty .bname, .bhead.is-empty .bcol-meta, .bhead.is-empty .bproc { display: none; }
.bcol.is-empty { padding: 12px 0; align-items: center; }
.bcol.is-empty > header { display: flex; }
.bcol.is-empty .bcol-title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: var(--muted); }
.bcol.is-empty .bcol-body { position: absolute; inset: 0; min-height: 0; opacity: 0; }   /* место, куда можно бросить */
.bcol.is-empty { position: relative; }
/* перетаскивание: схлопнутая колонка, куда можно бросить, раскрывается; куда нельзя — гаснет */
.bhead.drop-open, .bcol.drop-open { flex: 1 0 236px; max-width: 320px; }
.bhead.drop-open .bname, .bhead.drop-open .bcol-meta { display: inline; }
.bcol.drop-open { padding: 10px; align-items: stretch; }
.bcol.drop-open > header { display: none; }
.bcol.drop-open .bcol-body { position: static; opacity: 1; min-height: 60px; border: 1px dashed var(--border-strong); border-radius: 12px; }
.bcol.dim, .bhead.dim { opacity: .35; }
.bcol.dim[data-dim-note] { position: relative; opacity: 1; } .bcol.dim[data-dim-note] > * { opacity: .35; }
.bcol.dim[data-dim-note]::after { content: attr(data-dim-note); position: absolute; left: 10px; right: 10px; top: 12px; padding: 8px 10px; border-radius: 10px; background: var(--card); color: var(--ink); font-size: 12.5px; font-weight: 550; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); pointer-events: none; }
/* дорожки при группировке: колонки во всех дорожках одни, заголовки — одной строкой сверху */
.lane { margin-bottom: 10px; }
.lane-head { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; padding: 6px 4px 8px; }
.lane-head > * { vertical-align: middle; }
.lane .bcol { min-height: 90px; border-radius: 14px; }
.lane.closed .board { display: none; } .lane.closed .grp-chev { transform: rotate(-90deg); }
/* карточка */
.bcard { display: block; min-width: 0; overflow: hidden; overflow-wrap: anywhere; background: var(--card-solid); border: 1px solid var(--border); border-radius: 14px; padding: 12px 13px; color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; cursor: grab; }
.bcard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.bcard[data-locked] { cursor: pointer; }
.bcard.mine { border-color: var(--warn-dot); box-shadow: 0 0 0 3px var(--warn-bg), var(--shadow); }
.bcard-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.bcard-top b { font-size: 13.5px; line-height: 1.35; font-weight: 600; }
.bcard-top > svg { flex: none; margin-top: 2px; }
.bcard-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); font-size: 12.5px; min-width: 0; }
.bcard-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; flex-wrap: wrap; }
.bcard-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bcard-holder { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-you { background: var(--warn-bg); color: var(--warn); border-radius: 999px; padding: 2px 8px; font-weight: 600; font-size: 11.5px; }
.bcard-extra { margin-top: 8px; }
.bcard-ghost { opacity: .4; }
.bcard-drag { transform: rotate(2deg); box-shadow: var(--shadow-lg); }

.form-error { color: var(--crit); background: var(--crit-bg); padding: 8px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 10px; }

/* ── Всплывающая карточка задачи ─────────────────────── */
/* затемнение всегда тёмное: не от цвета чернил (в тёмной теме они светлые), а фиксированное */
/* всплывашка «Отменить» — над окном задачи, иначе клик по ней закрывал окно */
body.modal-open .toasts { z-index: 560; }
.modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(10, 14, 22, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, .62); }
/* окно: отступ 50px по периметру, но не шире 1680px (центрируется). Само окно не прокручивается:
   шапка с крестиком и правая колонка свойств стоят на месте, свой скролл только у левой части (2026-10-09) */
.modal-win { position: absolute; inset: 50px; max-width: 1680px; margin: 0 auto; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden; padding: 14px 56px 0; }
body.modal-open { overflow: hidden; }
.modal-top { display: flex; align-items: center; gap: 8px; flex: none; background: var(--paper); padding: 6px 0 12px; }
.modal-win .task-layout { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.modal-win .task-main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 18px 40px 2px; margin-left: -2px; scrollbar-gutter: stable; }
.modal-win .task-side { position: static; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 24px; }
.modal-win .task-side::-webkit-scrollbar { display: none; }
.modal-close { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.modal-close:hover { color: var(--ink); background: var(--hover-solid); }
.modal-page { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.modal-page:hover { color: var(--ink); background: var(--hover-solid); } .modal-page + .modal-close { margin-left: 0; }
@media (max-width: 991px) {
  .modal-win { inset: 0; border-radius: 0; padding: 12px 14px 20px; display: block; overflow-y: auto; }
  .modal-win .task-layout { grid-template-rows: none; }
  .modal-win .task-main, .modal-win .task-side { overflow: visible; padding-right: 0; }
}

/* ── Компонент «Даты» (data-dates) ────────────────────── */
.dates { position: relative; min-width: 0; }
.dates-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.dates-btn svg { color: var(--muted); flex: none; }
.dates-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* попап живёт в body поверх всего (и поверх окна задачи), позиция от поля считается скриптом и зажимается экраном */
.dp { position: fixed; z-index: 700; width: 520px; max-width: calc(100vw - 16px);
  background: var(--card-solid); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px; }
.dp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.dp-field { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--paper); cursor: pointer; }
.dp-field span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.dp-field input { border: 0; background: transparent; padding: 0; min-height: 22px; font-size: 14px; color: var(--ink); width: 100%; }
.dp-field input:focus { box-shadow: none; } .dp-field input.invalid { color: var(--crit); }
.dp-field.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); }
.dp-body { display: grid; grid-template-columns: 180px 1fr; gap: 12px; }
.dp-presets { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--border); padding-right: 8px; }
.dp-presets button { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); padding: 7px 8px; border-radius: 8px; cursor: pointer; text-align: left; }
.dp-presets button:hover { background: var(--hover-solid); } .dp-presets .muted { font-size: 12px; }
/* период в фильтре: колонка быстрых вариантов шире — «Прошлая неделя · 28 сен – 4 окт» в одну строку */
.dp.dp-range { width: 600px; } .dp.dp-range .dp-body { grid-template-columns: 250px 1fr; }
.dp.dp-range .dp-presets button span { white-space: nowrap; }
.dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.dp-nav b { text-transform: capitalize; }
.dp-nav-btns { display: inline-flex; gap: 2px; align-items: center; }
.dp-nav-btns button { border: 0; background: none; font: inherit; color: var(--muted); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; }
.dp-nav-btns button[data-nav=today] { width: auto; padding: 0 8px; font-size: 12.5px; }
.dp-nav-btns button:hover { background: var(--hover-solid); color: var(--ink); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-size: 11px; color: var(--faint); font-weight: 600; padding: 4px 0; }
.dp-day { border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); height: 32px; border-radius: 8px; cursor: pointer; font-variant-numeric: tabular-nums; }
.dp-day:hover { background: var(--hover-solid); }
.dp-day.out { color: var(--faint); }
.dp-day.off { color: var(--faint); opacity: .45; cursor: default; background: none; }   /* создана/закрыта — не в будущем */
.dp-day.today { font-weight: 700; color: var(--accent); }
.dp-day.range { background: var(--accent-soft); border-radius: 0; }
.dp-day.sel { background: var(--accent); color: #fff; font-weight: 600; }
.dp-day.sel.start { border-radius: 8px 0 0 8px; } .dp-day.sel.due { border-radius: 0 8px 8px 0; }
.dp-day.sel.start.due, .dp-day.sel:only-of-type { border-radius: 8px; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.dp-time { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.dp-time input { min-height: 28px; height: 28px; padding: 0 8px; border-radius: 8px; width: 72px; text-align: center; }
.dp-time input.invalid { border-color: var(--crit); }
.dp-foot-btns { display: inline-flex; gap: 6px; }
@media (max-width: 575px) { .dp-body { grid-template-columns: 1fr; } .dp-presets { border: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; } }

/* ── Карточка без плашек: плоские секции, тонкие разделители ── */
.sec { padding: 2px 0 6px; }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sec-head h2 { margin: 0; font-size: 17px; }
.sec-head .progress { margin-left: auto; }
.task-desc .rich { max-width: 900px; }
.desc-tools { margin-top: 4px; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 560; color: var(--accent); cursor: pointer; }
.link-btn:hover { color: var(--accent-dark); }
.task-desc .rich > :first-child { margin-top: 0; }
.task-files .file-block { margin: 10px 0 0; }
.task-files .attach { margin-top: 8px; }
.task-main hr.divider { margin: 14px 0; }

/* ── Обсуждение: табы, облачка, события, реакции ─────── */
.ctabs { margin: 0 0 14px; align-items: center; }
.ctabs .tab { background: none; border: 0; cursor: pointer; font-family: inherit; }
.ctabs .cnt { font-size: 11px; color: var(--faint); margin-left: 4px; background: rgba(var(--ink-rgb), .06); padding: 1px 6px; border-radius: 999px; }
.chat-tools-right { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; }
.chat-events-toggle { font-size: 12.5px; color: var(--muted); }
.order-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; }
.order-btn:hover { color: var(--accent); text-decoration: none; }
.chat .composer + .chat, .composer + .chat { margin-top: 14px; }
.chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.chat.no-events .sysline { display: none; }
.day { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; margin: 6px 0; }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.msg { display: flex; gap: 10px; align-items: flex-start; max-width: 78%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg.mine .msg-body { align-items: flex-end; }
/* имя и время не ломаются по словам; не помещается — плашка «ждёт вашего ответа» целиком уходит на следующую строку
   (2026-10-20: всё сжималось в две строки) */
.msg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; }
.msg-meta > b, .msg-meta > .ts, .msg-meta > .muted { white-space: nowrap; }
.msg.mine .msg-meta { flex-direction: row-reverse; }
.msg-tools { display: inline-flex; gap: 4px; align-items: center; opacity: 0; transition: opacity .15s; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
.bubble { background: rgba(var(--ink-rgb), .05); padding: 9px 13px; border-radius: 14px 14px 14px 4px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.msg.mine .bubble { background: var(--accent-soft); border-radius: 14px 14px 4px 14px; }
.quote { display: block; border-left: 2px solid var(--accent); padding: 2px 8px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); white-space: normal; }
.quote b { display: block; color: var(--accent); font-size: 12px; }
a.quote:hover { text-decoration: none; background: rgba(var(--accent-rgb), .06); }
.msg-edit textarea { width: 100%; min-width: 320px; }
.reacts { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; position: relative; }
.react { border: 1px solid var(--border); background: var(--card-solid); border-radius: 999px; padding: 2px 8px; font: inherit; font-size: 12.5px; cursor: pointer; line-height: 1.4; color: var(--ink); }
.react:hover { border-color: var(--border-strong); }
.react.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.react.add, .react.quick { opacity: .35; color: var(--muted); }
.msg:hover .react.add, .msg:hover .react.quick, .react.add:focus-visible, .react.quick:focus-visible { opacity: 1; }
/* окно эмодзи (2026-10-19, static/emoji.js): реакции и поле сообщения; над окном задачи, под диалогами */
.react.add.open { border-color: var(--accent); color: var(--accent); }
.emj-pop { position: fixed; z-index: 780; width: 360px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; border-radius: 16px; background: var(--card-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); overflow: hidden; }
.emj-cats { display: flex; justify-content: space-between; padding: 8px 8px 2px; }
.emj-cats.off { opacity: .45; }
.emj-cat { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--faint); cursor: pointer; padding: 0; }
.emj-cat svg { width: 17px; height: 17px; }
.emj-cat:hover { color: var(--ink); background: var(--hover-solid); }
.emj-cat.on { color: var(--accent); background: var(--accent-soft); }
.emj-search { padding: 6px 10px 4px; }
.emj-q { width: 100%; height: var(--ctl-h-sm); border-radius: 9px; border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--ink); font: inherit; font-size: 13.5px; padding: 0 10px; outline: none; box-sizing: border-box; }
.emj-q:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.emj-body { height: 280px; overflow-y: auto; padding: 2px 8px 8px; overscroll-behavior: contain; }
.emj-h { margin: 8px 3px 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
.emj-grid { display: grid; grid-template-columns: repeat(9, 1fr); }
.emj-i { display: grid; place-items: center; height: 36px; border: 0; border-radius: 8px; background: none; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.emj-i:hover, .emj-i:focus-visible { background: var(--hover-solid); outline: none; }
.emj-i:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.emj-empty { display: grid; justify-items: center; align-content: center; gap: 2px; height: 100%; text-align: center; color: var(--muted); font-size: 13px; }
.emj-empty-e { font-size: 30px; }
.emj-empty b { color: var(--ink); }
.emj-foot { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 12px; border-top: 1px solid var(--border); }
.emj-big { font-size: 26px; line-height: 1; min-width: 26px; }
.emj-name { display: grid; min-width: 0; font-size: 13px; } .emj-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emj-name small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .emj-pop { left: 8px !important; right: 8px; width: auto; } }
.sysline { display: flex; justify-content: center; }
.sysline > span { font-size: 12.5px; color: var(--muted); background: rgba(var(--ink-rgb), .04); padding: 3px 12px; border-radius: 999px; text-align: center; }
.sysline b { color: var(--ink); font-weight: 600; }
.composer { border: 1px solid var(--border-strong); border-radius: 12px; background: var(--card-solid); padding: 8px 10px; }
.composer textarea { width: 100%; border: 0; background: transparent; min-height: 48px; padding: 4px 2px; border-radius: 0; }
/* поле сообщения — редактируемое, как описание: текст и картинки прямо в нём (ТЗ-20, inline.js) */
.cmp-in { min-height: 48px; max-height: 50vh; overflow-y: auto; padding: 4px 2px; outline: none; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.cmp-in.is-empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }
.cmp-in img { max-width: 100%; height: auto; border-radius: 8px; vertical-align: bottom; margin: 2px 0; outline: 1px solid var(--border); }
.cmp-in img:hover { outline: 2px solid var(--accent); }
.msg-edit .cmp-in { border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 10px; background: var(--card-solid); margin-bottom: 8px; }
.msg-edit .cmp-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .14); }
.composer textarea:focus { box-shadow: none; }
.composer-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.reply-preview { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.reply-preview .quote { flex: 1; margin: 0; }

/* ── Нагрузка: таблица люди × дни, толстые бары, аккордеон задач ── */
.wl-legend { display: flex; gap: 8px; align-items: center; margin: -6px 0 12px; }
.wl-legend .sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--ok-dot); }
.wl-legend .sw.full { background: var(--accent); } .wl-legend .sw.over { background: var(--crit-dot); }
.wl-wrap { padding: 12px 16px; }
.wl-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wl-who b, .wl-who .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-sum { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* выбор людей: сохранённые группы, выпадающий список с чекбоксами, сохранение */
.wl-sel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.wl-inline { display: flex; align-items: center; gap: 6px; margin: 0; }
.wl-save .input { height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0 10px; width: 190px; font-size: 13px; }
/* на телефоне «Сохранить как группу» — во всю ширину, поле сжимается (на 360 px форма вылезала за экран) */
@media (max-width: 720px) { .wl-save { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; } .wl-save .input { flex: 1 1 120px; width: auto; min-width: 0; } }
.pp { position: relative; }
.pp-btn { display: inline-flex; align-items: center; gap: 8px; }
.pp-avs { display: inline-flex; } .pp-avs .av { margin-right: -6px; box-shadow: 0 0 0 2px var(--card-solid); font-size: 10px; }
.pp-avs .av:last-child { margin-right: 2px; }
.pp-caret { opacity: .6; font-size: 11px; }
.pp-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 130; width: 360px; max-width: calc(100vw - 32px); padding: 10px; border-radius: 12px;
  background: var(--card-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
input.pp-search { width: 100%; margin-bottom: 8px; height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0 10px; font-size: 13px; }
.pp-body { max-height: 50vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.pp-group { padding: 4px 0; } .pp-group + .pp-group { border-top: 1px solid var(--border); }
.pp-head, .pp-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; margin: 0; }
.pp-head { font-size: 12.5px; } .pp-head b { flex: 1; }
.pp-item:hover, .pp-head:hover { background: var(--hover-solid); }
.pp-item input, .pp-head input { margin: 0; accent-color: var(--accent); }
.pp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-pos { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border); }
.pp-foot-btns { display: inline-flex; gap: 6px; }
.wl-daytitle { white-space: nowrap; min-width: 150px; text-align: center; }
/* таблица люди × дни */
.wl2 th { font-size: 11px; } .wl2 th.today, .wl2 td.today { background: var(--accent-soft); }
.wl2 td { vertical-align: middle; padding: 10px 8px; } .wl2 .cell { min-width: 112px; }
.wl2 .th-person, .wl2 .wl-person, .wl2 .gantt-name { position: sticky; left: 0; z-index: 3; width: 400px; min-width: 400px; max-width: 400px; background: var(--card-solid); }
.wl-person { display: flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer; }
.wl-row:hover td { background: rgba(var(--ink-rgb), .03); }
.wl-row:hover td.wl-person { background: color-mix(in srgb, var(--ink) 3%, var(--card-solid)); }
.wl-row:hover td.today { background: color-mix(in srgb, var(--accent) 14%, var(--card-solid)); }
.wl-row .chev { transition: transform .2s ease; }
.wl-row.open .chev { transform: rotate(90deg); }
tr.wl-row.open td { background: rgba(var(--accent-rgb), .05); }
tr.wl-row.open td.wl-person { background: color-mix(in srgb, var(--accent) 5%, var(--card-solid)); }
.tb { position: relative; display: flex; align-items: center; height: 22px; border-radius: 7px; background: rgba(var(--ink-rgb), .07); overflow: hidden; }
.tb-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--ok-dot); border-radius: 7px; transition: width .45s ease, background-color .3s ease; }
.tb.full .tb-fill { background: var(--accent); } .tb.over .tb-fill { background: var(--crit-dot); }
.tb-over { position: absolute; right: 0; top: 0; height: 100%; transition: width .45s ease; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 4px, transparent 4px 8px); }
.tb-num { position: relative; z-index: 1; padding: 0 8px; font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .25); }
.tb.none .tb-num { color: var(--faint); font-weight: 400; text-shadow: none; }
[data-theme="light"] .tb.ok .tb-num { color: #0e3b22; text-shadow: none; }
.tb.mini { height: 6px; border-radius: 3px; margin-top: 4px; } .tb.mini .tb-fill { border-radius: 3px; }
.gantt-row td { padding: 4px 8px; border-bottom: 0; background: rgba(var(--ink-rgb), .02); }
.gantt-row td.gantt-name { background: color-mix(in srgb, var(--ink) 2%, var(--card-solid)); }
.gantt-row.unplanned td { padding-bottom: 6px; }
.gantt-name { padding-left: 48px !important; font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.gantt-name a { color: var(--ink); display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.gantt-name a:hover { color: var(--accent); text-decoration: none; }
.gantt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gantt-meta { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.gantt-cell { height: 28px; }
.g-seg { display: block; height: 20px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; line-height: 20px; }
.g-seg:hover { text-decoration: none; filter: brightness(1.08); }
/* подсказка о нагрузке исполнителя в карточке и форме создания: сегодня из 8, по дням — в тултипе */
/* строка — сплошной текст, переносится по словам (2026-10-20: во флексе значок оставался один на первой строке) */
.wl-hint { display: inline; font-size: 13px; line-height: 1.55; color: var(--muted); font-variant-numeric: tabular-nums; cursor: pointer; }
.wl-hint:hover { text-decoration: none; color: var(--accent); }
.wl-hint svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
/* под исполнителем (2026-10-20): «На сегодня запланировано 7 ч из 8 · и 2 задачи без оценки · с этой задачей — 9 ч»;
   красным — только больше нормы */
.wl-hint-now b, .wl-this b { color: var(--ink); font-weight: 650; white-space: nowrap; } .wl-hint b.over { color: var(--crit); }
.wl-hint:hover .wl-hint-now b { color: var(--accent); } .wl-hint:hover b.over { color: var(--crit); }
.wl-hint .over { color: var(--crit); font-weight: 600; font-size: 12.5px; }
.wl-hint .wl-this.over b { color: var(--crit); }
.wl-ne::before, .wl-this::before, .wl-hint > .over::before { content: "·"; margin: 0 6px; color: var(--faint); }
.qk-wl:empty { display: none; } .qk-wl { padding: 2px 18px 8px; }

/* загрузка в списке исполнителей (2026-10-20, static/capacity.js): заголовок колонки, «3 ч из 8» и шкала по часам */
.sel-menu.cap-menu { min-width: 400px !important; width: max-content; max-width: min(560px, calc(100vw - 16px)); }
.cap-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 5px; border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cap-who { font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.cap-sort { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(var(--ink-rgb), .05); }
.cap-sort button { border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; color: var(--muted); padding: 1px 7px; border-radius: 5px; cursor: pointer; }
.cap-sort button.on { background: var(--card-solid); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .12); }
.cap-lbl { margin-left: auto; } .cap-lbl b { color: var(--ink); font-weight: 650; }
.cap { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; padding-left: 10px; }
.cap-ne { font-size: 11px; color: var(--muted); }
.cap-h { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }
.cap-h b { color: var(--ink); font-weight: 650; } .cap-h.over b { color: var(--crit); }
.cap-ticks { display: inline-flex; align-items: center; gap: 2px; }
.cap-ticks i { width: 6px; height: 12px; border-radius: 2px; background: var(--track); }
.cap-ticks i.p { background: var(--info-dot); }
.cap-ticks i.u { background: repeating-linear-gradient(135deg, var(--info-dot) 0 2px, transparent 2px 4px); }
.cap-ticks i.x { background: var(--crit-dot); }
.cap-norm { width: 1.5px; height: 16px; margin: 0 1px; border-radius: 1px; background: var(--ink); opacity: .45; }
.cap-cols { display: inline-flex; gap: 3px; }
.cap-col { display: inline-grid; justify-items: center; gap: 1px; font-size: 9.5px; color: var(--faint); line-height: 1.1; }
.cap-tube { position: relative; width: 14px; height: 16px; border-radius: 3px; background: var(--track); overflow: hidden; }
.cap-tube i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--info-dot); }
.cap-tube i.x { background: var(--crit-dot); }
.cap-col.due { color: var(--ink); font-weight: 700; } .cap-col.due .cap-tube { box-shadow: 0 0 0 1.5px var(--ink); }
.props dd.wl-hint-row:empty, .props dt.wl-hint-row:has(+ dd:empty) { display: none; }
/* @упоминания в обсуждении */
.mention { color: var(--accent); font-weight: 600; background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }
/* ссылка на задачу в сообщении (2026-10-20, tasks/task_refs.py): плашка в строке — точка статуса, ключ, название.
   По базовой линии текста (align-items: baseline; точка — по центру), без отступов по высоте — строку не раздвигает */
.tref { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; vertical-align: baseline; padding: 0 8px 0 6px; border-radius: 7px;
  background: var(--card-solid); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--ink); font-size: 13px; font-weight: 500; transition: box-shadow .15s; }
.tref:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--accent); }
.tref code.key { flex: none; font-size: 11px; padding: 0 5px; border-radius: 5px; }
.tref-dot { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--unknown-dot); }
.tref.cat-in_progress .tref-dot { background: var(--accent); } .tref.cat-paused .tref-dot { background: var(--warn-dot); }
.tref.cat-done .tref-dot { background: var(--ok-dot); } .tref.cat-break .tref-dot { background: var(--info-dot); }
.tref-t { min-width: 0; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tref.cat-done .tref-t { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--ink-rgb), .35); }
.tref.off { color: var(--muted); font-weight: 400; }
.mention-pop { position: fixed; z-index: 760; min-width: 220px; max-width: 280px; padding: 4px; border-radius: 10px; background: var(--card-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); display: grid; }
.mention-item { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); padding: 6px 8px; border-radius: 7px; cursor: pointer; text-align: left; }
.mention-item:hover, .mention-item.focus { background: var(--hover-solid); }
/* сотрудник в архиве — доступ отключён (решение 2026-10-19): серая аватарка со значком ⊘, приглушённое имя, метка */
.av.av-off, .tm-avatar.av-off, .av-wrap.av-off .av { filter: grayscale(1); opacity: .6; }
.av.av-off, .tm-avatar.av-off, .av-wrap.av-off { position: relative; }
.av.av-off::after, .tm-avatar.initials.av-off::after, .av-wrap.av-off::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--card-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a1b6' stroke-width='3.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M6.5 17.5l11-11'/%3E%3C/svg%3E") center / 8px no-repeat; filter: none; }
.av-wrap { display: inline-flex; flex: none; }
.who-off, .who-off a { color: var(--muted) !important; }
.val-ico.who-off { flex-wrap: wrap; row-gap: 2px; } .val-ico.who-off .vi-name { white-space: nowrap; } .val-ico.who-off .pill-off { margin-left: 0; }
.pill-off { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .01em; background: rgba(var(--ink-rgb), .07); color: var(--muted); vertical-align: middle; white-space: nowrap; }
.mention.off { color: var(--muted); background: rgba(var(--ink-rgb), .06); }
.off-warn { margin: 2px 0 6px; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12.5px; line-height: 1.4; }
.off-warn b { color: var(--ink); font-weight: 650; }
.pp-off { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(var(--ink-rgb), .05); font-size: 13.5px; }
.pp-off .btn { margin-left: auto; }
.mention-item .av { flex: none; overflow: hidden; color: #fff; font-size: 10.5px; font-weight: 700; }
.mention-item .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mention-all .mi-txt { display: grid; min-width: 0; line-height: 1.25; }   /* «@Все»: название, под ним — кого позовёт */
.mention-all small { font-size: 11.5px; }
.cmp-in .mention { white-space: nowrap; cursor: default; }   /* плашка отметки в поле — неделимая, стирается целиком */
.mention-all .av { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* главная «Лента дня»: виджеты, ответы, расписание дня, ждут ответа, неделя, команда */
/* сегодняшняя дата — в верхней панели слева (2026-10-20, раньше — у заголовка главной); на узком экране места нет */
.tb-date { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 991px) { .tb-date { display: none; } }
.dash { display: grid; gap: 16px; align-items: start; }
.dash.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.dash-side { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 1100px) { .dash.g-2-1 { grid-template-columns: 1fr; } }
.widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px 16px; min-width: 0; }
.w-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.w-head h2 { font-size: 15px; margin: 0; font-family: var(--head); }
.w-head > a.muted { margin-left: auto; } .w-head > a.muted:hover { color: var(--accent); text-decoration: none; }
.badge-n { background: var(--crit-dot); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 7px; }
.ans-a { display: block; font-family: var(--head); font-size: 20px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.ans-a.over { color: var(--crit); }
/* «Команда»: выбор группы (решение 2026-10-21, вариант 4) — ‹ название · 2 из 9 › на подложке, точки ниже */
.tm-step { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 13px; background: var(--well); }
.tm-arr { flex: none; display: grid; place-items: center; width: var(--ctl-h-sm); height: var(--ctl-h-sm); border-radius: var(--r-ctl-sm); color: var(--muted);
  font-size: 18px; line-height: 1; padding-bottom: 2px; }
.tm-arr:hover { background: var(--card-solid); color: var(--ink); text-decoration: none; }
details.tm-pick { flex: 1; min-width: 0; display: block; }
details.tm-pick > summary.tm-cur { width: 100%; height: var(--ctl-h-sm); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px;
  border: 0; border-radius: var(--r-ctl-sm); background: var(--card-solid); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--ink); }
details.tm-pick[open] > summary.tm-cur { background: var(--card-solid); color: var(--ink); }
.tm-cur-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-cur-i { flex: none; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.tm-pick-pop { left: 50%; right: auto; transform: translateX(-50%); width: min(280px, 90vw); min-width: 0; max-height: 320px; overflow-y: auto; z-index: 30;
  grid-template-columns: minmax(0, 1fr); }  /* без minmax длинное имя группы раздвигало колонку и уводило числа за край */
.tm-pick-q { height: var(--ctl-h-sm); margin-bottom: 4px; }
.tm-pick-i { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.tm-pick-i:hover { text-decoration: none; }
.tm-pick-i.on { color: var(--accent); font-weight: 600; }
.tm-pick-i span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-pick-c { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tm-dots { display: flex; justify-content: center; gap: 4px; margin: 6px 0 2px; }
.tm-dots i { width: 5px; height: 5px; border-radius: 3px; background: var(--border-strong); transition: width .2s; }
.tm-dots i.on { width: 14px; background: var(--accent); }
/* «Команда»: группы «перегружены» / «есть время», строка — человек, вывод и полоска по дням */
/* «Команда» (вариант 2, 2026-10-15): две цифры сверху, ниже все люди; статус — точкой, сверх нормы — янтарный.
   Плитки цифр — var(--well), дорожки столбиков — var(--track): блок сам подстраивается под стиль оформления */
.tm-span { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.tm-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 6px; }
.tm-kpi { position: relative; display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--well); min-width: 0; }
.tm-kpi b { font-size: 18px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tm-kpi span { font-size: 12px; color: var(--muted); }
.tm-kpi .tm-dot { position: absolute; right: 10px; top: 13px; }
.tm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--border-strong); }
.tm-dot.over { background: var(--warn-dot); } .tm-dot.free { background: var(--ok-dot); } .tm-dot.ok { background: rgba(var(--accent-rgb), .55); }
.tm-list { display: grid; }
.tm-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 10px; color: var(--ink); }
.tm-row + .tm-row { border-top: 1px solid var(--border); border-radius: 0; }
.tm-row:hover { background: var(--hover-solid); text-decoration: none; border-radius: 10px; }
.tm-who { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.tm-who b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-d { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.tm-bar { display: inline-flex; align-items: flex-end; gap: 3px; flex: none; height: 22px; }
.tm-c { position: relative; display: block; width: 9px; height: 22px; border-radius: 3px; background: var(--track); cursor: default; }
.tm-f { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f, 0) * 100%); border-radius: 3px; background: var(--accent); }
.tm-c.over .tm-f { background: var(--warn-dot); }
.tm-c[data-tip] { cursor: default; }
/* закрытые сегодня: зелёные, с галочкой, появляются с лёгким подскоком — пусть глаз радуется */
@keyframes done-pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .md-row, .fw-row { animation: none; } }
.wt-list { display: flex; flex-direction: column; }
.wt { display: flex; gap: 10px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--border); color: var(--ink); }
.wt:first-child { border-top: 0; } .wt:hover { text-decoration: none; background: var(--hover-solid); border-radius: 8px; color: var(--ink); }
.wt-body { flex: 1; min-width: 0; display: grid; gap: 3px; } .wt-head { font-size: 13.5px; } .wt-head .key { font-size: 11px; white-space: nowrap; }
.wt-text { font-size: 12.5px; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt .btn { flex: none; }
/* «Не требует ответа» (бэклог-27): галочка справа от «Ответить» */
.wt-more { margin: 8px 0 0; }
.wt-item { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border); } .wt-item:first-child { border-top: 0; }
.wt-item .wt { flex: 1; min-width: 0; border-top: 0; }
.wt-ok { flex: none; width: var(--ctl-h-sm); height: var(--ctl-h-sm); border-radius: 9px; border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: color .15s, border-color .15s; }
.wt-ok:hover { color: var(--ok); border-color: var(--ok); }
.msg-wait { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 1px 4px 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 11.5px; font-weight: 600; }
.msg-wait-x { white-space: nowrap; border: 0; background: var(--card-solid); color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; cursor: pointer; }
.msg-wait-x:hover { color: var(--ok); }
.msg.wait .bubble { box-shadow: inset 3px 0 0 var(--warn-dot); }
.wk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.wk-d { display: grid; gap: 4px; } .wk-d > span:first-child { text-align: center; }
.wk-d.today > span:first-child { color: var(--accent); font-weight: 700; } .wk-d.today .tb { outline: 2px solid var(--accent-soft); }
.wk.wk-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } .wk-7 .tb-num { font-size: 11px; }   /* с выходными */
.wk-d.we > span:first-child { color: var(--faint); } .wk-d.we .tb { opacity: .65; }
/* время: кнопки в карточке, затрачено против оценки, вкладка «Время» (таймер в верхней панели — ниже, у .topbar) */
@keyframes rec-blink { 50% { opacity: .3; } }
.timer-form { margin: 0; } .btn.timer-on { background: var(--ok-dot); color: #fff; } .btn.timer-on:hover { background: var(--crit-dot); color: #fff; } .timer-form .btn b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.spent { display: grid; gap: 4px; min-width: 0; } .spent-txt { font-size: 13.5px; } .spent.over .spent-txt b { color: var(--crit); }
.spent .tb.mini { margin-top: 0; }
.time-panel { display: grid; gap: 12px; }
.time-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.time-add .input, .time-edit-form .input { height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0 10px; font-size: 13px; }
/* одна дата нашим календарём (date_field) вместо браузерного type=date */
.date-one { width: 150px; flex: none; }
.date-one .dates-btn { display: flex; align-items: center; gap: 7px; width: 100%; height: var(--ctl-h-sm); min-height: var(--ctl-h-sm);
  padding: 0 10px; font-size: 13px; border-radius: 9px; cursor: pointer; text-align: left; }
.date-one .dates-btn svg { color: var(--faint); flex: none; }
.time-table td { vertical-align: middle; } .time-table tr.running td { background: rgba(224, 77, 51, .08); }
.time-edit summary { list-style: none; cursor: pointer; } .time-edit summary::-webkit-details-marker { display: none; }
.time-edit-form { position: absolute; right: 0; z-index: 60; display: flex; gap: 6px; flex-wrap: wrap; width: 420px; max-width: calc(100vw - 40px); padding: 10px; margin: 4px 0 0; border-radius: 12px; background: var(--card-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.time-edit { position: relative; display: inline-block; }
/* статус и приоритет у задач в нагрузке */
.badge.mini { font-size: 11px; padding: 1px 7px; line-height: 1.5; flex: none; }
.prio-mini { display: inline-flex; flex: none; } .prio-mini svg { width: 13px; height: 13px; }
.gt-prio { display: inline-flex; flex: none; } .gt-prio svg { width: 12px; height: 12px; filter: brightness(10); }
.gt-status { flex: none; font-size: 11px; opacity: .85; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); }
/* диалоги подтверждения и ввода (вместо браузерных confirm/prompt) */
.dlg-overlay { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 14, 22, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
[data-theme="dark"] .dlg-overlay { background: rgba(0, 0, 0, .62); }
.dlg { width: 440px; max-width: 100%; background: var(--card-solid); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 22px 24px 20px; display: grid; gap: 12px; }
.dlg-overlay.opening .dlg { animation: modal-pop .35s cubic-bezier(.2, .9, .3, 1.1); }
.dlg-title { margin: 0; font-size: 18px; font-family: var(--head); }
.dlg-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
/* выбор из нескольких вариантов (askChoice): крупные кнопки во всю ширину с пояснением, «Отмена» отдельно */
.dlg-choices { display: grid; gap: 8px; margin-top: 4px; }
.dlg-choice { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer; font: inherit;
  border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--ink); transition: border-color .15s, background .15s, box-shadow .15s; }
.dlg-choice:hover, .dlg-choice:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.dlg-choice.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 6px -1px rgba(var(--accent-rgb), .4); }
.dlg-choice.primary:hover, .dlg-choice.primary:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 0 0 3px var(--accent-soft); }
.dlg-choice-t { font-size: 14.5px; font-weight: 600; }
.dlg-choice-h { font-size: 13px; color: var(--muted); } .dlg-choice.primary .dlg-choice-h { color: rgba(255, 255, 255, .82); }
.dlg-choices + .dlg-actions { margin-top: 0; }
/* правая колонка карточки: статус-шапка и блок «Время» (вариант 1, 2026-10-09) */
.status-form { margin: 0 0 10px; } .status-form .dd { display: block; }
.status-big { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; font: inherit; font-family: var(--head); font-weight: 650; font-size: 16px; padding: 0 14px; height: 40px; border-radius: 12px; cursor: pointer; text-align: left; transition: filter .15s; }
.status-big .dd-value { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.status-big .dot, .status-menu .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.status-big .dd-caret { opacity: .6; flex: none; } .status-big:hover { filter: brightness(.96); } [data-theme="dark"] .status-big:hover { filter: brightness(1.12); }
.status-big.static { cursor: default; margin-bottom: 10px; } .status-big.static:hover { filter: none; }
.status-big.cat-new { background: var(--unknown-bg); color: var(--unknown); } .status-big.cat-new .dot { background: var(--unknown-dot); }
.status-big.cat-in_progress { background: var(--accent-soft); color: var(--accent); } .status-big.cat-in_progress .dot { background: var(--accent); }
.status-big.cat-paused { background: var(--warn-bg); color: var(--warn); } .status-big.cat-paused .dot { background: var(--warn-dot); }
.status-big.cat-done { background: var(--ok-bg); color: var(--ok); } .status-big.cat-done .dot { background: var(--ok-dot); }
.status-menu { width: 100%; } .status-menu .dd-item { font-size: 14px; padding: 8px 10px; }
.status-menu .dot.cat-new { background: var(--unknown-dot); } .status-menu .dot.cat-in_progress { background: var(--accent); } .status-menu .dot.cat-paused { background: var(--warn-dot); } .status-menu .dot.cat-done { background: var(--ok-dot); }
.tblock { display: grid; gap: 8px; padding: 12px 12px 10px; border-radius: 12px; background: rgba(var(--ink-rgb), .035); }
.tblock .prow { grid-template-columns: 72px minmax(0, 1fr); }
.tblock > .spent { margin-bottom: 4px; }
/* верхушка плашки времени: полоса пополам (решение 2026-10-11) */
.tv-top { display: flex; align-items: stretch; margin: -12px -12px 2px; border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; overflow: hidden; }
.tv-top > form { flex: 1 1 0; display: flex; margin: 0; min-width: 0; }
.tv-half { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; min-width: 0; border: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ok); cursor: pointer; padding: 0 10px; white-space: nowrap; transition: background .15s, color .15s; }
.tv-half:hover:not(.off) { background: rgba(var(--ink-rgb), .05); }
.tv-half:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tv-half.off { cursor: default; } .tv-half.tv-r.off { opacity: .45; cursor: not-allowed; }
.tv-half.ghost { color: var(--muted); font-weight: 550; } .tv-half.ghost:hover { color: var(--ink); }
.tv-half b { font-variant-numeric: tabular-nums; font-weight: 700; }
.tv-sep { flex: none; width: 1px; background: var(--border); margin: 9px 0; }
.tv-top.running { gap: 2px; border-bottom: 0; }
.tv-top.running .tv-sep { display: none; }
.tv-top.running .tv-l { background: var(--ok-dot); color: #fff; }
.tv-top.running .tv-l:hover { background: var(--crit-dot); }
.tv-top.running .tv-r { background: rgba(44, 158, 96, .14); }
.tv-top.running .tv-r:hover { background: rgba(44, 158, 96, .22); }
.tblock .btn.small.disabled { opacity: .7; cursor: default; }
.task-props hr.divider { margin: 10px 0; }
.plist.meta .prow { min-height: 20px; }
/* главная: затрекано сегодня */
.tt-list { display: flex; flex-direction: column; margin-top: 10px; }
.tt-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--border); color: var(--ink); font-size: 13.5px; }
.tt-row:hover { text-decoration: none; background: var(--hover-solid); border-radius: 8px; color: var(--ink); }
.tt-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-row.running { color: var(--ok); } [data-theme="dark"] .tt-row.running { color: var(--ok-dot); }
.tt-row .rec, .w-head .live .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-dot); flex: none; animation: rec-blink 1.6s ease-in-out infinite; display: inline-block; }
.w-head .live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* профиль: аватарка */
.profile-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.profile-avatar.initials { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 28px; }
.profile-photo-ctl { display: grid; gap: 6px; }
.file-btn { cursor: pointer; justify-self: start; }
/* цвет полос и сегментов в нагрузке — по приоритету (решение 2026-10-09): блокер красный, критичный оранжевый,
   средний фирменный синий, низкий серо-синий, незначительный серый; просроченная — красная поверх всего */
.gt-bar.p-blocker, .seg.p-blocker, .sub-dot.p-blocker, .sw.p-blocker, .md-seg.p-blocker, .md-dot.p-blocker, .g-seg.p-blocker { background-color: var(--crit-dot); }
.gt-bar.p-critical, .seg.p-critical, .sub-dot.p-critical, .sw.p-critical, .md-seg.p-critical, .md-dot.p-critical, .g-seg.p-critical { background-color: var(--warn-dot); }
.gt-bar.p-medium, .seg.p-medium, .sub-dot.p-medium, .sw.p-medium, .md-seg.p-medium, .md-dot.p-medium, .g-seg.p-medium { background-color: var(--accent); }
.gt-bar.p-low, .seg.p-low, .sub-dot.p-low, .sw.p-low, .md-seg.p-low, .md-dot.p-low, .g-seg.p-low { background-color: var(--info-dot); }
.gt-bar.p-trivial, .seg.p-trivial, .sub-dot.p-trivial, .sw.p-trivial, .md-seg.p-trivial, .md-dot.p-trivial, .g-seg.p-trivial { background-color: var(--unknown-dot); }
/* просрочка — штриховкой поверх цвета приоритета, не красным (решение 2026-10-09) */
.gt-bar.od, .seg.od, .md-seg.od, .g-seg.od { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .32) 0 4px, transparent 4px 9px); }
.od-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); opacity: .75; flex: none; white-space: nowrap; }
.od-flag .od-ico { flex: none; }
.gt-od { display: inline-flex; flex: none; opacity: .9; }
/* закрытые сегодня в нагрузке — как в «Моём дне»: светло-зелёные с галочкой */
.gt-bar.done, .seg.done, .g-seg.done { background: var(--ok-bg) !important; color: var(--ok) !important; box-shadow: inset 0 0 0 1px rgba(44, 158, 96, .35); }
[data-theme="dark"] .gt-bar.done, [data-theme="dark"] .seg.done, [data-theme="dark"] .g-seg.done { background: rgba(44, 158, 96, .16) !important; color: var(--ok-dot) !important; }
.gt-bar.done .key { background: rgba(44, 158, 96, .18); color: inherit; }
.sub-row.done .sub-title { text-decoration: line-through; color: var(--muted); }
.done-flag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ok); white-space: nowrap; }
[data-theme="dark"] .done-flag { color: var(--ok-dot); }
.sw.od-sw { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 4px); }
/* таймлайн задач */
.gt { min-width: calc(300px + var(--days) * 112px); }
.gt-row { display: grid; grid-template-columns: 300px 1fr; align-items: start; border-top: 1px solid var(--border); }
.gt-head { border-top: 0; } .gt-head .gt-person { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.gt-person { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 8px; background: var(--card-solid); min-height: 54px; }
.gt-sum { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; }
.gt-days { display: grid; grid-template-columns: repeat(var(--days), minmax(112px, 1fr)); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.gt-days span { padding: 10px 8px; } .gt-days span.today { background: var(--accent-soft); border-radius: 8px 8px 0 0; }
.gt-track { position: relative; display: grid; grid-template-columns: repeat(var(--days), minmax(112px, 1fr)); grid-auto-rows: minmax(24px, auto); row-gap: 4px; padding: 8px 0 6px; }
.gt-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--days), minmax(112px, 1fr)); pointer-events: none; }
.gt-grid i { border-left: 1px solid var(--border); } .gt-grid i.today { background: var(--accent-soft); }
.gt-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 24px; margin: 0 3px; padding: 0 8px; border-radius: 7px; color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; min-width: 0; }
.gt-bar:hover { text-decoration: none; filter: brightness(1.08); color: #fff; }
.gt-bar .key { background: rgba(255, 255, 255, .25); color: #fff; flex: none; }
.gt-title { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gt-h { margin-left: auto; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.gt-nums { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--days), minmax(112px, 1fr)); text-align: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; align-items: center; }
.gt-num { color: var(--faint); font-weight: 400; } .gt-num.ok { color: var(--ok); } .gt-num.full { color: var(--accent); } .gt-num.over { color: var(--crit); }
[data-theme="dark"] .gt-num.ok { color: var(--ok-dot); }
/* таймлайн: задачи вне нагрузки — строками под полосами, по группам */
.gt-sub-label { position: relative; z-index: 1; grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 6px 8px 0; align-self: end; }
.gt-sub { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; height: 24px; margin: 0 3px; padding: 0 8px; border-radius: 7px; background: rgba(var(--ink-rgb), .05); color: var(--ink); font-size: 12.5px; min-width: 0; }
.gt-sub:hover { text-decoration: none; background: var(--hover-solid); color: var(--ink); }
.gt-sub.unplanned { background: transparent; border: 1px dashed var(--border-strong); color: var(--muted); }
.gt-sub-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-sub-meta { flex: none; white-space: nowrap; } .gt-sub .pill { flex: none; }
/* день: группы списка */
.wl-pd-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 12px 6px 4px; }
.wl-pd-group:first-child { padding-top: 0; }
.sub-row.other { color: var(--muted); } .sub-row.other .sub-title { color: var(--ink); }
.sub-row.unplanned { border-left: 2px dashed var(--border-strong); padding-left: 10px; }
/* день: связка стека и списка по наведению */
.wl-pd .seg, .wl-pd .sub-row, .md [data-task] { transition: opacity .18s ease; }
[data-day-link].dim [data-task]:not(.lit) { opacity: .3; }
.wl-pd.dim .sub-row.lit { background: var(--hover-solid); border-radius: 8px; }
/* фильтры списка задач (ТЗ-05, «строка чипов») */
.flt { margin-bottom: 12px; }
/* шапка списка задач над белым контейнером: вкладки фильтров слева, группировка и список/доска справа */
/* колонка не шире экрана: без minmax(0, …) она раздувалась до ширины строки «вкладки + группировка» и вся страница
   ехала вбок на телефоне (390 px — на 126 px); длинное теперь прокручивается внутри своей полосы */
.fl-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.fl-tabs-wrap { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.fl-tabs { max-width: 100%; box-sizing: border-box; }
.fl-tabs .chip { white-space: nowrap; }
.fl-tabs .chip.saved .star { color: var(--accent); font-size: 12px; margin-right: 2px; }
.fl-view { display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--border-strong); }
.fl-view .fl-dd { margin: 0 0 8px auto; }
/* вкладки видов «Список / Доска / Гант» — подчёркнутые, как разделы страницы (вариант 1, 2026-10-09) */
/* сами вкладки — общий компонент в base.css (.tab / .vt) */
.vt em { font-style: normal; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(var(--ink-rgb), .07); color: var(--muted); }
.vt.on em { background: var(--accent-soft); color: var(--accent); }
/* проект: «О проекте · Список · Доска · Гант» одной строкой в шапке; в шапке списка остаётся только группировка */
.pj-vtabs { border-bottom: 1px solid var(--border-strong); margin: 4px 0 16px; }
/* булавка вкладки проекта (2026-10-20, как в ClickUp): в левом верхнем углу — при наведении на активную вкладку,
   у закреплённых видна всегда; нажатие — закрепить первой или открепить */
.vt-w { position: relative; display: inline-flex; flex: none; }
.vt-pin { position: absolute; top: -3px; left: -3px; z-index: 1; display: none; place-items: center; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 6px; background: var(--card-solid); color: var(--muted); box-shadow: 0 1px 3px rgba(var(--ink-rgb), .2); cursor: pointer; }
.vt-pin:hover { color: var(--accent); }
.vt-pin.on { display: inline-grid; color: var(--accent); background: transparent; box-shadow: none; }
.vt-w:hover > .vt.on + .vt-pin, .vt-pin:focus-visible { display: inline-grid; }
.vt-w.pinned:hover > .vt-pin { background: var(--card-solid); box-shadow: 0 1px 3px rgba(var(--ink-rgb), .2); }
@media (hover: none) { .vt-w > .vt.on + .vt-pin { display: inline-grid; opacity: .75; } }
@media (max-width: 760px) { .vt-pin { top: 0; left: 0; } }   /* там вкладки прокручиваются и обрезали бы выступ */
.fl-view.solo { border-bottom: 0; margin-top: -8px; }
.fl-view.solo .fl-dd { margin-bottom: 0; }
.fl-saved { position: relative; display: inline-flex; }
.fl-saved-x { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%; border: 0; padding: 0; background: var(--card-solid); box-shadow: var(--shadow); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 17px; text-align: center; opacity: 0; transition: opacity .15s; z-index: 1; }
.fl-saved:hover .fl-saved-x, .fl-saved-x:focus-visible { opacity: 1; } .fl-saved-x:hover { color: var(--crit); }
/* в тёмной теме кругляш сливался с фоном — светлее и со светлой обводкой, как у панели массовых действий */
[data-theme=dark] .fl-saved-x { background: #222a3a; color: #c4cbd8; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 4px 10px -2px rgba(0, 0, 0, .6); }
.fl-view .view-tabs { flex: none; }
@media (max-width: 720px) {
  .fl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fl-tabs::-webkit-scrollbar { display: none; }
  .fl-view .fl-dd { flex: 1 1 auto; min-width: 0; }
  .fl-view .fl-tool { width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  /* на телефоне вкладки видов — одни значки: подпись скрыта с экрана, но остаётся для экранного диктора */
  .fl-view .view-tabs .vs-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* разделы проекта не шире экрана: если не влезли — прокручиваются сами, а не вся страница. Линия под вкладками —
     внутри прокрутки (отступ 1px и тень вместо рамки), иначе обрезалась бы подсветка активной вкладки */
  .pj-vtabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 1px; border-bottom: 0;
    box-shadow: inset 0 -1px var(--border-strong); }
  .pj-vtabs::-webkit-scrollbar { display: none; }
}
/* разделы проекта на узком телефоне — без значков: «О проекте · Список · Доска · Гант» влезают в ширину */
@media (max-width: 480px) { .pj-vtabs .vt > svg { display: none; } }
/* главная: «Мой день» без плашки (вариант 1 + кнопка таймера) */
.md { min-width: 0; padding: 4px 2px 0; }
.md-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; } .md-head h2 { margin: 0; font-family: var(--head); font-size: 20px; }
.md-hero { display: grid; gap: 6px; margin-bottom: 16px; }
.md-big { font-family: var(--head); font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.md-big .muted { font-size: .5em; font-weight: 500; } .md-big.over { color: var(--crit); }
.md-sub { font-size: 15px; color: var(--muted); } .md-sub b { color: var(--ink); }
.md .ok-t { color: var(--ok) !important; } [data-theme="dark"] .md .ok-t { color: var(--ok-dot) !important; }
.md-stack { display: flex; gap: 3px; height: 44px; margin-bottom: 14px; }
.md-seg { display: flex; align-items: center; justify-content: center; min-width: 6px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.md-seg:hover { text-decoration: none; filter: brightness(1.08); color: #fff; }
.md-seg.run { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ok-dot); }
/* готовое — серое, как свободное время, но сплошное: полоса дня «пустеет» по мере работы (решение 2026-10-09) */
.md-seg.done { background: rgba(var(--ink-rgb), .06); color: var(--muted); border: 1px solid var(--border-strong); font-weight: 500; }
.md-seg.done:hover { color: var(--ink); filter: none; background: rgba(var(--ink-rgb), .09); }
.md-seg.free { background: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), .06) 0 6px, transparent 6px 12px); color: var(--muted); border: 1px dashed var(--border-strong); font-weight: 500; }
.md-empty { margin: 0 0 10px; }
.md-list { display: flex; flex-direction: column; }
.md-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding: 2px 4px; border-radius: 10px; }
.md-row:first-child { border-top: 0; } .md-row:hover, [data-day-link].dim .md-row.lit { background: var(--hover-solid); }
.md-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 2px; color: var(--ink); font-size: 14px; }
.md-link:hover { text-decoration: none; color: var(--ink); }
.md-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.md-row.run .md-dot { box-shadow: 0 0 0 3px var(--ok-bg), 0 0 0 4.5px var(--ok-dot); }
.md-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ok-dot); color: #fff; font-size: 10px; font-weight: 700; flex: none; }
.md-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-row.done .md-title { text-decoration: line-through; color: var(--muted); }
/* все строки «Моего дня» появляются по очереди сверху вниз (решение 2026-10-09: как раньше у закрытых) */
.md-row { animation: done-pop .5s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(min(var(--i, 0), 14) * 70ms); }
.md-flag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--crit); flex: none; }
.md-flag.run, .md-flag.ok { color: var(--ok); } [data-theme="dark"] .md-flag.run, [data-theme="dark"] .md-flag.ok { color: var(--ok-dot); }
.md-flag.est { color: var(--warn); }
.md-est { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.md-est-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 2px 6px; font-size: 13.5px; }
.md-est-form { margin: 0; } .md-est-in { width: 74px; height: var(--ctl-h-sm, 32px); padding: 0 10px; font-size: 13px; }
.wl-noest { color: var(--warn); font-weight: 600; } .wl-noest.od { color: var(--crit); }
.md-part { width: 56px; height: 5px; border-radius: 3px; background: rgba(var(--ink-rgb), .1); overflow: hidden; flex: none; } .md-part i { display: block; height: 100%; background: var(--ok-dot); }
.md-h { font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.md-timer { margin: 0; flex: none; width: 28px; display: inline-flex; }
.md-play { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.md-play:hover { color: var(--accent); border-color: var(--accent); }
.md-play.off { opacity: .45; cursor: not-allowed; } .md-play.off:hover { color: var(--muted); border-color: var(--border-strong); }
.md-play.on { background: var(--ok-dot); border-color: transparent; color: #fff; } .md-play.on:hover { background: var(--crit-dot); color: #fff; }
/* план дня: люди слева, день справа */
.wl-split { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.wl-list { display: flex; flex-direction: column; gap: 2px; }
.wl-li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); }
.wl-li:hover, .wl-li.active { background: var(--accent-soft); text-decoration: none; color: var(--ink); }
.wl-li-name { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wl-li-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.wl-li-h { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; } .wl-li-h.over { color: var(--crit); }
.wl-pd { min-width: 0; padding: 4px 0; }
.wl-pd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wl-pd-head .wl-who b { font-size: 16px; }
.wl-today { margin-left: auto; font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; } .wl-today.over b { color: var(--crit); }
.stack { display: flex; gap: 3px; height: 40px; margin-bottom: 14px; }
.seg { display: flex; align-items: center; justify-content: center; min-width: 4px; padding: 0 4px; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg:hover { text-decoration: none; filter: brightness(1.08); color: #fff; }
.seg.free { background: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), .06) 0 6px, transparent 6px 12px); color: var(--muted); border: 1px dashed var(--border-strong); font-weight: 500; }
.wl-pd-list { display: flex; flex-direction: column; }
.sub-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-top: 1px solid var(--border); color: var(--ink); font-size: 13.5px; }
/* «Сколько ещё?» у задачи сверх оценки (нагрузка, 2026-10-20): кнопка рядом со строкой, не внутри ссылки */
.wl-more-w { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); }
.wl-more-w .sub-row { flex: 1; min-width: 0; border-top: 0; }
.wl-more { flex: none; height: 26px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.gantt-name .pill { flex: none; }
.wl-more-td { padding: 4px 10px !important; }   /* в «Таблице» кнопка — в ячейке плана, имени тесно */
.gt-sub-w { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 0 3px; min-width: 0; }
.gt-sub-w .gt-sub { flex: 1; margin: 0; }
.gt-sub-w .wl-more { height: 24px; }
.sub-row:hover { text-decoration: none; background: var(--hover-solid); color: var(--ink); border-radius: 8px; }
.sub-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sub-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--unknown-dot); }
.sub-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-meta { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.sub-row.unplanned { color: var(--muted); }
@media (max-width: 900px) { .wl-split { grid-template-columns: 1fr; } }

/* ── Окно задачи: появление и скелетон загрузки ──────── */
.modal-overlay.opening { animation: overlay-in .25s ease; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.modal-overlay.opening .modal-win { animation: modal-pop .5s cubic-bezier(.2, .9, .3, 1.1); }
.modal-overlay.opening.from-point .modal-win { animation: none; }   /* «зум из точки» — в modal.js */
/* «Активные анимации» выключены: окно задачи просто проявляется, без «пружины» */
html[data-motion="calm"] .modal-overlay.opening .modal-win { animation: modal-fade .18s ease; }
@keyframes modal-fade { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
/* «Интерфейс» на вкладке «Оформление» (2026-10-20): строки — подпись слева, выбор справа, как в «Уведомлениях» */
.ap-ui h2 { margin-bottom: 4px; }
.ap-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ap-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ap-row > span { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; } .ap-row > span b { font-weight: 600; }
.ap-row .ap-themes { margin: 0; }
.ob-motion { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; }
/* микроанимации (static/fx.js): перекатывание чисел, «сохранено», искры, чек-лист, «никто не ждёт» */
/* графики до прорисовки (класс ставится в <head>, снимает fx.js): без мигания «готовый график → пусто → рост» */
.fx-pre .tm-bar > * { transform: scaleY(0); }
.fx-pre :is(.tw-spark, .ms-val) { opacity: 0; }
.fx-pre :is(.tw-v > b, .rp-kpi b, .hp-kpi b, .ms-c b) { visibility: hidden; }
.rl { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* перекатывающиеся числа — моноширинные всегда, а не только пока катятся: иначе ширина скакала «до → во время →
   после» и соседи (полоса чек-листа) дёргались влево-вправо (2026-10-19) */
[data-roll] { font-variant-numeric: tabular-nums; }
.rl-c { position: relative; display: inline-block; clip-path: inset(0 -3px); white-space: pre; }
.rl-c > i { display: inline-block; font-style: normal; }
.rl-c > i.rl-abs { position: absolute; left: 0; top: 0; }
.prow { position: relative; }
.fx-saved { position: absolute; right: 2px; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--ok-dot); pointer-events: none; }
.fx-saved path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; }
.fx-spark { position: fixed; z-index: 900; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; }
.chk-i.done .chk-t.chk-strike { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 56% / 100% 1.5px no-repeat content-box; }
.chk-all-ok { flex: none; margin-left: 4px; color: var(--ok-dot); }
.chk-all-ok path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chk-prog.all b { color: var(--ok-dot); }
.wt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 2px; }
.wt-empty p { margin: 6px 0 0; font-size: 13px; }
.wt-cup { fill: var(--card-solid); stroke: var(--muted); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.wt-handle { fill: none; }
.wt-saucer { fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
/* пар над чашкой идёт всегда — медленно и бледно, для живости (2026-10-20); сердечко — только когда только что
   разобрали всё (.live, static/fx.js). Спокойные анимации и «меньше движения» — пар стоит */
.wt-steam { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; opacity: 0; animation: wt-steam 4.8s ease-in-out infinite; }
.wt-steam:nth-of-type(2) { animation-delay: 1.6s; } .wt-steam:nth-of-type(3) { animation-delay: 3.2s; }
.wt-heart { fill: #e86a7e; opacity: 0; transform-origin: 72px 26px; transform-box: view-box; }
.wt-empty.live .wt-heart { animation: wt-heart .45s cubic-bezier(.34, 1.56, .64, 1) .7s both; }
@keyframes wt-steam { 0% { opacity: 0; transform: translateY(5px); } 40% { opacity: .45; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes wt-heart { from { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.15); } to { opacity: 1; transform: none; } }
html[data-motion="calm"] .wt-steam { animation: none; opacity: .3; }
@media (prefers-reduced-motion: reduce) { .wt-steam { animation: none; opacity: .3; } .wt-empty.live .wt-heart { animation: none; opacity: 1; } }
.modal-win:focus { outline: none; }
@keyframes modal-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, rgba(var(--ink-rgb), .07) 25%, rgba(var(--ink-rgb), .14) 50%, rgba(var(--ink-rgb), .07) 75%);
  background-size: 400px 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.sk-line { height: 14px; margin: 8px 0; width: 100%; } .sk-title { height: 30px; margin: 10px 0 16px; width: 75%; border-radius: 10px; }
.sk-block { width: 100%; border-radius: 12px; }
.sk-row { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; min-height: 28px; }
.sk-row .sk-line { margin: 0; }
@media (prefers-reduced-motion: reduce) { .modal-overlay.opening .modal-win, .modal-overlay.opening { animation: none; } }

/* ── Гант (ТЗ-06) ─────────────────────────────────────────────────────────────
   Полосы по CSS-переменным: --s (день от начала шкалы), --n (длина в днях), --dw (ширина дня = масштаб). */
.gx-wrap { position: relative; }
.gx-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.gx-toolbar .gx-scale { margin-right: 6px; }
.gx-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gx-legend .lg { display: inline-block; width: 18px; height: 8px; border-radius: 3px; background: var(--accent); margin: 0 2px 0 10px; }
.gx-legend .lg.k-derived { background: transparent; border: 1.5px dashed var(--accent); box-sizing: border-box; }
.gx-legend .lg.od { background-color: var(--crit-dot); background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .45) 0 3px, transparent 3px 6px); }
.gx-legend .lg.done { background: var(--ok-bg); box-shadow: inset 0 0 0 1px rgba(44, 158, 96, .45); }
.gx-legend .lg.p-blocker { background: var(--crit-dot); } .gx-legend .lg.p-critical { background: var(--warn-dot); }
.gx-legend .lg.p-medium { background: var(--accent); } .gx-legend .lg.p-low { background: var(--info-dot); }
.gx-legend .lg.st-new { background: var(--unknown-dot); } .gx-legend .lg.st-in_progress { background: var(--accent); }
.gx-legend .lg.st-paused { background: var(--warn-dot); }
.gx-legend .lg.mst { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--ms); margin-left: 12px; }
.gx-legend .lg.mst-late { background: transparent; box-shadow: inset 0 0 0 2px var(--crit-dot); }
/* цвет полос: приоритет (по умолчанию) или статус — переключатель «Цвет» в панели ганта, запоминается */
.gx-toolbar .gx-color { align-items: center; margin-right: 6px; } .gx-color-l { padding: 0 4px 0 8px; }
.gx-wrap.color-status .gx-bar.st-new { background-color: var(--unknown-dot); }
.gx-wrap.color-status .gx-bar.st-in_progress { background-color: var(--accent); }
.gx-wrap.color-status .gx-bar.st-paused { background-color: var(--warn-dot); }
/* ключ задачи в ганте — в цвет статуса */
.gx code.key.st-new { background: var(--unknown-bg); color: var(--unknown); }
.gx code.key.st-in_progress { background: var(--accent-soft); color: var(--accent); }
.gx code.key.st-paused { background: var(--warn-bg); color: var(--warn); }
.gx code.key.st-done { background: var(--ok-bg); color: var(--ok); }
.gx { display: grid; grid-template-columns: 440px minmax(0, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card-solid); }
.gx-left { border-right: 1px solid var(--border); min-width: 0; }
.gx-right { overflow-x: auto; min-width: 0; overscroll-behavior-x: contain; }
.gx-canvas { position: relative; width: calc(var(--days) * var(--dw)); }
.gx-lh, .gx-hd { height: 52px; box-sizing: border-box; border-bottom: 1px solid var(--border); }
.gx-lh, .gx-lr { display: grid; grid-template-columns: minmax(0, 1fr) 16px 22px 60px; gap: 8px; align-items: center; padding: 0 12px; }
.gx-lh { align-items: end; padding-bottom: 8px; font-size: 10.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.gx-lr { height: 36px; border-bottom: 1px solid var(--border); box-sizing: border-box; font-size: 13px; }
.gx-lr .t { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: calc(var(--dep, 0) * 20px); }
.gx-title { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); }
.gx-title:hover { text-decoration: none; color: var(--accent); }
.gx-title .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-title .key { flex: none; white-space: nowrap; }
.gx-bar.narrow .gx-bl { display: none; }
.gx-lr.par .tt { font-weight: 600; }
.gx-lr.done .tt { text-decoration: line-through; color: var(--muted); }
.gx-kids { font-size: 11.5px; color: var(--muted); flex: none; }
.gx-chev { width: 16px; flex: none; border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; font-size: 11px; transition: transform .15s; }
.gx-chev.sp { visibility: hidden; }
.gx-chev[aria-expanded="false"] { transform: rotate(-90deg); }
.gx-lr .pr, .gx-lr .who { display: flex; align-items: center; }
.gx-due { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: right; }
.gx-due.crit { color: var(--crit); } .gx-due.chg { color: var(--accent); font-weight: 700; }
.gx-lr.grp, .gx-row.grp { background: rgba(var(--ink-rgb), .035); }
.gx-lr.grp { grid-template-columns: minmax(0, 1fr); font-weight: 600; font-size: 12.5px; }
.gx-lr.grp .t { white-space: nowrap; overflow: hidden; }
.gx-lr.chg { background: var(--accent-soft); }
.gx-lr[hidden], .gx-row[hidden], .gx-bar[hidden], .gx-nod[hidden], .gx-nodate[hidden], .gx-draft[hidden], .gx-tip[hidden] { display: none !important; }
.gx-lr.gx-collapsed, .gx-row.gx-collapsed { display: none; }
.gx-hrow { display: flex; height: 22px; }
.gx-hrow.bottom { height: 29px; }
.gx-seg { flex: none; width: calc(var(--n) * var(--dw)); box-sizing: border-box; overflow: hidden; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.gx-hrow.top .gx-seg { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 8px 0; border-left: 1px solid var(--border); }
.gx-hrow.bottom .gx-seg { text-align: center; line-height: 1.1; padding-top: 2px; font-variant-numeric: tabular-nums; }
.gx-hrow.bottom .gx-seg small { display: block; font-size: 9.5px; opacity: .7; text-transform: uppercase; }
.gx-hrow.bottom .gx-seg.we { color: var(--faint); }
.gx-hrow.bottom .gx-seg.today { color: var(--accent); font-weight: 700; }
.scale-weeks .gx-hrow.bottom .gx-seg, .scale-months .gx-hrow.bottom .gx-seg { border-left: 1px solid var(--border); padding-top: 6px; }
.scale-months .gx-hrow.bottom .gx-seg { padding-top: 8px; }
.gx-body { position: relative; }
.scale-days .gx-body { background-image: repeating-linear-gradient(90deg, transparent 0 calc(5 * var(--dw)), rgba(var(--ink-rgb), .035) calc(5 * var(--dw)) calc(7 * var(--dw))); }
.scale-weeks .gx-body { background-image: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px calc(7 * var(--dw))); }
.gx-row { height: 36px; position: relative; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.gx-row[data-gx-empty] { cursor: crosshair; }
.gx-today { position: absolute; top: 0; bottom: 0; left: calc((var(--s) + .5) * var(--dw) - 1px); width: 2px; background: var(--accent); z-index: 3; pointer-events: none; opacity: .8; }
.gx-sum { position: absolute; top: 16px; height: 4px; border-radius: 2px; background: var(--ink); opacity: .28; left: calc(var(--s) * var(--dw) + 4px); width: max(4px, calc(var(--n) * var(--dw) - 8px)); }
.gx-bar { position: absolute; top: 8px; height: 20px; left: calc(var(--s) * var(--dw) + 2px); width: max(6px, calc(var(--n) * var(--dw) - 4px)); border-radius: 6px; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 20px; padding: 0 8px; box-sizing: border-box; white-space: nowrap; overflow: hidden; z-index: 2; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.gx-bar:hover { text-decoration: none; color: #fff; filter: brightness(1.06); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.gx-bar.locked { cursor: pointer; }
.gx-bar.p-blocker { background-color: var(--crit-dot); } .gx-bar.p-critical { background-color: var(--warn-dot); } .gx-bar.p-medium { background-color: var(--accent); }
.gx-bar.p-low { background-color: var(--info-dot); } .gx-bar.p-trivial { background-color: var(--unknown-dot); }
.gx-bar.od { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .32) 0 4px, transparent 4px 9px); }
.gx-bar.done { background: var(--ok-bg) !important; color: var(--ok); box-shadow: inset 0 0 0 1px rgba(44, 158, 96, .35); }
[data-theme="dark"] .gx-bar.done { background: rgba(44, 158, 96, .16) !important; color: var(--ok-dot); }
.gx-bar.k-derived { background: transparent !important; border: 1.5px dashed var(--accent); color: var(--ink); line-height: 17px; }
.gx-bar.k-derived:hover { color: var(--ink); }
.gx-bar.k-derived.p-blocker { border-color: var(--crit-dot); } .gx-bar.k-derived.p-critical { border-color: var(--warn-dot); }
.gx-bar.k-derived.p-low { border-color: var(--info-dot); } .gx-bar.k-derived.p-trivial { border-color: var(--unknown-dot); }
.gx-bar.sub { top: 10px; height: 16px; line-height: 16px; font-size: 10.5px; }
.gx-bar.sub.k-derived { line-height: 13px; }
.gx-bar .gx-bl { position: relative; pointer-events: none; }
.scale-months .gx-bar .gx-bl, .scale-weeks .gx-bar.sub .gx-bl { display: none; }
.gx-prog { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .9); pointer-events: none; }
.gx-h { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
.gx-h.l { left: 0; } .gx-h.r { right: 0; }
.gx-h::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 2px; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .8); opacity: 0; }
.gx-bar.k-derived .gx-h::after, .gx-bar.done .gx-h::after { background: currentColor; }
.gx-bar:hover .gx-h::after { opacity: 1; }
.gx-dot { position: absolute; top: 50%; right: 9px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .25); cursor: crosshair; opacity: 0; z-index: 3; }
.gx-bar:hover .gx-dot { opacity: 1; }
.scale-months .gx-dot, .scale-months .gx-h { display: none; }
.gx-bar.moved, .gx-bracket.moved { box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--accent); }
.gx-bar.dragging { cursor: grabbing; z-index: 6; opacity: .92; }
.is-dragging, .is-dragging * { cursor: grabbing !important; }
.gx-ghost { position: absolute; top: 8px; height: 20px; left: calc(var(--s) * var(--dw) + 2px); width: max(6px, calc(var(--n) * var(--dw) - 4px)); border: 1.5px dashed rgba(var(--ink-rgb), .3); border-radius: 6px; box-sizing: border-box; z-index: 1; pointer-events: none; }
.gx-delta { position: absolute; top: 0; line-height: 36px; left: calc((var(--s) + var(--n)) * var(--dw) + 6px); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); white-space: nowrap; z-index: 2; pointer-events: none; }
.gx-odf { position: absolute; top: 0; line-height: 36px; left: calc(var(--s) * var(--dw) + 6px); z-index: 2; pointer-events: none; }
.gx-odf .od-flag { color: var(--crit); opacity: 1; }
.gx-row:has(.gx-bar.moved) .gx-odf { display: none; }
.gx-bracket { position: absolute; top: 13px; height: 8px; left: calc(var(--s) * var(--dw) + 2px); width: max(6px, calc(var(--n) * var(--dw) - 4px)); background: rgba(var(--ink-rgb), .18); border-radius: 2px; z-index: 2; cursor: grab; }
.gx-bracket i { display: block; height: 100%; background: var(--ink); opacity: .55; border-radius: 2px; pointer-events: none; }
.gx-bracket::before, .gx-bracket::after { content: ""; position: absolute; bottom: -6px; border-top: 6px solid rgba(var(--ink-rgb), .55); }
.gx-bracket::before { left: 0; border-right: 5px solid transparent; } .gx-bracket::after { right: 0; border-left: 5px solid transparent; }
.gx-bracket.locked { cursor: pointer; }
.gx-nodate { position: sticky; left: 0; display: inline-block; padding: 0 12px; line-height: 36px; font-size: 12px; color: var(--faint); pointer-events: none; }
.gx-lr.nodl, .gx-row.nodrow { background: repeating-linear-gradient(-45deg, rgba(var(--ink-rgb), .025) 0 6px, transparent 6px 12px); }
.gx-nod-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.gx-nod-row { position: sticky; left: 0; display: inline-flex; gap: 8px; align-items: center; height: 100%; padding: 0 10px; white-space: nowrap; z-index: 2; max-width: 100vw; }
.gx-nod { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; background: var(--card-solid); box-shadow: var(--shadow); font-size: 12px; color: var(--ink); cursor: grab; user-select: none; touch-action: none; }
.gx-nod:hover { text-decoration: none; color: var(--ink); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.gx-nod.locked { cursor: pointer; }
.gx-nod .drag { color: var(--faint); } .gx-nod .tt { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.gx-nod-hint { font-size: 12px; color: var(--faint); }
.gx-drag-chip { position: fixed; z-index: 500; pointer-events: none; box-shadow: var(--shadow-lg); opacity: .95; }
.gx-ar { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; overflow: visible; }
.gx-ar path.dep { fill: none; stroke: var(--muted); stroke-width: 1.4; opacity: .75; }
.gx-ar path.dep.chg { stroke: var(--accent); opacity: 1; }
.gx-ar path.dep.late { stroke: var(--crit-dot); opacity: 1; }
.gx-ar path.tmp { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 3; }
.gx-ar marker path { fill: var(--muted); }
.gx-tip { position: fixed; z-index: 400; background: var(--card-solid); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px 10px; font-size: 12.5px; max-width: 320px; pointer-events: none; display: grid; gap: 2px; }
.gx-draft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; }
.gx-draft-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.gx-draft-act { margin-left: auto; display: inline-flex; gap: 8px; }
@media (max-width: 720px) {
  .gx { grid-template-columns: 160px minmax(0, 1fr); }
  .gx-lh, .gx-lr { grid-template-columns: minmax(0, 1fr); padding: 0 8px; }
  .gx-lr .pr, .gx-lr .who, .gx-due, .gx-lh span:not(:first-child), .gx-kids, .gx-legend { display: none; }
  .gx-lr .t { padding-left: calc(var(--dep, 0) * 10px); }
  .gx-title .key { display: none; }
}

/* ── Мгновенные переходы: скелетоны разделов и появление (nav.js) ───────────── */
.skp { animation: skp-in .15s ease both; }
@keyframes skp-in { from { opacity: 0; } to { opacity: 1; } }
.skp-head { margin: 4px 0 18px; } .skp-head .skp-h1 { border-radius: 10px; }
.skp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.skp-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.skp-bar .skp-chips { margin: 0; }
.skp-card { padding: 16px 18px; }
.skp-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px 70px; gap: 16px; align-items: center; border-bottom: 1px solid var(--border); }
.skp-row:last-child { border-bottom: 0; }
.skp-row .sk { margin: 0; }
.skp-home { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; }
.skp-side { display: grid; gap: 14px; align-content: start; } .skp-side .card { padding: 14px 16px; } .skp-side .sk-block { margin-top: 10px; }
.skp-wl { display: grid; grid-template-columns: 34px 160px repeat(5, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.skp-wl:last-child { border-bottom: 0; } .skp-wl .sk { margin: 0; }
.skp-task { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
@media (max-width: 900px) {
  .skp-home, .skp-task { grid-template-columns: 1fr; }
  .skp-row { grid-template-columns: 60px minmax(0, 1fr); } .skp-row .sk:nth-child(n + 3) { display: none; }
  .skp-wl { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); } .skp-wl .sk:nth-child(n + 4) { display: none; }
}
main.page-in { animation: page-in .22s ease; }
@keyframes page-in { from { opacity: .4; } to { opacity: 1; } }
/* появление блоков и строк по очереди — та же кривая, что у «Моего дня»; fill backwards — не мешает наведению */
.rise { animation: rise .45s cubic-bezier(.2, .9, .3, 1.1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.rise.fast { animation-duration: .38s; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise, main.page-in, .skp { animation: none; } }

/* ── Раздел «Проекты» (ТЗ-08) ───────────────────────────────────────────────────── */
/* дерево в левой колонке */
.ptree { display: flex; flex-direction: column; gap: 1px; }
.ptree-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 10px; }
.ptree-title { font-weight: 700; font-size: 15px; color: var(--ink); padding: 2px 4px; border-radius: 7px; }
.ptree-title:hover { text-decoration: none; color: var(--accent); } .ptree-title.sel { color: var(--accent); }
.ptree-add-wrap { position: relative; }
.ptree-add { width: 26px; height: 26px; border-radius: 8px; border: 0; background: rgba(var(--ink-rgb), .06); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; }
.ptree-add:hover { background: var(--accent-soft); color: var(--accent); }
.ptree-menu { position: absolute; right: 0; top: 32px; z-index: 60; display: grid; gap: 2px; min-width: 210px; padding: 6px; background: var(--card-solid); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); }
.ptree-menu[hidden] { display: none; }
.ptree-menu a { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 9px; border-radius: 8px; color: var(--ink); font-size: 13.5px; }
.ptree-menu a:hover { background: var(--accent-soft); text-decoration: none; }
.ptree-search { display: flex; align-items: center; gap: 6px; margin: 0 2px 8px; padding: 0 9px; height: 32px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--muted); }
.ptree-search .input { border: 0; background: transparent; height: 30px; min-height: 30px; padding: 0; font-size: 13px; box-shadow: none; width: 100%; }
.ptree-list { display: flex; flex-direction: column; gap: 1px; }
.ptree-empty { padding: 6px 10px; }
.tr { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px calc(4px + var(--d, 0) * 14px); border-radius: 8px; font-size: 13.5px; color: var(--ink); white-space: nowrap; min-width: 0; }
.tr:hover { background: rgba(var(--ink-rgb), .05); text-decoration: none; color: var(--ink); }
.tr.sel { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tr.path > .tr-n { font-weight: 600; }
.tr.muted-row { color: var(--muted); }
.tr .pj-ico { flex: none; color: var(--muted); } .tr.sel .pj-ico { color: var(--accent); }
.tr-n { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tr-c { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-od { width: 6px; height: 6px; border-radius: 50%; background: var(--crit-dot); flex: none; }
.tr-chev { width: 14px; flex: none; text-align: center; font-size: 10px; color: var(--muted); cursor: pointer; transition: transform .15s; }
.tr-chev[aria-expanded="true"] { transform: rotate(90deg); } .tr-chev.sp { visibility: hidden; }
.tr-kids[hidden], .tr-node[hidden], .ptree-arch[hidden] { display: none; }
/* вкладки дерева «Активные · Мои · Завершённые» (решение 2026-10-11): открытый проект не по вкладке — приглушён */
.ptree-tabs { display: flex; flex-wrap: nowrap; margin: 0 2px 8px; }
.ptree-tabs .chip { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 6px; min-height: 28px; font-size: 12.5px; white-space: nowrap; }
.ptree-tabs .chip .n { margin-left: 2px; }
.tr-node.ghost > .tr { opacity: .55; }
.ptree[data-tab="done"] .tr.muted-row { color: var(--ink); }
.ptree-note { margin: 6px 4px 0; padding: 7px 10px; border-radius: 9px; background: rgba(var(--ink-rgb), .04); font-size: 12px; color: var(--muted); }
.ptree-note[hidden], .ptree-empty[hidden] { display: none; }
.pj-lock { flex: none; color: var(--muted); vertical-align: -1px; }
.ptree-arch-btn { margin-top: 8px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-align: left; padding: 6px 8px; cursor: pointer; border-radius: 8px; }
.ptree-arch-btn:hover { background: rgba(var(--ink-rgb), .05); }
/* шапка, вкладки */
.ph { gap: 10px; justify-content: flex-start; flex-wrap: wrap; } .ph h1 { margin: 0; }
.ph-r { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ptabs { margin-bottom: 16px; } .ptabs .n { font-size: 11.5px; color: var(--muted); margin-left: 4px; font-weight: 600; }
.pj-client { font-size: 12px; color: var(--muted); background: rgba(var(--ink-rgb), .06); padding: 2px 8px; border-radius: 7px; }
a.pj-client-need { color: var(--crit); background: var(--crit-bg); font-weight: 600; text-decoration: none; }   /* у проекта нет клиента */
a.pj-client-need:hover { background: var(--crit-bg-strong); text-decoration: none; }
.pj-client-need { color: var(--crit); font-weight: 600; }
.ps-form { margin: 0; }
/* статус проекта */
.ps { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ps .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ps-plan { background: var(--unknown-bg); color: var(--unknown); } .ps-work { background: var(--accent-soft); color: var(--accent); }
.ps-pause { background: var(--warn-bg); color: var(--warn); } .ps-done { background: var(--ok-bg); color: var(--ok); }
.ps-dd { display: inline-flex; border-radius: 999px; }
.ps-dd .dd-btn { background: transparent; border: 0; color: inherit; font-weight: 600; font-size: 12.5px; min-height: 26px; height: 26px; padding: 0 10px; box-shadow: none; }
.ps-dd .dd-menu { min-width: 170px; }
/* цифры, полоса задач, команда */
.pj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 14px; }
.pj-kpi { display: grid; padding: 10px 14px; border-radius: 12px; background: var(--card-solid); box-shadow: var(--shadow); }
.pj-kpi b { font-size: 20px; font-family: var(--head); font-variant-numeric: tabular-nums; } .pj-kpi span { font-size: 12px; color: var(--muted); }
.pj-stack { display: flex; width: 100%; min-width: 90px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(var(--ink-rgb), .06); gap: 1px; }
.pj-stack i { display: block; height: 100%; } .pj-stack .s0 { background: var(--unknown-dot); opacity: .55; } .pj-stack .s1 { background: var(--accent); }
.pj-stack .s2 { background: var(--warn-dot); } .pj-stack .s3 { background: var(--ok-dot); } .pj-stack .s-none { flex: 1; }
.pj-ct { display: inline-flex; flex-wrap: wrap; gap: 0 8px; } .ct0 { color: var(--muted); } .ct1 { color: var(--accent); } .ct2 { color: var(--warn); } .ct3 { color: var(--ok); }
.pj-ct-line { margin: 6px 0 12px; }
.pj-team { display: inline-flex; align-items: center; } .pj-team .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--card-solid); } .pj-team .av:first-child { margin-left: 0; }
.pj-team .av.more { background: rgba(var(--ink-rgb), .12); color: var(--muted); font-size: 10px; }
/* ссылка-обёртка аватарок — сама flex: иначе внутри неё строка с базовой линией шрифта, и фото (у картинки базовая
   линия — нижний край) поднималось над кнопкой «+ Задача» на пару пикселей, по-разному в разных системах */
.pj-team-link { display: inline-flex; align-items: center; line-height: 0; }
.pj-team-link:hover { text-decoration: none; }
/* группы портфеля и плашки проектов */
.pj-group { display: grid; gap: 8px; margin: 0 0 18px; }
.pj-group-h { display: flex; align-items: center; gap: 8px; padding: 4px 2px; color: var(--ink); flex-wrap: wrap; }
.pj-group-h:hover { text-decoration: none; color: var(--accent); } .pj-group-h.plain { color: var(--muted); }
.pq { display: grid; grid-template-columns: minmax(200px, 1.6fr) 110px minmax(170px, 1.5fr) 74px 60px 82px auto; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--card-solid); box-shadow: var(--shadow); color: var(--ink); border: 1px solid transparent; }
.pq:hover { text-decoration: none; color: var(--ink); border-color: var(--accent); }
.pq-main { display: flex; gap: 8px; align-items: center; min-width: 0; } .pq-main .pj-ico { color: var(--muted); flex: none; }
.pq-name { display: grid; min-width: 0; } .pq-line { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pq-line b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-tasks { display: grid; gap: 4px; min-width: 0; }
.pq-kpi { display: grid; text-align: center; } .pq-kpi b { font-size: 15px; font-variant-numeric: tabular-nums; } .pq-kpi span { font-size: 11px; color: var(--muted); }
.pq-team { display: grid; justify-items: end; gap: 2px; }
/* вложенный портфель — плашка того же веса, что проект, «стопкой листов» (внутри несколько проектов) */
.pq-folder { position: relative; margin-bottom: 6px;
  box-shadow: var(--shadow), 0 5px 0 -1px var(--card-solid), 0 5px 0 0 var(--border-strong), 0 10px 0 -2px var(--card-solid), 0 10px 0 -1px var(--border); }
.pq-folder .pj-ico { color: var(--accent); }
.pq-inside { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
/* «О проекте» / «О портфеле» — раскладка карточки задачи: слева описание и сводка, справа свойства (правка по клику) */
.pj-card .task-main { display: grid; gap: 14px; align-content: start; }
.pj-card .card { margin: 0; } .pj-card h2 { margin: 0 0 10px; font-size: 16px; }
.pj-card h3 { margin: 4px 0 8px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.pj-desc-block { padding: 0 0 4px; }
.pj-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pj-bar-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.pj-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.pj-events li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
.pj-title-form { display: flex; align-items: center; min-width: 0; }   /* звёздочка — по центру названия, а не по строке формы */
.pj-title-form:has([data-title-input]:not([hidden])) { flex: 1 1 420px; }     /* поле правки — во всю ширину, а не по слову */
.pj-title-form .task-title, .pj-title-form textarea.task-title-input { font-size: var(--h1-size, 30px); }
.pj-title-form textarea.task-title-input { width: 100%; margin: 0; }   /* заголовок проекта — блоком и без сдвига влево (.ph h1) */
/* участники в панели свойств: раскрываются под строкой на всю ширину */
.pj-dd .dd-menu { max-height: 320px; overflow-y: auto; }
.pj-new .task-props .pj-dd .dd-btn, .pj-props-panel .pj-dd .dd-btn { max-width: 100%; }
.pj-new-note { margin: 12px 0 0; }
.pj-impact { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.pj-impact li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--ink-rgb), .04); font-size: 13.5px; }
.pj-impact li .muted { margin-left: auto; }
@media (max-width: 1100px) {
  .pq { grid-template-columns: minmax(0, 1fr) auto; } .pq-tasks, .pq-kpi { display: none; }
}
/* «Все проекты» (решение 2026-10-11): вкладки раздела — встроенные и свои (★), строка фильтра, таблица */
.pj-kpi b.crit, .pq-kpi b.crit, .pj-table td.crit { color: var(--crit); }
.pj-ltabs { border-bottom: 1px solid var(--border-strong); margin: 0 0 14px; flex-wrap: wrap; align-items: center; }
.pj-lt-sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 6px; }
.pj-lt-own { position: relative; display: inline-flex; }
/* своя вкладка — фильтр проектов: звёздочка добавляет её в избранное в меню, как чип фильтра задач (2026-10-20); кнопка
   не может быть внутри ссылки — лежит поверх левого края вкладки, у ссылки под неё место */
.pj-lt-own .vt { padding-left: 35px; }
.pj-star { position: absolute; left: 11px; top: calc(50% - 1px); z-index: 1; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px;
  padding: 0; border: 0; border-radius: 5px; background: none; color: var(--faint); cursor: pointer; }
.pj-star svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pj-star:hover { background: rgba(var(--ink-rgb), .07); color: var(--muted); }
.pj-star.on { color: var(--star); } .pj-star.on svg path { fill: currentColor; }
.pj-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 720px) { .pj-lt-own .vt { padding-left: 29px; } .pj-star { left: 6px; } }
.pj-lt-x { position: absolute; top: 2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; background: var(--card-solid); box-shadow: var(--shadow); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 18px; text-align: center; opacity: 0; transition: opacity .15s; z-index: 1; }
.pj-lt-own:hover .pj-lt-x, .pj-lt-x:focus-visible { opacity: 1; } .pj-lt-x:hover { color: var(--crit); }
[data-theme=dark] .pj-lt-x { background: #222a3a; color: #c4cbd8; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 4px 10px -2px rgba(0, 0, 0, .6); }
.pj-flt { padding: 10px 12px; border-radius: 14px; background: var(--card-solid); box-shadow: var(--shadow); }
.pj-flt .fl-count { margin: 8px 2px 0; }
.fl-chip.base { background: rgba(var(--ink-rgb), .06); color: var(--muted); padding: 0 10px; font-weight: 600; cursor: default; }
.pj-flt-r { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.pj-sort .dd-btn { min-height: var(--ctl-h-sm); height: var(--ctl-h-sm); font-size: 13px; min-width: 150px; }
.pj-mode { flex-wrap: nowrap; padding: 3px; } .pj-mode .chip { min-height: 26px; padding: 0 8px; }
.fl-val .fl-n { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ps-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: currentColor; }
.ps-dot.ps-plan { color: var(--unknown-dot); } .ps-dot.ps-work { color: var(--accent); } .ps-dot.ps-pause { color: var(--warn-dot); } .ps-dot.ps-done { color: var(--ok-dot); }
.pj-save { color: var(--accent); }
.pj-table { padding: 6px 8px; }
.pj-table td { padding: 10px 8px; font-size: 13.5px; } .pj-table th { padding: 10px 8px; letter-spacing: .04em; }
.pj-tname { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); min-width: 200px; }
.pj-tname:hover { text-decoration: none; color: var(--accent); } .pj-tname .pj-ico { flex: none; color: var(--muted); margin-top: 2px; }
.pj-tname > span { display: grid; } .pj-tname b { display: inline; }
/* замочек — в конце названия, на той же строке (а не отдельной строкой сетки) */
.pj-tline { min-width: 0; } .pj-tname .pj-lock { margin-left: 5px; vertical-align: -1px; }
.pj-owner { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pj-ttasks { min-width: 100px; } .pj-ttasks .pj-stack { margin-bottom: 3px; }
@media (max-width: 720px) { .pj-flt-r { margin-left: 0; width: 100%; } .pj-sort { flex: 1; } .pj-sort .dd-btn { width: 100%; } }
@media (max-width: 720px) { .pj-split { grid-template-columns: 1fr; } }
/* создание: участники сразу */
.pj-nm-dt { align-self: start; padding-top: 6px; }
.pj-nm-list { display: grid; gap: 2px; margin-bottom: 6px; }
.pj-nm { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 28px; font-size: 13.5px; }
.pj-nm-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-nm .muted { flex: none; white-space: nowrap; }
.pj-nm-x { width: 24px; height: 24px; flex: none; }
.pj-nm-add { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }   /* колонка узкая: человек, под ним роль */
.pj-nm-add .dd-btn { width: 100%; white-space: nowrap; overflow: hidden; }
.pj-nm-add .dd-value { overflow: hidden; text-overflow: ellipsis; }
/* команда в панели свойств: ответственный, заказчики, участники */
.pj-team-row { align-items: start; }
.pj-team-row > .plabel { padding-top: 4px; }
.pj-people { display: grid; gap: 2px; min-width: 0; }
.pj-prow { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 28px; }
.pj-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-prow .icon-btn { width: 24px; height: 24px; flex: none; opacity: .5; } .pj-prow:hover .icon-btn { opacity: 1; }
.pj-padd { margin: 2px 0 0; } .pj-padd .dd-btn { width: 100%; }

/* ── Процессы направления (ТЗ-11, вариант 1): типы слева, колонки категорий со статусами ── */
.wf-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.wf-types { display: grid; gap: 8px; align-content: start; }
.wf-sh { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); padding: 0 4px; }
.wf-tlist { display: grid; gap: 2px; }
.wf-type { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; color: var(--ink); font-size: 14px; }
.wf-type:hover { background: var(--hover-solid); text-decoration: none; }
.wf-type.on { background: var(--accent-soft); } .wf-type.on b { color: var(--accent); }
.wf-type b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-type .wf-n { margin-left: auto; } .wf-type.arch { color: var(--muted); } .wf-type.arch b { font-weight: 500; }
.wf-arch { display: grid; gap: 2px; margin-top: 10px; }
.grip { cursor: grab; color: var(--faint); font-size: 14px; line-height: 1; user-select: none; flex: none; }
.wf-n { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--unknown-dot); }
.wf-dot.c-in_progress { background: var(--accent); } .wf-dot.c-paused { background: var(--warn-dot); } .wf-dot.c-done { background: var(--ok-dot); }
.wf-add { border: 1px dashed var(--border-strong); background: transparent; color: var(--accent); border-radius: 10px; padding: 8px 12px;
  font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.wf-add:hover { border-color: var(--accent); background: var(--accent-soft); } .wf-add.sm { padding: 6px 10px; font-size: 13px; }
.wf-newtype { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--card-solid); }
.wf-newtype[hidden] { display: none; }
.wf-tpls { display: grid; gap: 4px; }
.wf-tpl { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; font-size: 13px; margin: 0; }
.wf-tpl:hover { border-color: var(--accent); } .wf-tpl.on { border-color: var(--accent); background: var(--accent-soft); }
.wf-tpl-c { display: flex; gap: 3px; }
.wf-newtype-act { display: flex; gap: 6px; }
.wf-th { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.wf-th h2 { margin: 0; font-size: 20px; padding: 1px 6px; margin-left: -6px; border-radius: 8px; cursor: text; outline: none; }
.wf-th h2:hover { background: rgba(var(--ink-rgb), .04); } .wf-th h2[contenteditable=true] { background: var(--accent-soft); }
.wf-th-r { margin-left: auto; display: flex; gap: 8px; }
.wf-hint { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.wf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wf-col { background: rgba(var(--ink-rgb), .035); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--unknown-dot); }
.wf-col.c-in_progress { border-color: var(--accent); } .wf-col.c-paused { border-color: var(--warn-dot); } .wf-col.c-done { border-color: var(--ok-dot); }
.wf-ch { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 2px 4px; }
.wf-cards { display: grid; gap: 6px; min-height: 44px; align-content: start; }
.wf-card { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--card-solid); box-shadow: var(--shadow); font-size: 14px; }
.wf-card .wf-name { flex: 1; min-width: 0; overflow-wrap: anywhere; border-radius: 6px; padding: 1px 4px; margin: -1px -4px; outline: none; }
.wf-card .wf-name[contenteditable=true] { background: var(--accent-soft); }
.wf-acts { display: none; gap: 2px; } .wf-card:hover .wf-acts, .wf-card:focus-within .wf-acts { display: inline-flex; }
.wf-card:hover .wf-n { display: none; }
.wf-acts .icon-btn { width: 24px; height: 24px; font-size: 13px; }
.wf-card.new { padding: 4px 6px; } .wf-newin { width: 100%; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; padding: 5px 4px; }
.wf-cards .sortable-ghost { opacity: .35; } .wf-cards .sortable-chosen { box-shadow: var(--shadow-lg); }
.wf-move { display: grid; gap: 4px; max-height: 280px; overflow: auto; }
.wf-mv { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-solid);
  cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); text-align: left; }
.wf-mv .muted { margin-left: auto; } .wf-mv:hover { border-color: var(--accent); } .wf-mv.on { border-color: var(--accent); background: var(--accent-soft); }
.toast.bad { background: var(--crit); }
@media (max-width: 1100px) { .wf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .wf-grid { grid-template-columns: 1fr; } }

/* ── Администрирование → Фоновые задания (планировщик) ── */
.jobs-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jobs-state .dot { width: 9px; height: 9px; color: var(--faint); }
.jobs-state .dot.ok { color: var(--ok-dot); } .jobs-state .dot.crit { color: var(--crit-dot); }
.crit-t { color: var(--crit); }

/* ── Регулярные задачи (ТЗ-12) ── */
/* «↻ Повторять» в попапе дат и панель повтора вместо быстрых вариантов */
.dp-recur-li { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.dp-presets .dp-recur-btn { color: var(--accent); font-weight: 600; }
.dp-presets .dp-recur-btn.on .muted { color: var(--accent); }
.dp-presets .dp-recur-btn:disabled { color: var(--faint); cursor: default; background: none; }
.dp.with-recur { width: 620px; }
.dp.with-recur .dp-body { grid-template-columns: 250px 1fr; align-items: start; }
.rp { display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--border); padding-right: 12px; }
.rp-h { display: flex; align-items: center; gap: 6px; }
.rp-h b { font-size: 14px; }
.rp-back { border: 0; background: none; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; border-radius: 8px; padding: 2px 8px; }
.rp-back:hover { background: var(--hover-solid); color: var(--ink); }
.rp-off { margin-left: auto; color: var(--crit); font-size: 12.5px; }
.rp-dd { position: relative; }
.rp-dd-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--ctl-h-sm, 34px); padding: 0 10px 0 12px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.rp-dd-btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-dd-btn svg { color: var(--muted); flex: none; }
.rp-dd-btn:hover, .rp-dd.open .rp-dd-btn { border-color: var(--accent); }
.rp-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; padding: 4px; border-radius: 10px; background: var(--card-solid);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); max-height: 240px; overflow: auto; }
.rp-opt { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; padding: 7px 10px; border-radius: 7px;
  color: var(--ink); cursor: pointer; white-space: nowrap; }
.rp-opt:hover { background: var(--hover-solid); } .rp-opt.on { color: var(--accent); font-weight: 600; }
.rp-opt .dot { width: 8px; height: 8px; }
.rp-days { display: flex; gap: 3px; }
.rp-day { flex: 1; height: 28px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.rp-day.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.rp-every, .rp-end { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rp-every .rp-dd, .rp-end .rp-dd { flex: 1; }
.rp-num { width: 46px; height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; text-align: center; }
.rp-num.wide { width: 110px; } .rp-num.invalid { border-color: var(--crit); color: var(--crit); }
.rp-hint { margin: -2px 2px 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.rp-ck { display: flex; align-items: center; gap: 9px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); padding: 3px 0; cursor: pointer; text-align: left; }
.rp-ck i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); color: transparent; flex: none; }
.rp-ck.on i { background: var(--accent); border-color: var(--accent); color: #fff; }
.rp-l { font-size: 12px; color: var(--muted); font-weight: 600; margin: 2px 0 -4px; }
.rp-note { margin: 2px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(var(--ink-rgb), .04); font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.rp-acts { display: flex; justify-content: flex-end; gap: 6px; }
@media (max-width: 575px) { .dp.with-recur .dp-body { grid-template-columns: 1fr; } .rp { border: 0; padding: 0; } }

/* строка повтора под датами в карточке */
.rec-row .rec-line { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); line-height: 1.35; }
.rec-row .rec-line svg { flex: none; margin-top: 1px; }
.rec-row .rec-line.wait { color: var(--muted); } .rec-row .rec-line.hold { color: var(--warn); }
/* значок ↻ в списке и на доске */
.rec-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--accent); background: var(--accent-soft); flex: none; vertical-align: -3px; margin-left: 4px; }
.rec-ico svg { width: 11px; height: 11px; }
/* задача процесса (ТЗ-22 §9.1): значок перед названием, «ждёт» — после */
.proc-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--accent); flex: none; vertical-align: -3px; margin-right: 4px; }
.proc-ico svg { width: 14px; height: 14px; }
.lk { display: inline-flex; color: var(--faint); vertical-align: 2px; margin-left: 4px; } .lk svg { width: 13px; height: 13px; }
.lk-wrap { display: inline-flex; align-items: center; gap: 2px; min-width: 0; flex-wrap: wrap; }
h1 .lk svg { width: 16px; height: 16px; }
.proc-plaque, .proc-wait { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.proc-plaque { background: var(--accent-soft); } .proc-plaque .proc-ico { margin: 2px 0 0; }
.proc-plaque a { font-weight: 600; } .proc-plaque-go { margin-left: auto; white-space: nowrap; }
.proc-wait { background: rgba(var(--ink-rgb), .05); color: var(--ink); } .proc-wait-ico { color: var(--muted); margin-top: 2px; } .proc-wait-ico svg { width: 14px; height: 14px; }
.pp-procs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.pp-proc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--card-solid);
  border: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: 13px; }
.pp-proc:hover { border-color: var(--accent); }
.proc-prev { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(var(--ink-rgb), .035); display: grid; gap: 4px;
  grid-template-columns: minmax(0, 1fr); }   /* длинное последнее сообщение не растягивает карточку (телефон) */
.proc-prev-h { margin: 0 2px 2px; }
.proc-prev-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 6px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.proc-prev-row:hover { background: var(--card-solid); } .proc-prev-t { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.proc-prev-q { flex-basis: 100%; padding-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-row.waiting .md-title, .md-row.waiting .key { color: var(--muted); }
.md-wait { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.gx-lock { display: inline-flex; vertical-align: -2px; margin-right: 3px; opacity: .85; } .gx-lock svg { width: 11px; height: 11px; }
.wait-chip { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--muted); background: rgba(var(--ink-rgb), .06); vertical-align: 1px; margin-left: 6px; white-space: nowrap; flex: none; }

/* «Ранее» над обсуждением и вкладка «Повторы» */
.earlier { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; margin-bottom: 14px; border-radius: 10px;
  background: rgba(var(--ink-rgb), .04); font-size: 13px; color: var(--muted); }
.earlier > span { display: inline-flex; align-items: center; gap: 8px; }
.earlier .link-btn.active { box-shadow: none; }
.cycles-table td { vertical-align: middle; }
.cycles-table .cy-cur td { background: var(--accent-soft); }
.cy-now { font-size: 12px; font-weight: 600; color: var(--accent); }
.cy-res { font-size: 12.5px; } .cy-res.ok { color: var(--ok); } .cy-res.late { color: var(--warn); } .cy-res.open { color: var(--muted); } .cy-res.miss { color: var(--crit); }
.over-t { color: var(--crit); }
.cy-more { margin-top: 10px; }
.nowrap { white-space: nowrap; }

/* просмотр прошлого повтора */
.cycle-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .25); }
.cb-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: #fff; flex: none; }
.cb-text { display: grid; gap: 2px; } .cb-text b { font-size: 14px; } .cb-text > span { font-size: 12.5px; color: var(--muted); }
.cb-nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ro-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 12px; color: var(--muted); background: rgba(var(--ink-rgb), .06); padding: 2px 9px; border-radius: 999px; }
.ro-composer { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--muted); font-size: 13px; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
/* прошлые повторы под списком задач (фильтр «Прошлые повторы») */
.past-cycles { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }
.past-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.past-h svg { color: var(--accent); }
.past-table tbody tr { opacity: .85; }
.fl-note { margin: 8px 2px 0; max-width: 240px; }
/* Администрирование → Календарь */
.cal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.cal-head h2 { margin: 0; }
.cal-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.cal-kind { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.cal-kind.off { background: var(--crit-bg); color: var(--crit); } .cal-kind.on { background: var(--ok-bg); color: var(--ok); }
.ask-access { margin: 4px 0 14px; } .ask-access.ok { color: var(--ok); }
.no-access p { max-width: 560px; margin-left: auto; margin-right: auto; } .no-access form { margin: 6px 0 8px; }
/* запрос доступа в шапке задачи и проекта (аудит 2026-10-11) */
.access-req { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px;
  background: var(--warn-bg, rgba(225, 148, 16, .1)); font-size: 13.5px; }
.access-req > span { margin-right: auto; } .access-req form { margin: 0; }
/* исключения на запуск в меню «⋯» карточки (ТЗ-22 §9.3) */
.menu-form { display: grid; gap: 6px; padding: 8px 10px; margin: 0; } .menu-form-l { font-size: 12.5px; font-weight: 600; }
.menu-sep { border: 0; border-top: 1px solid var(--border); margin: 4px 0; } .task-menu .menu-pop:has(.menu-form) { min-width: 290px; }
/* Настройки направления → Состав: добавление и смена роли */
.dv-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.dv-add .pj-dd { min-width: 220px; } .dv-role .pj-dd { max-width: 200px; }
.table-wrap:has(.dd-menu:not([hidden])) { overflow: visible; }   /* открытая выпадашка в строке таблицы не обрезается */

/* ── ТЗ-13: «Завершить», меню «⋯» карточки, корзина, «Отменить» ── */
.task-head { position: relative; }
.task-menu { position: absolute; right: 0; top: 0; z-index: 5; }
.task-menu summary { width: 32px; height: 32px; box-shadow: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 5px; border-radius: 12px; background: var(--card-solid);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); display: grid; }
.menu-item { border: 0; background: none; font: inherit; font-size: 13.5px; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--ink); cursor: pointer; }
.menu-item:hover { background: var(--hover-solid); } .menu-item.danger { color: var(--crit); }
.menu-item[disabled] { opacity: .45; cursor: default; background: none; }
.menu-note { max-width: 240px; padding: 2px 10px 8px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.task-head .task-key { padding-right: calc(44px + var(--pr-w, 0px)); }
/* живая задача (2026-10-20, static/live.js): кто ещё смотрит — глазик и аватарки слева от «⋯», как в Google Документах;
   задача у человека в фоновой вкладке — полупрозрачная аватарка */
.presence { position: absolute; right: 42px; top: 0; z-index: 4; display: flex; align-items: center; gap: 6px; height: 34px; }   /* как «⋯» с рамкой — по её центру */
.pr-eye { flex: none; color: var(--muted); }
/* ключи задач скрыты (2026-10-20, профиль → «Оформление», app/display.py): плашки ключей не показываем; префиксы
   направлений (.prefix) — не ключи, остаются */
html.no-keys code.key:not(.prefix) { display: none !important; }
/* ключи выключены (аудит 2026-10-22, №63): в строке процесса вместо ключа — название шага, в «Передано» — без ссылки */
.key-alt { display: none; }
html.no-keys .key-alt { display: inline; }
html.no-keys .ho-key { display: none; }
.task-head .task-key code.key { white-space: nowrap; }                /* ключ не ломается на дефисе */
@media (max-width: 720px) { .presence .pr-eye { display: none; } }  /* на телефоне места мало — только аватарки */
/* внахлёст (2026-10-20): следующая заходит под предыдущую, вокруг — кольцо цвета фона; левые (смотрят сейчас) —
   сверху, наведённая — поверх всех. Полупрозрачна сама картинка, а подложка сплошная — сосед не просвечивает */
.pr-avs { display: flex; align-items: center; }
.pr-av { position: relative; display: inline-flex; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--paper); transition: transform .15s; }
.pr-av + .pr-av, .pr-avs .pr-more { margin-left: -8px; }
.pr-av:nth-child(1) { z-index: 4; } .pr-av:nth-child(2) { z-index: 3; } .pr-av:nth-child(3) { z-index: 2; } .pr-av:nth-child(4) { z-index: 1; }
.pr-av:hover { z-index: 5; transform: translateY(-2px); }
.pr-av .av { transition: opacity .3s; }
.pr-av.idle .av { opacity: .4; }
.pr-more { position: relative; z-index: 0; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--hover-solid); box-shadow: 0 0 0 2px var(--paper); color: var(--muted); }
/* «печатает» у поля сообщения и мягкое появление нового сообщения */
.typing { display: flex; align-items: center; gap: 6px; min-height: 20px; margin: 2px 0 8px; font-size: 12.5px; color: var(--muted); }
.typing[hidden] { display: none; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: typing-dot 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.msg.live-new { animation: live-msg .3s ease-out; }
.msg.live-new .bubble { animation: live-ring 1.8s ease-out; }
@keyframes live-msg { from { opacity: 0; transform: translateY(6px); } }
@keyframes live-ring { from { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3); } to { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0); } }
html[data-motion="calm"] .typing-dots i, html[data-motion="calm"] .msg.live-new, html[data-motion="calm"] .msg.live-new .bubble { animation: none; }
@media (prefers-reduced-motion: reduce) { .typing-dots i, .msg.live-new, .msg.live-new .bubble { animation: none; } }
.task-deleted { display: block; }
.task-deleted .card { max-width: 560px; margin: 40px auto; text-align: center; }
.pj-deleted { max-width: 640px; margin: 40px auto; } .pj-deleted h1 { font-size: 24px; margin-bottom: 8px; }   /* проект/портфель в корзине */
.pj-deleted form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.toast.undo { display: flex; align-items: center; gap: 12px; }
.toast .undo-btn { border: 0; background: rgba(255, 255, 255, .18); color: inherit; font: inherit; font-weight: 700; padding: 4px 10px; border-radius: 8px; cursor: pointer; }
.toast .undo-btn:hover { background: rgba(255, 255, 255, .3); }

/* ── Служебный статус «Перерыв» (категория break) ── */
.badge.cat-break { background: var(--info-bg); color: var(--info); } .badge.cat-break .dot { background: var(--info-dot); opacity: 1; }
.status-big.cat-break { background: var(--info-bg); color: var(--info); } .status-big.cat-break .dot { background: var(--info-dot); }
.status-menu .dot.cat-break, .fl-dot.cat-break, .sub-dot.cat-break { background: var(--info-dot); }
.gx-legend .lg.st-break, .gx-wrap.color-status .gx-bar.st-break { background-color: var(--info-dot); }
.gx code.key.st-break { background: var(--info-bg); color: var(--info); }
.dd-item.disabled { opacity: .45; cursor: not-allowed; }
/* Процессы → «Таймер обязателен» у типа задачи */
.wf-timer { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--card-solid); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.wf-timer i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); color: transparent; }
.wf-timer.on i { background: var(--accent); border-color: var(--accent); color: #fff; }
.wf-timer:hover { border-color: var(--accent); }
/* сводное уведомление о массовом действии: список задач ссылками */
.nt-tasks { display: grid; gap: 3px; margin-top: 4px; }
.nt-tasks .nt-task { color: inherit; text-decoration: none; border-radius: 6px; padding: 1px 4px; margin-left: -4px; }
.nt-tasks .nt-task:hover { background: var(--hover-solid); }

/* ── Массовые действия в списке (ТЗ-14): галочки и плавающая панель снизу ── */
.td-bk { width: 34px; padding-left: 10px !important; }
.bk-ck { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 5px; border: 1.5px solid var(--border-strong);
  background: var(--card-solid); color: #fff; cursor: pointer; vertical-align: middle; }
.bk-ck svg { display: none; } .bk-ck.on, .bk-ck.mid { background: var(--accent); border-color: var(--accent); }
.bk-ck.on .bk-on, .bk-ck.mid .bk-mid { display: block; }
table.tasks tbody tr .bk-ck { opacity: .35; transition: opacity .12s; }
table.tasks tbody tr:hover .bk-ck, table.tasks tbody tr.bk-sel .bk-ck, table.bk-selecting .bk-ck { opacity: 1; }
table.tasks tbody tr.bk-sel td { background: var(--accent-soft); }
.bk-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 650; display: flex; align-items: center; gap: 2px; padding: 6px;
  border-radius: 14px; background: #1b2230; color: #e8ecf4; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); white-space: nowrap; max-width: calc(100vw - 24px); overflow-x: auto;
  animation: bk-up .22s cubic-bezier(.3, 1.3, .4, 1); }
@keyframes bk-up { from { opacity: 0; transform: translate(-50%, 14px); } }
.bk-count { padding: 0 10px; font-size: 13px; } .bk-count b { font-size: 15px; }
.bk-all { border: 0; background: rgba(255, 255, 255, .1); color: #9cc4ff; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.bk-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, .14); margin: 0 4px; flex: none; }
.bk-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; flex: none; }
.bk-btn:hover, .bk-btn.open { background: rgba(255, 255, 255, .1); }
.bk-btn.ok { color: #6fd39a; } .bk-btn.crit { color: #ff8b78; } .bk-btn.x { padding: 0 9px; }
.bk-pop { position: fixed; z-index: 660; width: 260px; max-height: 60vh; overflow: auto; padding: 6px; border-radius: 12px; background: var(--card-solid);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); display: grid; gap: 1px; }
.bk-h { font-size: 11.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px 4px; }
.bk-opt { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; padding: 7px 8px; border-radius: 8px; color: var(--ink); cursor: pointer; }
.bk-opt:hover { background: var(--hover-solid); } .bk-opt.me { color: var(--accent); font-weight: 600; } .bk-opt.muted { color: var(--muted); }
.bk-opt .dot { width: 8px; height: 8px; border-radius: 50%; }
.bk-opt .dot.cat-new { background: var(--unknown-dot); } .bk-opt .dot.cat-paused { background: var(--warn-dot); } .bk-opt .dot.cat-done { background: var(--ok-dot); }
.bk-search { height: 32px; margin: 2px 4px 4px; font-size: 13px; }
.bk-list { display: grid; gap: 1px; max-height: 260px; overflow: auto; }
.bk-empty, .bk-note { font-size: 11.5px; color: var(--muted); padding: 6px 8px; line-height: 1.35; }
.bk-modes { display: flex; gap: 4px; padding: 2px 4px 6px; }
.bk-mode { flex: 1; height: 28px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.bk-mode.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ── Верхний бар и глобальный поиск (ТЗ-10) ── */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-col > main { margin-top: 24px; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 20px;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--card-solid) 88%, transparent); backdrop-filter: blur(12px); }
.layout.has-ghost .topbar { top: 41px; }
/* справа в верхней панели: идущий таймер и колокольчик в углу (решение 2026-10-11). Колокольчик не двигается, таймер
   появляется слева от него: пилюля растёт на месте 80→100% с отскоком и проявляется, затем волна; при остановке —
   сжимается и гаснет (классы ставит timer.js). */
.topbar-r { position: absolute; right: 16px; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; }
.nav-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.nav-bell:hover, .nav-bell.on { color: var(--ink); background: rgba(var(--ink-rgb), .06); }
/* тема и профиль — рядом с колокольчиком, той же формы (решение 2026-10-11) */
.tb-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.tb-btn:hover { color: var(--ink); background: rgba(var(--ink-rgb), .06); }
details.menu.tb-me summary { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: inline-flex;
  align-items: center; justify-content: center; }
details.menu.tb-me summary:hover, details.menu.tb-me[open] summary { background: rgba(var(--ink-rgb), .06); }
.tb-av { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; display: block; }
.tb-av.initials { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.tb-av.lg { width: 38px; height: 38px; font-size: 15px; }
details.menu.tb-me[open] .tb-av { box-shadow: 0 0 0 2px var(--accent); }
.tb-me-pop { min-width: 250px; z-index: 60; }
.tb-me-h { display: flex; align-items: center; gap: 10px; padding: 8px 9px 10px; margin: 0 0 4px; border-bottom: 1px solid var(--border); }
.tb-me-who { display: grid; min-width: 0; line-height: 1.35; }
.tb-me-who b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-me-who .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-me-pop form { margin: 0; }
.tb-me-i { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 0; border-radius: 8px; background: none; color: var(--ink);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.tb-me-i svg { color: var(--muted); flex: none; }
.tb-me-i:hover { background: var(--hover-solid); text-decoration: none; color: var(--ink); }
.tb-me-i.out:hover, .tb-me-i.out:hover svg { color: var(--crit); background: var(--crit-bg); }
.nav-bell.on, .wt-btn.on { color: var(--accent); background: var(--accent-soft); }   /* окно этой кнопки открыто */
.nt-badge { position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--crit-dot); color: #fff;
  font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--card-solid); pointer-events: none; }
.nt-badge[hidden] { display: none; }
.nav-bell.ring svg { animation: bell-ring .7s ease; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 35% { transform: rotate(-11deg); } 55% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .nav-bell.ring svg { animation: none; } }
.tt-slot { display: flex; }
.tt-slot .tt { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 3px 0 14px; border-radius: 999px;
  overflow: hidden; white-space: nowrap; background: var(--ok-dot); color: #fff; box-shadow: var(--shadow); transition: background .2s; }
.tt-slot .tt:hover { background: #27904f; }
.tt-slot .tt.over { background: var(--crit-dot); } .tt-slot .tt.over:hover { background: #c9402a; }
.tt-slot .tt-fill { position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: rgba(255, 255, 255, .2); transition: width .6s ease; }
.tt-slot .tt-task { display: inline-flex; align-items: center; gap: 8px; color: #fff; padding-right: 4px; }
.tt-slot .tt-task:hover { text-decoration: none; color: #fff; }
.tt-slot .rec { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #fff; animation: rec-blink 1.6s ease-in-out infinite; }
.tt-slot .tt-time { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--head); }
.tt-slot .tt-time .tt-d { display: inline-block; width: .64em; text-align: center; }   /* timer.js mono(): цифры не прыгают */
.tt-slot .key { flex: none; background: rgba(255, 255, 255, .22); color: #fff; }
.tt-stop-form { margin: 0; flex: none; }
.tt-stop { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer; transition: background .15s; }
.tt-stop:hover { background: rgba(255, 255, 255, .25); }
/* призрак: открыта задача с этим таймером — время уже показывает «Стоп» в карточке; пилюля остаётся на месте (панель
   не прыгает), но прозрачная и серая; при наведении — снова обычная, «стоп» работает (решение 2026-10-11) */
.tt-slot .tt, .tt-slot .tt-task, .tt-slot .tt-stop, .tt-slot .key, .tt-slot .tt-fill { transition: background .3s, color .3s, box-shadow .3s, width .6s ease; }
.tt-slot .tt.ghost { --gh: #c9ccd3; --gh-line: #e2e5ea; --gh-soft: rgba(var(--ink-rgb), .035); }    /* светлый, около lightgray */
[data-theme="dark"] .tt-slot .tt.ghost { --gh: rgba(255, 255, 255, .26); --gh-line: rgba(255, 255, 255, .1); --gh-soft: rgba(255, 255, 255, .04); }
.tt-slot .tt.ghost:not(:hover) { background: transparent; color: var(--gh); box-shadow: inset 0 0 0 1px var(--gh-line); }
.tt-slot .tt.ghost:not(:hover) .tt-task, .tt-slot .tt.ghost:not(:hover) .tt-stop { color: var(--gh); }
.tt-slot .tt.ghost:not(:hover) .key { background: var(--gh-soft); color: var(--gh); }
.tt-slot .tt.ghost:not(:hover) .tt-fill { background: var(--gh-soft); }
.tt-slot .tt.ghost:not(:hover) .rec { background: var(--gh); animation: none; }
.tt-slot .tt.ghost.over:not(:hover) { box-shadow: inset 0 0 0 1px rgba(224, 77, 51, .3); color: rgba(224, 77, 51, .55); }
.tt-slot .tt.ghost.over:not(:hover) .tt-task { color: rgba(224, 77, 51, .55); }
.tt-slot .tt.ghost.over:not(:hover) .tt-fill { background: transparent; }
.tt-slot .tt.appear { animation: tt-in .45s cubic-bezier(.34, 1.56, .64, 1) both, tt-pulse 1.1s ease .45s 1; }
.tt-slot .tt.ghost.appear { animation: tt-in .45s cubic-bezier(.34, 1.56, .64, 1) both; }   /* без волны: внимание и так на карточке */
.tt-slot .tt.over.appear:not(.ghost) { animation-name: tt-in, tt-pulse-red; }
/* уходящая копия — в общем ряду на месте пилюли (раньше — абсолютно «у колокольчика», и после перестановки кнопок
   улетала вправо); пустой слот без таймера места не занимает, иначе лишний зазор сдвигал копию */
.tt-ghost { pointer-events: none; }
.tt-slot:not(:has(> .tt)) { display: none; }
.tt-slot .tt.leave { animation: tt-out .28s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes tt-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes tt-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.8); } }
@keyframes tt-pulse { from { box-shadow: var(--shadow), 0 0 0 0 rgba(44, 158, 96, .45); } to { box-shadow: var(--shadow), 0 0 0 12px rgba(44, 158, 96, 0); } }
@keyframes tt-pulse-red { from { box-shadow: var(--shadow), 0 0 0 0 rgba(224, 77, 51, .45); } to { box-shadow: var(--shadow), 0 0 0 12px rgba(224, 77, 51, 0); } }
.search-pill { display: inline-flex; align-items: center; gap: 8px; width: 260px; height: 34px; padding: 0 6px 0 12px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--paper); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.search-pill:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); }
/* подсказка сочетания клавиш — тонкая плоская рамка, как ⌘G у «Создать задачу» (2026-10-14; была «клавиша» с толстым
   низом и белой подложкой) */
.search-pill kbd, .sr kbd { margin-left: auto; font: inherit; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border-strong);
  border-radius: 5px; padding: 1px 6px; background: none; line-height: 1.4; }
/* на телефоне сверху уже липнет шапка с бургером — бар с поиском не липнет, иначе уезжает под неё */
@media (max-width: 991px) { .topbar { height: 48px; position: static; justify-content: flex-start; } .search-pill { width: auto; flex: 1; min-width: 0; max-width: 260px; }
  .topbar-r { position: static; margin-left: auto; padding-left: 8px; } .tt-slot .key { display: none; } .search-pill kbd { display: none; } }

.sr-ov { position: fixed; inset: 0; z-index: 900; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px;
  background: rgba(9, 12, 18, .66); backdrop-filter: blur(6px) saturate(.9); animation: sr-fade .15s; }
.sr-ov[hidden] { display: none; }
/* задача из поиска открыта окном: поиск остаётся под окном (ниже его слоя), затемнение у окна — лёгкое, фон уже затемнил поиск */
.sr-ov.under { z-index: 450; }
html.sr-under .modal-overlay { background: rgba(10, 14, 22, .18); }
html.sr-under[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, .3); }
.sr-seen { width: 16px; height: 16px; flex: none; background: var(--faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes sr-fade { from { opacity: 0; } }
@keyframes sr-rise { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.sr { width: 700px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; }
.sr-in { display: flex; align-items: center; gap: 14px; padding: 0 6px; color: rgba(255, 255, 255, .7); animation: sr-rise .22s cubic-bezier(.3, 1.3, .4, 1); }
.sr-in input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-family: var(--head); font-size: 30px; font-weight: 600;
  letter-spacing: -.01em; color: #fff; outline: none; box-shadow: none; caret-color: #7fb2ff; padding: 0; min-height: 0; }
.sr-in input::placeholder { color: rgba(255, 255, 255, .45); }
.sr-in kbd { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .75); }
.sr-card { background: var(--card-solid); border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  display: flex; flex-direction: column; max-height: 62vh; overflow: hidden; animation: sr-rise .26s .04s cubic-bezier(.3, 1.2, .4, 1) both; }
.sr-chips { display: flex; gap: 4px; padding: 12px 12px 4px; flex-wrap: wrap; }
.sr-chip { border: 0; background: rgba(var(--ink-rgb), .06); color: var(--ink); font: inherit; font-size: 12.5px; height: 28px; padding: 0 12px; border-radius: 999px; cursor: pointer; }
.sr-chip.on { background: var(--ink); color: var(--paper); font-weight: 600; }
.sr-res { overflow: auto; padding: 6px; flex: 1; min-height: 60px; }
.sr-g { display: flex; justify-content: space-between; padding: 10px 10px 4px; font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.sr-g .n { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sr-it { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.sr-it.sel { background: var(--accent-soft); }
.sr-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--ink-rgb), .06); color: var(--muted); }
.sr-ico.av { border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; } .sr-ico.photo, .sr-av.photo { object-fit: cover; padding: 0; }
.sr-ico.action { background: var(--accent-soft); color: var(--accent); } .sr-ico.process { color: var(--accent); }
.sr-ico.ptpl { background: var(--tpl-bg); color: var(--tpl); }
.sr-right kbd { font: 600 11px/1 inherit; padding: 4px 6px; border-radius: 6px; background: rgba(var(--ink-rgb), .06); color: var(--muted); }
.sr-main { min-width: 0; }
.sr-t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.sr-t .key { font-size: 11.5px; }
.sr-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr mark { background: rgba(255, 196, 0, .35); color: inherit; border-radius: 3px; padding: 0 1px; }
.sr-it.done .sr-t { color: var(--muted); }
.sr-right { display: flex; align-items: center; gap: 8px; }
.sr-av { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; }
.sr-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }
.sr-hints { display: flex; gap: 14px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.sr-hints .sp { flex: 1; } .sr-hints kbd { margin: 0 2px 0 0; }
@media (max-width: 575px) {
  .sr-in input { font-size: 22px; } .sr-hints { display: none; }
  /* семь фильтров — одной строкой с прокруткой вбок, а не в два ряда */
  .sr-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .sr-chips::-webkit-scrollbar { display: none; }
  .sr-chip { flex: none; }
}
/* тёмная тема: тёмная панель на тёмном фоне терялась — светлая обводка по периметру */
[data-theme=dark] .bk-bar { background: #222a3a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 40px -12px rgba(0, 0, 0, .7); }
[data-theme=dark] .bk-pop { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), var(--shadow-lg); }
[data-theme=dark] .sr-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 70px -20px rgba(0, 0, 0, .7); }

/* ── Проекты: крупные иконки на плашках и линии вложенности в дереве (решение 2026-10-09) ── */
.pq-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: rgba(var(--ink-rgb), .06); color: var(--muted); }
.pq-ico .pj-ico { width: 22px; height: 22px; color: inherit !important; }
.pq-ico.folder { background: var(--accent-soft); color: var(--accent); }
.pq-main { gap: 12px; }
/* дерево: от раскрытого портфеля вниз — вертикальная линия под его иконкой; путь к открытому — акцентом */
.tr-kids { position: relative; }
/* от центра иконки портфеля (отступ 4 + стрелка 14 + промежуток 6 + половина иконки 7,5), а не от стрелки — у проектов
   стрелки нет, и линия «уезжала» */
.tr-kids::before { content: ""; position: absolute; left: calc(31px + var(--d, 0) * 14px); top: 0; bottom: 6px; width: 1px;
  background: var(--border-strong); border-radius: 1px; pointer-events: none; }
.tr-kids.path::before { background: rgba(var(--accent-rgb), .45); width: 2px; margin-left: -.5px; }
/* открыто окно задачи — панель массовых действий прячется (выделение сохраняется, после закрытия панель вернётся) */
body.modal-open .bk-bar, body.modal-open .bk-pop { display: none !important; }
/* «⋯» карточки — в правом верхнем углу шапки (общее details.menu сильнее простого класса и ставило её в поток) */
.task-head details.task-menu { position: absolute; right: 0; top: 0; }

/* ── Наши выпадашки вместо <select> (select.js) ── */
.sel-native { display: none !important; }
/* множественный выбор с поиском (multiselect.js): отдельная строка поиска (фокус — весь список), чипы выбранного ниже */
.ms { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 6px; }
.ms-field { position: relative; }
.ms-field svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
input.ms-in { width: 100%; padding-left: 32px; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ms-chips[hidden] { display: none; }
.ms-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 10px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: 13px; font-weight: 600; line-height: 22px; }
.ms-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 3px 6px; border-radius: 999px; }
.ms-chip button:hover { background: rgba(var(--ink-rgb), .08); }
.ms-menu { max-width: calc(100vw - 16px); }
.ms-menu .dd-item.on { color: var(--accent); }
.ms-ck { width: 14px; flex: none; color: var(--accent); font-weight: 700; }
.ms-more { padding: 6px 10px; font-size: 12px; color: var(--muted); }
.sel { position: relative; min-width: 0; }
.sel-btn .dd-value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
.sel-btn .dd-value.muted { color: var(--muted); }
.sel-btn:disabled { opacity: .55; cursor: not-allowed; }
.sel.open .sel-btn { border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .14); }
.sel.invalid .sel-btn { border-color: var(--crit); }
.sel-menu { position: fixed; top: 0; left: 0; z-index: 1500; display: flex; flex-direction: column; max-height: 340px;
  max-width: min(440px, calc(100vw - 16px)); }
.sel-list { overflow-y: auto; min-height: 0; }
.sel-menu .dd-item { overflow: hidden; text-overflow: ellipsis; }
.sel-menu .dd-item.muted { color: var(--muted); }
/* поиск прямо в поле: поверх кнопки строка ввода, ниже — совпадения */
.sel.searching .sel-btn .dd-value { visibility: hidden; }
input.sel-q { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 28px 0 10px;
  border: 1px solid var(--accent); border-radius: 9px; background: var(--card-solid); color: var(--ink); font: inherit; font-size: 13.5px;
  box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .14); }
input.sel-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .14); }
input.sel-q::placeholder { color: var(--faint); }
/* люди: аватарки в пунктах и в поле */
.sel-av { width: 20px; height: 20px; font-size: 10px; flex: none; }
.sel-btn .dd-value .sel-av { width: 18px; height: 18px; font-size: 9.5px; margin-right: 6px; vertical-align: middle; position: relative; top: -1px; display: inline-grid; }
.sel-menu .dd-item .sel-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sel-empty { padding: 8px 10px; font-size: 13px; }
.pj-client-hint { display: block; margin-top: 4px; line-height: 1.4; }
.sel-menu .dd-item.sel-create { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border); margin-top: 2px; }

/* ── Чек-листы задачи (ТЗ-17, tasks/_checklists.html, checklists.js) ── */
.chk-block { margin: 0 0 14px; }
.chk-card { padding: 14px 16px 8px; }
.chk-h { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.chk-h h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; } .chk-h h2 svg { color: var(--accent); }
.chk-h .sp, .chk-gh .sp { flex: 1; }
.chk-prog { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* «сделано» — шириной в разряды «всего» (--d): 9 → 10 из 19 не сдвигает полосу */
.chk-prog b { color: var(--ink); font-weight: 650; display: inline-block; min-width: calc(var(--d, 1) * 1ch); text-align: right; }
.chk-bar { display: inline-block; width: 120px; height: 6px; margin-left: 6px; border-radius: 4px; background: rgba(var(--ink-rgb), .09); overflow: hidden; }
.chk-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ok-dot); transition: width .25s; }
.chk-prog.sm .chk-bar { width: 70px; }
.chk-g { border-top: 1px solid var(--border); padding: 6px 0 4px; }
.chk-gh { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.chk-tog { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; transition: transform .15s; }
.chk-tog:hover { background: var(--hover-solid); }
.chk-g.closed .chk-tog { transform: rotate(-90deg); } .chk-g.closed .chk-items { display: none; }
.chk-name { font-weight: 650; font-size: 14px; padding: 1px 4px; border-radius: 5px; outline: none; min-width: 0; overflow-wrap: anywhere; }
.chk-name[data-chk-edit] { cursor: text; } .chk-name[data-chk-edit]:hover { background: rgba(var(--accent-rgb), .08); }
.chk-name[contenteditable=true], .chk-t[contenteditable=true] { background: var(--card-solid); box-shadow: 0 0 0 2px var(--accent-soft); cursor: text; }
.chk-gdel { opacity: 0; transition: opacity .15s; } .chk-gh:hover .chk-gdel, .chk-gdel:focus-visible { opacity: 1; } .chk-gdel:hover { color: var(--crit); }
.chk-items { list-style: none; margin: 0; padding: 0 0 2px; }
.chk-i { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 6px; border-radius: 8px; font-size: 14px; }
.chk-i:hover { background: var(--hover-solid); }
.chk-grip { display: inline-grid; color: var(--faint); cursor: grab; opacity: 0; flex: none; }
.chk-i:hover .chk-grip, .chk-gh:hover .chk-ggrip { opacity: 1; }
.chk-ck { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--card-solid); color: #fff; cursor: pointer; }
.chk-ck svg { display: none; } .chk-ck.on { background: var(--ok-dot); border-color: var(--ok-dot); } .chk-ck.on svg { display: block; }
.chk-ck:hover { border-color: var(--ok-dot); } .chk-ck:disabled { cursor: default; }
.chk-ck:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.chk-t { flex: 1; min-width: 0; padding: 1px 3px; border-radius: 4px; outline: none; overflow-wrap: anywhere; }
.chk-t[data-chk-edit] { cursor: text; }
.chk-i.done .chk-t { color: var(--faint); text-decoration: line-through; }
.chk-x { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); font-size: 16px; cursor: pointer; opacity: 0; }
.chk-i:hover .chk-x, .chk-x:focus-visible { opacity: 1; } .chk-x:hover { color: var(--crit); background: rgba(var(--ink-rgb), .07); }
.chk-add:hover { background: none; } .chk-plus { width: 18px; margin-left: 21px; text-align: center; font-size: 17px; color: var(--faint); flex: none; }
input.chk-in { flex: 1; min-width: 0; height: 28px; min-height: 28px; padding: 0 3px; border: 0; background: transparent; font-size: 14px; box-shadow: none; }
input.chk-in:focus { box-shadow: none; background: var(--card-solid); }
.chk-start { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; margin: -2px 0 0 -10px; border: 0; border-radius: 9px; background: none;
  color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.chk-start:hover { color: var(--accent); background: var(--accent-soft); } .chk-start svg { color: currentColor; }
.sortable-ghost.chk-i, .sortable-ghost.chk-g { opacity: .4; }
@media (hover: none) { .chk-grip, .chk-x, .chk-gdel { opacity: 1; } }
/* значок в списке и на доске: «☑ 2/8», все отмечены — зелёный */
.chk-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: rgba(var(--ink-rgb), .06);
  color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; vertical-align: 1px; }
.chk-chip b { color: var(--ink); font-weight: 650; } .chk-chip svg { width: 12px; height: 12px; }
.chk-chip.full { background: var(--ok-bg); color: var(--ok); } .chk-chip.full b { color: var(--ok); }

/* ── Новая задача (вариант 5, tasks/new.html, taskform.js) ── */
.task-new .tn-main { padding: 18px 22px 0; }
.tn-top { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.tn-draft { margin-left: auto; font-size: 12.5px; color: var(--ok); } .tn-draft.restored { color: var(--muted); }
textarea.tn-title-in { display: block; width: 100%; min-height: 0; margin: 8px 0 4px; padding: 0; border: 0; resize: none; overflow: hidden; background: transparent;
  box-shadow: none; font-family: var(--head); font-size: 26px; font-weight: 650; line-height: 1.25; color: var(--ink); }
textarea.tn-title-in:focus { box-shadow: none; } textarea.tn-title-in::placeholder { color: var(--faint); }
.tn-title { margin-bottom: 12px; }
/* «SM ::» в начале первой строки поля названия; отступ первой строки = ширина приставки (static/tasks.js) */
.tn-tt { position: relative; }
.tn-pre { position: absolute; left: 0; top: 8px; z-index: 1; pointer-events: none; color: var(--ink);
  font-family: var(--head); font-size: 26px; font-weight: 650; line-height: 1.25; }
.qk-title .tn-pre { font-size: 21px; top: 6px; }
.tn-sec-h { font-weight: 650; font-size: 14px; margin: 0 0 6px; }
.tn-chk { margin: 12px 0 0; padding: 4px 10px 2px; border-radius: 12px; background: rgba(var(--ink-rgb), .03); }
.tn-chk .chk-plus { margin-left: 0; } .tn-chk .chk-ck { cursor: default; } .tn-chk .chk-gdel { opacity: .7; }
.tn-adds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 10px 0 6px 10px; }
.tn-adds .file-block { flex-basis: 100%; }
.tn-foot { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px -22px 0; padding: 12px 22px;
  border-top: 1px solid var(--border); background: var(--card-solid); border-radius: 0 0 var(--radius) var(--radius); }
.tn-foot .sp { flex: 1; } .tn-kbd { white-space: nowrap; }
.tn-side { padding: 10px 16px 12px; }
.tn-grp { padding: 8px 0 8px; border-bottom: 1px solid var(--border); } .tn-grp:last-of-type { border-bottom: 0; }
.tn-grp-h { margin: 2px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.tn-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; }
.tn-row.tn-sub { margin-top: -4px; } .tn-row.wl-hint-row:has(.tn-v:empty) { display: none; }
.tn-l { color: var(--muted); } .tn-v { min-width: 0; }
.tn-v .prop-select, .tn-v .prop-input, .tn-v .dd-btn, .tn-v .dates-btn { min-height: 32px; height: 32px; font-size: 13.5px; }
.tn-author { margin-top: 8px; }
.req { color: var(--crit); font-style: normal; margin-left: 2px; }
.f-err { display: block; margin-top: 4px; font-size: 12.5px; color: var(--crit); font-weight: 500; }
.has-err .sel-btn, .has-err input.prop-input, .has-err .dates-btn { border-color: var(--crit); }
.tn-title.has-err textarea.tn-title-in::placeholder { color: var(--crit); }
.tn-recur { font-size: 13.5px; }
.nav-kbd { margin-left: auto; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .45); font: inherit; font-size: 11px; font-weight: 600; opacity: .85; }

/* ── Быстрое окно создания (⌘G / Ctrl+G, tasks/_quick.html, quick.js) — по макету: чипы вместо полей ──
   Слой 690: выше окна задачи (500) и панели выделения (660), ниже календаря (700), диалогов (800) и меню (1500). */
.qk-ov { position: fixed; inset: 0; z-index: 690; display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 16px;
  background: rgba(10, 14, 22, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); overflow-y: auto; }
.qk-ov[hidden] { display: none; }
[data-theme="dark"] .qk-ov { background: rgba(0, 0, 0, .6); }
.qk-ov.opening { animation: overlay-in .25s ease; } .qk-ov.opening .qk-box { animation: modal-pop .5s cubic-bezier(.2, .9, .3, 1.1); }
html.qk-open .bk-bar, html.qk-open .bk-pop { display: none; }
.qk-box { width: min(680px, 100%); }
.qk-form { position: relative; padding: 14px 20px 0; border-radius: 16px; background: var(--card-solid); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.qk-form.qk-done { pointer-events: none; }           /* задача создана — пока идёт «световой контур», второй раз не нажать */
/* «Световой контур» (quick.js): свет в цветах логотипа один раз обегает край окна или шапки задачи; блик по новой
   строке списка и по названию новой задачи; кромка у всплывашки «создана» */
@property --sweep-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sm-sweep { position: absolute; inset: -1px; z-index: 5; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--sweep-a), transparent 0deg 200deg, color-mix(in srgb, var(--accent) 0%, transparent) 210deg, var(--accent) 290deg, var(--second) 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
#task-head > .sm-sweep { inset: -10px -14px; border-radius: 16px; }
tr.just-made, .bcard.just-made { background-image: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 18%, transparent) 40%, color-mix(in srgb, var(--second) 18%, transparent) 60%, transparent);
  background-size: 50% 100%; background-repeat: no-repeat; animation: just-made 1s ease-in-out .15s 1 both; }
@keyframes just-made { from { background-position: -100% 0; } to { background-position: 200% 0; } }
h1.task-title.shim { background: linear-gradient(100deg, var(--ink) 0 38%, var(--accent) 48%, var(--second) 54%, var(--ink) 64% 100%) 115% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shim 1.1s ease-in-out 1; }
@keyframes shim { from { background-position: 115% 0; } to { background-position: -15% 0; } }
.toast.stripe { position: relative; overflow: hidden; }
.toast.stripe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--accent), var(--second)); }
@media (prefers-reduced-motion: reduce) { tr.just-made, .bcard.just-made, h1.task-title.shim { animation: none; background-image: none; color: inherit; } }
[data-theme="dark"] .qk-form { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 60px -20px rgba(0, 0, 0, .8); }
.qk-head { display: flex; align-items: center; gap: 4px; } .qk-head .sp { flex: 1; }
.qk-title textarea.tn-title-in { font-size: 21px; margin: 6px 0 2px; }
.qk-editor { border: 0; box-shadow: none; background: none; }
.qk-editor .editor-body { min-height: 48px; max-height: 180px; overflow-y: auto; padding: 4px 0; border: 0; }
/* чипы: проект, направление, тип, исполнитель, срок, оценка, приоритет */
.qk-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 10px 0 8px; border-top: 1px solid var(--border); }
.qk-row { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; }
.qk-chips .sel, .qk-chips .dd, .qk-chips .dates { width: auto; min-width: 0; }
.qk-chips .dd-btn, .qk-chips .dates-btn, .qk-est { display: inline-flex; align-items: center; gap: 6px; width: auto; max-width: 280px; height: 30px; min-height: 30px;
  padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--card-solid); font-size: 13px; font-weight: 500; color: var(--ink); }
.qk-chips .dd-btn:hover, .qk-chips .dates-btn:hover, .qk-est:hover { border-color: var(--accent); }
.qk-chips .dd-btn .dd-value { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qk-chips .dd-btn:has(.dd-value.muted), .qk-chips .dates-btn:has(.dates-text.muted) { border-style: dashed; }
.qk-chips .dd-btn .dd-value.muted, .qk-chips .dates-text.muted { color: var(--muted); }
.qk-chips .dd-caret { display: none; }
.qk-chip.req .dd-value.muted::after { content: "*"; color: var(--crit); margin-left: 2px; }
.qk-chip::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; opacity: .5;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.qk-ic-project { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.qk-ic-division { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.qk-ic-type { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E"); }
.qk-ic-user:has(.dd-value.muted) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.qk-ic-user:not(:has(.dd-value.muted))::before { display: none; }
.qk-chips .dates-btn svg { color: var(--faint); }
.qk-est svg { color: var(--faint); flex: none; } .qk-est { cursor: text; }
.qk-est input { width: 72px; height: 26px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 13px; }
.qk-est input:focus { box-shadow: none; }
.qk-est:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .14); }
.qk-chips .f-err { font-size: 11.5px; margin: 0; }
.qk-chk { margin: 0 0 8px; }
.qk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px -20px 0; padding: 10px 20px 12px; border-top: 1px solid var(--border); }
.qk-foot .sp { flex: 1; } .qk-foot .chk-start { margin: 0; }
.qk-files { flex-basis: 100%; margin-top: 6px; }

/* ── Файлы задачи плитками (решение 2026-10-11, tasks/_files.html, files.js) ── */
.ft-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ft-head h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; } .ft-head .sp { flex: 1; }
.ft-n { font-size: 12px; font-weight: 600; color: var(--muted); background: rgba(var(--ink-rgb), .07); padding: 1px 7px; border-radius: 999px; }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 120px)); gap: 12px; }
.ft { position: relative; display: grid; gap: 2px; min-width: 0; }
.ft-media { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
  background: rgba(var(--ink-rgb), .035); transition: border-color .15s; }
.ft-media img { width: 100%; height: 100%; object-fit: cover; }
.ft:hover .ft-media { border-color: var(--accent); }
.ft-name { font-size: 12.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-name:hover { color: var(--accent); text-decoration: none; }
.ft-size { font-size: 11.5px; color: var(--muted); }
.ft-acts { position: absolute; top: 6px; right: 6px; display: inline-flex; gap: 1px; padding: 1px; border-radius: 9px; background: var(--card-solid);
  box-shadow: var(--shadow); opacity: 0; transition: opacity .15s; }
.ft-acts .icon-btn { width: 28px; height: 28px; } .ft-acts form { margin: 0; } .ft-del:hover { color: var(--crit); }
.ft:hover .ft-acts, .ft:focus-within .ft-acts { opacity: 1; }
@media (hover: none) { .ft-acts { opacity: 1; } }
/* иконка формата: «листок» в цвете типа */
.fi { position: relative; display: inline-grid; place-items: end center; width: 36px; height: 44px; padding-bottom: 5px; border-radius: 4px 10px 4px 4px;
  background: var(--fc, #7a8399); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.fi[hidden] { display: none; }
.fi-fold { position: absolute; top: 0; right: 0; width: 32%; height: 26%; border-radius: 0 7px 0 5px; background: rgba(255, 255, 255, .45); }
.fi b { color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.fi-pdf { --fc: #e04d33; } .fi-doc { --fc: #2b7de9; } .fi-xls { --fc: #2c9e60; } .fi-ppt { --fc: #e19410; } .fi-zip { --fc: #7a8399; }
.fi-design { --fc: #8b5cf6; } .fi-video { --fc: #db2777; } .fi-audio { --fc: #0891b2; } .fi-img { --fc: #64748b; } .fi-file { --fc: #98a1b6; }
.ft-drop { margin-top: 10px; border-radius: 12px; transition: background .15s, box-shadow .15s; }
.task-files.ft-over { border-radius: 14px; background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.task-files.ft-over .ft-drop .muted { color: var(--accent); }
/* загрузка: плитка появляется сразу — превью из браузера, мерцание и полоска с процентами (files.js) */
.ft-up .ft-media { position: relative; background: linear-gradient(90deg, rgba(var(--ink-rgb), .05) 25%, rgba(var(--ink-rgb), .11) 50%, rgba(var(--ink-rgb), .05) 75%);
  background-size: 400px 100%; animation: shimmer 1.3s linear infinite; }
.ft-up .ft-media img, .ft-up .ft-media .fi { opacity: .6; }
.ft-prog { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 5px; border-radius: 4px; background: rgba(var(--ink-rgb), .14); overflow: hidden; }
.ft-prog i { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--accent); transition: width .2s ease; }
.ft-up .ft-size { color: var(--accent); font-variant-numeric: tabular-nums; }
.ft-failed .ft-media { animation: none; background: var(--crit-bg); border-color: var(--crit); }
.ft-failed .ft-prog { display: none; } .ft-failed .ft-size { color: var(--crit); }

/* ── Картинки в тексте: описание и сообщения (ТЗ-20, inline.js) ── */
.rich img, [data-editor-body] img { max-width: 100%; height: auto; border-radius: 8px; vertical-align: bottom; margin: 2px 0; }
.rich img { cursor: zoom-in; border: 1px solid var(--border); }
[data-editor-body] img { outline: 1px solid var(--border); }
[data-editor-body] img:hover { outline: 2px solid var(--accent); }
img.inl-up { opacity: .55; outline: 2px dashed var(--accent); }
.ci-img { display: inline-block; max-width: 100%; vertical-align: bottom; margin: 4px 0; }
.ci-img img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); cursor: zoom-in; }
.ci-img img:not([width]) { width: min(320px, 100%); }
.inl-handle { position: fixed; z-index: 950; width: 10px; height: 28px; border-radius: 5px; background: var(--accent); border: 2px solid #fff;
  box-shadow: var(--shadow); cursor: ew-resize; }
.inl-handle[hidden] { display: none; }
html.inl-resizing, html.inl-resizing * { cursor: ew-resize !important; user-select: none; }
.composer-foot [data-cmp-emoji] { margin-right: auto; }
.composer-foot .icon-btn:hover, .composer-foot .icon-btn.open { color: var(--accent); background: var(--accent-soft); }   /* не удаление — не красным */   /* скрепка, картинка, эмодзи — слева; подсказка и «Отправить» — справа */

/* файлы к сообщению — плашками (ТЗ-20): под текстом в ленте и под полем до отправки */
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; } .msg-files[hidden] { display: none; }
.msg-files.edit { margin: 6px 0 4px; }
.msg.mine .msg-files { justify-content: flex-end; }
.mf { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; height: 36px; padding: 0 8px 0 5px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--ink); font-size: 13px; text-decoration: none; }
a.mf:hover { border-color: var(--accent); text-decoration: none; }
.mf-th { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex: none; }
.fi.fi-sm { width: 20px; height: 25px; padding-bottom: 3px; border-radius: 3px 6px 3px 3px; } .fi.fi-sm b { font-size: 6.5px; }
.mf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-size { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.mf.up { opacity: .75; } .mf.up .mf-size { color: var(--accent); }
.mf-x { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); font-size: 15px; cursor: pointer; }
.mf-x:hover { color: var(--crit); background: rgba(var(--ink-rgb), .07); }
.bubble:empty { display: none; }
.msg-edit .actions { display: flex; align-items: center; gap: 6px; } .msg-edit .actions [data-cmp-file] { margin-right: auto; }

/* Страница человека (решение 2026-10-11) */
.pp-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; }
.pp-head .av { font-size: 26px; flex: none; }
.pp-who { flex: 1; min-width: 0; } .pp-who h1 { margin: 0 0 2px; }
.pp-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-role { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(var(--ink-rgb), .05); font-size: 12.5px; color: var(--ink); text-decoration: none; }
.pp-role:hover { background: var(--hover-solid); }
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pp-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); color: var(--ink); text-decoration: none; min-width: 0; }
a.pp-stat:hover { border-color: var(--border-strong); }
.pp-stat b { font-size: 24px; line-height: 1.1; } .pp-stat > span:not(.muted):not(.pp-bars) { color: var(--muted); font-size: 12.5px; }
.pp-stat.crit b { color: var(--crit); }
.pp-stat.wide { grid-column: span 2; } .pp-stat.wide a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-week { grid-column: span 2; }
.pp-bars { display: flex; gap: 6px; align-items: flex-end; height: 44px; }
.pp-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.pp-bar i { display: block; width: 100%; max-width: 26px; margin-top: auto; border-radius: 4px 4px 2px 2px; background: var(--accent); min-height: 2px; }
.pp-bar i.lv-none { background: rgba(var(--ink-rgb), .1); } .pp-bar i.lv-full { background: #e19410; } .pp-bar i.lv-over { background: var(--crit); }
.pp-bar em { font-style: normal; font-size: 10.5px; color: var(--muted); }
@media (max-width: 700px) { .pp-stat.wide, .pp-week { grid-column: span 1; } .pp-head { flex-wrap: wrap; } }


/* ── Справка (решение 2026-10-11): дерево разделов слева, статья справа; подсказки по странице — тур (tour.js) ── */
.htree .ht-sec { margin: 0 0 10px; } .htree .ht-sec[hidden], .htree [data-ht-item][hidden], .htree .ht-toc[hidden] { display: none; }
.htree .ht-sh { padding: 6px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.htree .tr { white-space: normal; align-items: flex-start; line-height: 1.35; } .htree .tr .pj-ico { margin-top: 2px; }
.htree .tr-n { white-space: normal; overflow: visible; }
.ht-toc { display: grid; gap: 1px; margin: 2px 0 6px 26px; padding-left: 10px; border-left: 2px solid var(--accent-soft); }
.ht-toc a { padding: 4px 8px; border-radius: 7px; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.ht-toc a:hover { background: rgba(var(--ink-rgb), .05); color: var(--ink); text-decoration: none; }
/* статья */
.hp-page { max-width: 760px; }
.hp-page.wide { max-width: 1040px; }
.hp-title { margin: 6px 0 8px; }
.hp-lead { margin: 0 0 18px; font-size: 15px; color: var(--muted); line-height: 1.55; }
.hp-body { font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.hp-body h2 { margin: 30px 0 10px; font-size: 20px; scroll-margin-top: 70px; }
.hp-body h3 { margin: 22px 0 8px; font-size: 16px; scroll-margin-top: 70px; }
.hp-body p { margin: 0 0 12px; } .hp-body ul, .hp-body ol { margin: 0 0 12px; padding-left: 22px; } .hp-body li { margin: 3px 0; }
.hp-body code { padding: 1px 6px; border-radius: 6px; background: rgba(var(--ink-rgb), .07); font-size: 13px; }
.hp-body pre { padding: 12px 14px; border-radius: 10px; background: rgba(var(--ink-rgb), .05); overflow-x: auto; }
.hp-body figure { margin: 14px 0 18px; }
.hp-body figure img, .hp-body p img { display: block; max-width: 100%; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.hp-body figcaption { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.hp-body hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
.hp-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 14px; line-height: 1.55; }
.hp-table { overflow-x: auto; margin: 0 0 14px; }
.hp-table table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.hp-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border-strong); }
.hp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
/* на телефоне строка таблицы — карточкой (2026-10-20): три колонки в 360 px не помещались, таблица уезжала вбок.
   Первая ячейка — заголовок строки, над остальными — подпись колонки (data-label, helpdoc.render) */
@media (max-width: 640px) {
  .hp-table { overflow: visible; }
  .hp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hp-table table, .hp-table tbody, .hp-table tr, .hp-table td { display: block; }
  .hp-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .hp-table td { padding: 0; border: 0; }
  .hp-table td:first-child { font-size: 14.5px; font-weight: 650; }
  .hp-table td + td { margin-top: 6px; }
  .hp-table td + td:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
}
.hp-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0 10px; }
.hp-pg { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-solid); color: var(--ink); }
.hp-pg small { color: var(--muted); font-size: 12px; } .hp-pg.next { text-align: right; grid-column: 2; }
.hp-pg:hover { border-color: var(--accent); text-decoration: none; color: var(--ink); } .hp-pg:hover b { color: var(--accent); }
/* начало справки */
.hp-search { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 0 22px; padding: 0 14px; height: 46px; border: 1px solid var(--border-strong);
  border-radius: 14px; background: var(--card-solid); color: var(--muted); box-shadow: var(--shadow); }
.hp-search input { flex: 1; border: 0; background: transparent; box-shadow: none; height: 44px; min-height: 0; padding: 0; font-size: 15px; }
.hp-search input:focus { outline: none; box-shadow: none; }
.hp-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .14); }
.hp-found { margin: 0 0 24px; } .hp-found h2 { font-size: 15px; margin: 0 0 8px; }
.hp-hit { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--ink); } .hp-hit:hover { background: rgba(var(--ink-rgb), .05); text-decoration: none; }
.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hp-card { padding: 14px 14px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-solid); box-shadow: var(--shadow); }
.hp-card h2 { margin: 0 0 6px; font-size: 15px; }
.hp-link { display: grid; gap: 1px; padding: 8px 8px; margin: 0 -6px; border-radius: 9px; color: var(--ink); }
.hp-link:hover { background: rgba(var(--ink-rgb), .05); text-decoration: none; } .hp-link:hover b { color: var(--accent); }
/* подсказки по странице — тур (static/tour.js): затемнение с подсветкой элемента и карточка */
.tour-overlay { position: fixed; inset: 0; z-index: 900; transition: background .25s ease; }
.tour-overlay.nospot { background: rgba(10, 14, 28, .58); }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(10, 14, 28, .58); pointer-events: none;
  transition: left .28s cubic-bezier(.3, .8, .25, 1), top .28s cubic-bezier(.3, .8, .25, 1), width .28s cubic-bezier(.3, .8, .25, 1),
  height .28s cubic-bezier(.3, .8, .25, 1); }
.tour-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent); }
.tour-card { position: fixed; z-index: 901; width: 360px; max-width: calc(100vw - 24px); padding: 14px 16px 14px; border-radius: 16px;
  background: var(--card-solid); color: var(--ink); box-shadow: var(--shadow-lg); animation: tour-in .22s ease;
  transition: left .28s cubic-bezier(.3, .8, .25, 1), top .28s cubic-bezier(.3, .8, .25, 1); }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } }
.tour-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--faint); }
.tour-close { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--faint); font: inherit; font-size: 17px; cursor: pointer; }
.tour-close:hover { background: rgba(var(--ink-rgb), .06); color: var(--ink); }
.tour-card h3 { margin: 4px 0 6px; font-size: 16px; }
.tour-card p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.tour-more { display: inline-block; margin: -4px 0 12px; font-size: 13.5px; font-weight: 600; } .tour-more[hidden] { display: none; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-skip { margin-left: auto; border: 0; background: none; color: var(--faint); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 2px; }
.tour-skip:hover { color: var(--ink); } .tour-skip[hidden] { display: none; }
.tour-card.final { text-align: left; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; animation: none; } }
@media (max-width: 720px) { .hp-pager { grid-template-columns: 1fr; } .hp-pg.next { grid-column: 1; } }

/* вехи проекта (решение 2026-10-11): блок в «О проекте» */
.pj-ms-h { display: flex; align-items: baseline; gap: 8px; } .pj-ms-h h2 { margin: 0 0 10px; } .pj-ms-add { margin-left: auto; }
.pj-ms-add[hidden], .pj-ms-new[hidden], .mst-edit[hidden] { display: none; }
.pj-ms-empty { margin: 0; }
.mst-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.mst-form .input { flex: 1 1 220px; min-width: 0; height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); font-size: 13.5px; }
.mst-form .dates-btn { height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); }
.mst-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.pj-ms-h + .mst-row, .pj-ms-new + .mst-row, .form-error + .mst-row { border-top: 0; }
.mst-d { width: 12px; height: 12px; margin-left: 3px; transform: rotate(45deg); border-radius: 2px; background: var(--ms); }
.mst-row.ok .mst-d { background: var(--ok-dot); } .mst-row.late .mst-d { background: var(--crit-dot); }
.mst-row.threat .mst-d { box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--crit-dot); }
.mst-t { display: grid; min-width: 0; } .mst-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst-t small { color: var(--muted); font-size: 12.5px; } .mst-threat { color: var(--crit); font-weight: 600; }
.mst-date { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mst-row.ok .mst-date { color: var(--ok); } .mst-row.late .mst-date { color: var(--crit); }
.mst-acts { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.mst-row:hover .mst-acts, .mst-row:focus-within .mst-acts { opacity: 1; }
@media (hover: none) { .mst-acts { opacity: 1; } }
.mst-prog, .mst-warn, .mst-hint, .mst-edit { grid-column: 2 / -1; }
.mst-prog { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.mst-pb { flex: 1; max-width: 360px; height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb), .08); overflow: hidden; }
.mst-pb i { display: block; height: 100%; background: var(--ms); } .mst-row.ok .mst-pb i { background: var(--ok-dot); }
.mst-warn { font-size: 12.5px; color: var(--crit); background: var(--crit-bg); padding: 4px 9px; border-radius: 8px; }
.mst-warn a { color: inherit; } .mst-warn .key { font-size: 11px; }
.mst-hint { font-size: 12.5px; color: var(--ok); }
.mst-edit .mst-form { margin: 6px 0 0; }
.mst-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 10px; background: var(--ms-bg); color: var(--ms); font-weight: 600; font-size: 12.5px; max-width: 100%; }
.mst-chip i { width: 8px; height: 8px; flex: none; transform: rotate(45deg); border-radius: 1px; background: currentColor; }
.mst-chip.ok { background: var(--ok-bg); color: var(--ok); } .mst-chip.late { background: var(--crit-bg); color: var(--crit); }
.mst-late-note { grid-column: 1 / -1; margin: -2px 0 4px; font-size: 12px; color: var(--crit); }
/* вехи на ганте: ромб в строке проекта (или «Вехи» сверху), пунктир через строки группы — высоту ставит gantt.js */
.gx-ms { position: absolute; top: 0; height: 100%; left: calc((var(--s) + .5) * var(--dw)); display: flex; align-items: center; z-index: 4; color: var(--ms); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.gx-ms.locked { cursor: default; }
.gx-dia { width: 13px; height: 13px; margin-left: -6.5px; transform: rotate(45deg); border-radius: 2px; background: currentColor; box-shadow: 0 0 0 3px var(--card-solid); flex: none; }
.gx-msn { margin-left: 9px; padding: 1px 8px; border-radius: 999px; background: var(--ms-bg); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.gx-ms.ok { color: var(--ok-dot); } .gx-ms.ok .gx-msn { background: var(--ok-bg); color: var(--ok); }
.gx-ms.late, .gx-ms.threat { color: var(--crit-dot); } .gx-ms.late .gx-msn, .gx-ms.threat .gx-msn { background: var(--crit-bg); color: var(--crit); }
.gx-ms.threat .gx-dia { outline: 2px solid var(--crit-dot); outline-offset: 2px; background: var(--ms); }
.gx-ms.moved .gx-dia { box-shadow: 0 0 0 3px var(--card-solid), 0 0 0 5px var(--accent); }
.gx-ms.dragging { cursor: grabbing; }
.gx-msl { position: absolute; top: 0; height: 0; left: calc((var(--s) + .5) * var(--dw) - 1px); border-left: 2px dashed var(--ms); opacity: .55; z-index: 1; pointer-events: none; }
.gx-msl.ok { border-color: var(--ok-dot); } .gx-msl.late, .gx-msl.threat { border-color: var(--crit-dot); }
.gx-ms-h { color: var(--ms); }
.gx-bar.mst-risk { box-shadow: 0 0 0 2px var(--crit-dot); }
.gx-bar.mst-risk.moved { box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--crit-dot); }
.gx-tip-ms { margin-top: 3px; font-size: 12px; color: var(--ms); font-weight: 600; } .gx-tip-ms.late { color: var(--crit); }

/* ── шаблоны задач (ТЗ-30) ── */
/* вход: пилюля той же высоты, что «новая задача», в стиле строки поиска верхней панели */
.tpl-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--card-solid); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, box-shadow .15s; }
.tpl-btn:hover, .tpl-btn.on, .tpl-btn:focus-visible { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.tpl-btn svg { width: 13px; height: 13px; flex: none; }
.qk-head .tpl-btn { margin: 0 4px 0 0; }
@media (max-width: 560px) { .tpl-btn .tpl-btn-l { display: none; } .tpl-btn { padding: 0 6px; } }
.pill.tp, .tpl-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--tpl-bg); color: var(--tpl); font-weight: 650; }
.tpl-badge[hidden] { display: none; }
.tpl-badge svg { width: 12px; height: 12px; flex: none; }
.tpl-badge-x { border: 0; background: none; color: inherit; opacity: .7; cursor: pointer; font: inherit; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.tpl-badge-x:hover { opacity: 1; }
/* меню шаблонов */
.tpl-pop { position: fixed; z-index: 1500; width: 370px; max-width: calc(100vw - 16px); padding: 6px; background: var(--card-solid); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); font-size: 13.5px; }
.tpl-q { width: 100%; box-sizing: border-box; height: 34px; border: 0; border-radius: 10px; background: rgba(var(--ink-rgb), .05); padding: 0 10px; font: inherit; color: var(--ink); margin: 0 0 4px; outline: none; }
.tpl-q:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
.tpl-list { max-height: 340px; overflow-y: auto; }
.tpl-gh { font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding: 9px 9px 4px; }
.tpl-it { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 10px; cursor: pointer; }
.tpl-it.on, .tpl-it:hover { background: var(--accent-soft); }
.tpl-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--tpl-bg); color: var(--tpl); display: grid; place-items: center; }
.tpl-tx { display: grid; min-width: 0; } .tpl-tx b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-tx small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-n { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tpl-ft { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); margin-top: 6px; padding: 9px 9px 4px; font-size: 12.5px; color: var(--faint); }
.tpl-ft a { color: var(--accent); font-weight: 650; }
.tpl-none { padding: 12px 10px; color: var(--muted); font-size: 13px; display: grid; gap: 3px; } .tpl-none b { color: var(--ink); }
/* поля из шаблона — бирюзовые, пока их не поправили руками */
.tpl-filled .sel-btn, .tpl-filled .prop-input, .tpl-filled .dates-btn, .tpl-filled .dd-btn, .tpl-filled.editor .editor-body,
.tpl-filled .qk-chip, .qk-est.tpl-filled, .tpl-filled textarea.tn-title-in { background: var(--tpl-bg); }
.tpl-filled .sel-btn, .tpl-filled .prop-input, .tpl-filled .dates-btn, .tpl-filled .dd-btn, .qk-est.tpl-filled { border-color: rgba(15, 143, 132, .45); }
.tpl-filled textarea.tn-title-in { border-radius: 8px; }
.tn-chk.tpl-filled { border-color: rgba(15, 143, 132, .45); background: var(--tpl-bg); }
.watchers .pill.tpl-filled { background: var(--tpl-bg); color: var(--tpl); }
.tpl-files-new { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; } .tpl-files-new[hidden] { display: none; }
.tpl-ftile { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 18px 28px 8px 10px; border: 1px solid var(--border); border-radius: 11px; font-size: 12.5px; color: var(--ink); }
.tpl-ftile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-ftile em { position: absolute; top: 4px; left: 8px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--tpl); }
.tpl-ftile button { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.tpl-ftile button:hover { color: var(--crit); }
.qk-tpl-files { padding: 0 2px; }
/* редактор */
.tpl-subst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 6px; font-size: 12.5px; color: var(--muted); }
.tpl-subst button { border: 0; cursor: pointer; font: 600 11.5px ui-monospace, Menlo, monospace; padding: 3px 8px; border-radius: 7px; background: var(--tpl-bg); color: var(--tpl); }
.tpl-subst button:hover { box-shadow: 0 0 0 1px var(--tpl); }
.tpl-prev { margin: 0 0 12px; } .tpl-prev[hidden] { display: none; } .tpl-prev b { color: var(--ink); }
.tpl-chks { display: grid; gap: 10px; margin: 10px 0 0; } .tpl-chks:empty { display: none; }
.tpl-chk { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.tpl-chk-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.tpl-chk-name { flex: 1; border: 0; background: transparent; font: inherit; font-weight: 650; color: var(--ink); padding: 2px 0; outline: none; }
.tpl-chk-items { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card-solid); resize: none; min-height: 64px; line-height: 1.55; }
.tpl-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.tpl-file { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 11px; font-size: 12.5px; min-width: 150px; }
.tpl-file-x { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); font-size: 12px; } .tpl-file-x input { margin: 0; accent-color: var(--crit); }
.tpl-off { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tpl-num { width: 52px !important; text-align: center; }
.tn-hint { display: block; margin-top: 4px; line-height: 1.35; }
.tpl-scope { flex-wrap: nowrap; padding: 3px; } .tpl-scope .chip { min-height: 26px; padding: 0 10px; font-size: 12.5px; cursor: pointer; }
/* списки шаблонов */
.tpl-card { margin-top: 4px; }
.tpl-card-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; } .tpl-card-h b { font-size: 15px; } .tpl-card-h .sp { flex: 1; }
.tpl-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tpl-tr { display: grid; grid-template-columns: 30px minmax(0, 1.4fr) minmax(0, 1.1fr) 120px 84px auto; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); font-size: 13.5px; }
.tpl-tr:first-child { border-top: 0; } .tpl-tr:hover { background: var(--hover-solid); }
.tpl-name { display: grid; min-width: 0; } .tpl-name a { color: var(--ink); } .tpl-name a:hover { color: var(--accent); text-decoration: none; }
.tpl-name small { font-size: 12px; } .tpl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-acts { display: inline-flex; gap: 2px; justify-content: flex-end; } .tpl-acts form { margin: 0; display: inline; }
.tpl-empty { padding: 24px; text-align: center; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: 12px; display: grid; gap: 4px; } .tpl-empty b { color: var(--ink); font-size: 15px; }
.hint { margin: 12px 2px 0; }
@media (max-width: 760px) { .tpl-tr { grid-template-columns: 30px minmax(0, 1fr) auto; } .tpl-title, .tpl-div, .tpl-uses { display: none; } }
/* окно «Сохранить как шаблон» */
.tpl-from { width: 470px; max-width: calc(100vw - 32px); }
.tpl-fld { display: grid; gap: 6px; margin: 0 0 14px; font-size: 13px; } .tpl-fld > span:first-child { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.tpl-fld .input.invalid { border-color: var(--crit); }
.tpl-take { font-size: 12.5px; color: var(--muted); background: rgba(var(--ink-rgb), .04); border-radius: 11px; padding: 10px 12px; margin: 0 0 16px; } .tpl-take b { color: var(--ink); }
.tpl-edit .tn-foot > .muted { flex: 1 1 auto; min-width: 0; }
.tpl-chk .tpl-chk-name { border: 0; box-shadow: none; height: auto; min-height: 0; padding: 2px 0; background: transparent; font-size: 14px; }
.tpl-chk .tpl-chk-name:focus { box-shadow: none; }

/* ── меню настроек (решение 2026-10-13): администрирование, профиль, настройки направления — templates/_settings.html ── */
.stg { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: start; }
.stg-nav { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--card-solid);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(var(--ink-rgb), .04); }
.stg-g { font-size: 12px; font-weight: 650; color: var(--faint); padding: 10px 12px 4px; }
.stg-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.stg-i { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px 0 14px; border-radius: 10px;
  color: var(--ink); font-size: 14px; font-weight: 480; transition: background .15s, color .15s; }
.stg-i svg { flex: none; color: var(--muted); }
.stg-i:hover { background: rgba(var(--ink-rgb), .04); text-decoration: none; }
.stg-i.on { background: var(--accent-soft); color: var(--accent); }
.stg-i.on svg { color: var(--accent); }
.stg-i.on::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); }
.stg-l { flex: 1; min-width: 0; }
.stg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.stg-dot.ok { background: var(--ok-dot); } .stg-dot.crit { background: var(--crit-dot); }
.stg-body { min-width: 0; }
.toolbar.stg-h { min-height: var(--ctl-h); margin-bottom: 16px; }
.toolbar.stg-h h2 { margin: 0; font-size: 20px; }
.stg-back { display: inline-block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.stg-back:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 760px) {
  .stg { grid-template-columns: 1fr; gap: 16px; }
  .stg-nav { position: static; flex-direction: row; gap: 6px; overflow-x: auto; padding: 0 0 2px; background: none; border: 0; box-shadow: none;
    scrollbar-width: none; }
  .stg-g, .stg-sep { display: none; }
  .stg-i { flex: none; min-height: var(--ctl-h-sm); padding: 0 12px; border-radius: 999px; background: rgba(var(--ink-rgb), .05); }
  .stg-i.on::before { display: none; }
}
/* «Типы и статусы» внутри меню настроек: места меньше — список типов строкой над редактором, колонкам статусов —
   вся ширина (иначе названия статусов ломаются по буквам) */
.stg .wf-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.stg .wf-tlist, .stg .wf-arch { display: flex; flex-wrap: wrap; gap: 6px; }
.stg .wf-type { border: 1px solid var(--border); background: var(--card-solid); padding: 7px 12px; }
.stg .wf-type.on { border-color: transparent; background: var(--accent-soft); }
.stg .wf-types > .wf-add { justify-self: start; }
.stg .wf-cols { grid-template-columns: repeat(4, minmax(150px, 1fr)); overflow-x: auto; }
.stg .wf-arch .wf-sh { flex-basis: 100%; } .stg .wf-newtype { max-width: 380px; }

/* ── отчёты (ТЗ-33): reports/*.html, диаграммы — app/report_charts.py ── */
.rp-flt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.rp-flt .sp { flex: 1; } .rp-custom { display: inline-flex; gap: 6px; } .rp-custom[hidden] { display: none; }
.rp-views, .rp-seg { display: inline-flex; background: rgba(var(--ink-rgb), .05); border-radius: 999px; padding: 3px; }
.rp-views { margin-left: auto; } .rp-seg { border-radius: 10px; }
.rp-views a, .rp-seg a { padding: 5px 14px; border-radius: 999px; font-size: 13.5px; color: var(--muted); }
.rp-seg a { border-radius: 8px; }
.rp-views a:hover, .rp-seg a:hover { color: var(--ink); text-decoration: none; }
.rp-views a.on, .rp-seg a.on { background: var(--card-solid); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .1); }
.rp-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } .rp-ctl .sp { flex: 1; }
.rp-lbl { font-size: 13px; color: var(--muted); margin: 0; }
.rp-card { padding: 16px 18px; margin-bottom: 16px; }
.rp-note { margin: -4px 0 12px; }
.rp-bar { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 80px; gap: 12px; align-items: center; padding: 4px 0; font-size: 14px; }
.rp-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-bar b { text-align: right; font-weight: 600; }
.rp-bt { display: block; height: 10px; border-radius: 6px; background: rgba(var(--ink-rgb), .06); overflow: hidden; }
.rp-bt i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.rp-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.rp-t th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 700; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rp-t td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.rp-t .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-g td { background: rgba(var(--ink-rgb), .025); font-weight: 600; } .rp-in { padding-left: 34px !important; }
.rp-tg { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 6px 0 0; font-size: 12px; transition: transform .15s; }
.rp-tg[aria-expanded="false"] { transform: rotate(-90deg); }
.rp-tot td { font-weight: 700; border-bottom: 0; }
.rp-ts th.we, .rp-ts td.we { background: rgba(var(--ink-rgb), .04); color: var(--faint); }
.rp-t td.zero { color: var(--crit); }
.rp-heat { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; min-width: 640px; }
.rp-heat th { font-size: 11px; color: var(--faint); font-weight: 500; padding: 0 0 4px; } .rp-heat th.we { color: var(--border-strong); }
.rp-heat thead th:first-child, .rp-heat .rp-hn { width: 150px; } .rp-heat thead th:last-child, .rp-heat .rp-hs { width: 84px; }
.rp-heat td { height: 30px; border-radius: 5px; background: rgba(var(--ink-rgb), .04); }
.rp-heat td.we { background: rgba(var(--ink-rgb), .02); }
.rp-heat td.h1, .rp-hl i.h1 { background: rgba(var(--accent-rgb), .15); } .rp-heat td.h2, .rp-hl i.h2 { background: rgba(var(--accent-rgb), .32); }
.rp-heat td.h3, .rp-hl i.h3 { background: rgba(var(--accent-rgb), .52); } .rp-heat td.h4, .rp-hl i.h4 { background: rgba(var(--accent-rgb), .75); }
.rp-heat .rp-hn { background: none !important; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
.rp-heat .rp-hs { background: none !important; text-align: right; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.rp-hl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.rp-hl i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }
.rp-leg { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.rp-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.rp-pct { display: inline-flex; align-items: center; gap: 8px; } .rp-pct .rp-bt { width: 110px; } .rp-pct b { font-weight: 600; min-width: 40px; }
.rp-pct.low i { background: var(--faint); } .rp-pct.over i { background: var(--crit-dot); } .rp-pct.over b { color: var(--crit); }
.rp-dots { display: inline-flex; gap: 3px; flex-wrap: wrap; max-width: 260px; }
.rp-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent); }
.rp-dots i.full { background: var(--accent); } .rp-dots i.part { background: rgba(var(--accent-rgb), .4); }
.rp-dots i.none { border-color: var(--crit-dot); } .rp-dots i.fut { border-color: var(--border-strong); }
.rc-svg { width: 100%; height: auto; display: block; }
.rc-gl { stroke: var(--border); stroke-width: 1; } .rc-ax { fill: var(--faint); font-size: 11px; } .rc-ax.we { fill: var(--border-strong); }
.rc-we { fill: rgba(var(--ink-rgb), .03); }
.rc-l { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rc-s0 { fill: var(--accent); stroke: var(--accent); background: var(--accent); } .rc-s1 { fill: #7c6fd6; stroke: #7c6fd6; background: #7c6fd6; }
.rc-s2 { fill: var(--ok-dot); stroke: var(--ok-dot); background: var(--ok-dot); } .rc-s3 { fill: var(--warn-dot); stroke: var(--warn-dot); background: var(--warn-dot); }
.rc-s4 { fill: #d96aa7; stroke: #d96aa7; background: #d96aa7; } .rc-s5 { fill: var(--faint); stroke: var(--faint); background: var(--faint); }
polyline.rc-l { fill: none; }
.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rp-kpi { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.rp-kpi span { font-size: 13px; color: var(--muted); } .rp-kpi b { font-size: 26px; font-weight: 700; line-height: 1.2; }
.rp-kpi small { font-size: 12.5px; }
.rp-dev { white-space: nowrap; } .rp-dev.over, .rp-crit { color: var(--crit); } .rp-dev.under { color: var(--warn); }
.rp-ontime.low { color: var(--crit); }
.rp-h3 { font-size: 16px; margin: 6px 0 10px; }
@media (max-width: 760px) { .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-t td:has(> .rp-pct) { white-space: nowrap; }
.rp-ms { font-weight: 550; } .rp-ms.late { color: var(--crit); } .rp-ms.threat { color: var(--warn); }
.rp-port .rp-pct .rp-bt { width: 56px; } .rp-port td:last-child { min-width: 200px; white-space: normal; }
.rp-port th, .rp-port td { padding-left: 8px; padding-right: 8px; }

/* сохранённые отчёты (ТЗ-33): строка в меню отчётов, полоса «Отчёт изменён», окно сохранения */
.stg-row { position: relative; display: flex; align-items: center; }
.stg-row .stg-i { flex: 1; min-width: 0; padding-right: 34px; }
.stg-row .stg-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stg-sh { flex: none; display: inline-flex; color: var(--faint); }
.stg-row .stg-more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .15s; }
.stg-more > summary { width: 26px; height: 26px; }
.stg-row:hover .stg-more, .stg-more[open], .stg-more:focus-within { opacity: 1; }
.stg-row:hover .stg-sh, .stg-row:focus-within .stg-sh { visibility: hidden; }
.stg-more .menu-pop { left: calc(100% + 6px); right: auto; top: -6px; min-width: 230px; }
.stg-more form { margin: 0; }
.sv-sub { margin: -10px 0 12px; font-size: 13px; }
.sv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft);
  font-size: 14px; margin: 0 0 14px; } .sv-bar .sp { flex: 1; } .sv-bar form { margin: 0; }
.sv-dlg { width: 480px; } .sv-form { display: grid; gap: 10px; margin: 0; }
.sv-l { font-size: 13px; font-weight: 600; color: var(--muted); margin: 4px 0 0; }
.sv-what { background: rgba(var(--ink-rgb), .04); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; }
.sv-chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin: 0; } .sv-chk input { margin-top: 3px; }
.sv-scope { display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .sv-scope label { display: flex; gap: 8px; align-items: center; margin: 0; }
/* отступ под панелью фильтров — здесь: общий .fl-bar (task-list.css, подключён позже) обнулял margin у .rp-flt */
.rp-flt.fl-bar { border: 0; padding: 0; background: none; box-shadow: none; margin: 0 0 14px; }
.rp-desc { margin: -6px 0 14px; max-width: 780px; font-size: 13.5px; line-height: 1.5; }
.stg-row { width: 100%; } .stg-nav { z-index: 20; } .stg-more .menu-pop { z-index: 30; }
.menu-pop hr.menu-sep { border: 0; border-top: 1px solid var(--border); margin: 4px 0; height: 0; width: auto; }
.rp-warn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--ink);
  font-size: 14px; margin: 0 0 14px; } .rp-warn svg { flex: none; color: var(--warn); }
.rp-hidden { border-bottom: 1px dashed var(--border-strong); cursor: help; }
.rp-own { margin: -2px 0 14px; }

/* обсуждение прошлого повтора открыто (решение 2026-10-14) */
.msg:target .bubble, .msg.flash .bubble { box-shadow: 0 0 0 3px var(--accent-soft); }
.msg:target { animation: msg-hl 2.4s ease-out; } @keyframes msg-hl { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }
.cy-wait { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.cy-acts { display: inline-flex; gap: 10px; margin-left: auto; } .cy-acts form { margin: 0; display: inline; }
.cycle-view .msg-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cy-compose { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--card-solid); }
.cy-compose textarea { min-height: 72px; resize: vertical; }
.cy-compose-f { display: flex; align-items: center; gap: 12px; } .cy-compose-f .muted { flex: 1; }
.cy-quote { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-left: 3px solid var(--accent); background: rgba(var(--ink-rgb), .04);
  border-radius: 6px; font-size: 13px; } .cy-quote span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cy-past-wait { padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; margin: 0 0 12px; }

/* ── компактные действия задачи (бэклог-34): строка «Прикрепить файлы · Связь с задачей · Чек-лист», панель связи ── */
.ta-row { position: relative; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 2px 0 16px; }
.ta-b { display: inline-flex; align-items: center; gap: 7px; height: var(--ctl-h-sm); padding: 0 10px; border: 0; border-radius: 9px; background: none;
  color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; margin: 0; transition: background .15s, color .15s; }
.ta-b svg { flex: none; opacity: .85; } .ta-b:hover, .ta-b.on { background: rgba(var(--ink-rgb), .06); color: var(--ink); text-decoration: none; }
.ta-pop { position: absolute; top: calc(var(--ctl-h-sm) + 8px); left: 0; z-index: 60; width: min(560px, calc(100vw - 32px)); padding: 14px 16px;
  background: var(--card-solid); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 20, 40, .18); }
.ta-ph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ta-ph .sp { flex: 1; }
.ta-seg { display: inline-flex; background: rgba(var(--ink-rgb), .05); border-radius: 9px; padding: 3px; }
.ta-seg button { border: 0; background: none; font: inherit; font-size: 13.5px; padding: 4px 12px; border-radius: 7px; color: var(--muted); cursor: pointer; }
.ta-seg button.on { background: var(--card-solid); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .12); }
/* подсказка о направлении связи — своей строкой под типом и «Новая · Существующая»: значки «⤢» и «×» остаются
   в первой строке (2026-10-20: переключатель теперь у всех типов, места рядом не хватало) */
.ta-hint { order: 9; flex-basis: 100%; margin: -2px 0 0 2px; }
.ta-hint:empty { display: none; }
.ta-form { margin: 0; display: grid; gap: 10px; } .ta-form[hidden] { display: none; }
.ta-in { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.ta-in svg { flex: none; color: var(--muted); }
.ta-in input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; padding: 4px 0; box-shadow: none; }
.ta-pf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ta-pf .sp { flex: 1; }
.ta-results { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; } .ta-results:empty { display: none; }
.ta-res { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px;
  color: var(--ink); text-align: left; cursor: pointer; } .ta-res:hover { background: rgba(var(--ink-rgb), .04); } .ta-res.on { background: var(--accent-soft); }
.ta-res-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-links.is-empty, .task-files.is-empty:not(.ft-over) { display: none; }
.task-files.is-empty { margin: 0; }
.ln-head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; } .ln-head h2 { margin: 0; font-size: 16px; }
.ln-head .progress { width: 120px; }
.ln-list { display: flex; flex-direction: column; }
.ln-row { position: relative; display: flex; align-items: center; border-radius: 9px; }
.ln-row:hover { background: rgba(var(--ink-rgb), .04); }
.ln-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 40px 7px 8px; color: var(--ink); font-size: 14px; }
.ln-main:hover { text-decoration: none; }
.ln-kind { display: inline-flex; align-items: center; gap: 5px; flex: none; min-width: 104px; font-size: 12.5px; color: var(--muted); }
.ln-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0; opacity: 0; transition: opacity .15s; }
.ln-row:hover .ln-x, .ln-x:focus-within { opacity: 1; }
/* на телефоне вид связи, ключ, статус и исполнитель — первой строкой, название — второй, во всю ширину
   (в одну строку на 390 px от названия оставалась одна буква) */
@media (max-width: 720px) {
  .ln-main { flex-wrap: wrap; gap: 4px 10px; }
  .ln-main .key { margin-right: auto; }
  .ln-title { order: 1; flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
}
.task-links { margin: 0 0 16px; }
/* перетаскивание файлов на всю карточку: плотная подложка с размытием — карточка под ней не читается */
.task-main[data-file-drop] { position: relative; }
.task-main.ft-over::after { content: "Отпустите — файлы прикрепятся к задаче"; position: absolute; inset: -8px; z-index: 70; display: flex; align-items: center;
  justify-content: center; border: 2px dashed var(--accent); border-radius: 18px; background: color-mix(in srgb, var(--card-solid) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--accent); font-size: 17px; font-weight: 650; pointer-events: none; }

/* «Ждут ответа» в верхней панели */
.wt-top { position: relative; display: inline-flex; }
.wt-btn { position: relative; }
.wt-btn .wt-badge { background: var(--accent); }
/* окно — общий компонент .tb-pop (base.css, static/toppop.js); здесь только своё содержимое */
.wt-pop-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wt-pop-body .tb-pop-scroll { padding: 2px 10px 10px; }
.wt-pop-body .badge-n { margin-right: auto; }
.wt-pop-body .tb-pop-head b { margin-right: 0; }
.wt-pop .wt-empty { padding: 18px 0 14px; }

/* настраиваемая главная (бэклог-32) */
.dash-col { display: grid; gap: 16px; align-content: start; min-width: 0; min-height: 60px; }
.dw { position: relative; min-width: 0; }
.dw-ctl { display: none; }
.dash.editing .dw-ctl { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 0 0 6px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; cursor: grab; }
.dash.editing .dw-ctl:active { cursor: grabbing; }
.dw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-b { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border: 0; border-radius: 7px;
  background: none; color: inherit; cursor: pointer; } .dw-b:hover { background: rgba(var(--accent-rgb), .16); }
.dash.editing .dash-col { outline: 2px dashed var(--border-strong); outline-offset: 6px; border-radius: 14px; }
.dash.editing .dw > :not(.dw-ctl) { pointer-events: none; opacity: .75; }
.dw-ghost { opacity: .35; }
/* настройки виджета (2026-10-19): окно у шестерёнки; «Задачи по фильтру» */
.dash-multi { margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--violet-bg); color: var(--violet); }
.dash-new-flt:disabled .dash-multi { background: rgba(var(--ink-rgb), .06); color: var(--muted); }
.wset-pop { position: fixed; z-index: 700; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 14px 16px 12px; border-radius: 16px; background: var(--card-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.wset { display: grid; gap: 12px; margin: 0; }
.wset label { margin-bottom: 0; letter-spacing: normal; }   /* общее правило label (base.css) давало отступ снизу — пункты съезжали вверх */
.wset-h { display: grid; gap: 1px; } .wset-h b { font-size: 15px; }
.wset-f { display: grid; gap: 6px; justify-items: start; }
.wset-f > select, .wset-f > .sel, .wset-f > .input:not(.wset-hours) { width: 100%; }
.wset-l { font-size: 12px; font-weight: 700; color: var(--muted); }
.wset-seg { flex-wrap: wrap; }
.wset-seg label { padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.wset-seg label:hover { color: var(--ink); }
.wset-seg label.on { background: var(--card-solid); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .14); }
.wset-seg label:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent); }
.wset-tog { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 450; color: var(--ink); }
.wset-tog:has(input:focus-visible) .tg { box-shadow: 0 0 0 3px var(--accent-soft); }
.wset-multi { display: grid; gap: 4px; } .wset-chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 450; color: var(--ink); cursor: pointer; }
.wset-hours { width: 90px; height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); }
.wset-none { font-size: 13px; color: var(--muted); }
.wset-err { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--crit-bg); color: var(--crit); font-size: 13px; }
.wset-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.wset-foot .sp { flex: 1; }
.fw .w-head { gap: 8px; }
.hp-oks { margin-top: 10px; display: grid; gap: 4px; } .hp-oks-h { margin-bottom: 2px; } .hp-ok-row { padding: 2px 0; }
.fw-n { padding: 0 7px; border-radius: 999px; background: rgba(var(--ink-rgb), .07); color: var(--muted); font-size: 12px; font-weight: 700; }
.fw-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--violet-bg); color: var(--violet); flex: none; }
.fw-list { display: grid; }
.fw-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto 76px 24px; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: 13.5px; border-radius: 8px; }
.fw-row:first-child { border-top: 0; }
/* строки появляются по очереди сверху вниз — как в «Моём дне» (решение 2026-10-21); тихое обновление — без неё */
.fw-row { animation: done-pop .5s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(min(var(--i, 0), 14) * 70ms); }
.fw-row.fw-still { animation: none; }
.fw-row:hover { background: var(--hover-solid); text-decoration: none; color: var(--ink); }
.fw-row.done .fw-title { color: var(--muted); text-decoration: line-through; }
.fw-key { justify-self: start; }
.fw-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fw-pr { display: inline-flex; flex: none; } .fw-pr svg { width: 14px; height: 14px; }
.fw-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fw-sub { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.fw-sub-key, .fw-sub-who { display: none; }
.fw-due { font-size: 12.5px; color: var(--muted); text-align: right; white-space: nowrap; } .fw-due.od { color: var(--crit); font-weight: 650; }
.fw-av { display: inline-flex; justify-content: flex-end; }
.fw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; }
.fw-foot a { font-weight: 650; }
.fw-empty { text-align: center; padding: 18px 10px; color: var(--muted); font-size: 13.5px; } .fw-e { font-size: 26px; margin-bottom: 4px; }
/* узкая колонка: название, под ним ключ и исполнитель; справа срок */
.dash-side .fw-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.dash-side .fw-key, .dash-side .fw-st, .dash-side .fw-av { display: none; }
.dash-side .fw-t { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; }
.dash-side .fw-sub { grid-column: 2; } .dash-side .fw-sub-key, .dash-side .fw-sub-who { display: inline; }
@media (max-width: 700px) { .fw-row { grid-template-columns: minmax(0, 1fr) auto; } .fw-key, .fw-st, .fw-av { display: none; } }
.dash-edit-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 18px; border-radius: 12px;
  background: var(--accent-soft); font-size: 14px; } .dash-edit-bar .sp { flex: 1; }
.dash-catalog { display: inline-flex; gap: 6px; flex-wrap: wrap; } .dash-catalog:empty { display: none; }
.dash:not(.editing):has(> .dash-main:empty), .dash:not(.editing):has(> .dash-side:empty) { grid-template-columns: minmax(0, 1fr); }
.dash:not(.editing) > .dash-col:empty { display: none; }
.toolbar.dash-head { justify-content: flex-start; } .toolbar.dash-head .sp { flex: 1; }

/* уведомления: тонкая линия между строками (2026-10-14) — от начала текста, не во всю ширину; у наведённой строки
   линии прячутся, чтобы не резать подсветку */
.nt + .nt::before { content: ""; position: absolute; top: 0; left: 56px; right: 12px; height: 1px; background: var(--border); }
.nt:hover::before, .nt:hover + .nt::before { opacity: 0; }
.nt.unread + .nt:not(.unread)::before, .nt:not(.unread) + .nt.unread::before { opacity: 0; }   /* край фона непрочитанных и так делит */

/* скелетон-«призрак» (2026-10-14): разметка прошлого посещения в Shadow DOM. Единые стили, без цветов страницы:
   всё прозрачное; блоки, у которых был фон, — крупные цветом карточки темы (gh-box), мелкие светло-серой заливкой
   (gh-fill); графики — серый прямоугольник (gh-chart); тексты — плашки с переливом. Разметку размечает app.js. */
.ghost-host { display: block; animation: skp-in .15s ease both; }
.skg { pointer-events: none; user-select: none; }
.skg *, .skg *::before, .skg *::after { color: transparent !important; text-shadow: none !important; caret-color: transparent;
  background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-color: rgba(var(--ink-rgb), .10) !important; outline: none !important; }
.skg ::placeholder { color: transparent !important; }
.skg svg, .skg img { visibility: hidden; }
.skg .gh-box { background-color: var(--card-solid) !important; }
.skg .gh-fill, .skg svg.gh-chart { background-color: rgba(var(--ink-rgb), .08) !important; border-color: transparent !important; }
.skg svg.gh-chart { visibility: visible; border-radius: 10px; } .skg svg.gh-chart * { visibility: hidden; }
.skg .gh-t { border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-color: transparent !important;          /* длинными свойствами: шорткат с var() теряется при копировании CSSOM */
  background-image: linear-gradient(90deg, rgba(var(--ink-rgb), .07) 25%, rgba(var(--ink-rgb), .14) 50%, rgba(var(--ink-rgb), .07) 75%) !important;
  background-size: 400px 100% !important; animation: shimmer 1.3s linear infinite; }
.skg .md-stack > * { display: none; }               /* лента «Моего дня» — одной полосой */
.skg .md-stack { background-color: rgba(var(--ink-rgb), .08) !important; border-radius: 9px; }
.tb-pop-sk { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; } .tb-pop-sk .sk { margin: 4px 0; }
.skp-stg { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: start; } .skp-stg-nav { padding: 8px; }
@media (max-width: 760px) { .skp-stg { grid-template-columns: 1fr; } .skp-stg-nav { display: none; } }
.skg *::before, .skg *::after { color: transparent !important; }
/* заглушка дерева «Проектов» и «Справки» на время загрузки (nav.js treeShell) */
.ptree-sk .sk { flex: none; }
.ptree-sk-list { display: flex; flex-direction: column; }
.ptree-sk-row { display: flex; align-items: center; gap: 8px; height: 34px; } .ptree-sk-row.help { height: 30px; }
.ptree-sk-row.sec { height: 30px; padding: 10px 8px 0; }
.skg *:not(.gh-t) { animation: none !important; transition: none !important; }   /* скелетон — сразу целиком, без каскада */
/* «Настроить главную» — тихая шестерёнка слева от заголовка, видна при наведении на заголовок (и с клавиатуры) */
.dash-title { position: relative; }
.dash-gear { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center;
  justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted);
  cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.dash-title:hover .dash-gear, .dash-gear:focus-visible { opacity: 1; }
.dash-gear:hover { color: var(--accent); background: var(--accent-soft); }
.dash-gear[hidden] { display: none; }
@media (hover: none) { .dash-gear { position: static; transform: none; opacity: .7; margin-left: 6px; vertical-align: middle; } }

/* вид блока задаёт колонка, а не сам блок (2026-10-14): в основной колонке блоки без фона, разделены линией сверху;
   в боковой — все одинаковые (.widget). Блок отдаёт только содержимое — свои фон, рамки и отступы не рисует */
.dash .dash-main .widget, .dash .dash-main .widget:has(> .w-head) { background: none; border: 0; outline: 0; box-shadow: none;
  border-radius: 0; padding: 0; margin: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dash .dash-main .widget > .w-head:first-child { height: auto; margin: 0 0 10px; padding: 0; align-items: center; }
.dash .dash-main .widget > .w-head h2 { font-size: 20px; }   /* как «Мой день» */
.dash-main > .dw + .dw { border-top: 1px solid var(--border-strong); padding-top: 18px; }
/* «Затрекано сегодня»: итог, полоса из задач в порядке работы, список */
.tt-num { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 13.5px; }
.tt-num b { font-family: var(--head); font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.tt-num.over b { color: var(--crit); } .tt-num .sp { flex: 1; }
.tt-seg { display: flex; gap: 2px; height: 10px; border-radius: 6px; background: rgba(var(--ink-rgb), .07); overflow: hidden; }
.tt-seg i { display: block; height: 100%; min-width: 3px; transition: width .4s ease; }
#w-time-today .tt-list { margin-top: 10px; }
#w-time-today .tt-row { padding: 7px 2px; }
.tt-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tt-empty { margin: 10px 0 0; }
/* правка записи времени: «Сколько» и «День» в ряд, комментарий на всю ширину, кнопка справа (2026-10-14) */
td.row-actions .time-edit-form, .time-edit-form { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 12px; width: 380px; text-align: left; white-space: normal; }
.te-f { display: grid; gap: 4px; margin: 0; min-width: 0; } .te-f > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.te-f .input, .te-f .dates-btn { width: 100%; height: var(--ctl-h-sm); }
.te-wide, .te-acts { grid-column: 1 / -1; } .te-acts { display: flex; justify-content: flex-end; }
.table-wrap:has(> .time-table) { overflow: visible; }   /* окно правки записи не обрезается рамкой таблицы */
.te-f .dates { display: block; width: 100%; }

/* верхняя панель на средних ширинах (2026-10-14): поиск по центру, пока хватает места; когда правая группа (таймер,
   кнопки) шире — поиск уезжает левее и сжимается, а не перекрывается таймером */
@media (min-width: 992px) {
  /* края — по отступу страницы (--page-x): кружок аватарки (30 в кнопке 36, отсюда −3) встаёт ровно над правым краем
     содержимого; слева столько же, чтобы поиск оставался по центру */
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 260px) minmax(max-content, 1fr); column-gap: 12px;
    padding: 0 calc(var(--page-x) - 3px); }
  .topbar .search-pill { grid-column: 2; width: 100%; min-width: 0; }
  .topbar .tb-date { grid-column: 1; justify-self: start; }
  .topbar-r { position: relative; right: auto; top: auto; bottom: auto; grid-column: 3; justify-self: end; height: 100%; }
}

/* скрыто глазами, доступно экранному диктору и клавиатуре (радиокнопки-карточки) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Профиль → «Оформление» (2026-10-14): карточки стилей с нарисованными миниатюрами и выбор темы */
.ap-hint { margin: -4px 0 14px; }
.ap-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ap-style { display: grid; gap: 4px; align-content: start; padding: 10px 10px 12px; border-radius: 14px; cursor: pointer;
  border: 2px solid transparent; transition: border-color .15s, background .15s; }
.ap-style:hover { background: rgba(var(--ink-rgb), .03); }
.ap-style:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ap-style:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-t { font-weight: 600; font-size: 14px; margin-top: 6px; } .ap-d { line-height: 1.4; }
.ap-theme { cursor: pointer; } .ap-theme:has(input:checked) { background: var(--card-solid); color: var(--ink); box-shadow: var(--shadow); }
.ap-theme:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
/* миниатюры: не живые стили страницы, а рисунок — чтобы на любом выбранном стиле были видны все три */
.stp { display: grid; grid-template-columns: 30% 1fr; height: 118px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border-strong); background: var(--paper); }
.stp-side { display: grid; align-content: start; gap: 6px; padding: 12px 8px; border-right: 1px solid var(--border); }
.stp-side i { display: block; height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb), .12); }
.stp-side i:first-child { height: 12px; border-radius: 4px; background: var(--accent); }
.stp-main { display: grid; align-content: start; gap: 7px; padding: 12px 10px; }
.stp-h { display: block; width: 46%; height: 8px; border-radius: 3px; background: rgba(var(--ink-rgb), .55); }
.stp-blk { position: relative; display: grid; gap: 5px; padding: 9px 9px 9px; border-radius: 7px; }
.stp-blk i { display: block; height: 5px; border-radius: 3px; background: rgba(var(--ink-rgb), .14); } .stp-blk i + i { width: 62%; }
.stp-blk b { position: absolute; right: 8px; bottom: 7px; width: 30px; height: 11px; border-radius: 4px; background: var(--accent); }
.stp-classic { background: radial-gradient(90px 60px at 85% 0%, rgba(var(--accent-rgb), .16), transparent 70%), var(--paper); }
.stp-classic .stp-blk { background: var(--card-solid); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 3px 8px -4px rgba(0, 0, 0, .16); }
.stp-classic .stp-blk b { box-shadow: 0 2px 5px -1px rgba(var(--accent-rgb), .6); }
.stp-calm .stp-blk, .stp-contrast .stp-blk { background: rgba(var(--ink-rgb), .06); margin-top: 6px; }
.stp-calm .stp-blk::before, .stp-contrast .stp-blk::before { content: ""; position: absolute; left: 0; top: -9px; width: 34%; height: 5px;
  border-radius: 3px; background: rgba(var(--ink-rgb), .4); }
.stp-calm .stp-h, .stp-contrast .stp-h { display: none; }
.stp-contrast .stp-blk b, .stp-contrast .stp-side i:first-child { background: var(--ink); }   /* «Создать задачу» тоже тёмная */
.stp-calm .stp-side i:first-child { background: linear-gradient(115deg, #2b7de9, #1aa3c2); }
/* Проект в карточке (2026-10-14): название — ссылка, сменить — карандашом */
.ed.ed-pen-only { cursor: default; } .ed.ed-pen-only:hover { background: none; }
.ed-pen-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: none;
  color: var(--faint); cursor: pointer; }
.ed-pen-only .ed-pen-btn { opacity: 0; } .prow:hover .ed-pen-btn, .ed-pen-btn:focus-visible { opacity: 1; }
.ed-pen-btn:hover, .ed-pen-btn:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }
/* Теги как в Трекере (2026-10-14, static/tags.js): поле поиска, выбранные плашками с ×, подсказки и «— Создать тег» */
.tgp { position: relative; }   /* .tg занят переключателями (base.css) */
.tg-field { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: var(--ctl-h-sm); padding: 3px 8px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card-solid); cursor: text; }
.tg-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tg-in { flex: 1; min-width: 90px; border: 0 !important; background: none !important; box-shadow: none !important; padding: 2px 0 !important;
  min-height: 0 !important; height: 24px; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .tg-chips[hidden] { display: none; }
.tgp-inline .tg-chips { margin: 0; display: contents; }
.tg-chip { display: inline-flex; align-items: center; gap: 2px; padding-right: 3px; }
.tg-x { display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: inherit; opacity: .6; font-size: 13px; line-height: 1; cursor: pointer; }
.tg-x:hover, .tg-x:focus-visible { opacity: 1; background: rgba(var(--ink-rgb), .1); outline: none; }
.tg-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 90; display: grid; gap: 1px; max-height: 260px; overflow: auto;
  padding: 4px; border-radius: 10px; background: var(--card-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.tg-field + .tg-list { top: calc(var(--ctl-h-sm) + 6px); }
.tg-opt { display: flex; align-items: center; gap: 4px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); text-align: left; cursor: pointer; }
.tg-opt.focus { background: var(--hover-solid); }
.tg-wrap { position: relative; flex: 1; min-width: 0; }
.tg-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; width: 300px; max-width: calc(100vw - 32px); padding: 12px;
  border-radius: 12px; background: var(--card-solid); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.tg-pop-h { font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.tg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

/* ссылки, у которых подчёркивание было единственной реакцией на наведение (2026-10-14) */
th.sorted a:hover, .mst-warn a:hover, .tpl-ft a:hover { color: var(--accent-dark); }
.bk-opt.focus { background: var(--hover-solid); } .bk-create { gap: 4px; }   /* «Теги» в массовых действиях — с клавиатуры */
/* аватарки в фильтре и в массовых действиях (2026-10-15); «не назначен» — пустой пунктирный кружок */
.fl-val .av, .bk-opt .av { width: 20px; height: 20px; font-size: 10px; flex: none; }
.av-none { width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed var(--border-strong); background: none; box-sizing: border-box; }
.bk-ico { display: inline-grid; place-items: center; width: 16px; flex: none; }
/* Шаблоны проектов (ТЗ-31): пилюля «Шаблон» — бирюзовая, как у шаблонов задач (--tpl); список во вкладке дерева */
.pill.tpl-pill { background: var(--tpl-bg); color: var(--tpl); font-weight: 600; }
.ptree-tpls .tr .pj-ico { color: var(--tpl); }
.ptree-tpl-add { display: inline-block; margin: 6px 8px 4px; font-size: 13px; font-weight: 600; }
.ptree-tabs[hidden] { display: none; }
.ptree-tpl-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin-left: auto; margin-right: 6px; padding: 0 9px;
  border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ptree-tpl-btn .pj-ico { color: var(--tpl); } .ptree-tpl-btn .n { font-weight: 650; opacity: .7; }
.ptree-tpl-btn:hover { background: var(--hover-solid); color: var(--ink); }
.ptree-tpl-btn.active { background: var(--tpl-bg); color: var(--tpl); }
.pj-tpl-note { margin: 4px 0 0; }
.tpl-kpis { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }   /* четыре плитки — в один ряд и на 1280 */
.tpl-task-note { margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--tpl-bg); color: var(--tpl); font-size: 13.5px; }
.tpl-task-note a { color: inherit; font-weight: 600; }
.tpl-scope-form { display: grid; gap: 6px; }
/* Сохранить как шаблон / проект по шаблону (ТЗ-31) — одна колонка-карточка, поля подписаны сверху */
/* поток блоков, а не сетка: в «спокойном» стиле заголовок выносится над плиткой своим отступом — с ним схлопнется */
.tpl-save { max-width: 760px; }
.tpl-save h2 { margin: 0; }
.tpl-save > * + * { margin-top: 18px; }
.tpl-save > h2 + p { margin-top: 6px; }
.tpl-save > .actions { margin-top: 22px; }
.tpl-f { display: grid; gap: 7px; min-width: 0; }
.tpl-f > span:first-child { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.tpl-f input[type=text] { width: 100%; box-sizing: border-box; }
.tpl-take { display: grid; gap: 2px; padding: 6px; border-radius: var(--r-ctl); background: var(--well); }
.ck-line { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: var(--ctl-h-sm); padding: 4px 8px; border-radius: var(--r-ctl-sm); font-size: 14px; cursor: pointer; }
label.ck-line:hover { background: var(--track); }
.ck-line .muted { font-weight: 400; }
.ck-line input[type=checkbox] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--tpl); }
.tpl-tasks-l { min-width: 72px; }
.tpl-seg { justify-self: start; }
.tpl-seg .chip { cursor: pointer; }
.tpl-seg .chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); }
.tpl-div { max-width: 360px; } .tpl-div[hidden] { display: none; }
.tpl-gone-warn { margin-bottom: 14px; }
.tpl-warn { padding: 11px 14px; border-radius: var(--r-ctl); background: var(--warn-bg); color: var(--warn); font-size: 13.5px; line-height: 1.45; }
.tpl-use-top { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.tpl-use-top .pj-dd .dd-btn { width: 100%; }
.tpl-map { display: grid; gap: 2px; padding: 6px; border-radius: var(--r-ctl); background: var(--well); }
.tpl-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(180px, 260px); gap: 10px; align-items: center; padding: 4px 6px; border-radius: var(--r-ctl-sm); }
.tpl-map-row > .val-ico { min-width: 0; font-size: 14px; flex-wrap: wrap; }
.tpl-map-row .arr { color: var(--faint); text-align: center; }
.tpl-map-row .pj-dd .dd-btn { width: 100%; }
.tpl-gone { color: var(--warn); font-size: 12px; font-weight: 600; }
.tpl-map-row.gone { background: var(--warn-bg); }
.tpl-preview { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--tpl-bg); color: var(--ink); font-size: 14px; line-height: 1.5; }
.tpl-preview b { color: var(--tpl); }
.tpl-preview-s { margin-top: 3px; }
.tpl-preview-name { margin-bottom: 4px; }
.tpl-from { margin-left: 2px; }
details.menu summary.tpl-pick { width: auto; height: auto; min-height: 26px; padding: 0 11px 0 9px; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--tpl);
  background: var(--tpl-bg); border-color: transparent; box-shadow: none; border-radius: 999px; }
details.menu summary.tpl-pick:hover, details.menu[open] summary.tpl-pick { color: var(--tpl); background: var(--tpl-bg); box-shadow: 0 0 0 3px var(--accent-soft); }
.tpl-pick svg, .tpl-from .menu-item svg, .pj-menu .menu-item svg { width: 14px; height: 14px; flex: none; color: var(--tpl); }
.tpl-from .menu-pop { left: 0; right: auto; z-index: 40; min-width: 260px; max-height: 320px; overflow-y: auto; }
.tpl-from .menu-item, .pj-menu .menu-item { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.pj-menu summary { width: 32px; height: 32px; box-shadow: none; }
.pj-menu .menu-pop { z-index: 40; min-width: 230px; }
@media (max-width: 640px) { .tpl-use-top, .tpl-map-row { grid-template-columns: minmax(0, 1fr); } .tpl-map-row .arr { display: none; } }
.ptpl-macros { margin: 6px 0 4px; gap: 4px; }
/* шесть кнопок — в одну строку колонки: обычный шрифт вместо моноширинного, поуже */
.ptpl-macros button { font: 600 11.5px/1.3 inherit; font-family: inherit; padding: 3px 7px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tpl) 30%, transparent); }   /* видна и на сером фоне карточки */
.ptpl-macros button:hover, .ptpl-macros button:focus-visible { box-shadow: inset 0 0 0 1px var(--tpl); outline: none; }
.ptpl-macros-n { color: var(--faint); font-size: 12px; }
.task-head .ptpl-macros { margin-bottom: 14px; }
.editor + .ptpl-macros { margin: 8px 0 0; }
/* у названия — только пока оно открыто для правки, полоской под полем: шапка не сдвигается */
.title-form:has(.ptpl-macros) { position: relative; }
.title-form .ptpl-macros { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; margin: 0;
  width: max-content; max-width: min(680px, calc(100vw - 32px)); padding: 6px 8px; background: var(--card-solid);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); }
.title-form:has([data-title-input]:not([hidden])) .ptpl-macros { display: flex; }
/* сигнал уведомления (2026-10-15): пять на выбор, ▶ — послушать; при выключенном звуке — приглушены, но выбираются */
.nt-tones { display: grid; gap: 2px; margin-top: 12px; padding: 4px; border-radius: var(--r-ctl); background: var(--well); transition: opacity .2s; }
.card:has(> .ns-line .tg:not(.on)) .nt-tones { opacity: .55; }
.nt-tone { margin: 0; letter-spacing: normal; font-weight: 400; color: var(--ink); display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: var(--r-ctl-sm); cursor: pointer; }
.nt-tone:hover { background: var(--track); }
.nt-tone:has(input:checked) { background: var(--card-solid); box-shadow: var(--shadow); }
.nt-tone:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.nt-tone-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); box-sizing: border-box; transition: border .15s; }
.nt-tone:has(input:checked) .nt-tone-dot { border: 5px solid var(--accent); }
.nt-tone-tx { display: grid; min-width: 0; font-size: 13.5px; line-height: 1.3; }
.nt-tone-tx small { color: var(--muted); font-size: 12px; }
.nt-tone-play { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent); cursor: pointer; transition: transform .15s, background .15s; }
.nt-tone-play:hover { background: var(--accent); color: #fff; transform: scale(1.06); }
.nt-tone-play svg { margin-left: 2px; }

/* ── избранное (бэклог-38) ── */
/* раздел в меню: занимает остаток колонки и прокручивается сам; маркеры — в колонке 14 px, названия на одной линии */
.side-fav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 12px -6px 0; padding: 0 6px 10px; }
.side-fav[hidden] { display: none; }
.sf-h { padding: 6px 12px 2px; font-size: 12px; font-weight: 650; color: var(--faint); }
.sf-gh { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 12px 3px; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 650; color: var(--faint); cursor: pointer; text-align: left; }
.sf-gh:hover { color: var(--muted); }
.sf-car { flex: none; transition: transform .15s; }
.sf-group.closed .sf-car { transform: rotate(-90deg); }
.sf-group.closed .sf-list { display: none; }
.sf-n { margin-left: auto; font-weight: 600; }
.sf-it { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 9px; color: var(--ink); font-size: 13.5px; }
.sf-it:hover { background: rgba(var(--ink-rgb), .05); text-decoration: none; color: var(--ink); }
.sf-lead { display: grid; place-items: center; width: 14px; height: 14px; }
.sf-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-m { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-m.late { color: var(--crit); }
.sf-it.done { color: var(--faint); }
.sf-it.done .sf-t { text-decoration: line-through; text-decoration-color: var(--border-strong); }
.sf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--unknown-dot); }
.sf-dot.cat-in_progress { background: var(--accent); } .sf-dot.cat-break { background: var(--accent); opacity: .55; }
.sf-dot.cat-paused { background: var(--warn-dot); } .sf-dot.cat-done { background: var(--ok-dot); }
.sf-ring { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--ok-dot) calc(var(--p) * 1%), rgba(var(--ink-rgb), .14) 0);
  -webkit-mask: radial-gradient(circle, transparent 3.3px, #000 3.8px); mask: radial-gradient(circle, transparent 3.3px, #000 3.8px); }
.sf-ring.tpl { background: conic-gradient(var(--tpl) calc(var(--p) * 1%), rgba(var(--ink-rgb), .14) 0); }
.sf-star { fill: var(--star); }
.sf-ghost { opacity: .35; }
/* звёздочка в свёрнутом меню и в разделах с деревом */
.fav-rail { display: none; width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.fav-rail svg { color: var(--star); }
.fav-rail.hit svg path { fill: var(--star); }
/* «комета» (favorites.js): вспышка у звёздочки, звезда с хвостом летит в меню, кольцо на месте посадки */
.fav-fx { position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none; will-change: transform, opacity; }
.fav-halo { width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--star) 55%, transparent), transparent 68%); }
.fav-comet { width: 20px; height: 20px; margin: -10px 0 0 -10px; color: var(--star); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--star) 80%, transparent)); }
.fav-comet svg { display: block; } .fav-comet path { fill: currentColor; }
.fav-trail { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--star); opacity: .75; }
.fav-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--star); }
@media (min-width: 992px) {
  .layout:is(.rail, .mini) .fav-rail:not([hidden]) { display: flex; }
  .layout:is(.rail, .mini) .side-fav { display: none; }
}
.fav-pop { position: fixed; z-index: 450; width: 290px; overflow-y: auto; padding: 6px 4px 8px; border-radius: 14px; background: var(--card-solid);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-strong); animation: fav-pop-in .16s ease both; }
@keyframes fav-pop-in { from { opacity: 0; transform: translateX(-6px); } }
/* у заголовка задачи и проекта — сразу после последнего слова */
h1.has-fav { display: inline; }
.fav-star { position: relative; top: -3px; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 6px; padding: 0; border: 0; border-radius: 9px;
  background: none; color: var(--faint); cursor: pointer; vertical-align: middle; transition: color .15s, background .15s; }
.fav-star svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fav-star:hover { color: var(--muted); background: rgba(var(--ink-rgb), .05); }
.fav-star.on { color: var(--star); }
.fav-star.on svg path { fill: currentColor; }
.fav-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.title-form:has([data-title-input]:not([hidden])) .fav-star { display: none; }
.ph .fav-star { top: 0; margin-left: -4px; }
/* звёздочка на чипе сохранённого фильтра: в избранном в меню или только здесь */
.fl-saved .chip.saved { padding-left: 28px; }
.fl-star { position: absolute; left: 7px; top: 50%; z-index: 1; transform: translateY(-50%); display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--faint); cursor: pointer; }
.fl-star svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fl-star:hover { background: rgba(var(--ink-rgb), .07); color: var(--muted); }
.fl-star.on { color: var(--star); }
.fl-star.on svg path { fill: currentColor; }

/* ── «Не списано» (бэклог-37, вариант C) ── */
.ms-w { position: relative; }
.ms-wrap { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.ms-ring { position: relative; width: 96px; height: 96px; }
.ms-ring svg { transform: rotate(-90deg); }
.ms-ring circle { fill: none; stroke-width: 10; }
.ms-track { stroke: var(--track); }
.ms-val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.ms-val.full { stroke: var(--ok-dot); }
.ms-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.ms-c b { font-family: var(--head); font-size: 17px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-c span { max-width: 56px; margin: 2px auto 0; font-size: 10.5px; line-height: 1.15; color: var(--muted); }   /* «всё списано» — в две строки внутри кольца */
.ms-dh, .ms-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ms-dh { font-size: 10.5px; color: var(--faint); text-align: center; }
.ms-wl { margin: 6px 0 3px; font-size: 11px; color: var(--faint); }
.ms-d { display: grid; place-items: center; height: 24px; border: 0; border-radius: 6px; padding: 0; background: var(--track); color: var(--ink);
  font: 650 11px var(--head); font-variant-numeric: tabular-nums; }
.ms-d.full { background: rgba(var(--accent-rgb), .78); color: #fff; }
.ms-d.gap { background: var(--warn-bg); color: var(--warn); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.ms-d.gap:hover, .ms-d.gap:focus-visible { box-shadow: 0 0 0 2px var(--warn-dot); outline: none; }
.ms-d.gap.sel { box-shadow: 0 0 0 2px var(--warn-dot); }
.ms-d.today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.ms-d.today.some { background: rgba(var(--accent-rgb), .14); }
.ms-d.off { background: transparent; color: var(--faint); font-weight: 500; }
.ms-d.future { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--faint); font-weight: 500; }
.ms-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); }
.ms-hint.ok { justify-content: flex-start; color: var(--ok); }
.ms-hint.ok .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-dot); }
/* окно дня — у клетки, над соседним содержимым */
.ms-pop { position: absolute; right: 0; z-index: 60; width: min(440px, calc(100vw - 32px)); --ax: 50%; }
.ms-pop[hidden] { display: none; }
.ms-pop::before { content: ""; position: absolute; top: -7px; left: var(--ax); width: 14px; height: 14px; background: var(--card-solid); transform: rotate(45deg);
  box-shadow: -1px -1px 0 var(--border-strong); }
.ms-day { position: relative; padding: 14px 14px 12px; border-radius: 14px; background: var(--card-solid); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-strong);
  animation: ms-in .16s ease both; }
@keyframes ms-in { from { opacity: 0; transform: translateY(-4px); } }
.ms-day-h { display: flex; align-items: baseline; gap: 10px; padding-right: 24px; }
.ms-day-h b { font-family: var(--head); font-size: 15px; }
.ms-miss { font-size: 12.5px; font-weight: 650; color: var(--warn); }
.ms-ok { font-size: 12.5px; font-weight: 650; color: var(--ok); }
.ms-x { position: absolute; top: 8px; right: 8px; }
.ms-day-sub { margin: 2px 0 8px; font-size: 12px; color: var(--muted); }
.ms-row-t { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 2px; border-top: 1px solid var(--border); }
.ms-tl { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; font-weight: 600; }
.ms-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
a.ms-tt:hover { color: var(--accent); text-decoration: none; }
.ms-ev { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px; font-size: 11.5px; color: var(--muted); }
.ms-ev:empty { display: none; }
.ms-ev span { padding: 1px 7px; border-radius: 99px; background: var(--well); }
.ms-add { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 6px; }
.ms-logged { min-width: 40px; font-size: 11.5px; color: var(--muted); text-align: right; }
.ms-add .input { width: 76px; height: var(--ctl-h-sm); padding: 0 8px; font-size: 13px; }
.ms-add .btn { min-width: 32px; padding: 0 10px; }
.ms-err { margin: 6px 0 0; padding: 7px 10px; border-radius: var(--r-ctl-sm); background: var(--crit-bg); color: var(--crit); font-size: 12.5px; }
.ms-err[hidden] { display: none; }
.ms-none { margin: 6px 2px 8px; }
.ms-other { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.ms-other .input { width: 100%; box-sizing: border-box; height: var(--ctl-h-sm); font-size: 13px; }
.ms-found { display: grid; gap: 2px; margin-top: 4px; }
.ms-found p { margin: 6px 4px 0; }
.ms-pick { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px;
  color: var(--ink); text-align: left; cursor: pointer; }
.ms-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-pick:hover { background: var(--hover-solid); }
.ms-tl .key, .ms-pick .key { flex: none; white-space: nowrap; }

/* ── «Здоровье проектов» (бэклог-37, вариант B) ── */
.hp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.hp-kpi { display: grid; gap: 2px; padding: 9px 10px 8px; border-radius: var(--r-ctl-sm); background: var(--well); }
.hp-kpi b { font-family: var(--head); font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hp-kpi span { font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.hp-kpi.c b { color: var(--crit); } .hp-kpi.w b { color: var(--warn); }
.hp-att { display: grid; gap: 5px; padding: 9px 0; border-top: 1px solid var(--border); }
.hp-att-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hp-att-h a { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 650; font-size: 13.5px; color: var(--ink); }
.hp-att-h a:hover { color: var(--accent); text-decoration: none; }
.hp-att-h span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.hp-dot.c { background: var(--crit-dot); } .hp-dot.w { background: var(--warn-dot); } .hp-dot.ok { background: var(--ok-dot); }
.hp-tags { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 15px; }
.hp-t { padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.hp-t:hover { text-decoration: none; filter: brightness(.96); box-shadow: inset 0 0 0 1px currentColor; }
.hp-t.c { background: var(--crit-bg); color: var(--crit); } .hp-t.w { background: var(--warn-bg); color: var(--warn); }
.hp-t.ms { background: var(--ms-bg); color: var(--ms); }
.hp-allok { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-ctl-sm); background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 600; }
.hp-more { padding-top: 9px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.hp-rest > summary { list-style: none; cursor: pointer; padding: 9px 0; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--accent); }
.hp-rest > summary::-webkit-details-marker { display: none; }
.hp-rest > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-rest[open] > summary { color: var(--muted); }

/* ── «Неделя команды» (бэклог-37, вариант B) ── */
.tw-span { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.tw-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 64px; gap: 10px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--border); color: var(--ink); }
.tw-row:first-of-type { border-top: 0; }
.tw-row:hover { text-decoration: none; background: rgba(var(--ink-rgb), .03); border-radius: 8px; }
.tw-l { display: grid; line-height: 1.25; min-width: 0; }
.tw-l b { font-size: 13.5px; }
.tw-l span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-spark { overflow: visible; }
.tw-spark polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tw-spark.t-accent polyline { stroke: var(--accent); } .tw-spark.t-accent circle { fill: var(--accent); }
.tw-spark.t-crit polyline { stroke: var(--crit-dot); } .tw-spark.t-crit circle { fill: var(--crit-dot); }
.tw-spark.t-ok polyline { stroke: var(--ok-dot); } .tw-spark.t-ok circle { fill: var(--ok-dot); }
.tw-v { display: grid; justify-items: end; line-height: 1.15; }
.tw-v b { font-family: var(--head); font-size: 17px; font-variant-numeric: tabular-nums; }
.tw-tr { font-size: 11px; font-weight: 650; white-space: nowrap; }
.tw-tr.good { color: var(--ok-dot); } .tw-tr.bad { color: var(--crit); } .tw-tr.warn { color: var(--warn); } .tw-tr.flat { color: var(--muted); }

/* ── «Что нового в избранном» (бэклог-38) ── */
.fn-it { display: grid; gap: 3px; padding: 9px 2px; border-top: 1px solid var(--border); color: var(--ink); }
.fn-it:first-of-type { border-top: 0; }
.fn-it:hover { text-decoration: none; background: rgba(var(--ink-rgb), .03); border-radius: 8px; }
.fn-h { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.fn-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.fn-it.done .fn-t { color: var(--faint); text-decoration: line-through; }
.fn-m { font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-ev { margin-left: 23px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.fn-ev .key { font-size: 10.5px; }
.fn-empty { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-ctl-sm); background: var(--well); color: var(--muted); font-size: 13px; line-height: 1.4; }
.fn-star { color: var(--star); font-size: 15px; }
.fn-label { margin-left: auto; white-space: nowrap; }

/* ── Оргструктура и доступ к разделам (ТЗ-39) ─────────────────────────────── */
.org { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .org { grid-template-columns: minmax(0, 1fr); } }
.org-tree { padding: 12px 10px; position: sticky; top: 72px; }
.org-tree-h { display: flex; align-items: center; gap: 8px; padding: 2px 6px 10px; }
.org-tree-h form { margin: 0 0 0 auto; }
.org-tns { display: flex; flex-direction: column; gap: 1px; }
.org-tn { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px calc(8px + var(--d, 0) * 16px); border-radius: 10px; color: var(--ink); font-size: 13.5px; }
.org-tn:hover { background: rgba(var(--ink-rgb), .04); text-decoration: none; }
.org-tn.on { background: var(--accent-soft); }
.org-tn.on .org-nm { color: var(--accent); font-weight: 650; }
.org-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-cnt { font-size: 12px; color: var(--faint); min-width: 14px; text-align: right; }
.org-av { width: 20px; height: 20px; border-radius: 50%; flex: none; object-fit: cover; font-size: 10px; display: inline-grid; place-items: center; }
.org-pp .org-av { width: 26px; height: 26px; font-size: 12px; }
.org-crumbs { margin-bottom: 2px; }
.org-h { display: flex; align-items: center; gap: 10px; }
.org-h h3 { margin: 0; font-size: 22px; }
.org-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border); margin: 14px 0 16px; }
.org-tabs a { padding: 0 0 9px; font-size: 13.5px; color: var(--muted); }
.org-tabs a:hover { color: var(--ink); text-decoration: none; }
.org-tabs a.on { color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); }
.org-props { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 14px; align-items: center; margin: 0; font-size: 13.5px; }
.org-props dt { color: var(--muted); }
.org-props dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-props dd form { margin: 0; }
.org-props .pj-dd .dd-btn { min-width: 240px; }
.org-subs .org-sub { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 10px; background: rgba(var(--ink-rgb), .04); color: var(--ink); font-size: 13px; }
.org-subs .org-sub:hover { background: rgba(var(--ink-rgb), .07); text-decoration: none; }
.org-mh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 0 6px; }
.org-mh b { font-size: 15px; }
.org-add { margin: 0; } .org-add .dd-btn { min-width: 220px; }
.org-ppl { display: flex; flex-direction: column; gap: 2px; }
.org-pp { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border-radius: 10px; font-size: 13.5px; }
.org-pp:hover { background: rgba(var(--ink-rgb), .03); }
.org-pp a { color: var(--ink); } .org-pp form { margin: 0; }
.org-pn { white-space: nowrap; } .org-pos { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-mv .dd-btn { min-width: 180px; height: var(--ctl-h-sm); }
.org-note { margin-top: 14px; }
/* на телефоне: подписи над значениями, звено сотрудника — второй строкой под именем (иначе страница ехала вбок) */
@media (max-width: 720px) {
  .org-props { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .org-props dd + dt { margin-top: 10px; }
  .org-pp { flex-wrap: wrap; row-gap: 0; }
  .org-pp .org-pos { flex: 1 1 0; }   /* должность — в строке с именем, обрезается многоточием */
  .org-pp .sp { flex-basis: 100%; }
  .org-pp .org-mv { margin: 2px 0 4px 36px; }
}
.org-acc { display: flex; flex-direction: column; }
.org-acc-s { padding: 12px 0; border-top: 1px solid var(--border); }
.org-acc-s:first-child { border-top: 0; padding-top: 0; }
.org-acc-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.org-acc-r { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 3px 0; }
.org-acc-src { grid-column: 2; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-seg { display: inline-flex; flex-wrap: nowrap; gap: 2px; justify-self: start; padding: 3px; margin: 0; border-radius: 11px; background: rgba(var(--ink-rgb), .06); }
.org-seg button { border: 0; background: transparent; padding: 4px 8px; border-radius: 8px; font: 500 12.5px var(--sans, inherit); color: var(--muted); cursor: pointer; white-space: nowrap; }
.org-seg button:hover { color: var(--ink); }
.org-seg button.on { background: var(--card-solid); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgba(var(--ink-rgb), .14); }
.org-seg button.inh.on { color: var(--muted); }
.org-mx { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.org-mx th { text-align: center; font-size: 11.5px; color: var(--faint); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; padding: 0 6px 10px; }
.org-mx th:first-child { text-align: left; }
.org-mx td { padding: 4px 6px; text-align: center; }
.org-mx tr.org-mx-first td { border-top: 1px solid var(--border); padding-top: 8px; }
.org-mx tr:not(.org-mx-first) td { padding-bottom: 8px; }
.org-mx tr.org-mx-root td { background: rgba(var(--ink-rgb), .025); }
.org-mx-unit { text-align: left !important; white-space: nowrap; padding-left: calc(6px + var(--d, 0) * 16px) !important; }
.org-mx-unit a { color: var(--ink); font-weight: 600; }
.org-mx-who { text-align: left !important; white-space: nowrap; }
.org-mx form { margin: 0; display: inline-block; }
.lv { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.lv-none { background: var(--crit-bg); color: var(--crit); }
.lv-view { background: var(--warn-bg); color: var(--warn); }
.lv-edit { background: var(--ok-bg); color: var(--ok); }
.lv.inh { opacity: .55; }
.org-mx .dd-btn.lv { height: 26px; min-width: 0; padding: 0 8px; border: 0; box-shadow: none; gap: 4px; }
.org-mx .dd-btn.lv .dd-caret { width: 9px; height: 9px; opacity: .6; }
.org-mx .dd-btn.lv:hover { filter: brightness(.97); opacity: 1; }
.org-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pp-org { margin-top: 6px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-org .ar { color: var(--faint); }

/* ── Клиенты (ТЗ-39) ───────────────────────────────────────────────────────── */
.cl-title { display: flex; align-items: center; gap: 10px; }
.cl-title h1 { margin: 0; }
.cl-note-dt { align-self: start; padding-top: 8px; }
.cl-projects .org-mh { margin-top: 0; }
.cl-search { margin: 0 0 0 auto; } .cl-search .input { width: 220px; height: var(--ctl-h-sm); }
.cl-tabs { margin: 0 0 14px; }
.cl-w { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 12px; font-weight: 800; }
.cl-w-a { background: var(--ok-bg); color: var(--ok); }
.cl-w-b { background: var(--accent-soft); color: var(--accent); }
.cl-w-c { background: rgba(var(--ink-rgb), .07); color: var(--muted); }
.cl-am { display: inline-flex; align-items: center; gap: 8px; }
.cl-table td { vertical-align: middle; }
.cl-head h1 { margin-right: 4px; }
.cl-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .cl-card { grid-template-columns: minmax(0, 1fr); } }
.cl-props .org-props { grid-template-columns: 150px minmax(0, 1fr); }
.cl-wseg button { min-width: 34px; text-align: center; font-weight: 700; }
.cl-note { align-items: flex-start !important; }
.cl-note-f { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; margin: 0; }
.cl-code-f { display: flex; align-items: center; gap: 8px; margin: 0; } .cl-code-in { width: 140px; font-weight: 600; }   /* «SM :: …» */
.cl-note-f textarea { width: 100%; resize: vertical; min-height: 72px; }
.cl-note-t { white-space: pre-line; }
.cl-pj { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--border); color: var(--ink); font-size: 13.5px; }
.cl-pj:first-of-type { border-top: 0; }
.cl-pj:hover { text-decoration: none; color: var(--accent); }
.cl-pj.off { color: var(--muted); }
.cl-pj-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-bar { flex: none; width: 90px; height: 6px; border-radius: 99px; background: rgba(var(--ink-rgb), .07); overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--accent); }
.cl-pj.off .cl-bar i { background: var(--ok-dot); }

/* ── Просмотр картинок (static/viewer.js, 2026-10-20, вариант 1 из ui-variants-image-viewer.html) ─────────────────
   Всегда тёмный, как фотопросмотр, в любой теме и стиле; над окном задачи и диалогами, под подсказками (.sm-tip). */
html.iv-open, html.iv-open body { overflow: hidden; }
.iv { position: fixed; inset: 0; z-index: 1800; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(8, 12, 20, .92); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13.5px; -webkit-user-select: none; user-select: none; }
.iv[hidden] { display: none; }
.iv:focus { outline: none; }
.iv.iv-anim { animation: iv-in .18s ease; }
@keyframes iv-in { from { opacity: 0; } }
.iv-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-width: 0; }
.iv-av { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 700; font-size: 13px; }
.iv-av[hidden] { display: none; }
.iv-av img { width: 100%; height: 100%; object-fit: cover; }
.iv-t { flex: 1; min-width: 0; display: grid; }
.iv-t b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-t span { font-size: 12px; color: rgba(255, 255, 255, .65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-src { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.iv-src:hover { background: rgba(255, 255, 255, .2); color: #fff; text-decoration: none; }
.iv-n { flex: none; font-size: 12px; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.iv-btn, .iv-zoom button { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px;
  background: rgba(255, 255, 255, .1); color: #fff; font: 600 15px var(--head); cursor: pointer; }
.iv-btn:hover, .iv-zoom button:hover { background: rgba(255, 255, 255, .2); color: #fff; text-decoration: none; }
.iv :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.iv-stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 6px 76px 60px;
  overflow: hidden; touch-action: none; }      /* строка сетки определённой высоты — иначе max-height картинки не работает */
.iv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8); transform-origin: center;
  -webkit-user-drag: none; }
.iv.zoomed .iv-img { cursor: grab; border-radius: 0; }
.iv.panning .iv-img { cursor: grabbing; }
.iv-arrow { position: absolute; top: 50%; z-index: 1; width: 44px; height: 44px; margin-top: -22px; padding: 0 0 3px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.iv-arrow:hover { background: rgba(255, 255, 255, .22); }
.iv-arrow.l { left: 18px; } .iv-arrow.r { right: 18px; }
.iv-zoom { position: absolute; left: 50%; bottom: 12px; z-index: 1; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px;
  background: rgba(0, 0, 0, .5); font-size: 12px; }
.iv-zoom button { width: 28px; height: 28px; border-radius: 8px; }
.iv-zoom [data-iv-fit] { width: auto; padding: 0 10px; font-size: 12px; }
.iv-zoom span { min-width: 52px; padding: 0 4px; text-align: center; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
.iv-strip { display: flex; gap: 8px; padding: 10px 16px 14px; overflow-x: auto; scrollbar-width: none; }
.iv-strip::-webkit-scrollbar { display: none; }
.iv-th { flex: none; width: 64px; height: 44px; padding: 0; border: 0; border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, .08); opacity: .5; cursor: pointer;
  transition: opacity .15s; }
.iv-th:first-child { margin-left: auto; } .iv-th:last-child { margin-right: auto; }      /* по центру, а длинная лента — с начала */
.iv-th:hover { opacity: .8; }
.iv-th.on { opacity: 1; box-shadow: inset 0 0 0 2px #fff; }
.iv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-th.on img { padding: 2px; border-radius: 7px; }
.iv.iv-single :is(.iv-arrow, .iv-n, .iv-strip) { display: none; }
.iv.iv-single .iv-stage { padding-bottom: 58px; }
:where(.st-calm) .iv { background: rgba(8, 12, 20, .96); }
:where(.st-contrast) .iv { background: #05070c; }
:where(.st-contrast) .iv :is(.iv-btn, .iv-zoom button, .iv-arrow, .iv-src) { background: rgba(255, 255, 255, .18); }
:where(.st-contrast) .iv-t span, :where(.st-contrast) .iv-n { color: rgba(255, 255, 255, .85); }
@media (max-width: 767px) {
  .iv-top { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .iv-t { flex-basis: calc(100% - 128px); }
  .iv-src { order: 5; max-width: calc(100% - 70px); }
  .iv-n { order: 6; margin-left: auto; }
  .iv-btn[data-iv-open] { display: none; }
  .iv-stage { padding: 4px 8px 56px; }
  .iv-arrow { display: none; }
  .iv-strip { padding: 8px 12px 12px; }
  .iv-th { width: 52px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .iv.iv-anim { animation: none; } }

/* ── Страница 404 (решение 2026-10-20, вариант C из ui-variants-404-hybrid.html) ──────────────────────────────────
   Во всю область страницы — гант фоном (сетка дней, бледные полосы без подписей, линия «сегодня»), в центре «404» со
   световым контуром (два огонька бегут по обводке), сквозь неё за правый край улетает полоса битой ссылки. Цвета —
   токены: подходит ко всем стилям и тёмной теме; при «Спокойном» движении и системном «без движения» — неподвижно. */
.nf { position: relative; isolation: isolate; overflow: hidden; margin: -30px calc(-1 * var(--page-x)); min-height: calc(100vh - 52px);
  display: grid; place-items: center; }
.nf-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nf-grid { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 7.14% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.nf-bar { position: absolute; height: 26px; border-radius: 8px; opacity: .55; }
.nf-bar.b1 { left: 3%; width: 16%; top: 12%; background: var(--ok-bg); }
.nf-bar.b2 { left: 14%; width: 24%; top: 24%; background: var(--accent-soft); }
.nf-bar.b3 { left: 62%; width: 20%; top: 16%; background: var(--violet-bg); }
.nf-bar.b4 { left: 8%; width: 18%; top: 80%; background: var(--warn-bg); }
.nf-bar.b5 { left: 70%; width: 22%; top: 84%; background: var(--accent-soft); }
.nf-bar.b6 { left: 76%; width: 14%; top: 64%; background: var(--ok-bg); }
.nf-today { position: absolute; top: 0; bottom: 0; left: 21%; width: 2px; background: var(--accent); opacity: .8; }
.nf-today span { position: absolute; top: 14px; left: 6px; padding: 0 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700; white-space: nowrap; }
.nf-flag { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; color: var(--accent); opacity: .7;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.nf-run { position: absolute; left: 6%; top: 35%; width: 20%; min-width: 150px; height: 28px; border-radius: 8px; display: flex; align-items: center; padding: 0 12px;
  background: linear-gradient(90deg, var(--accent), var(--second)); color: #fff; font: 700 12px ui-monospace, "SF Mono", Menlo, monospace;
  box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb), .7); animation: nf-run 6s cubic-bezier(.6, 0, .3, 1) infinite; }
.nf-run span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-run::after { content: ""; position: absolute; right: 100%; top: 50%; width: 120px; height: 2px; margin-top: -1px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .5)); animation: nf-trail 6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes nf-run { 0%, 18% { transform: translateX(0); opacity: 1; } 58% { transform: translateX(520%); opacity: 1; }
  62%, 88% { transform: translateX(520%); opacity: 0; } 89% { transform: translateX(0); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes nf-trail { 0%, 22% { opacity: 0; } 30%, 52% { opacity: 1; } 60%, 100% { opacity: 0; } }
.nf-center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 640px; padding: 40px 24px; }
.nf-center::before { content: ""; position: absolute; left: 50%; top: 50%; width: 680px; height: 400px; max-width: 120%; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, var(--paper), color-mix(in srgb, var(--paper) 70%, transparent) 60%, transparent); }
.nf-404 { display: block; width: 440px; max-width: 100%; height: auto; aspect-ratio: 440 / 150; overflow: visible; margin-bottom: 6px; }
.nf-404 text { font: 900 170px var(--head); letter-spacing: -.04em; }
.nf-404 stop:first-child { stop-color: var(--accent); } .nf-404 stop:last-child { stop-color: var(--second); }
.nf-404 .base { fill: color-mix(in srgb, var(--paper) 80%, transparent); stroke: rgba(var(--ink-rgb), .14); stroke-width: 1.5; }
.nf-404 .run { fill: none; stroke: url(#nf-glow); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 220 680; animation: nf-glow 4.5s linear infinite;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .6)); }
.nf-404 .run2 { animation-delay: -2.25s; opacity: .55; }
@keyframes nf-glow { to { stroke-dashoffset: -900; } }
.nf h1 { margin: 4px 0 8px; font-size: 30px; line-height: 1.15; }
.nf-center > p { margin: 0 0 20px; max-width: 460px; font-size: 15px; }
.nf-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nf-acts kbd { font: 600 11px var(--head); padding: 1px 6px; border-radius: 5px; background: rgba(var(--ink-rgb), .06); margin-left: 2px; }
/* без движения: огоньки и полоса не бегут — контур целиком подсвечен, полоса на месте */
html[data-motion="calm"] .nf-run, html[data-motion="calm"] .nf-run::after, html[data-motion="calm"] .nf-404 .run { animation: none; }
html[data-motion="calm"] .nf-404 .run { stroke-dasharray: none; opacity: .5; } html[data-motion="calm"] .nf-404 .run2 { display: none; }
@media (prefers-reduced-motion: reduce) {
  .nf-run, .nf-run::after, .nf-404 .run { animation: none; } .nf-404 .run { stroke-dasharray: none; opacity: .5; } .nf-404 .run2 { display: none; }
}
@media (max-width: 991px) { .nf { margin: -18px -14px -26px; min-height: calc(100vh - 48px); } .nf-acts kbd { display: none; } }   /* main на узком: 18 / 14 / 26; клавиатуры нет — без ⌘K */
@media (max-width: 767px) {
  .nf h1 { font-size: 24px; } .nf-center { padding: 32px 16px; } .nf-run { min-width: 120px; } .nf-flag { display: none; }
}