/* Ширины, которые двигает сам пользователь: полоса со списком (--strip) и поля карточки
   (--dbw). Обе объявлены БЕЗ наследования и пишутся скриптом (applyPanes) прямо на те
   элементы, что их читают: переменная на корне (или любая наследуемая) заставляла браузер
   пересчитывать стили у всех ~40 тысяч узлов на каждый шаг растягивания — 15–18 мс, больше
   кадра. Без наследования шаг стоит ~3 мс (замер на «Проектах»). Значения по умолчанию —
   для случая, когда скрипт ещё не писал. */
@property --strip{syntax:'<length>';inherits:false;initial-value:325px}
/* То же для настройки сущности: ширина панели макета (--esprev, пишется на .eset-prev) и его
   масштаб (--pvz, пишется на сам макет #esetPrev). */
@property --esprev{syntax:'<length-percentage>';inherits:false;initial-value:35%}
@property --pvz{syntax:'<number>';inherits:false;initial-value:.7}
@property --dbw{syntax:'<length-percentage>';inherits:false;
  initial-value:clamp(320px, min(56%,760px), calc(100% - 260px))}
/* Оформление Aura CRM.
   Отдельным файлом, а не внутри страницы: так его видно целиком, он
   кэшируется браузером и не мешает читать разметку. Порядок правил
   и их содержимое при выносе не менялись ни на знак. */
:root{
  /* Цвет обводки один на всю систему: захотим поменять — меняется здесь,
     а со временем это станет настройкой оформления. */
  --stroke:#D1D1D6; --stroke-w:0.5px;
  /* Одно сглаживание на все движения раскладки: полоса, карточка, шапка. */
  --ez:cubic-bezier(.4,0,.2,1);
  /* Кривая открытия: карточка и сжатие шапки/списка. Прежняя (.22,1,.36,1) за первый кадр отдавала до 29 % пути —
     на 700 px это 200 px за кадр, и движение читалось как рывки; эта растягивает ход ровнее (шаг ≤ 15 %). */
  --openc:cubic-bezier(.3,.7,.2,1);
  /* Тень залипающих плашек (подписи дней, блок группы правок): достаточно плотная, чтобы
     плашка читалась поверх прокручиваемого под ней. */
  --pill-shadow:0 2px 8px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.05);
  /* Скругление блоков карточки. Подпись раздела отступает от края ровно на
     столько же — иначе при малом радиусе она висит в воздухе, а при большом
     наезжает на скруглённый угол. Внутренние блоки на 5 меньше внешнего. */
  --radius:18px; --radius-in:max(2px, calc(var(--radius) - 5px));
  /* Скругление элементов — множитель, а не размер: у кнопки, плашки статуса
     и аватара свои размеры, и общий радиус в пикселях сплющил бы мелкие.
     При 1 всё как задумано, при 0 — прямые углы, больше — мягче. */
  --el:1;
  --bg:#F2F2F7; --panel:#fff; --line:var(--stroke); --line2:var(--stroke);
  --calside:340px;                 /* колонка календарей и расписания слева */
  --tx:#1C1C1E; --tx2:#8A8A8E; --accent:#32ADE6; --accent-d:#2B94C4;
  /* Бледные подложки выделения — тот же цвет, разбавленный белым. */
  --accent-soft:#EAF6FD; --accent-soft2:#D2EDFA;
  --green:#34C759; --red:#FF3B30; --amber:#FF9F0A;
  /* Тема оформления: цвета и тени, которые переключаются пресетом целиком
     («Оформление» → «Тема оформления»), а не крутятся по одной. Значения
     по умолчанию — вид, каким система была до тем. */
  --card-bg:#fff; --field-bg:#FBFBFC; --chat-bg:#F7F7FA; --chat-surface:color-mix(in srgb,var(--chat-bg) 94%,#000); --chip-bg:#EFEFF3;
  --table-bg:transparent; --icon-fg2:#8E8E93; --side-bg:#F2F2F7; --thead-bg:#FAFAFC;
  --shadow-head:none; --shadow-sec:none; --shadow-chat:none; --shadow-foot:none;
  --head-fade:none;
  /* Таблица: строка заголовков темнее строк, закреплённые колонки — ещё темнее, закреплённый заголовок — темнее всех.
     Фоны сплошные: закреплённое не должно просвечивать. */
  --th-bg:#F0F0F4; --frozen-bg:#F4F4F7; --frozen-head-bg:#E4E5EA;
  /* Закреплённые строки — на полтона темнее своих соседей: слой поверх белой основы (и поверх полосы чередования). */
  --frozen-tint:rgba(84,94,128,.055); --frozen-base:#fff;
  /* Чередование строк таблицы: серо-синий с прозрачностью, поверх любого фона — в тон
     холодному фону и заголовку (#F2F2F7, #F0F0F4). Прежний (60,60,67) был почти нейтральным
     и на белом читался как бежево-серый; у тёплой темы свой, бежевый. */
  --zebra:rgba(84,94,128,.05);
  /* Цвет ссылок и цвет текста сущностей (ссылок на другие записи) — отдельно
     от --accent, хоть по умолчанию и берут его же: приходят из своих полей
     в «Оформлении», а не следуют за акцентом, как только их зададут. */
  --link-color:var(--accent); --entity-color:var(--accent);
  /* Шрифты по ролям текста: заголовки, подзаголовки, основной, второстепенный.
     По умолчанию — то же начертание, каким система была до выбора шрифтов. */
  --font-h1:"SF Pro Rounded",Inter,-apple-system,sans-serif;
  --font-h2:"SF Pro Rounded",Inter,-apple-system,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --font-2:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  /* настраиваемые пользователем */
  --fs:14px;      /* размер текста */
  /* Отступ сверху и снизу у всего, где лежат данные: строки таблицы, поля
     карточки, строки настройки сущности, подборки, расписание, карточки доски,
     пункты выпадающих списков. Одно число на всю систему — иначе «плотно»
     в таблице соседствует с «просторно» в карточке. Настраивается в
     «Оформлении»: четыре ступени и ручной ввод. */
  --row:10px;
  /* Размер плашки — один для этапов в шапке и пунктов навигации карточки: высота капсулы навигации считается от неё. */
  /* Высота плашки — как у строки поля карточки: отступ --row сверху и снизу (с поправкой на её рамку, у строки она
     одна — нижняя), текст того же размера. */
  --pill-fs:var(--fs); --pill-lh:calc(var(--fs) * 1.4); --pill-py:calc(var(--row) - var(--stroke-w) / 2); --pill-px:14px;
  /* Поле страницы: расстояние от содержимого до краёв рабочей области.
     Одно на всё — таблицу, доску, календарь, списки и дашборды, — чтобы
     разделы не разъезжались друг относительно друга. */
  --pad:20px;
  --ui:1;         /* масштаб всего интерфейса */
}
*{box-sizing:border-box}
/* иконки: одна толщина обводки на всё приложение */
.i{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.i.sm{width:18px;height:18px;stroke-width:1.7}
.i.xs{width:13px;height:13px;stroke-width:2}

/* Единая стрелка у всех выпадающих списков: 10px от края, 10px до текста.
   Нативную стрелку так не позиционировать, поэтому рисуем свою. */
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
  padding-right:34px}
html{height:100%;overscroll-behavior-x:none}
/* Процентная высота уже учитывает zoom — корректировать её на масштаб не нужно */
body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);
  font:var(--fs)/1.4 var(--font-body);
  overflow:hidden;zoom:var(--ui)}
button{font:inherit;color:inherit}

.app{display:flex;height:100%}   /* высоту задаёт body с поправкой на масштаб */
/* Боковое меню — макет Figma: «menu» (развёрнутое, 180px) и «menu1»
   (свёрнутое, 51px). Состояния два, и переходят друг в друга одной общей
   анимацией ширины: .side держит место в раскладке, .sidebox лежит в нём и
   всегда равен ему по ширине — меняется только .side. Раскрытие поиском
   («peek») — то же самое развёрнутое состояние, только временное.
   Что здесь сделано ради плавности:
   — анимируется одна ширина, а не набор свойств в разное время (раньше
     подписи сжимались и растягивались порознь, и меню «рябило»);
   — подписи и название не меняют размеров, а только гаснут и проявляются
     (прозрачность — самое дешёвое, что умеет браузер);
   — ширину места под меню для остальных (--sidew) выставляем сразу, без
     перехода: переход унаследованного свойства на body пересчитывал стили
     всех ~6000 элементов на каждом кадре, около 13 мс из 16.
   Цвета берутся из переменных оформления (--side-bg фон, --tx текст,
   --side-hl выделение), скругления — из --el, отступы — из --row, поэтому
   темы и «Плотность строк» меняют и его. */
:root{--sidet:.22s var(--ez)}
/* --sidew (ширина места под меню) нужна четырём плавающим элементам, поэтому лежит на них
   самих, а не на body: унаследованное свойство, поменявшееся на body, заставляло браузер
   пересчитывать стили у всех ~38 тысяч узлов — около 14 мс на каждое раскрытие меню. */
body.split .drawer:not(.linked),#stripGrip,.rolebar,.eset{--sidew:48px}
body.sideopen.split .drawer:not(.linked),body.sideopen #stripGrip,body.sideopen .rolebar,body.sideopen .eset{--sidew:180px}
.side{position:relative;flex:0 0 48px;width:48px;transition:flex-basis var(--sidet),width var(--sidet)}
.side.open,.side.peek{flex-basis:180px;width:180px}
/* Свободное место меню — это кнопка «развернуть/свернуть», и курсор на нём это говорит:
   стрелка вправо у сжатого, влево у раскрытого. У пунктов, поиска и фото свои курсоры
   (.nav, .sidesearch, .me .ava — «рука»), поэтому на них стрелки нет. Пока поиск светится
   (в нём курсор ввода), первое нажатие на свободное место лишь заканчивает поиск и меню
   не сворачивает — стрелки на этот момент нет; она появляется, когда поиск погас. */
.sidebox{cursor:e-resize}
.side.open .sidebox,.side.peek .sidebox{cursor:w-resize}
.side:has(.sidesearch:focus-within) .sidebox{cursor:default}
/* Смысловые блоки — «системные пункты» и «разделы» — целиком (вместе с промежутками
   между строками) обычный курсор: стрелка только на свободном месте между блоками и
   по краям, а не там, где человек целится в соседний пункт. */
.navgrp{cursor:default;margin-inline:-11px;padding-inline:11px}
/* То же по бокам: поля слева и справа от блока — часть блока, стрелки там нет. У поиска
   поле «рука», как и у самой строки (нажатие по краю открывает поиск). */
.sidesearch{position:relative}
.sidesearch::before{content:'';position:absolute;inset:0 -11px}
.sidebox{--sidegap:clamp(14px,4.6vh,50px);
  /* Подложка выделения и поиска — фон меню, чуть притемнённый цветом текста.
     В макете это #F9F7F6 → #E5E3E1; считать так, а не брать --chip-bg, нужно
     потому, что в теме «Олд Мани» фон меню и --chip-bg один и тот же цвет, и
     выделение пропадало бы. */
  --side-hl:color-mix(in srgb,var(--side-bg),var(--tx) 8%);
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:stretch;
  /* Боковой отступ 11px и в сжатом (48px), и в раскрытом виде: содержимое сжатого
     меню — колонка ровно 26px, и всё в ней (поиск, подложки пунктов, строки
     разделов) стоит на одной вертикальной оси x=24, проходящей через центр значка.
     Значок внутри подложки отступает на 4px, то есть 15px от края — одинаково и в
     сжатом, и в раскрытом меню. */
  padding:30px 11px;gap:var(--sidegap);
  background:var(--side-bg);color:var(--tx);font:400 12px/14.3px var(--font-body);
  transition:padding var(--sidet)}
.main{flex:1;min-width:0;background:var(--panel);
  display:flex;flex-direction:column;overflow:hidden;border-left:var(--stroke-w) solid var(--line)}

/* Шапка держит одну и ту же высоту (аватар 35 + имя 17 + должность 2×14,3) и
   в свёрнутом виде: имя с должностью только гаснут, и поиск под ними не
   прыгает при раскрытии. */
.me{display:flex;flex-direction:column;align-items:center;gap:10px;height:95px;
  flex:0 0 auto;
  margin-inline:-11px;padding-inline:11px}
/* В развёрнутом меню шапка — смысловой блок целиком, вместе с промежутками и боковыми
   полями (как .navgrp): стрелки «свернуть» между фото и текстом нет, нажатие там меню не
   переключает. В свёрнутом текста под фото нет — там обычное свободное место. */
.side.open .me,.side.peek .me{cursor:default}
.ava{width:35px;height:35px;border-radius:calc(13px * var(--el));flex:0 0 auto;
  background:linear-gradient(135deg,#7A8EA8,#4A5C72);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}
/* Проявляются, когда меню уже почти раскрылось (задержка), гаснут сразу. */
/* У фото в меню overflow:hidden (его даёт общее правило .ava) обрезал бы собственную
   подсказку: скругляем сам снимок, а контейнеру даём выпускать подсказку наружу. */
.me .ava{cursor:pointer;overflow:visible}
.me .ava img{border-radius:inherit}
.mename,.mepos{width:100%;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .1s ease}
.mename{font:590 14px/17px var(--font-h2);margin-bottom:-5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mepos{font-size:12px;line-height:14.3px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.side.open .mename,.side.open .mepos,.side.peek .mename,.side.peek .mepos{
  opacity:1;transition:opacity .16s ease .1s}
/* Имя и должность видны только в развёрнутом меню — и там нажимаются так же, как фото
   (ведут в личные настройки). Нажимается сам текст, а не вся ширина шапки: ширина по
   содержимому, по краям пусто и курсор прежний. */
.side.open .mename,.side.open .mepos,.side.peek .mename,.side.peek .mepos{
  width:fit-content;max-width:100%;pointer-events:auto;cursor:pointer}

/* Стрелка: свернуть/развернуть. Лежит в верхнем отступе меню, где всё равно пусто. */
.sidetog{position:absolute;top:7px;left:calc(50% - 9px);width:18px;height:18px;padding:0;
  border:0;background:none;color:var(--icon-fg2);cursor:pointer;
  border-radius:calc(9px * var(--el));display:flex;align-items:center;justify-content:center;
  transition:left var(--sidet),background-color .15s ease}
.sidetog:hover{background:var(--side-hl)}
/* Стрелку не показываем: переключателем стало само свободное место меню (курсор там
   «стрелка»). Кнопку оставляем для клавиатуры и экранных дикторов: мышь она не ловит, а
   по Tab появляется — иначе без мыши (и на сенсорном экране) меню было бы не переключить. */
.sidetog{opacity:0;pointer-events:none}
.sidetog:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--accent);outline-offset:1px}
.sidetog svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--sidet)}
.side.open .sidetog,.side.peek .sidetog{left:calc(100% - 26px)}
.side.open .sidetog svg,.side.peek .sidetog svg{transform:rotate(180deg)}

/* Поиск по меню. Свёрнутый — круглая кнопка с лупой (26×26), развёрнутый —
   строка во всю ширину. Тянется тем же приёмом, что поиск в сущностях: поле
   ввода схлопывается в ноль, подпись уходит вместе с ним, значок остаётся. */
/* Прижат к левому краю с отступом, а не по центру: при центрировании растущей
   строки её левый край уезжал вправо и возвращался (12,5 → 28 → 15), поиск
   «скакал». Отступ 4,5px ставит свёрнутую лупу по центру колонки (35 − 26) / 2
   и плавно уходит в ноль. */
.sidesearch{display:flex;align-items:center;gap:7px;height:26px;width:100%;padding:0 7px;
  align-self:flex-start;flex:0 0 auto;cursor:pointer;
  background:var(--side-hl);border-radius:calc(13px * var(--el));
  transition:border-radius var(--sidet)}
/* Лупа при раскрытии не двигается: отступ слева у поля один и тот же (7px от края
   подложки, то есть x=18 от края меню) и у кружка, и у раскрытой строки. */
.side.open .sidesearch,.side.peek .sidesearch{border-radius:calc(10px * var(--el))}
.sidesearch .sico{flex:0 0 12px;width:12px;height:12px;color:var(--icon-fg2);fill:currentColor;stroke:none}
.sidesearch input{border:0;background:none;outline:none;flex:1 1 0;min-width:0;
  font:inherit;font-size:12px;color:var(--tx)}
.sidesearch input::placeholder{color:transparent;transition:color .12s}
.sidesearch:hover input::placeholder,.sidesearch:focus-within input::placeholder{color:var(--icon-fg2)}
.sidesearch:focus-within{box-shadow:0 0 0 1.5px var(--accent) inset}
.sidesearch .clr{flex:0 0 15px;width:15px;height:15px}
.sidesearch .clr svg{width:15px;height:15px}

/* Пункты. Системные — плитка-иконка и подпись; разделы (сущности) — одна
   строка текста: в свёрнутом виде первые два знака названия, в развёрнутом
   название целиком (два слоя друг над другом, переключаются прозрачностью —
   ширина текста при этом не меняется, ничего не перетекает). Полное название
   в свёрнутом виде остаётся в подсказке.
   Расстояния — от --row: при 10 шаг системных пунктов 33px (18 + 15), разделов
   34px (24 + 10), как в макете. */
.navgrp{display:flex;flex-direction:column}
.navgrp[hidden]{display:none}
/* Листается только развёрнутое: в свёрнутом подсказки выезжают за край меню, а
   прокрутка их обрезала бы. */
.side.moreon.open .sidebox,.side.moreon.peek .sidebox{overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.side.moreon.open .sidebox::-webkit-scrollbar,.side.moreon.peek .sidebox::-webkit-scrollbar{display:none}
.navsys{gap:calc(var(--row) * 1.5)}
.navents{gap:var(--row)}
/* Кнопка шире значка на 3px с каждой стороны (область нажатия и подложка
   выделения); отрицательный внешний отступ возвращает значок туда, где он в
   макете. В свёрнутом виде кнопка ровно по значку и стоит по центру колонки,
   в развёрнутом — на всю строку: ширина и отступ меняются плавно, вместе с меню. */
.nav{position:relative;display:flex;align-items:center;gap:5px;flex:0 0 auto;
  width:100%;margin:-3px 0;padding:3px 4px;
  border:0;background:none;color:var(--tx);cursor:pointer;text-align:left;
  font:inherit;border-radius:calc(8px * var(--el));
  transition:background-color .15s ease}
.nav:hover{background:color-mix(in srgb,var(--side-hl) 55%,transparent)}
.nav.on{background:var(--side-hl)}
/* Подпись системного пункта лежит за краем кнопки и только проявляется. */
/* Длинное название раздела не должно вылезать за плашку
   выделения — режется многоточием внутри неё. */
.nlab{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;transition:opacity .1s ease}
.side.open .nlab,.side.peek .nlab{opacity:1;transition:opacity .16s ease .1s}
/* Название раздела — один текст, а не два, меняющих друг друга: свёрнутое
   меню показывает первые два знака, а при раскрытии буквы просто
   открываются по мере того, как строка растёт (и закрываются при сжатии).
   Ширину двух знаков для каждого названия считает JS (measureNav) — у букв она
   разная, общей меркой третья буква выглядывала бы. */
.nav.ent{display:grid;width:auto;margin:0;padding:calc(var(--row) / 2) 0;
  padding-left:5px;transition:padding var(--sidet),background-color .15s ease;
  border-radius:calc(10px * var(--el));text-align:left;overflow:hidden}
.nav.ent .ntxt,.nav.ent .nshort{grid-area:1 / 1;white-space:nowrap;overflow:hidden}
.nav.ent .ntxt{width:max-content;max-width:var(--w2,17px);transition:max-width var(--sidet)}
.side.open .nav.ent .ntxt,.side.peek .nav.ent .ntxt{max-width:100%}
/* Открытая воронка или сущность — жирнее и основным цветом системы, а не только серой плашкой: так видно, где ты.
   Жирные буквы шире — ширину двух знаков для активного пункта measureNav меряет уже жирным и заново при смене раздела. */
.nav.ent.on .ntxt{font-weight:600;color:var(--accent)}
/* «Еще…»: в свёрнутом виде многоточие, в развёрнутом — слово; слой с точками
   гаснет, слово открывается. */
/* «…» — вся строка под него (26px), текст по центру: на оси, как остальные. */
.nav.more{--w2:26px;padding-left:0}
.nav.more .nshort{text-align:center}
.nav.more .ntxt{max-width:0}
/* Текст раздела стоит на одном месте (16px от края меню) и в свёрнутом, и в
   развёрнутом виде — не едет вправо при раскрытии. Плашка начинается там же, где
   кружок свёрнутого меню и строка поиска (11px), то есть выступает от текста на 5px:
   левый край плашки при раскрытии не двигается, растёт только правый. */
.side.open .nav.ent,.side.peek .nav.ent{padding-right:5px}
/* «Еще…» / «Свернуть»: в свёрнутом виде «…» по центру кружка (отступа нет), в развёрнутом
   текст встаёт на ту же линию, что названия разделов. */
.side.open .nav.more,.side.peek .nav.more{padding-left:5px}
.nav.more .nshort{opacity:1;transition:opacity .1s ease}
.side.open .nav.more .nshort,.side.peek .nav.more .nshort{opacity:0}
.navnone{font:400 12px/14.3px var(--font-body);color:var(--icon-fg2);text-align:center}
.ic{width:31px;height:31px;border-radius:calc(11px * var(--el));color:#fff;
  display:flex;align-items:center;justify-content:center}
/* Иконки меню пришли из Figma готовыми плитками — со своей заливкой и скруглением,
   поэтому им нельзя навязывать stroke/fill из .i. Скругление плитки задано в самом
   значке через --el, а не числом: «Оформление» → «Скругление элементов». */
.navi{width:18px;height:18px;display:block;flex:0 0 auto}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.nav.out,.nav.mode-sw{width:auto;margin:0;padding:3px;gap:0;justify-content:center}
.nav.out:hover,.nav.mode-sw:hover{background:none}
/* Подпись внизу — единственная, что растёт по ширине, и растёт симметрично
   вокруг значка: он остаётся по центру на всём пути. */
.nav.out .nlab,.nav.mode-sw .nlab{font-size:10px;line-height:11.9px;max-width:0;overflow:hidden;
  transition:max-width var(--sidet),opacity .1s ease,margin var(--sidet)}
.side.open .nav.out .nlab,.side.peek .nav.out .nlab,
.side.open .nav.mode-sw .nlab,.side.peek .nav.mode-sw .nlab{max-width:90px;margin-left:5px;
  transition:max-width var(--sidet),opacity .16s ease .1s,margin var(--sidet)}

/* подсказка справа от иконки */
/* Подсказка у любого значка — чёрный пузырь снизу. В боковом меню правило ниже
   перебивает её и показывает сбоку. Пустой data-tip ничего не показывает. */
[data-tip]{position:relative}
[data-tip]:not([data-tip=""])::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:#2C2C2E;color:#fff;padding:6px 11px;border-radius:calc(8px * var(--el));
  font:500 12.5px/1.2 -apple-system,Inter,sans-serif;white-space:nowrap;
  pointer-events:none;opacity:0;z-index:70;
  transition:opacity .14s ease,transform .14s ease;box-shadow:0 4px 14px rgba(0,0,0,.18)}
[data-tip]:not([data-tip=""]):hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
/* У крайних кнопок подсказку прижимаем к своему краю: по центру она уходит
   за край рабочей области и обрезается вместе с ней. */
.bar-side:not(.right) [data-tip]:not([data-tip=""])::after{left:0;transform:translateY(-4px)}
.bar-side:not(.right) [data-tip]:not([data-tip=""]):hover::after{transform:translateY(0)}
.bar-side.right [data-tip]:not([data-tip=""])::after{left:auto;right:0;transform:translateY(-4px)}
.bar-side.right [data-tip]:not([data-tip=""]):hover::after{transform:translateY(0)}

.side [data-tip]{position:relative}
.side [data-tip]::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:#2C2C2E;color:#fff;padding:6px 11px;border-radius:calc(8px * var(--el));font-size:13px;
  font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;
  /* Подсказка выезжает вправо, за пределы меню, и оказывается над настройкой
     сущности: под её панелью от подсказки была видна одна кромка. Поднимаем
     только подсказку — само меню остаётся в общем порядке и гаснет вместе
     со всем остальным, когда поверх открывают окно. */
  z-index:80;
  transition:opacity .14s ease,transform .14s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.side.open [data-tip]::after,.side.peek [data-tip]::after{display:none}
.side [data-tip]:hover::after,
/* Подсказка на фокусе нужна тем, кто ходит с клавиатуры. Но обычный :focus
   срабатывает и от нажатия мышью — раздел уже открыт, а подсказка висит,
   пока не щёлкнешь мимо. :focus-visible ловит только клавиатуру. */
.side [data-tip]:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* До того как система решила, что показывать, содержимое не рисуем: иначе
   на первом кадре успевает мелькнуть разметка, заготовленная в файле. */
body:not(.ready) .main,
body:not(.ready) .side{opacity:0}
.main{transition:opacity .12s ease}
.side{transition:flex-basis var(--sidet),width var(--sidet),opacity .12s ease}   /* к прежним переходам добавлена прозрачность */
/* Боковое меню прячем так же: пока данных нет, в нём стояли бы одни заготовки (круг с буквами вместо лица, поиск, нижние значки без
   названий разделов), и на каждой перезагрузке они мелькали полупустой колонкой слева. */
.top{padding:16px 20px 0;flex:0 0 auto;
  /* Своя стопка, как у .dh: без неё тень красится под сплошным фоном
     таблицы, которая идёт следом, и её не видно. Позиционирование без
     числа z-index (оно остаётся auto) — этого хватает, чтобы обогнать
     непозиционированную таблицу, и при этом .top не становится отдельной
     коробкой наложения: всплывающие окна внутри ннего (панель «Оформление»)
     по-прежнему меряются с затемнением (.popscrim) и прилипшими столбцами
     напрямую, своим собственным z-index — а не через потолок в .top. Была
     попытка поднять сам .top числом повыше — панель переставала гаснуть
     под своим затемнением, но заодно из-под этого затемнения выныривала
     вся шапка целиком (поиск, кнопки), хотя должна была потемнеть вместе
     со списком. */
  position:relative;box-shadow:var(--shadow-head)}
/* Тень шапки перекрывалась сплошным фоном области под ней: обе лежат в
   потоке, и та, что ниже по разметке, красится поверх. Поднимать шапку
   числом z-index нельзя — она станет коробкой наложения и заберёт в себя
   свои же всплывающие окна (см. соседний комментарий). Поэтому кладём
   затухание отдельной полосой под шапкой: она уже вне её фона и ничего
   не перекрывает сама. */
.dh::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px;
  background:var(--head-fade);pointer-events:none;
  /* Число нужно самой полосе, а не шапке: у шапки z-index остаётся auto,
     поэтому коробкой наложения она не становится и всплывающие окна в себя
     не забирает — а полоса всё равно ложится поверх области под шапкой. */
  z-index:2}
/* Название и подпись пространства — одна строка постоянной высоты: подпись
   в полосе исчезает, и без этого шапка прыгала бы на её высоту. */
/* Название и подпись пространства — одна строка постоянной высоты. Высоту
   задаём явно, а не берём у содержимого: у мелкой подписи свои метрики шрифта,
   и без этого строка становилась на пару пикселей выше, а при её исчезновении
   в полосе вся шапка подпрыгивала. */
h1{margin:0;height:1.35em;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;overflow:hidden;line-height:1.25}
/* Панель из трёх зон: слева режим таблицы, по центру создание и поиск, справа
   значки. Боковые зоны тянутся одинаково, поэтому центр остаётся по центру,
   а при сужении окна всё сжимается, а не наезжает друг на друга. */
.bar{display:flex;gap:9px;align-items:center;margin:14px 0 10px;position:relative;flex-wrap:wrap}
/* боковым зонам сжиматься ниже своего содержимого нельзя — иначе значки
   вылезают за пределы зоны и наезжают на поиск */
.bar-side{flex:1 1 0;display:flex;align-items:center;gap:9px}
.bar-side.right{justify-content:flex-end}
.bar-mid{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:9px}

/* В покое у «Создать» только подпись; плюс приходит ей на смену, когда тесно.
   Прячем не показом, а шириной с прозрачностью: display меняется мгновенно,
   а кнопке нужно уметь перетекать из плюса в подпись вместе с шириной полосы. */
.bar-mid .btn{gap:0;overflow:hidden;max-width:240px;
  transition:max-width .3s var(--openc),padding .3s var(--openc),opacity .18s ease,
             margin .3s var(--openc)}
.bar-mid .btn .i{display:block;width:0;opacity:0;overflow:hidden;
  transition:width .22s var(--ez),opacity .16s ease}
.bar-mid .btn span{display:block;max-width:240px;overflow:hidden;white-space:nowrap;
  transition:max-width .3s var(--openc),opacity .18s ease}
@media (max-width:1100px){
  .bar-mid .btn .i{width:13px;opacity:1}
  .bar-mid .btn span{max-width:0;opacity:0}
}
@media (max-width:860px){ .modepill .addr,.modepill .mode-hist{display:none} }

/* панель настроек отображения */
.pop{position:absolute;top:calc(100% + 8px);right:0;z-index:45;width:min(400px,92vw);
  background:var(--panel);border:var(--stroke-w) solid var(--line);border-radius:calc(12px * var(--el));
  box-shadow:0 12px 32px rgba(0,0,0,.14);padding:12px 14px}
.pop[hidden]{display:none}
.pop-h{font-size:12px;font-weight:700;color:var(--tx2);text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:10px}
.pop-r{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;font-size:13px}
.pop-r > span{display:flex;justify-content:space-between;align-items:center;color:var(--tx2)}
.pop-r b{color:var(--tx);font-variant-numeric:tabular-nums}
.pop-r input[type=range]{width:100%;accent-color:var(--accent);margin:0}
/* Контейнер ползунка — того же цвета, что строка поиска и значки в шапке
   (--chip-bg), а сам ползунок белый (--field-bg). Раньше здесь стоял
   системный --bg: он темой не меняется, и в «Олд мани» переключатели
   отдавали холодным серым посреди тёплых блоков. */
/* Переключатель сам по себе — на фоне страницы: контейнер цвета темы,
   выбранное белым. Внутри белых блоков правило зеркальное (см. .setpanel и
   .r-type ниже): там контейнер сливается с блоком, а серым красится
   выбранное — иначе белое на белом ничем не отличается от невыбранного. */
.seg{display:flex;gap:4px;background:var(--chip-bg);padding:3px;border-radius:calc(9px * var(--el))}
.seg button{flex:1;border:0;background:none;border-radius:calc(7px * var(--el));padding:6px 4px;cursor:pointer;
  font-size:12.5px;color:var(--tx2)}
.seg button.on{background:var(--field-bg);color:var(--tx);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pop{max-height:min(78vh,620px);overflow:auto}
.lnk.sm{font-size:11.5px;padding:0;font-weight:500}
.cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:2px 10px;background:var(--bg);border-radius:calc(9px * var(--el));padding:8px 10px}
.cbx{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx);cursor:pointer;
  padding:3px 0;min-width:0}
.cbx span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx input{appearance:none;-webkit-appearance:none;flex:0 0 15px;width:15px;height:15px;
  border:var(--stroke-w) solid var(--stroke);border-radius:calc(4px * var(--el));background:#fff;cursor:pointer;margin:0;
  position:relative}
.cbx input:checked{background:var(--accent);border-color:var(--accent)}
.cbx input:checked::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.stlist{display:flex;flex-wrap:wrap;gap:10px;background:var(--bg);border-radius:calc(9px * var(--el));
  padding:8px 10px;max-height:220px;overflow:auto}
/* Плашка статуса — единый шрифт SF Pro Rounded 600/12 везде: и в таблице, и в настройках. */
.stchip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:calc(7px * var(--el));
  font:600 12px/14px "SF Pro Rounded",Inter,-apple-system,sans-serif;white-space:nowrap}
.stchip b{font:inherit;opacity:.75}
.stchip button{border:0;background:none;color:inherit;cursor:pointer;padding:0 0 0 2px;
  font:inherit;opacity:.5}
.stchip button:hover{opacity:1}
.stname{cursor:text;border-radius:calc(4px * var(--el));padding:0 2px;margin:0 -2px}
.stname:hover{background:rgba(255,255,255,.65)}
.stren{border:0;outline:none;box-shadow:0 0 0 2px var(--accent) inset;border-radius:calc(4px * var(--el));padding:1px 4px;
  font:inherit;color:var(--tx);background:#fff;min-width:110px;max-width:190px}

/* диалог удаления статуса */
/* Окно «на запись ссылаются». Свои имена классов: «refrow» уже занят
   строками подборки в карточке, и общая на двоих разметка ломала её вид. */
.delrefs{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow:auto}
.delref{display:grid;grid-template-columns:1fr 220px;gap:12px;align-items:center;
  border:var(--stroke-w) solid var(--line);border-radius:calc(10px * var(--el));padding:9px 11px}
.delref b{display:block;font-size:13.5px;font-weight:600}
.delref .rc{font-size:12px;color:var(--tx2)}
.delref select{border:var(--stroke-w) solid var(--line);border-radius:calc(9px * var(--el));
  padding:7px 30px 7px 9px;font:13px/1.3 inherit;background-color:#fff;color:var(--tx);
  width:100%;outline:none}
.delref select:focus{border-color:var(--accent)}
.stdlg-body{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.stdlg-body p{margin:0;font-size:13.5px;color:var(--tx)}
.stopt{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.stopt input{accent-color:var(--accent);margin:0}
#stDlgTo{border:var(--stroke-w) solid var(--line);border-radius:calc(9px * var(--el));padding:9px 34px 9px 11px;
  font:inherit;background-color:#fff;margin-left:24px;max-width:100%}
#stDlgTo:disabled{opacity:.45}
.btn.danger{background:var(--red)}
.btn.danger:hover{background:#D92B21}


/* режим «поделиться» */
/* партнёру меню ни к чему — его разделы всё равно недоступны */
body.shared .side{display:none}
body.shared .main{border-left:0}
/* у партнёра из тулбара остаётся только поиск */
body.shared .bar .btn, body.shared #shareBtn, body.shared #setBtn, body.shared #fbtn,
body.shared .fpanel, body.shared .fadd, body.shared .cdel,
body.shared .pen, body.shared .addf{display:none}
body.shared .search{flex:0 1 520px}
body.shared .cell[data-edit]:hover, body.shared .edit:hover{background:none;cursor:default}

/* окно «поделиться» — та же стилистика, что у карточки поставщика и настроек */
.share-body{padding:16px 10px;overflow:auto;display:flex;flex-direction:column;gap:30px}
.sh-row{display:flex;flex-direction:column;gap:7px}
.sh-row > span{display:flex;align-items:center;gap:8px;padding:0 18px;
  font:600 14px/20px "SF Pro Rounded",Inter,-apple-system,sans-serif;color:#000;
  text-transform:none;letter-spacing:0}
.sh-row b{font:400 12px/14px "SF Pro Text",-apple-system,Inter,sans-serif;color:#B4B4B9}
.sh-row .lnk.sm{font:500 12px/14px "SF Pro Text",-apple-system,Inter,sans-serif;color:#8E8E93}
.sh-row .lnk.sm:hover{color:#007AFF}
.sh-row > input{border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius);background:#FBFBFC;
  padding:12px 14px;font:400 14px/1.4 Inter,-apple-system,sans-serif;outline:none;
  color:var(--tx)}
.sh-row > input:focus{border-color:var(--accent)}
.sh-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px 10px;
  background:#FBFBFC;border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius);padding:12px 14px;
  text-transform:none;letter-spacing:0;font-weight:400}
.sh-out{display:flex;flex-direction:column;gap:7px;background:#FBFBFC;
  border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius);padding:12px 14px;
  font:500 14px/20px Inter,-apple-system,sans-serif;color:#000}
.sh-out input{border:var(--stroke-w) solid var(--stroke);border-radius:calc(12px * var(--el));padding:10px 12px;
  font:400 12.5px/1.4 inherit;background:#fff;color:var(--tx);width:100%}
.sh-meta{color:#8E8E93;font:400 12px/15px Inter,-apple-system,sans-serif}


/* сотрудники */
/* Ширины столбцов задаёт colgroup из браузера (см. buildUsersHead) — тем же
   приёмом, что и у обычных таблиц: тянешь границу заголовка, ширина ложится
   в личные настройки. table-layout:fixed обязателен, иначе браузер тянет
   колонки по содержимому и ширины из colgroup ни на что не влияют. */
.ctable.utable{table-layout:fixed}
/* Дерево в таблице: отступ показывает подчинение — то же, что стрелки
   на доске, только слева направо. */
.utree{gap:8px;display:flex;align-items:center}
/* Размер аватара в дереве задаём явно: без него картинка растягивалась
   на всю ячейку и строка вырастала в пол-экрана. */
.utree .uava{flex:0 0 26px;width:26px;height:26px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--bg);
  font:600 10px/1 "SF Pro Text",-apple-system,Inter,sans-serif;color:var(--tx2)}
.utree .uava img{width:100%;height:100%;object-fit:cover;display:block}
/* На узком экране подпись поля перестаёт быть фиксированной: при 140 точках
   из 270 значению оставалось около сотни, и слова рвались посреди слога
   («Владе-лец»). Ниже 560 точек отдаём подписи меньше места. */
@media (max-width:560px){ .fk{flex:0 1 108px;min-width:80px;font-size:calc(var(--cfs) - 1px)} }
/* Сортируемая шапка списка кадров: тот же приём, что и в таблицах
   сущностей — щелчок по заголовку, стрелка показывает направление. */
#usersPeople th[data-usort]{cursor:pointer;user-select:none}
#usersPeople th[data-usort]:hover{color:var(--tx)}
#usersPeople th[data-usort].uon{color:var(--tx)}
#usersPeople th[data-usort]::after{content:attr(data-udir);margin-left:5px;
  color:var(--tx2);font-weight:400}
.utree-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Должность рядом с именем — вспомогательным: имя главное, должность
   поясняет. Те же роли текста, что и на плитке схемы. */
.utree-p{color:var(--tx2);font-size:calc(var(--cfs) - 2px);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
/* Пустышка вместо стрелки у листьев тянулась во всю высоту ячейки
   (.cell задан height:100%) и растягивала строку до сотни пикселей.
   Держим размер жёстко и не даём растягиваться по поперечной оси. */
.ufold{flex:0 0 16px;width:16px;height:16px;min-height:16px;max-height:16px;
  align-self:center;border:0;background:none;cursor:pointer;
  padding:0;color:var(--tx2);font-size:11px;line-height:1;display:flex;
  align-items:center;justify-content:center;transition:transform .13s ease}
.ufold:hover{color:var(--tx)}
.ufold.off{transform:rotate(-90deg)}
.utree-i{width:17px;height:17px;color:var(--tx2)}
.uava.u .utree-i{color:var(--accent-d);opacity:.75}
.uava.u{background:var(--accent-soft)}
.utable tr.uUnit .utree-t{font-weight:600}
.utable tr.uOut td{background:#FBFBFC}
.archtag.unit{background:var(--accent-soft);color:var(--accent-d)}
.utable tr.uSep td{background:var(--bg);padding:9px 14px}
.utable tr.uSep span{font-weight:600;font-size:12.5px;margin-right:10px}
.utable tr.uSep em{font-style:normal;font-size:11.5px;color:var(--tx2)}
/* word-break наследуется от .ctable и рвал имена по буквам */
.utable .cell, .utable .cell *{word-break:normal;overflow-wrap:break-word}
/* Ширину каждого столбца, кроме отметки и действий, ставит buildUsersHead
   прямо в style — инлайн бьёт любое правило класса, и сражаться с общим
   .ctable th:nth-child (он объявлен ниже по файлу, для других таблиц)
   не приходится вовсе. */
.ctable.utable th:first-child{width:38px}
.ctable.utable th:last-child{width:150px}
.utable td{vertical-align:middle}
.utable .cell{display:flex;align-items:center;gap:8px;white-space:normal}
.utable td:nth-child(1) .cell{flex-wrap:nowrap}
.utable td:nth-child(1) .edit{flex:1 1 auto;min-width:0;overflow-wrap:normal}
.utable .archtag{flex:0 0 auto;white-space:nowrap;margin-left:0}
.utable .uava{flex:0 0 auto}
.utable select{border:var(--stroke-w) solid var(--line);border-radius:calc(8px * var(--el));padding:5px 30px 5px 9px;
  font:inherit;background-color:#fff;max-width:100%}
.utable .rowact{flex-wrap:nowrap;gap:4px;justify-content:flex-end}
.utable .rowact .lnk{white-space:nowrap;font-size:11.5px}
.meRow{background:#F6FBFE}
body.readonly .bar .btn, body.readonly .fadd, body.readonly .cdel,
body.readonly .pen, body.readonly .addf{display:none}
body.readonly .cell[data-edit]:hover, body.readonly .edit:hover{background:none;cursor:default}


/* «поделиться» и фильтры есть у любой сущности. Раньше кнопка стояла только
   в тарифах — она вела на публичную ссылку карты ЖК; теперь за ней общая
   выгрузка, и нужна она везде. Скрываем через [hidden] из setPage, а не
   селектором по странице: разделы заводит сам владелец, и перечислить их
   в стилях нельзя. */
body:not(.hasent) #fbtn{display:none}
.sq[hidden]{display:none}
/* Поля выгрузки — тремя колонками, как в диалоге ссылки: два десятка полей
   списком в одну колонку не окинуть взглядом. */
/* Порядок полей — как в таблице, сверху вниз и только потом во второй
   столбец: раскладка по строкам ставила рядом соседей из разных концов
   таблицы, и найти нужное поле глазами было нечем. */
.shp-cols{display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 12px}
.shp-note{font:400 12px/16px "SF Pro Text",-apple-system,Inter,sans-serif;color:var(--tx2)}
/* «все · снять · как в таблице» — три ссылки подряд, без зазора они читаются
   одной фразой. */
.fright{margin-left:auto;display:flex;gap:10px;align-items:center}

/* фото сотрудника */
/* Значки заведённых сущностей и переключателя режима */
.nav[hidden]{display:none}
/* Перенос пункта меню: взятый скрывается на месте (под курсором едет двойник),
   соседи расступаются. Двойник — вне меню, поэтому оформление пункта задаём ему
   отдельно: те же шрифт и цвет, подписи видны, если меню было развёрнуто. */
.nav.navdrag{visibility:hidden}
/* Место, куда встанет пункт: один плавающий индикатор (его кладёт и двигает JS,
   см. wireSideMenu), а не подсветка у каждого соседа по очереди — тот вспыхивал и
   прыгал. Скользит с тем же замедлением, что и расступающиеся соседи. */
.navland{position:absolute;top:0;left:0;pointer-events:none;opacity:0;
  border-radius:calc(10px * var(--el));
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),width .18s ease,height .18s ease,opacity .16s ease}
.navland.on{opacity:1}
/* Пока тащим, подсказки к пунктам не показываем: они всплывали под двойником. */
body.fdragging .side [data-tip]::after{display:none}
.fghost.nav{margin:0;gap:5px;padding:3px;background:var(--side-bg,#F2F2F7);color:var(--tx);
  font:400 12px/14.3px var(--font-body);display:flex;align-items:center;cursor:grabbing}
.fghost.nav.on{background:color-mix(in srgb,var(--side-bg,#F2F2F7),var(--tx) 8%)}
.fghost.nav.ent{display:grid;padding:calc(var(--row) / 2) 5px;border-radius:calc(10px * var(--el))}
body.navwide .fghost.nav .nlab{opacity:1}
body.navwide .fghost.nav.ent .ntxt{max-width:none}
.navents:not(.all) .nav.ent.over{display:none}
.navl{font:600 11px/1 "SF Pro Text",-apple-system,sans-serif;color:#8E8E93}
.nav.on .navl{color:var(--accent)}
.nav.addent,.nav.more{color:var(--icon-fg2)}
.nav.mode-sw .navl{width:18px;height:18px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:calc(5px * var(--el));background:var(--side-hl)}
.nav.mode-sw.on{background:none}
.nav.mode-sw.on .navl{background:var(--accent-soft)}
/* Сколько уведомлений ждёт в разделе — числом в углу значка. Размер прежний,
   каким он был у узкого меню (15px, жирные цифры, кольцо цвета фона), — менялось
   только место: угол самого значка, а не край кнопки. [data-tip] выше уже даёт
   кнопке position:relative, второй раз не задаём.
   Знак значит ровно одно и всегда сходится с лентой «Уведомлений»: горит —
   значит там есть непрочитанное. */
.navbadge{position:absolute;left:16px;top:-6px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--red,#FF3B30);color:#fff;
  font:700 10px/15px -apple-system,sans-serif;text-align:center;pointer-events:none;
  box-shadow:0 0 0 2px var(--side-bg)}
/* У строки раздела (текст, а не значок) число стоит справа: в развёрнутом виде
   в конце строки, в свёрнутом — в углу. Строка обрезает содержимое (буквы
   открываются по ширине), поэтому счётчик в неё не кладём — он лежит в углу
   кнопки и выходит за её край. */
.nav.ent{overflow:visible}
.nav.ent .ntxt,.nav.ent .nshort{overflow:hidden}
.nav.ent .navbadge{left:auto;right:-6px;top:-6px;transition:right var(--sidet),top var(--sidet)}
.side.open .nav.ent .navbadge,.side.peek .nav.ent .navbadge{right:5px;top:calc(50% - 7.5px)}
/* Подпись не должна распирать строку заголовка: своя высота строки у мелкого
   шрифта больше не влияет на высоту шапки, и при её исчезновении ничего
   не прыгает. */
.top h1[data-space]:not([data-space=""])::after{content:' · ' attr(data-space);
  color:#C7C7CC;font-size:13px;line-height:inherit}
/* В полосе подпись пространства убираем: место дороже, а какая система
   открыта, видно по значку слева — он и так всё время на глазах. */
body.split .top h1[data-space]:not([data-space=""])::after{content:none}
.blankhint{max-width:420px;margin:60px auto;line-height:1.6}
.blankhint .btn{margin-top:18px}

.uava{cursor:pointer;display:flex;border-radius:50%;overflow:hidden;flex:0 0 auto}
.uava:hover{box-shadow:0 0 0 2px var(--accent)}
.mini img,.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava{overflow:hidden}


/* Панель настроек — новый стиль карточек (макеты 693-17824 / 17847 / 17837):
   окно белое, блоки #FBFBFC со скруглением 18, без рамок. */
/* Цвета — из темы, а не жёстко белым: в «Олд мани» фон панели тёплый
   (--card-bg), блоки и шапка с подвалом белые (--field-bg). Раньше панель
   была белой при любой теме и выбивалась из системы. */
.setpanel{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(460px,94vw);
  max-height:none;background:var(--card-bg);border-radius:0;padding:0;z-index:45;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(100%);transition:transform .2s cubic-bezier(.4,0,.2,1);
  box-shadow:-6px 0 28px rgba(0,0,0,.14)}
.setpanel.on{transform:none}
.set-body{flex:1;overflow:auto;padding:16px 10px 10px}
.set-head{flex:0 0 auto;padding:18px 20px;border-bottom:var(--stroke-w) solid var(--line);
  position:relative;background:var(--field-bg)}
.setclose{position:absolute;top:16px;right:16px}
/* Название страницы или окна — один стандарт: SF Pro Rounded 600/23.
   Подпись под ним — SF Pro 500/12. Новые окна берут .set-title / .set-sub и попадают в стандарт. */
h1,.set-title,.dh h2{font:600 23px/27px "SF Pro Rounded",Inter,-apple-system,sans-serif;color:#000;
  font-family:var(--font-h1)}
.set-sub{font:500 12px/15px "SF Pro Text",-apple-system,Inter,sans-serif;color:#8E8E93;margin-top:5px}
.setpanel .fsec{gap:7px}
.setpanel .fhead{padding:0 var(--radius)}
.setpanel .fcard{background:var(--field-bg);border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius)}
.set-card{padding:10px;display:flex;align-items:center;gap:10px}
.set-scale input[type=range]{flex:1;accent-color:var(--accent);margin:0}
/* обводка: пипетка, код цвета и сброс */
.set-stroke{display:flex;align-items:center;gap:10px;padding:10px 12px}
.set-stroke input[type=color]{width:32px;height:32px;flex:0 0 32px;padding:0;cursor:pointer;
  border:var(--stroke-w) solid var(--stroke);border-radius:calc(9px * var(--el));background:none}
.set-stroke input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.set-stroke input[type=color]::-webkit-color-swatch{border:0;border-radius:calc(7px * var(--el))}
.hexin{flex:0 0 100px;height:32px;border:var(--stroke-w) solid var(--stroke);border-radius:calc(9px * var(--el));
  padding:0 10px;text-transform:uppercase;
  font:400 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.hexin:focus{outline:none;border-color:var(--accent)}
.set-stroke .lnk{margin-left:auto}
.scaleval{display:flex;align-items:baseline;font:600 12px/15px Inter,-apple-system,sans-serif}
.scaleval input{width:34px;border:0;outline:none;background:none;font:inherit;
  text-align:right;padding:0}
.scaleval input:focus{color:var(--accent-d)}
/* плотность: плашка выбранного режима — скругление 16, фон #F0F0EE */
.set-seg{padding:3px}
/* Переключатель лежит в белом блоке настроек, поэтому свой фон ему не нужен:
   выбранное красим цветом темы — так же, как в окне отчёта. */
/* Отступ от плашки до края контейнера постоянный — 3, как и везде у
   переключателей. */
.setpanel .seg{flex:1;background:none;padding:3px;gap:3px}
/* Высоту задаёт плотность строк, а не число в стилях: отступ внутри плашки
   равен тому же «отступу внутри строки», которым настраивается вся система.
   «Тесно» — 3, «свободно» — 15, и переключатель послушно следует за ними,
   как ячейки таблицы. Жёсткая наименьшая высота это ломала: в «тесно»
   плашка оставалась прежней, а строки вокруг сжимались. */
.setpanel .seg button{border:0;border-radius:calc(var(--radius) - 2px);
  padding:var(--row) 7px;font:400 var(--cfs)/1.4 var(--cff);color:var(--tx2)}
.setpanel .seg button.on{background:var(--chip-bg);color:var(--tx);font-weight:500;box-shadow:none}
.setpanel .stlist,.setpanel .cols{background:none;padding:0;flex:1}
.set-toggle{padding:6px 10px}
/* Шрифты по ролям — четыре строки одна под другой, а не в ряд, как обычно
   у .set-card: подписи «Заголовки»/«Подзаголовки»/… не влезли бы в строку. */
.set-fonts{flex-direction:column;align-items:stretch;padding:3px 12px;gap:0}
.set-fonts .rowpx select{width:170px;border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(9px * var(--el));padding:6px 26px 6px 8px;font:inherit;background-color:#fff}
.set-foot{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;border-top:var(--stroke-w) solid var(--line);background:var(--field-bg);
  font-size:12px;color:var(--tx2)}

/* точка выбора цвета в чипе */
.stdot{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.75);
  padding:0;cursor:pointer;flex:0 0 auto}
.stdot:hover{transform:scale(1.25)}

/* палитра */
.stpal{position:fixed;z-index:90;background:#fff;border:var(--stroke-w) solid var(--line);
  border-radius:calc(11px * var(--el));box-shadow:0 10px 28px rgba(0,0,0,.16);padding:8px;
  display:grid;grid-template-columns:repeat(6,26px);gap:6px}
.stpal button{width:26px;height:26px;border-radius:calc(8px * var(--el));border:1px solid rgba(0,0,0,.06);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.stpal button:hover{transform:scale(1.12)}
.stpal i{width:10px;height:10px;border-radius:50%}

/* условное форматирование — правый клик по заголовку таблицы. Панель выезжает
   справа тем же приёмом, что и .drawer.linked (соседняя запись): свой
   собственный, отдельный от общего scrim/closeTop затеняющий слой — так
   проще не задеть чужую логику «что сейчас сверху и что закрывать по Esc». */
.cfscrim{position:fixed;inset:0;background:rgba(0,0,0,.18);opacity:0;pointer-events:none;
  transition:opacity .2s;z-index:88}
.cfscrim.on{opacity:1;pointer-events:auto}
.cfpanel{position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);
  background:var(--card-bg,#fff);z-index:89;box-shadow:-6px 0 28px rgba(0,0,0,.16);
  transform:translateX(100%);transition:transform .2s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:22px 22px 18px;gap:16px;overflow-y:auto}
.cfpanel.on{transform:none}
.cfhead{font:600 17px/22px var(--cff);color:var(--tx)}
.cffield{font:400 13px/18px var(--cff);color:var(--tx2);margin-top:-10px}
.cffield b{font-weight:600;color:var(--tx)}
.cfempty{font:400 13px/17px var(--cff);color:#AEAEB2}
.cfrule{display:flex;flex-direction:column;gap:8px;padding:14px;
  border:var(--stroke-w) solid var(--stroke);border-radius:calc(12px * var(--el));
  position:relative;background:#FBFBFC}
.cflabel{font:400 12px/16px var(--cff);color:var(--tx2)}
.cfop{width:100%;box-sizing:border-box;border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(9px * var(--el));background:#fff;font:400 13px/1 var(--cff);
  color:var(--tx);outline:none;padding:9px 10px;appearance:none}
.cfnum,.cfdate,.cftext{width:100%;box-sizing:border-box;border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(9px * var(--el));background:#fff;font:400 13px/1 var(--cff);
  color:var(--tx);outline:none;padding:9px 10px}
.cfnum::placeholder,.cftext::placeholder{color:#AEAEB2}
.cffmt{display:flex;align-items:center;gap:8px}
.cfbold{flex:0 0 auto;width:30px;height:30px;border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(9px * var(--el));background:#fff;color:var(--tx2);
  font:700 13px/1 var(--cff);cursor:pointer}
.cfbold.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.cfseg{display:flex;flex:1;border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(9px * var(--el));overflow:hidden}
.cfmode{flex:1;border:0;background:#fff;padding:8px 0;cursor:pointer;
  font:400 12.5px/1 var(--cff);color:var(--tx2)}
.cfmode:first-child{border-right:var(--stroke-w) solid var(--stroke)}
.cfmode.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.cfcolor{width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.08);
  cursor:pointer;padding:0;flex:0 0 auto}
.cfcolor:hover{transform:scale(1.1)}
.cfwhocount{flex:0 0 auto;border:var(--stroke-w) solid var(--stroke);background:#fff;
  border-radius:calc(9px * var(--el));padding:0 12px;height:30px;cursor:pointer;
  font:400 12.5px/1 var(--cff);color:var(--tx2);white-space:nowrap}
.cfwhocount:hover{border-color:var(--accent);color:var(--accent)}
.cfprev{border-radius:calc(8px * var(--el));padding:8px 10px;font:400 13px/1 var(--cff);
  color:var(--tx)}
.cfprev.b{font-weight:600}
.cfdel{position:absolute;top:10px;right:10px;border:0;background:none;cursor:pointer;
  padding:2px;display:flex;color:#AEAEB2}
.cfdel:hover{color:var(--red)}
.cfdel svg{width:15px;height:15px;fill:currentColor}
.cfrule.movable{padding-left:28px}
.cfmove.fmove{position:absolute;top:16px;left:12px;width:8px;height:13px}
.cfprio{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  font:400 12px/16px var(--cff);color:var(--tx2)}
.cfprio svg{width:8px;height:13px;fill:#BDBDC1;vertical-align:-2px}
.cfadd{align-self:flex-start;border:0;background:none;cursor:pointer;
  font:400 13px/17px var(--cff);color:var(--accent);padding:2px 0}
.cfadd:hover{text-decoration:underline}
.cfdone{margin-top:auto;border:0;border-radius:calc(10px * var(--el));background:var(--accent);
  color:#fff;font:600 13.5px/1 var(--cff);padding:12px;cursor:pointer}
.cfdone:hover{background:var(--accent-d)}


/* плашка режима «Войти как» */
.impbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:95;
  display:flex;align-items:center;gap:12px;background:#2C2C2E;color:#fff;
  border-radius:calc(13px * var(--el));padding:10px 16px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.28);
  white-space:nowrap}
.impbar b{font-weight:600}
.impbar button{border:0;border-radius:calc(8px * var(--el));background:var(--accent);color:#fff;
  padding:6px 12px;font:600 12.5px/1 inherit;cursor:pointer}
.impbar button:hover{background:var(--accent-d)}

.popscrim{z-index:40}


/* составная кнопка «Создать» */

/* черновая строка */
.draftrow td{background:#FFFCF2}
.draftrow:hover td{background:#FFF9E8}
.draftcell .draftdel{opacity:.6;color:var(--red)}
.draftcell:hover .draftdel{opacity:1}
.draftdel:hover{background:#FFE9E7 !important}



.wrap{position:relative}

/* закрепление столбцов */
th{position:relative}
/* размер и логика цветов — как у карандаша и глобуса в ячейке проекта */
.pinbtn{position:absolute;top:50%;right:14px;transform:translateY(-50%);
  border:0;background:none;color:var(--tx2);cursor:pointer;padding:2px;border-radius:calc(5px * var(--el));
  opacity:0;display:flex;transition:opacity .12s,color .12s}
.pini{width:13px;height:13px;display:block;fill:currentColor;stroke:none}
th:hover .pinbtn{opacity:.6}
.pinbtn:hover{opacity:1 !important;background:var(--bg);color:var(--accent-d)}
.pinbtn.on{opacity:1;color:var(--accent)}
.pinbtn.on:hover{color:var(--accent-d)}

/* тумблер */
.pop-r.sw{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;color:var(--tx2)}
.pop-r.sw input{appearance:none;-webkit-appearance:none;flex:0 0 40px;width:40px;height:23px;
  border-radius:12px;background:#D8D8DE;position:relative;cursor:pointer;margin:0;
  transition:background .18s}
.pop-r.sw input::after{content:'';position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.pop-r.sw input:checked{background:var(--green)}
.pop-r.sw input:checked::after{transform:translateX(17px)}
.pop-f{display:flex;justify-content:space-between;align-items:center;
  border-top:var(--stroke-w) solid var(--line2);padding-top:9px;font-size:12px;color:var(--tx2)}
.btn{background:var(--accent);color:#fff;border:0;border-radius:calc(13px * var(--el));padding:9px 18px;
  font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--accent-d)}
/* Поиск сжимается до одной лупы: поле ввода схлопывается в ноль,
   подпись уходит вместе с ним, а значок остаётся на месте. */
.search{cursor:text;flex:0 1 360px;width:360px;min-width:35px;max-width:360px;display:flex;align-items:center;gap:7px;
  background:var(--chip-bg);border-radius:calc(13px * var(--el));padding:0 8px;height:35px;overflow:hidden}
.search .sico{flex:0 0 15px;width:15px;height:15px;color:var(--icon-fg2);fill:currentColor;stroke:none}
/* подпись поиска появляется только при наведении и во время ввода */
#q::placeholder{color:transparent;transition:color .12s}
.search:hover #q::placeholder,.search:focus-within #q::placeholder{color:var(--icon-fg2)}
.btn{flex:0 0 auto}
.sq{flex:0 0 auto}
.bar-mid .btn{height:35px;padding:0 18px}
.search input{border:0;background:none;outline:none;flex:1 1 0;font:inherit;min-width:0}
.clr{border:0;background:none;color:var(--icon-fg2);width:17px;height:17px;
  cursor:pointer;padding:0;flex:0 0 17px;
  display:flex;align-items:center;justify-content:center}
.clr svg{width:17px;height:17px;fill:currentColor;stroke:none}
/* Наведение меняет только цвет самого крестика. Подложка под ним выглядела
   как выскочивший ниоткуда кружок — да ещё и другого размера, чем крестик. */
.clr:hover{color:var(--red)}
.clr[hidden]{display:none}
/* кнопки тулбара — иконки из Figma с собственной подложкой */
/* Подложку под значком рисует кнопка, а не сам значок: в картинке скругление
   было вшито наглухо, и когда в оформлении задавали свои углы, эти кнопки
   оставались круглыми среди почти прямых. */
.sq{width:35px;height:35px;border-radius:calc(13px * var(--el));background:var(--chip-bg);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;padding:0}
.tbi{width:35px;height:35px;display:block}
/* Значки тулбара пришли из Figma с заливкой прямо в path — перекрашиваем
   темой поверх неё, а не перерисовываем каждый значок. */
.tbi path{fill:var(--icon-fg2)}
.sq:hover{background:#E5E5EA}
.sq.on .tbi{filter:saturate(0) brightness(.55)}
.sq.on{box-shadow:0 0 0 2px var(--accent);border-radius:calc(13px * var(--el))}
/* Кнопка фильтра: фон рисует она сама, поэтому может разъехаться и показать,
   сколько строк осталось после отбора. Активный отбор — синяя обводка и значок. */
.fbtn{width:35px;background:var(--chip-bg);border-radius:calc(13px * var(--el));gap:10px;color:var(--icon-fg2);
  transition:width .16s ease,padding .16s ease}
.fico{width:15px;height:11px;flex:0 0 15px;display:block;fill:currentColor}
/* Значок отчётов — из общего набора обводочных иконок (ic-*), а не из
   заливных figma-значков тулбара: .tbi перекрашивает заливку, тут её нет. */
/* Во всю кнопку, как у значков тулбара: сам рисунок занимает середину
   своего поля 35×35 и выходит ровно в 15 точек — в 17-точечной рамке
   он ужимался вдвое и выглядел мелкой соринкой. */
.rico{width:35px;height:35px;flex:0 0 35px;display:block;color:var(--icon-fg2)}
.fstat{display:none;font:500 12px/1 "SF Pro Text",-apple-system,Inter,sans-serif;
  color:var(--tx2);white-space:nowrap}
.fbtn.wide{width:auto;padding:0 10px}
/* счётчик условий встаёт в строку внутри плашки, а не висит на углу */
.fbtn.wide .badge{position:static;top:auto;right:auto;flex:0 0 17px;
  width:17px;height:17px;min-width:17px;border-radius:calc(9px * var(--el));padding:0}
.fbtn.wide .fstat{display:block}
.fbtn.act{box-shadow:0 0 0 2px var(--accent);color:var(--accent)}
.fbtn.act .fstat{color:var(--accent-d)}
/* имя включённого набора — плашкой прямо на кнопке */
/* плашка ровно 25 в высоту — в плашке 35 остаётся по 5 сверху и снизу, как в макете */
.fbchip{display:flex;align-items:center;gap:10px;height:25px;padding:0 10px;border-radius:calc(9px * var(--el));
  background:#FBFBFC;color:#000;font:500 12px/15px "SF Pro Text",-apple-system,Inter,sans-serif;
  white-space:nowrap;max-width:min(220px,20vw);min-width:0;box-sizing:border-box}
.fbchip[hidden]{display:none}
/* на узком экране имя набора прячем — оно всё равно видно в самой панели */
@media (max-width:1100px){ .fbchip{display:none} }
.fbchip>span:first-child{overflow:hidden;text-overflow:ellipsis}
/* Крестик сброса всплывает в правом верхнем углу кнопки — счётчик остаётся на месте. */
.fbx{position:absolute;top:-6px;right:-6px;width:17px;height:17px;display:none;
  align-items:center;justify-content:center;cursor:pointer;color:var(--icon-fg2);z-index:2}
.fbx svg{width:17px;height:17px;display:block}
.fbx:hover{color:var(--red)}
.fbtn.hasf:hover .fbx{display:flex}   /* при одном лишь поиске сбрасывать нечего */
.fbtn:hover{background:#E5E5EA}

.sq[disabled]{cursor:default;opacity:.35}
.sq[disabled]:hover .tbi{filter:none}
.sq[hidden]{display:none}
.badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:10px;
  min-width:17px;height:17px;border-radius:calc(9px * var(--el));display:flex;align-items:center;
  justify-content:center;padding:0 4px;font-weight:600}
.badge[hidden]{display:none}
.meta{text-align:center;color:var(--tx2);font-size:12.5px;padding-bottom:10px}
.meta:empty{display:none}   /* пусто — не занимаем полосу под панелью */

/* фильтры, воронка, счётчик и легенда живут в одной сворачиваемой панели */
.fpanel{display:none}
.fpanel.open{display:block}
/* ---------- панель фильтров ----------
   Каждое условие — сплошная капсула из сегментов: связка, поле, условие, значения.
   Сегменты разделены тонкими линиями, у каждого свой раскрывающийся список. */
/* панель выходит за боковые отступы шапки — во всю ширину области,
   сверху и снизу отбита линией */
/* Снизу линию не рисуем: там уже есть верхняя граница таблицы, и вместе
   они складывались в двойную — оттого низ и казался жирнее. */
.fpanel{background:#fff;margin-inline:-20px;border-top:var(--stroke-w) solid var(--line)}
/* смысловые блоки разделены на 20, заголовок с наборами внутри своей группы — на 18 */
.fbody{display:flex;flex-direction:column;gap:20px;padding:18px}
.fgroup{display:flex;flex-direction:column;gap:18px}
.ftitle2{margin:0;font:600 18px/21px "SF Pro Rounded",Inter,-apple-system,sans-serif;color:#000}
.fviews{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Плашка набора по макету: 5/10 внутрь, зазор 10, корзина ровно 9×10. */
.fview{display:inline-flex;align-items:center;gap:10px;height:25px;padding:0 10px;
  border-radius:calc(9px * var(--el));background:#FBFBFC;border:var(--stroke-w) solid var(--stroke);cursor:pointer;
  font:500 12px/15px Inter,-apple-system,sans-serif;color:#000}
.fview.on{border-color:var(--accent)}
.fname{border-color:var(--accent);padding:0 10px}
.fname input{border:0;outline:none;background:none;font:inherit;width:150px}
.fview .x{width:9px;height:10px;color:#AEAEB2;background:none;border:0;padding:0;
  display:flex;align-items:center;flex:0 0 9px;cursor:pointer}
.fview .x svg{width:9px;height:10px;display:block;fill:currentColor}
.fview .x:hover{color:var(--red)}
.fsave{width:24px;height:24px;border:0;background:none;padding:0;cursor:pointer;flex:0 0 24px;
  color:#8E8E93}
.fsave svg{width:24px;height:24px;display:block}
.fsave:hover{color:var(--accent)}      /* как у остальных значков — загорается синим */

/* условия идут через 5, а до кнопок под ними — те же 20, что и между блоками */
.filters{display:flex;flex-direction:column;gap:5px;align-items:flex-start;overflow-x:auto}
.filters .fbtns{margin-top:15px}
/* капсула не переносится: длинный набор плашек уезжает вместе со строкой, а не рвётся */
.frule{display:flex;align-items:stretch;height:35px;border-radius:calc(13px * var(--el));background:#FBFBFC;
  border:var(--stroke-w) solid var(--stroke);overflow:hidden;flex:0 0 auto}
.fseg{display:flex;align-items:center;gap:10px;padding:0 10px;border-left:var(--stroke-w) solid var(--stroke);
  font:500 12px/15px "SF Pro Text",-apple-system,Inter,sans-serif;color:#000;white-space:nowrap}
/* связка и условие — курсивом, поле — жирнее, значения обычным начертанием */
.fseg.join,.fseg.op{font-style:italic;color:#AEAEB2}
.fseg.fld{font-weight:600}
.fseg:first-child{border-left:0}
/* активный сегмент подсвечиваем сами: системная рамка фокуса тут чужеродна */
.fseg:focus-within{background:var(--accent-soft)}
.fseg :focus{outline:none}
/* «выпадашка» без системного вида: свой шеврон 8×5 справа */
.fsel{appearance:none;border:0;background:none;font:inherit;color:inherit;outline:none;
  cursor:pointer;padding:0 18px 0 0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M1 1l3 3 3-3' fill='none' stroke='%238E8E93' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right center}
.fseg.op{color:#AEAEB2}
.fseg.join{width:70px;box-sizing:border-box}
.fseg.join.fixed{color:#AEAEB2}
.fseg.fld .fsel{min-width:110px}
/* Значение занимает ровно свою ширину: никаких минимумов и обрезки —
   иначе между текстом и крестиком зияет пустота разной величины. */
.fseg.val{padding:0 10px;gap:10px}
.fseg.val .fsel{min-width:0;max-width:none;width:auto;text-overflow:clip}
/* числовые поля — такие же голые сегменты, без системной рамки и своей подсветки */
.fseg.num{gap:8px}
.fnum{border:0;background:none;font:inherit;color:inherit;outline:none;width:52px;padding:0;
  appearance:none;text-align:left}
.fnum::placeholder{color:#AEAEB2}
.funit,.fdash{color:#AEAEB2}
/* дата — системный календарь, но без чужой рамки и с нашим значком */
.fdate{border:0;background:none;font:inherit;color:inherit;outline:none;padding:0;
  font-variant-numeric:tabular-nums}
.fdate::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer;margin-left:4px}
.fdate:hover::-webkit-calendar-picker-indicator{opacity:.8}
.fdel{border:0;padding:0 10px;background:none;cursor:pointer;display:flex;
  align-items:center;color:#8E8E93}
.fdel svg{width:17px;height:17px;fill:currentColor}
.fdel:hover{color:var(--red)}
.fvals .fplus svg{width:12px;height:12px;fill:currentColor}
.fplus{border:0;border-left:var(--stroke-w) solid var(--stroke);background:none;cursor:pointer;width:35px;
  display:flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 35px}
.fplus svg{width:13px;height:13px;fill:currentColor}
/* статусы выбираются плашками прямо внутри капсулы */
.fseg.chips{gap:5px;padding:0 10px;flex-wrap:nowrap}
.fchip{border:0;cursor:pointer;border-radius:calc(7px * var(--el));padding:4px 9px;background:#F0F0F2;color:#AEAEB2;
  font:600 12px/15px Inter,-apple-system,sans-serif;white-space:nowrap}

/* Значение занимает столько, сколько занимает текст: сегменты подстраиваются. */
button.fsel.pk{text-align:left;color:#000;padding:0;background:none;white-space:nowrap}
.fsel .ph{font-style:normal;color:#AEAEB2}
.vdel{border:0;background:none;padding:0;cursor:pointer;color:#8E8E93;display:flex;
  align-items:center;flex:0 0 12px}
.vdel svg{width:17px;height:17px;margin:-3px;fill:currentColor}
.vdel:hover{color:var(--red)}

/* «Исключить» — всё правее условия становится красным, как в макете.
   Обводка капсулы и разделители тоже красные, чтобы серое не спорило с заливкой. */
/* Скобка «или» — сдвигом вправо: линию рисовать негде, у капсулы overflow
   скрыт ради скруглений, а сдвиг показывает вложенность не хуже. */
.frule.grp{margin-left:20px}
.ffml{margin:5px 0 0;font:400 12px/16px "SF Pro Text",-apple-system,Inter,sans-serif;color:var(--tx2)}
.frule.excl{border-color:#FFD8D6}
.frule.excl .fseg{border-left-color:#FFD8D6}
.frule.excl .fseg.op{color:var(--red)}
.frule.excl .fseg.val{color:var(--red);background:#FFF4F4;border-color:#FFD8D6}
.frule.excl .fseg.val .fsel,.frule.excl .vdel{color:var(--red)}
.frule.excl .fvals .fplus svg{width:12px;height:12px;fill:currentColor}
/* Красным плюс становится вместе со всем условием — когда оно «исключить».
   В обычном «равно» он такой же, как остальные кнопки: правило было записано
   без привязки к условию и красило его всегда. */
.frule.excl .fplus{color:var(--red);background:#FFF4F4;border-color:#FFD8D6}

/* Свой выпадающий список: встаёт рядом с полем, прокручивается в обе стороны. */
.picker.menu{width:210px}
/* Панель шаблонов задач: та же плашка, но строка — не одна кнопка на всё,
   а название и два действия, как у сохранённых наборов фильтра (.fview). */
.tpl-menu{width:260px}
.tpl-row{display:flex;align-items:center;gap:8px;padding:6px 9px}
.tpl-row .tpl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font:500 12.5px/15px Inter,-apple-system,sans-serif;color:#000}
.tpl-row .lnk{padding:0;font-size:12px;white-space:nowrap}
.tpl-row .x{width:9px;height:10px;color:#AEAEB2;background:none;border:0;padding:0;flex:0 0 auto}
.tpl-row .x svg{width:9px;height:10px;display:block;fill:currentColor}
.tpl-row .x:hover{color:var(--red)}
/* Подсказка под полем — тот же список, только без поиска: искать нечего,
   человек уже набирает в самом поле. */
.picker.sugbox{width:auto;min-width:220px;max-width:420px}
/* Список выбора всегда поверх — в том числе поверх окна с вопросом: он и
   открывается из такого окна, когда спрашивают, на кого перевести связи. */
.picker{position:fixed;z-index:95;width:280px;max-width:calc(100vw - 12px);
  background:#fff;border:var(--stroke-w) solid var(--stroke);border-radius:calc(13px * var(--el));overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.16);display:flex;flex-direction:column}
.pk-q{border:0;border-bottom:var(--stroke-w) solid var(--stroke);outline:none;padding:10px 12px;
  font:500 12px/15px Inter,-apple-system,sans-serif}
.pk-list{overflow-y:auto;max-height:280px;padding:4px}
.pk-item{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:calc(var(--row) - 3px) 9px;border-radius:calc(8px * var(--el));
  font:500 12px/15px Inter,-apple-system,sans-serif;color:#000}
.pk-item:hover{background:#F0F4F8}
.pk-item.on{background:var(--accent-soft);color:var(--accent-d)}
.pk-item.muted{color:#8E8E93}
.pk-g{padding:8px 9px 3px;font:600 11px/14px Inter,-apple-system,sans-serif;
  color:#8E8E93;letter-spacing:.02em}
.pk-g:first-child{padding-top:3px}
/* Поле ручного ввода отступа — под ступенями, тем же блоком: в один ряд
   они не помещаются, подпись ломается на три строки. */
.set-seg.dens{flex-direction:column;align-items:stretch;gap:0}
.rowpx{display:flex;align-items:center;gap:10px;padding:9px 6px 3px;
  font:400 13px/1.35 var(--cff);color:#3A3A3C}
.rowpx span{flex:1 1 auto}
.rowpx input{width:64px;text-align:center;border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(9px * var(--el));padding:6px 8px;font:inherit;background:#fff;outline:none}
.rowpx input:focus{border-color:var(--accent)}
.rowpx i{font-style:normal;color:#8E8E93}
/* Строка даты: две половины и тумблер часов справа. Пустая половина —
   бледная подсказка формата, а не пустое место: видно, что туда можно вписать. */
.dcell{display:flex;align-items:center}
.dpair{display:flex;align-items:center;gap:6px;min-width:0}
/* Одна дата — и мерка ей не нужна: пустое место справа от неё выглядело
   как оборванный интервал. */
.dpair.one .dt-a{min-width:0}
/* Половины стоят рядом по левому краю, а не растянуты на всю ячейку: две даты
   в разных концах строки взглядом не собрать в один период. */
.dpair{flex:0 1 auto}
.dpair .dt-a,.dpair .dt-b{flex:0 0 auto}
/* Мерки — по самой длинной надписи в поле, с запасом в пару пикселей:
   «24.08.2026» это 75 пикселей, «11:00» — 35. Ужал сильнее — и последняя
   цифра года обрезалась прямо в поле ввода. */
.dpair.pd .dt-a,.dpair.pd .dt-b{min-width:78px}
.dpair.pt .dt-a,.dpair.pt .dt-b{min-width:38px}
/* Правка — той же ширины, что и чтение: растянутые по краям ячейки половины
   взглядом в один период не собрать, да и целиться в тире неудобно. В какую
   половину метил человек, решает не ширина поля, а место тире при чтении. */
.rng.dted{width:auto;gap:6px}
.fv .rng.dted input,.rng.dted input{flex:0 0 auto;min-width:0;text-align:left}
.fv .rng.dted.pd input,.rng.dted.pd input{width:78px}   /* «24.08.2026» */
.fv .rng.dted.pt input,.rng.dted.pt input{width:38px}   /* «11:00» */
.dpair i{font-style:normal;color:#C7C7CC}
.dtog{flex:0 0 auto;display:flex;align-items:center;gap:8px;border:0;background:none;
  cursor:pointer;padding:var(--row) 12px;color:#8E8E93;margin-left:auto;
  font:400 var(--cfs)/1.4 var(--cff);border-left:var(--stroke-w) solid var(--stroke)}
/* Строка даты: подпись, дата и тумблер «Время». В узкой карточке втроём они
   не помещаются, и тумблер налезал на дату — пусть лучше уходит на свою
   строку и встаёт по правому краю. Дате оставляем место под «дд.мм.гггг». */
.frow:has(> .dtog){flex-wrap:wrap}
.frow:has(> .dtog) > .fv{min-width:96px}
.frow:has(> .dtog) > .dtog{border-top:var(--stroke-w) solid transparent}
.dtog i{width:34px;height:20px;border-radius:999px;background:#D1D1D6;position:relative;
  transition:background .16s}
.dtog i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .16s}
.dtog.on{color:var(--accent-d)}
.dtog.on i{background:var(--accent)}
.dtog.on i::after{transform:translateX(14px)}
/* Сетка месяца. Внешние углы блока скруглены, ячейки внутри — почти нет:
   то же правило, что в карточке и в настройках. */
.picker.daypick{width:262px;padding:8px}
.dp-h{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px}
.dp-t{font:700 14px/17px "SF Pro Rounded","SF Pro Text",-apple-system,sans-serif;color:#000}
.dp-nav{border:0;background:none;cursor:pointer;color:#8E8E93;padding:4px;
  display:flex;border-radius:calc(8px * var(--el))}
.dp-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.dp-nav.r svg{transform:rotate(180deg)}
.dp-nav:hover{background:#F0F4F8;color:#3A3A3C}
.dp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding-bottom:4px}
.dp-wd span{text-align:center;font:500 11px/14px Inter,-apple-system,sans-serif;color:#8E8E93}
.dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-d{border:0;background:none;cursor:pointer;height:32px;padding:0;
  border-radius:calc(9px * var(--el));font:500 13px/1 Inter,-apple-system,sans-serif;color:#1C1C1E}
.dp-d:hover{background:#F0F4F8}
.dp-d.out{color:#C7C7CC}
/* Сегодня — обводкой, выбранное — заливкой: это два разных сообщения. */
.dp-d.now{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-d)}
.dp-d.on{background:var(--accent);color:#fff}
.dp-f{display:flex;justify-content:space-between;gap:6px;padding-top:8px;margin-top:6px;
  border-top:var(--stroke-w) solid var(--stroke)}
.dp-b{border:0;background:none;cursor:pointer;padding:5px 8px;color:var(--accent);
  border-radius:calc(8px * var(--el));font:500 12px/15px Inter,-apple-system,sans-serif}
.dp-b.dim{color:#8E8E93}
.dp-b:hover{background:#F0F4F8}
/* Список часов узкий: в нём одни часы, широкая колонка ни к чему. */
.picker.timepick{width:104px}
/* Со временем окончания в строке ещё и длительность — колонке нужно место. */
.picker.timepick.wide{width:170px}
.picker.timepick.wide .pk-item{display:flex;justify-content:space-between;align-items:baseline;
  text-align:left;gap:8px}
.picker.timepick .pk-item i{font-style:normal;color:#8E8E93;font-size:11px}
.picker.timepick .pk-list{max-height:236px}
.picker.timepick .pk-item{text-align:center;font-variant-numeric:tabular-nums}
/* Флажок: «да» видно значком, «нет» — пустой рамкой. Словами читается
   медленнее, а пустое поле от «нет» вообще не отличить. */
.chk{display:inline-flex;width:16px;height:16px;box-sizing:border-box;
  border-radius:calc(4px * var(--el));border:var(--stroke-w) solid var(--stroke);
  align-items:center;justify-content:center;color:transparent;
  font:700 11px/1 var(--cff);flex:0 0 16px}
.chk.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* «завести запись» стоит первым и отделено от найденного */
.pk-item.pk-new{color:var(--accent);margin-bottom:4px;padding-bottom:9px;
  border-bottom:var(--stroke-w) solid var(--stroke);border-radius:calc(8px * var(--el)) calc(8px * var(--el)) 0 0}
.pk-empty{padding:12px;color:#8E8E93;font-size:12px;text-align:center}

.fbtns{display:flex;align-items:center;gap:18px}
.faddbtn{height:30px;padding:0 14px;border-radius:calc(9px * var(--el));border:var(--stroke-w) solid var(--accent-soft2);background:none;
  color:var(--accent);font:500 12px/15px Inter,-apple-system,sans-serif;cursor:pointer}
.faddbtn:hover{background:var(--accent-soft)}
.fadd-sel{position:absolute;opacity:0;pointer-events:none}
.freset{border:0;background:none;color:var(--accent);cursor:pointer;
  font:500 12px/15px Inter,-apple-system,sans-serif;padding:0}
.lnk{background:none;border:0;color:var(--accent);cursor:pointer;padding:6px 0;font-weight:500}
.search.active{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent) inset}

/* ---------- панель отчёта ---------- */
/* Окно отчёта. Отдельным окном поверх затемнения, а не полосой под шапкой:
   отчёт смотрят целиком — настройка слева, готовый отчёт справа, и обе
   половины листаются каждая сама по себе. */
.rwin{position:fixed;z-index:46;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1560px,94vw);height:min(1000px,92vh);background:var(--card-bg);
  /* Окно — блок, а не элемент: скругление берём из «блоков» (var(--radius)),
     тем же, чем скруглены остальные окна системы (.modal) и разделы карточки.
     Через «скругление элементов» углы жили своей жизнью — по настройке для
     кнопок и плашек. */
  border-radius:var(--radius);box-shadow:0 24px 64px rgba(0,0,0,.22);
  display:flex;flex-direction:column;overflow:hidden}
.rwin[hidden]{display:none}
/* Края и углы окна отчёта — за них окно тянут. Центр остаётся на месте,
   поэтому кромка идёт за курсором, а противоположная уходит на столько же. */
/* Граница настройки и отчёта: невидимая полоса поверх линии между ними. */
.rwin-grip{flex:0 0 0;width:0;position:relative;z-index:3;overflow:visible}
.rwin-grip::before{content:'';position:absolute;top:0;bottom:0;left:-5px;width:10px;cursor:col-resize}
#rwin .rwin-side,#pwin .rwin-side{flex:0 0 var(--rwin-split,40%)}
.rwin-rs{position:absolute;z-index:6;display:block;background:none}
.rwin-rs.n,.rwin-rs.s{left:14px;right:14px;height:8px;cursor:ns-resize}
.rwin-rs.w,.rwin-rs.e{top:14px;bottom:14px;width:8px;cursor:ew-resize}
.rwin-rs.n{top:0}.rwin-rs.s{bottom:0}.rwin-rs.w{left:0}.rwin-rs.e{right:0}
.rwin-rs.nw,.rwin-rs.ne,.rwin-rs.sw,.rwin-rs.se{width:16px;height:16px}
.rwin-rs.nw{top:0;left:0;cursor:nwse-resize}.rwin-rs.se{bottom:0;right:0;cursor:nwse-resize}
.rwin-rs.ne{top:0;right:0;cursor:nesw-resize}.rwin-rs.sw{bottom:0;left:0;cursor:nesw-resize}
/* Шапка и подвал — светлее самого окна (тот же белый, что у блоков внутри):
   в тёплой теме окно стоит на #FCFCFB, и без этого края сливались с ним.
   Тень — по общему правилу оформления: у шапки своя переменная, у подвала
   своя, зеркальная ей. Своей тени у окна отчёта не было вовсе, и при
   включённых в оформлении тенях оно выбивалось из остальных окон системы. */
.rwin-head{flex:0 0 auto;display:flex;flex-direction:column;gap:14px;background:var(--field-bg);
  padding:20px 22px;border-bottom:var(--stroke-w) solid var(--line);
  position:relative;box-shadow:var(--shadow-head)}
/* Затухание отдельной полосой — тем же приёмом, что у шапки карточки:
   тень, оставленная в потоке, красится под сплошным фоном соседа снизу
   и попросту не видна. */
/* Тень шапки та же, что у подвала: одна тень и ничего сверху. Полоса затухания
   под ней, которая была для того, чтобы тень была видна, больше не нужна: шапка
   лежит выше тела окна и тень видно сама. */
.rwin-head{z-index:2}
.rwin-head-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.rwin-ent{font:500 13px/16px "SF Pro Text",-apple-system,Inter,sans-serif;
  color:var(--tx2);margin-left:10px}
.rwin-head .setclose{position:static}
/* Плашки сохранённых отчётов, дашбордов и планов — та же форма, что у
   разделов в карточке записи (.dnav button): белая капсула с обводкой, у
   выбранной обводка и текст цветом темы. Раньше здесь была своя форма —
   заливка цветом текста у выбранной, — и один и тот же по смыслу элемент
   выглядел в двух местах системы по-разному. */
.r-pill{display:flex;align-items:center;gap:6px;max-width:240px;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  border:var(--stroke-w) solid var(--stroke);background:var(--field-bg);
  font:400 13px/16px "SF Pro Text",-apple-system,Inter,sans-serif;color:var(--tx)}
.r-pill:hover{background:var(--chip-bg)}
.r-pill.on{border-color:var(--accent);color:var(--accent-d);background:var(--field-bg)}
.rwin-saved{display:flex;flex-wrap:wrap;gap:6px}
.rwin-saved[hidden]{display:none}
/* У плашки с крестиком отступ справа меньше: место занимает сам крестик. */
.rwin-saved .r-pill{padding:6px 6px 6px 14px}
.rwin-saved .r-pill .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rwin-saved .r-pill-shared{width:12px;height:12px;flex:0 0 12px;opacity:.6}
.rwin-saved .r-pill-x{width:18px;height:18px;flex:0 0 18px;padding:0;border:0;
  border-radius:50%;background:none;color:inherit;opacity:.5;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.rwin-saved .r-pill-x:hover{opacity:1;background:rgba(0,0,0,.08)}
.rwin-saved .r-pill-x svg{width:8px;height:8px;fill:currentColor}
/* Строка нового имени при сохранении — та же плашка, только вместо ярлыка
   поле ввода и переключатель «видно команде». */
.rwin-saved .r-pill-new{cursor:default;padding:4px 6px 4px 12px}
.rwin-saved .r-pill-new input[type=text]{border:0;background:none;outline:none;
  font:inherit;color:var(--tx);width:150px}
.rwin-saved .r-pill-new label{display:flex;align-items:center;gap:4px;cursor:pointer;
  padding:4px 6px;border-radius:14px;font-size:11.5px;color:var(--tx2)}
.rwin-saved .r-pill-new label:has(input:checked){background:var(--accent-soft);color:var(--accent-d)}
.rwin-saved .r-pill-new label svg{width:12px;height:12px}
.rwin-body{flex:1;min-height:0;display:flex;align-items:stretch}
/* Окно планов раздела: один столбец плиток, свой прокручиваемый край. Ниже окна настройки плана (pwin). */
.plwin{width:min(980px,94vw);height:min(720px,86vh)}
.plwin .rwin-foot-act .lnk{white-space:nowrap}
.plwin-body{flex:1;min-height:0;overflow:auto;padding:20px 22px;background:var(--card-bg)}
/* Настройка стоит на том же фоне, что и само окно: своего оттенка ей не
   нужно — блоки внутри и так белые и от фона отделены. */
.rwin-side{flex:0 0 470px;min-width:0;overflow:auto;padding:20px 22px;
  display:flex;flex-direction:column;gap:22px;
  border-right:var(--stroke-w) solid var(--line);background:var(--card-bg)}
/* Подвал — вторая опора окна, тень своя, направленная вверх: та же
   переменная, что у нижней панели карточки (.dnew). */
.rwin-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 22px;background:var(--field-bg);
  border-top:var(--stroke-w) solid var(--line);
  position:relative;box-shadow:var(--shadow-foot)}
.r-form{display:flex;flex-direction:column;gap:16px}
/* Ячейка с выбором — как правимое поле в карточке: обводки у неё нет,
   строка живёт по общей плотности и цветам темы, а список открывается
   по нажатию (в нём же и поиск). */
/* Подписи здесь длиннее обычных полей карточки («Сгруппировать по»,
   «Сортировать по»), и общих 140 точек им мало — рвались на две строки. */
.r-form .fk{flex:0 0 175px}
.r-form .fv-pick{cursor:pointer}
.r-form .fv-pick:hover{background:var(--bg)}
/* Переключатель типа — такой же блок, как соседние разделы карточки:
   свой фон ему не нужен, он ничем не особеннее их (тот же приём, что
   у #ogKind в оргструктуре). */
.r-form .r-type .seg{background:none;padding:3px;gap:3px}
/* Высота — от плотности строк: отступ внутри плашки равен «отступу внутри
   строки» из оформления. При «обычной» плотности выходит та же 41, что в
   макете, а в «тесной» переключатель сжимается вместе со всем остальным. */
.r-form .r-type .seg button{flex:1 0 0;padding:var(--row) 0;
  font:400 var(--cfs)/1.4 var(--cff);border-radius:calc(var(--radius) - 2px)}
.r-form .r-type .seg button.on{background:var(--chip-bg);color:var(--tx);
  font-weight:400;box-shadow:none}
.r-hint{margin:0;font-size:12px;color:var(--tx2);max-width:52ch}
/* Узкое окно — колонки друг под друга: настройка и отчёт рядом в него не влезают. */
@media (max-width:900px){
  .rwin-body{flex-direction:column;overflow:auto}
  .rwin-grip{display:none}
  #rwin .rwin-side,#pwin .rwin-side,.rwin-side{flex:0 0 auto;border-right:0;border-bottom:var(--stroke-w) solid var(--line);overflow:visible}
}

/* Раскрытая группа: из чего сложилось число. */
.r-drill{margin-top:18px;padding-top:14px;border-top:var(--stroke-w) solid var(--line)}
.r-drill-h{font:600 13px/16px Inter,-apple-system,sans-serif;margin-bottom:8px}
.r-drill-list{display:flex;flex-wrap:wrap;gap:6px}
.r-drill-row{border:var(--stroke-w) solid var(--stroke);background:var(--field-bg);
  border-radius:calc(9px * var(--el));padding:6px 10px;cursor:pointer;
  font:400 12.5px/15px Inter,-apple-system,sans-serif;color:var(--accent);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-drill-row:hover{background:var(--accent-soft);border-color:var(--accent-soft2)}

/* Пара дат: обе одинаковой ширины и обе со значком календаря. Раньше
   вторая упиралась в край ячейки и значок у неё обрезался — выходило, что
   нажать календарь можно только у «с», хотя выбирают обе даты. */
.r-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
.r-dates .fdate{flex:1 1 92px;min-width:0}
.r-actions{display:flex;align-items:center;gap:16px}
/* Своя прокрутка: длинный отчёт листается внутри своей половины окна,
   настройка слева при этом остаётся на месте. */
/* Колонка, а не просто блок: диаграмма забирает всю свободную высоту окна
   (у неё flex:1) вместо того, чтобы жаться сверху и оставлять полполя пустым. */
/* Черты слева нет: её рисует правая граница самой настройки. Когда линию
   ставили обе стороны, толщина складывалась вдвое и не слушалась настройки
   обводки — при 1 точке выходило 2. */
.r-result{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;padding:20px 22px;
  display:flex;flex-direction:column;background:var(--field-bg)}
/* Шапка итога: число слева, выгрузка справа — появляется вместе с самим
   итогом, до него делиться нечем. */
.r-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 6px;
  flex:0 0 auto}
.r-total{font:700 22px/26px "SF Pro Rounded",Inter,-apple-system,sans-serif;margin:0}
.r-total span{font:500 12px/15px Inter,-apple-system,sans-serif;color:var(--tx2);margin-left:8px}
.rwin-foot-act{display:flex;align-items:center;gap:12px}

/* ---------- планы ---------- */
/* Строка под шапкой: выбор раздела и дашборда. Отступы — общие для
   содержимого страницы, иначе она липнет к краю, а плитки под ней стоят
   с полями. */
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:var(--pad) 0 16px;flex-wrap:wrap;min-height:35px}
.pl-head:empty{display:none}
/* Переключатель видов — той же формы и того же цвета, что строка поиска
   рядом: одна высота (35), один радиус (13) и один фон из темы. Выбранное
   — белой плашкой, как в макете; свой цвет ей не нужен, это тот же белый,
   которым в системе покрыты блоки (--field-bg). */
/* display:flex у сегмента перевешивает [hidden] по порядку каскада — та же
   грабля, что у кнопки «Создать». Скрываем явно, иначе переключатель видов
   раздела «Отчёты и планы» висел бы в шапке любой сущности. */
.pl-scope[hidden]{display:none}
/* .us-seg — полоса состояний в «Пользователях»: тот же переключатель. */
.pl-scope,.us-seg{flex:0 0 auto;height:35px;background:var(--chip-bg);gap:3px;padding:2.5px;
  border-radius:calc(13px * var(--el));align-items:center;box-sizing:border-box}
/* 35 снаружи, 30 внутри: 2,5 отступа сверху и снизу — как в макете. */
.pl-scope button,.us-seg button{padding:8px 10px;border-radius:calc(11px * var(--el));height:30px;
  font:400 var(--cfs)/1.4 var(--cff);color:var(--tx2);white-space:nowrap;
  display:flex;align-items:center;justify-content:center}
.pl-scope button:hover,.us-seg button:hover{color:var(--tx)}
.pl-scope button.on,.us-seg button.on{background:var(--field-bg);color:var(--tx);font-weight:500;box-shadow:none}
.pl-list{display:flex;flex-direction:column;gap:12px;padding:0 0 40px}
/* Карточка плана — тот же блок, что разделы карточки записи: свой фон,
   обводка и скругление из «блоков». */
.pl-card{background:var(--field-bg);border:var(--stroke-w) solid var(--stroke);
  border-radius:var(--radius);box-shadow:var(--shadow-sec);padding:16px 18px;
  display:flex;flex-direction:column;gap:11px;cursor:pointer}
.pl-card:hover{border-color:var(--line2)}
.pl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pl-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.pl-name b{font:600 15px/1.3 var(--cff)}
.pl-sub{font-size:12.5px;color:var(--tx2)}
.pl-nums{display:flex;align-items:baseline;gap:7px;flex:0 0 auto}
.pl-nums b{font:700 20px/1 "SF Pro Rounded",Inter,-apple-system,sans-serif;
  font-variant-numeric:tabular-nums}
.pl-nums b.ok{color:var(--green)}
.pl-nums span{font-size:12.5px;color:var(--tx2)}
/* Полоса выполнения с меткой ожидаемого уровня: по ней видно не только
   «сколько сделано», но и «где мы должны были быть сегодня». */
.pl-bar{position:relative;height:8px;border-radius:calc(4px * var(--el));
  background:var(--chip-bg);overflow:hidden}
.pl-bar.big{height:10px;margin:2px 0 4px}
.pl-fill{display:block;height:100%;background:var(--accent);border-radius:inherit}
.pl-fill.done{background:var(--green)}
.pl-mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--tx2);opacity:.55}
.pl-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--tx2)}
.pl-foot .ok{color:var(--green)}
.pl-foot .bad{color:var(--red)}
.pl-fc,.pl-steps-n{color:var(--tx2)}
.pl-hint{margin:6px 0 0;font-size:12px;color:var(--tx2);max-width:60ch}
/* Сводка: плитки отложенных отчётов рядом с планами. */
/* Сетка дашборда: двенадцать клеток в ряду, высота ряда — постоянная.
   Плитка занимает столько клеток, сколько ей задали углом, и от этого же
   зависит, что в ней помещается (см. dashShow). На узком экране клеток
   меньше, чтобы плитка в три клетки не превращалась в полоску. */
.sm-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:118px;gap:12px}
@media (max-width:1100px){ .sm-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:700px){ .sm-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Угол для растягивания: виден при наведении, как ручки границ у столбцов. */
.dash-grip{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;
  opacity:0;border-radius:0 0 var(--radius) 0}
.dash-grip::after{content:'';position:absolute;right:4px;bottom:4px;width:7px;height:7px;
  border-right:2px solid var(--tx2);border-bottom:2px solid var(--tx2);border-radius:0 0 2px 0}
.sm-tile:hover .dash-grip{opacity:.55}
.dash-grip:hover{opacity:1}
body.dashgrip{cursor:nwse-resize;user-select:none}
/* Плитку можно взять и перенести: курсор говорит об этом заранее, а взятая
   плитка прячется — вместо неё под курсором едет двойник. */
.sm-tile{cursor:grab}
.sm-tile.drag{visibility:hidden}
.sm-tile:active{cursor:grabbing}
.sm-tile{background:var(--field-bg);border:var(--stroke-w) solid var(--stroke);
  border-radius:var(--radius);box-shadow:var(--shadow-sec);padding:14px 16px;cursor:pointer;
  display:flex;flex-direction:column;gap:4px}
.sm-tile:hover{border-color:var(--line2)}
.sm-tile b{font:700 22px/1.1 "SF Pro Rounded",Inter,-apple-system,sans-serif;
  font-variant-numeric:tabular-nums}
.sm-name{font-size:13px;font-weight:600}
.sm-sh{font-weight:400;font-size:11px;color:var(--tx2)}
.sm-sub{font-size:11.5px;color:var(--tx2)}
/* Дашборд: плитки с крестиком в углу и строка действий под ними. */
.sm-tile{position:relative}
.sm-tile.gone{opacity:.6}
.sm-tile .pl-bar{margin-top:6px}
/* Плитка во всю ширину — для диаграмм: число читается и в узкой, а
   столбцы в ней сминаются. */
.sm-tile{overflow:hidden;min-width:0}
.sm-tile.chart b{font-size:26px}
/* Диаграмма прокручивается внутри плитки: групп в отчёте бывает два десятка,
   и обрезать их по нижнему краю — значит показать половину правды. Прокрутка
   не выходит за плитку (overscroll-behavior), иначе колесо у нижнего края
   уносило бы всю страницу. */
.sm-chart{margin-top:10px;flex:1 1 auto;min-height:0;overflow:hidden auto;
  overscroll-behavior:contain;display:flex;flex-direction:column}
/* График плана — одна картинка, тянется по размеру плитки; прокручивать в
   нём нечего. */
.sm-chart:has(.pl-graph-sm){overflow:hidden}
/* График плана в плитке: тянется по ширине, высота — сколько осталось. */
/* Тот же график, что в окне плана, только вписанный в плитку: занимает её
   целиком и по ширине, и по высоте — размер viewBox пересчитывается по
   контейнеру после отрисовки (planSparkFit).
   Имя класса своё, с приставкой: общий «mini» в системе занят круглыми
   аватарами, и график от него получал скругление в половину — на плитке
   вместо кривой был синий овал. */
.pl-graph.pl-graph-sm{width:100%;height:100%;min-width:0;flex:1 1 auto;min-height:70px}
.pl-spark-l{display:flex;gap:12px;margin-top:6px;font-size:11px;color:var(--tx2)}
/* Диаграмма отчёта тянется по плитке, а не держит свою высоту: у высокой
   плитки внизу оставалась пустота, у низкой — обрезалось. */
.sm-chart .r-cols{min-height:0;height:100%}
.sm-chart .r-line{height:100%;min-height:90px}
.sm-chart .r-list-row{padding:4px 0}
.dash-set{position:absolute;top:6px;right:30px;width:22px;height:22px;border:0;background:none;
  padding:0;cursor:pointer;color:var(--tx2);opacity:0;border-radius:50%;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.sm-tile:hover .dash-set{opacity:1}
.dash-set:hover{background:var(--bg);color:var(--tx)}
.dash-x{position:absolute;top:8px;right:8px;width:20px;height:20px;border:0;background:none;
  padding:0;cursor:pointer;color:var(--tx2);opacity:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.sm-tile:hover .dash-x{opacity:1}
.dash-x:hover{background:var(--bg);color:var(--red)}
.dash-x svg{width:9px;height:10px;fill:currentColor}
.dash-add{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
/* display:flex перевешивает [hidden] по порядку каскада — та же грабля, что
   была у переключателя видов и у кнопки «Создать». Без этой строки список
   дашбордов висел и на вкладках «Отчёты» и «Планы», где он ни при чём. */
.pl-dash-pick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pl-dash-pick[hidden]{display:none}
.pl-dash-pick .r-pill{cursor:pointer}
/* Заготовки плана: крупные кнопки с примером — по ним выбирают глазами,
   а не читают подряд. */
.pl-kits{display:flex;flex-direction:column;gap:8px}
.pl-kit{text-align:left;border:var(--stroke-w) solid var(--stroke);background:var(--field-bg);
  border-radius:var(--radius);padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.pl-kit:hover{border-color:var(--accent);background:var(--accent-soft)}
.pl-kit b{font:600 14px/1.3 var(--cff);color:var(--tx)}
.pl-kit span{font-size:12px;color:var(--tx2)}
.pl-note{color:var(--tx2);font-size:12.5px}
.pl-state{margin:8px 0 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--tx2)}
.pl-state .ok{color:var(--green)}
.pl-state .bad{color:var(--red)}
/* Содержимое окна плана не жмётся, а прокручивается: во flex-колонке блоки
   по умолчанию ужимаются, и таблица ступеней с разрезом обрезались вместо
   того, чтобы дать прокрутку. */
.pwin .r-result > *{flex:0 0 auto}
.pl-h{margin:20px 0 8px;font:600 13px/16px var(--cff);display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap}
.pl-split{display:flex;gap:12px;flex-wrap:wrap;font-weight:400}
/* График плана. Читается без объяснений: сетка со значениями, подписи
   месяцев, отметка сегодняшнего дня и черта цели. Факт — сплошная линия
   с заливкой (почти горизонтальную линию иначе не разглядеть), план по
   ступеням — пунктир. Цвета из оформления, как у диаграмм отчёта. */
.pl-chart{margin:14px 0 6px}
.pl-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:6px;align-items:center}
.pl-lg{font-size:11.5px;color:var(--tx2);display:flex;align-items:center;gap:6px}
.pl-lg::before{content:'';width:14px;height:0;border-top:2px solid var(--tx2);flex:0 0 14px}
.pl-lg.fact::before{border-color:var(--accent)}
.pl-lg.plan::before{border-top-style:dashed}
.pl-lg.goal::before{border-color:var(--green);border-top-style:dotted}
.pl-graph-box{overflow-x:auto}
.pl-graph{width:100%;min-width:0;height:240px;display:block;overflow:visible}
/* Полосы-ловушки прозрачны, но ловят курсор: попасть мышью в линию
   толщиной в два пикселя невозможно. */
.pl-hit{fill:transparent;cursor:crosshair}
.pl-hit:hover{fill:var(--tx);fill-opacity:.04}
.pl-zoom{margin-left:auto;display:flex;gap:4px;align-items:center}
.pl-zoom-t{font-size:11.5px;color:var(--tx2);margin-right:4px}
.pl-zoom button:disabled{opacity:.35;cursor:default}
.pl-zoom button{border:var(--stroke-w) solid var(--line);background:var(--card-bg);color:var(--tx2);
  font:400 11.5px/1 var(--cff);padding:4px 8px;border-radius:calc(7px * var(--el));cursor:pointer}
.pl-zoom button:hover{border-color:var(--line2);color:var(--tx)}
.pl-zoom button.on{background:var(--chip-bg);color:var(--tx);border-color:transparent}
.pl-line{fill:none;stroke-width:2}
.pl-line.plan{stroke:var(--tx2);stroke-dasharray:5 4;opacity:.65}
.pl-line.fact{stroke:var(--accent)}
.pl-area{fill:var(--accent);opacity:.10}
.pl-dot{fill:var(--accent)}
.pl-dot.last{stroke:var(--field-bg);stroke-width:2}
.pl-grid{stroke:var(--line);stroke-width:1;opacity:.7}
.pl-axis{stroke:var(--stroke);stroke-width:1}
.pl-goal-line{stroke:var(--green);stroke-width:1.5;stroke-dasharray:2 3}
.pl-today{stroke:var(--tx2);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.pl-graph text{font:400 10.5px/1 var(--cff);fill:var(--tx2);font-variant-numeric:tabular-nums}
.pl-graph text.today{font-size:9.5px;opacity:.7}
.pl-now{font:600 11.5px/1 var(--cff);fill:var(--tx);font-variant-numeric:tabular-nums}
/* План и факт — двумя полосами: сверху сделанное, снизу цель тем же цветом
   темы, только глуше. Отстаём от того, где следовало быть сегодня, — факт
   краснеет; идём вровень или впереди — цвет темы. Так «сколько сделано»
   и «сколько должно быть» видно одним взглядом, без черты-невидимки. */
.r-bar-track{position:relative}
.r-bar-track.two{display:flex;flex-direction:column;justify-content:center;gap:2px;height:16px}
.r-bar-track.two .r-bar-fill{height:6px}
.r-bar-plan{display:block;height:6px;min-width:3px;background:var(--accent);
  filter:brightness(.62);opacity:.55;border-radius:inherit}
.r-bar-fill.late,.r-col-fill.late{background:var(--red)}
.r-col-track{position:relative}
.r-col-pair{display:flex;align-items:flex-end;justify-content:center;gap:3px;
  width:100%;flex:1 1 auto;min-height:0}
.r-col-pair > *{flex:0 0 auto}
.r-col-plan{display:block;width:calc(9px * var(--rsc, 1));min-height:3px;
  background:var(--accent);filter:brightness(.62);opacity:.55}
.r-of{font:400 11.5px/1 var(--cff);color:var(--tx2);margin-left:5px}
/* Легенда диаграммы: что за цвета. Появляется вместе с планом на полосах
   и столбцах — без неё два оттенка рядом читаются как загадка. */
.r-legend{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 10px;flex:0 0 auto}
.r-lg{font-size:11.5px;color:var(--tx2);display:flex;align-items:center;gap:6px}
.r-lg::before{content:'';width:12px;height:8px;border-radius:2px;flex:0 0 12px;
  background:var(--accent)}
.r-lg.plan::before{background:var(--accent);filter:brightness(.62);opacity:.55}
.r-lg.late::before{background:var(--red)}
.r-bar-fill,.r-bar-plan,.r-col-fill,.r-col-plan{cursor:pointer}
/* Перекрёстная таблица: заголовки строк держатся у левого края при
   прокрутке вбок — иначе на двадцати столбцах непонятно, чья это строка. */
/* Таблица отчёта: ширина столбцов по содержимому (общее правило table задаёт fixed и растягивает все столбцы поровну —
   подпись строки тогда вылезала за свой столбец и наезжала на цифры), границы у самих ячеек (separate), а не
   «схлопнутые»: у схлопнутых границы залипающих ячеек не едут вместе с ними, и при прокрутке вбок обводка пропадала.
   Рамка таблицы — на прокручиваемой коробке, она остаётся на месте. */
.r-cross{overflow:auto;max-width:100%;border:var(--stroke-w) solid var(--line);border-radius:calc(10px * var(--el))}
.r-cross table{border-collapse:separate;border-spacing:0;table-layout:auto;width:max-content;min-width:100%;
  font:400 12.5px/1.35 var(--cff);white-space:nowrap}
.r-cross th:last-child,.r-cross td:last-child{border-right:0}
.r-cross th,.r-cross td{border-bottom:var(--stroke-w) solid var(--line);padding:6px 10px;text-align:right}
.r-cross thead th{position:sticky;top:0;background:var(--field-bg);color:var(--tx2);
  font-weight:500;text-align:right;z-index:1}
.r-cross thead th:first-child{left:0;z-index:3}      /* угловая ячейка держится у левого края вместе с подписями строк */
.r-cross tbody th,.r-cross tfoot th{position:sticky;left:0;background:var(--field-bg);
  text-align:left;font-weight:400;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.r-cross td.zero{color:var(--tx2)}
/* Воронка: полосы по стадиям и доля к предыдущей. */
.r-funnel{display:flex;flex-direction:column;gap:8px}
.fn-row{display:grid;grid-template-columns:minmax(90px,160px) 1fr auto 64px;align-items:center;
  gap:10px;cursor:pointer;padding:3px 4px;margin:-3px -4px;border-radius:calc(9px * var(--el))}
.fn-row:hover,.fn-row.on{background:var(--field-bg)}
.fn-lbl{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.fn-track{display:block;height:18px}
.fn-fill{display:block;height:100%;min-width:3px;background:var(--accent)}
.fn-val{font:600 12.5px/1 var(--cff);white-space:nowrap}
.fn-conv{font:500 12px/1 var(--cff);color:var(--tx2);text-align:right}
.fn-order{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fn-chip{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--tx2);
  border:var(--stroke-w) solid var(--line);border-radius:calc(7px * var(--el));padding:3px 6px}
.fn-chip button{border:0;background:none;cursor:pointer;color:var(--tx2);padding:0 2px;font-size:12px}
.fn-chip button:hover:not(:disabled){color:var(--tx)}
.fn-chip button:disabled{opacity:.3;cursor:default}
.r-cross .tot{font-weight:600}
.r-cross tfoot td,.r-cross tfoot th{border-bottom:0;border-top:var(--stroke-w) solid var(--stroke);
  font-weight:600}
/* График: линия плана тем же приёмом, что и полоса плана — цвет темы,
   только глуше и пунктиром. Точка факта краснеет при отставании. */
.r-line .ln.plan{stroke:var(--accent);filter:brightness(.62);opacity:.6;stroke-dasharray:5 4}
.r-line .dt.late{fill:var(--red)}
.pl-steps .fv{display:flex;align-items:center;gap:10px}
/* Цель правится прямо здесь, и это должно быть видно: своя рамка, фон и
   отклик на наведение. Без них поле читалось как обычный текст, и никто
   не догадывался, что по нему можно нажать. */
.pl-step-v input{flex:0 0 96px;text-align:right;padding:4px 8px;
  border:var(--stroke-w) solid var(--line);background:var(--card-bg);
  border-radius:calc(7px * var(--el));color:var(--tx);cursor:text}
.pl-step-v input:hover{border-color:var(--line2);background:var(--bg)}
.pl-step-v input:focus{outline:none;border-color:var(--accent);background:var(--card-bg)}
.pl-step-v input::placeholder{color:var(--tx2);font-style:italic}
.pl-step-v input:disabled{background:none;border-color:transparent;color:var(--tx2);cursor:default}
/* Подпись колонок: без неё непонятно, где цель, а где сделанное. */
.pl-cols{display:flex;align-items:center;gap:10px;padding:0 10px 6px;
  font-size:11.5px;color:var(--tx2)}
.pl-cols .c1{flex:0 0 96px;text-align:right}
.pl-cols .c2{flex:1}
.pl-cols .c3{flex:0 0 auto}
.pl-step-v .ok{color:var(--green)}
.pl-step-v .bad{color:var(--red)}
.pl-step-v .muted{color:var(--tx2)}
.pl-mini{flex:1;min-width:40px;height:6px;border-radius:3px;background:var(--chip-bg);overflow:hidden}
.pl-mini i{display:block;height:100%;background:var(--accent)}
/* Условие плана — строки «поле · операция · значение», как у фильтров,
   только компактнее: их читают, а не набирают каждый день. */
.pl-rules{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pl-rule{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* «+ условие» — кнопка того же вида, что «Добавить» в фильтрах: контур цветом темы, мягкая заливка при наведении. */
.pl-rules > .lnk.sm{height:30px;padding:0 14px;border:var(--stroke-w) solid var(--accent-soft2);
  border-radius:calc(9px * var(--el));font:500 12px/15px var(--cff);color:var(--accent);white-space:nowrap}
.pl-rules > .lnk.sm:hover{background:var(--accent-soft)}
.refcond{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;flex:1}
.pl-or{border:0;background:none;color:var(--tx2);font:500 12px/1 var(--cff);
  cursor:pointer;padding:3px 4px;border-radius:calc(6px * var(--el))}
.pl-or:hover{background:var(--bg);color:var(--tx)}
.pl-or.first{cursor:default;padding:3px 4px}
.pl-part{border:var(--stroke-w) solid var(--line);background:var(--card-bg);color:var(--tx);
  font:400 12.5px/1 var(--cff);padding:5px 9px;border-radius:calc(7px * var(--el));cursor:pointer;
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-part:hover{border-color:var(--line2)}
.pl-part.val{color:var(--accent)}
.pl-x{width:20px;height:20px;flex:0 0 20px;border:0;background:none;padding:0;cursor:pointer;
  color:var(--tx2);display:flex;align-items:center;justify-content:center;border-radius:50%}
.pl-x:hover{background:var(--bg);color:var(--red)}
.pl-x svg{width:9px;height:10px;fill:currentColor}
.r-plans-btn{font-size:13px;color:var(--tx2);background:none;border:0;padding:4px 2px;cursor:pointer}
.r-plans-btn:hover{color:var(--tx)}
.r-share{width:35px;height:35px;flex:0 0 35px;border:0;padding:0;cursor:pointer;
  border-radius:calc(13px * var(--el));background:var(--chip-bg);
  display:flex;align-items:center;justify-content:center}
.r-share[hidden]{display:none}
.r-share:hover{background:#E5E5EA}
.r-share svg{width:35px;height:35px;display:block}
.r-share svg path{fill:var(--icon-fg2)}
.r-empty{color:var(--tx2);font-size:13px;padding:6px 0}
/* Рост и падение к прошлому периоду. Цвет — тот же, которым система уже
   говорит «хорошо» и «плохо» в остальных местах; знак дублирует цвет,
   чтобы разница читалась и без него. */
.r-cmp{margin:0 0 8px;display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* Переключатель размера — тот же, что над оргструктурой: две кнопки и
   значение между ними. */
.r-zoom{display:flex;align-items:center;flex:0 0 auto;background:var(--field-bg);
  border:var(--stroke-w) solid var(--line);border-radius:calc(9px * var(--el));overflow:hidden}
/* В окне отчёта переключатель размера лежит в правом верхнем углу самого отчёта,
   поверх него (отчёт прокручивается под ним, поэтому и вынесен из потока). */
.rwin-body{position:relative}
.rwin-body > .r-zoom{position:absolute;top:20px;right:34px;z-index:4}
.r-zoom button{border:0;background:none;color:var(--tx2);width:26px;height:26px;
  cursor:pointer;font:400 15px/1 var(--font-body)}
.r-zoom button:hover{background:var(--bg)}
.r-zoom span{font:500 11.5px/1 var(--font-body);color:var(--tx2);padding:0 7px;
  min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
.r-delta{font:600 12.5px/1 var(--cff);color:var(--tx2)}
.r-delta.up{color:var(--green)}
.r-delta.down{color:var(--red)}
.r-prev{font-size:12px;color:var(--tx2)}
/* План: тонкая полоса выполнения под итогом. Дорожка — тем же цветом, что
   и прочие спокойные плашки системы, заполнение — акцентом темы, а по
   достижении цели зелёным: «дошли» должно читаться, не вчитываясь в число. */
.r-plan{margin:8px 0 12px;display:flex;flex-direction:column;gap:5px;max-width:460px;flex:0 0 auto}
.r-plan-bar{height:6px;border-radius:calc(3px * var(--el));background:var(--chip-bg);overflow:hidden}
.r-plan-fill{display:block;height:100%;background:var(--accent);border-radius:inherit}
.r-plan-fill.done{background:var(--green)}
.r-plan-txt{font-size:12px;color:var(--tx2)}
.r-plan-inp{width:100%;border:0;background:none;outline:none;font:inherit;color:var(--tx);padding:0}
.r-plan-inp::placeholder{color:var(--tx2);font-style:italic}
.r-plan-none{color:var(--tx2);font-style:italic}
.pl-goal{margin-left:auto;font:600 12.5px/1 var(--cff);color:var(--tx2);white-space:nowrap}
.r-list-row .r-delta,.r-bar-row .r-delta{margin-left:8px}
/* «Прочие» — свёрнутый хвост, а не обычная группа: приглушаем, чтобы его
   не читали как самое большое значение раздела. */
.r-list-row.rest .lbl,.r-bar-row.rest .lbl{color:var(--tx2)}

/* список */
.r-list{display:flex;flex-direction:column}
.r-list-row{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:var(--stroke-w) solid var(--line)}
.r-list-row:last-child{border-bottom:0}
.r-list-row .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.r-list-row .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.r-list-row .val{font:600 13.5px/1 var(--cff);flex:0 0 auto}

/* столбцы — та же гистограмма, поставленная вертикально. Цвет — не свой,
   а переменная оформления (акцент темы): поменяли тему — столбцы и полосы
   поменялись вместе со всем остальным, без своего кода. Форма — ровный
   прямоугольник без скругления, по образцу; дорожки под ними нет —
   заполнение растёт прямо на прозрачном фоне. */
/* Столбцы стоят узко и плотно, а сама связка — посередине поля: при
   восьми группах прижатая влево диаграмма оставляла справа пустоту в
   пол-окна. «safe» — чтобы при переполнении список не центрировался
   с обрезанным началом, а просто уехал в прокрутку с первого столбца. */
.r-cols{flex:1 1 auto;display:flex;align-items:stretch;justify-content:safe center;
  gap:4px;overflow-x:auto;padding:10px 0 0;min-height:calc(260px * var(--rsc, 1));
  /* Прокрутка встаёт по столбцам, а не где придётся: иначе у края
     оставался обрезанный пополам столбец — читался как «граница
     посреди диаграммы». */
  scroll-snap-type:x proximity}
.r-col{scroll-snap-align:start}
/* Колонки делят ширину поровну, но у́же 27 точек не становятся: восемь
   групп должны занять поле целиком, а тридцать — уехать в прокрутку,
   а не сплющиться в нечитаемую гребёнку. */
.r-col{flex:1 0 calc(27px * var(--rsc, 1));max-width:calc(40px * var(--rsc, 1));
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;border-radius:calc(9px * var(--el));padding:4px 2px}
.r-col:hover,.r-col.on{background:var(--field-bg)}
.r-col .val{font:600 12.5px/1 var(--cff);flex:0 0 auto}
/* Столбец растёт от общей нижней линии: дорожка забирает всю свободную
   высоту (flex:1), поэтому у всех колонок она одинаковая, а подпись под
   ней стоит своей полосой ровно одной высоты. Раньше колонки равнялись
   по низу целиком — вместе с подписью, и столбцы с длинным названием
   месяца уезжали вверх, каждый на свою высоту. */
.r-col-track{flex:1 1 auto;min-height:40px;width:100%;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;gap:3px}
.r-col-fill{display:block;flex:0 0 auto;width:calc(15px * var(--rsc, 1));min-height:3px;
  background:var(--accent)}
/* Минус рисуется той же длиной, что и плюс: высота считается по модулю,
   иначе столбец убытка вообще не был бы виден. Чтобы «-80» не читалось
   как достижение наравне с «80», отрицательные красим красным. */
.r-col-fill.neg,.r-bar-fill.neg{background:var(--red)}
/* Подпись — набок: имя месяца длиннее узкого столбца, а лежать ему негде.
   Полоса подписей своей высоты, одна на всю диаграмму, — иначе разная
   длина названий разъезжается и ломает общую нижнюю линию столбцов.
   text-align прижимает текст к столбцу: после поворота это верхний край
   полосы, и все подписи начинаются от основания, а не каждая на своей
   высоте — короткое «Май 2026» иначе висело заметно ниже длинного. */
.r-col .lbl{flex:0 0 96px;height:96px;margin-top:6px;font-size:11px;color:var(--tx);
  writing-mode:vertical-rl;transform:rotate(180deg);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* гистограмма */
.r-bars{display:flex;flex-direction:column;gap:10px}
/* Значение и цель — одной строкой: «108 из 400» переносилось на две,
   потому что колонка была фиксированной в 44 точки. */
.r-bar-row{display:grid;grid-template-columns:minmax(80px,132px) 1fr auto;align-items:center;gap:10px;
  cursor:pointer;border-radius:calc(9px * var(--el));padding:2px 4px;margin:-2px -4px}
.r-bar-row:hover,.r-bar-row.on{background:var(--field-bg)}
.r-list-row{cursor:pointer}
.r-list-row:hover,.r-list-row.on{background:var(--field-bg)}
.r-bar-row .lbl{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.r-bar-track{display:block;height:calc(16px * var(--rsc, 1))}
.r-bar-fill{display:block;height:100%;min-width:3px;background:var(--accent)}
.r-bar-row .val{font:600 12.5px/1 var(--cff);white-space:nowrap;justify-self:end}

/* диаграмма */
.r-pie-wrap{display:flex;align-items:flex-start;gap:30px;flex-wrap:wrap}
.r-pie{width:calc(260px * var(--rsc, 1));height:calc(260px * var(--rsc, 1));
  flex:0 0 auto;overflow:visible}
/* Сектор чуть выдвигается под курсором — так видно, о какой доле речь,
   не сверяясь с подписью. Обводка цветом фона отделяет соседние доли. */
.r-pie-seg{cursor:pointer;stroke:var(--field-bg);stroke-width:1.5;
  transition:opacity .12s ease,transform .12s ease;transform-origin:center;transform-box:fill-box}
.r-pie-seg:hover{opacity:.88}
.r-pie-seg.on{opacity:1;filter:brightness(.9)}
/* Подсказка над сектором: то же тёмное облачко, что у кнопок системы,
   только идёт за курсором — сектор не прямоугольник, и держать её у края
   не к чему. */
.r-ptip{position:fixed;z-index:70;background:#2C2C2E;color:#fff;padding:6px 11px;
  border-radius:calc(8px * var(--el));font:500 12.5px/1.2 -apple-system,Inter,sans-serif;
  white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.18);
  transform:translate(-50%,-100%)}
.r-pie-legend{display:flex;flex-direction:column;gap:8px;flex:1;min-width:180px}
.r-pie-legend .row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.r-pie-legend .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.r-pie-legend .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-pie-legend .val{font:600 12.5px/1 var(--cff);color:var(--tx2)}

/* график */
.r-line{width:100%;height:calc(180px * var(--rsc, 1));display:block;overflow:visible}
.r-line .ln{fill:none;stroke:var(--accent);stroke-width:2}
.r-line .fl{fill:var(--accent);opacity:.08;stroke:none}
.r-line .dt{fill:var(--accent)}
.r-line .ax{stroke:var(--line);stroke-width:1}
.r-line text{font:500 10px Inter,-apple-system,sans-serif;fill:#8E8E93}

/* Таблица идёт от края области: ей поля не нужны — колонки и так тянутся во
   всю ширину, а отступ по бокам только съедал бы место под данные. Поля
   получают страницы-списки (планы, отчёты, уведомления) — им они заданы
   отдельно. */
.wrap{flex:1;overflow:auto;border-top:var(--stroke-w) solid var(--line);background:var(--table-bg)}
#plansWrap,#notifWrap,#extWrap{padding:0 var(--pad)}

/* ---------- раскладка «список — карточка» ----------
   Открыли запись — таблица или канбан сворачиваются в узкий список слева,
   карточка занимает всё остальное. Порядок привычный по переписке: слева
   выбираешь, справа работаешь. */
/* Ширина списка меняется плавно и своим ходом: карточка выезжает справа,
   а список в это время сужается — два движения, а не рывок. */
.main{max-width:100%;transition:max-width .27s var(--openc)}
body.narrow .main{max-width:var(--strip)}
/* Таблица остаётся собой: сужается, и от неё видно первые столбцы —
   так ничего не «превращается», просто становится у́же. Канбан же
   складывается в список: колонки в 325 пикселей не живут. */
body.narrow #altWrap{display:none}
/* Шапка в полосе схлопывается в один ряд: вид одной иконкой, «Создать»
   плюсом, фильтр только значком, а поделиться/оформление/настройка — под общей
   кнопкой с точками. Всё, что подписями и счётчиками, уходит: в 325 пикселях
   важно, что кнопка есть и включена, а подробности видно в самой панели.

   Держится это на narrow — том же классе, что двигает саму полосу, — и
   переключается размерами, прозрачностью и flex-grow: всё это умеет плавно
   перетекать, поэтому шапка меняется вместе с полосой, а не прыгает в конце.
   Пока полоса едет, переносить шапку на вторую строку нельзя: перенос —
   это как раз тот скачок, от которого всё и затевалось. */
body.split .bar,body.modstrip .bar{flex-wrap:nowrap}
.bar-side,.bar-mid,.search{transition:flex-grow .3s var(--openc)}
.bar-side{transition:flex-grow .3s var(--openc),gap .3s var(--openc),margin .3s var(--openc)}
body.narrow .bar-side{flex-grow:0;gap:0}
body.narrow .bar-mid{flex-grow:1}
/* В полосе поиск занимает всё, что осталось: предел в 360 оставлял по краям
   пустоту, и строка переставала попадать в общие отступы шапки. */
body.narrow .search{flex-grow:1;min-width:0;max-width:none;width:auto}

/* переключатель вида — только текущий вид; остальные не исчезают, а сжимаются */
.vmode{transition:gap .3s var(--openc),width .3s var(--openc),
  padding .3s var(--openc),opacity .18s ease}
.vmode button{transition:width .3s var(--openc),opacity .18s ease,
  background-color .2s ease,box-shadow .2s ease}
body.narrow .vmode{gap:0}
body.narrow .vmode button:not(.on){width:0;opacity:0}
body.narrow .vmode button.on{background:none;box-shadow:none}

/* плашка адреса ячейки с отменой */
.modepill{transition:max-width .3s var(--openc),padding .3s var(--openc),opacity .18s ease}
body.narrow .modepill{max-width:0;padding:0;opacity:0;overflow:hidden}

/* «Создать» — плюсом. Отступ 10 при значке 15 даёт ровно 35 и держит плюс
   по центру; дальше коробка растягивается, плюс тает, подпись выезжает. */
body.narrow .bar-mid .btn{max-width:35px;padding:0 10px}
body.narrow .bar-mid .btn .i{width:15px;opacity:1}
body.narrow .bar-mid .btn span{max-width:0;opacity:0}
/* Полосу растянули — подпись снова помещается, и прятать её незачем. */
body.narrow.stripwide .bar-mid .btn{max-width:240px;padding:0 18px}
body.narrow.stripwide .bar-mid .btn .i{width:0;opacity:0}
body.narrow.stripwide .bar-mid .btn span{max-width:240px;opacity:1}
/* Но пока идёт поиск — место нужнее строке. */
body.narrow.qfocus .bar-mid .btn span{max-width:0;opacity:0}

/* фильтр — значок и состояние: включён (синяя обводка) и сколько условий */
body.narrow .fbtn{width:35px;padding:0}
body.narrow .fbtn .fstat,body.narrow .fbtn .fbchip,body.narrow .fbtn .fbx{display:none}
body.narrow .fbtn .badge{position:absolute;top:-4px;right:-4px;flex:0 0 auto;width:auto}

/* поиск в работе — остальному в полосе места нет */
body.narrow.qfocus .vmode,body.narrow.qfocus #moreBtn{width:0;opacity:0;overflow:hidden;padding:0}
body.narrow.qfocus .bar-mid .btn{max-width:0;padding:0;opacity:0;margin-right:-9px}
/* Схлопнутая кнопка исчезает, а её зазор — нет: строка вставала бы уже
   остальной шапки. Гасим зазоры отрицательным отступом — он, в отличие от
   display, умеет плавно уезжать вместе с кнопкой. */
body.narrow.qfocus .bar-side{margin-right:-9px}
body.narrow.qfocus .bar-side.right{margin-right:0;margin-left:-9px}

/* три кнопки системы — под одной; тоже сжимаются, а не пропадают */
#shareBtn,#lookBtn,#setBtn,#moreBtn{transition:width .3s var(--openc),opacity .18s ease,
  margin-left .3s var(--openc)}
#moreBtn{width:0;opacity:0;overflow:hidden;margin-left:-9px}
body.narrow #shareBtn,body.narrow #lookBtn,body.narrow #setBtn{width:0;opacity:0;overflow:hidden}
/* Отчёты рядом с открытой карточкой уходят туда же, под «ещё»: полоса
   узкая, а отчёт смотрят целиком отдельным окном — держать под него
   постоянную кнопку в тесноте незачем. */
#rbtn{transition:width .3s var(--openc),opacity .18s ease,margin-left .3s var(--openc)}
body.narrow #rbtn{width:0;opacity:0;overflow:hidden;margin-left:-9px;padding:0}
/* Планы — туда же, под «ещё» («Планы раздела»): у открытой карточки полоса узкая, отчёт и план смотрят отдельным окном. */
#pbtn{transition:width .3s var(--openc),opacity .18s ease,margin-left .3s var(--openc)}
body.narrow #pbtn{width:0;opacity:0;overflow:hidden;margin-left:-9px;padding:0}
body.narrow #moreBtn{width:35px;opacity:1;margin-left:0}
/* панели открываются поверх карточки, а не под ней */
body.split .pop,body.split .setpanel{z-index:55}
/* Пока полоса расходится, лишние столбцы ещё торчат за её краем —
   прокрутке там взяться неоткуда. И растягивать таблицу по ширине окна на
   это время нельзя: множитель растяжения зависит от суммы столбцов, а она
   в движении меняется каждый кадр — столбцы дёргались бы под ним. Вместо
   этого ведём их сразу к тем ширинам, которые растяжение даст в конце. */
body.split #wrap{overflow-x:hidden}

body.narrow #wrap .rz{display:none}
/* строка в полосе — запись целиком, а не набор ячеек */
/* Правила «таблица внутри полосы» убраны: полоса теперь всегда список,
   а каждое такое правило заставляло браузер при открытии карточки заново
   примерять стили ко всем тридцати трём тысячам ячеек. */
body.narrow.aslist #wrap,body.narrow.aslist #usersWrap,body.narrow.aslist #contactsWrap,
body.narrow.aslist #notifWrap{display:none}
body.narrow.aslist #listPane{display:block}
/* Список сразу встаёт в свою ширину: если раскладывать его по всей странице,
   правые значения строк уезжают через полэкрана вслед за карточкой. */
/* Список записей в полосе меняет ширину вместе с контейнером (.main), карточкой (left) и хватом границы: при раскрытии
   левого меню исходное деление пересчитывается (stripDef), и без своего перехода список схлопывался бы мгновенно, пока
   контейнер ещё ехал, — «скачет, резко растягивается и сжимается». Время и кривая те же, что у меню (--sidet). */
body.narrow #listPane{width:var(--strip);transition:width var(--sidet)}
body.resizing #listPane{transition:none}
/* только основная карточка: связанная по-прежнему выезжает справа поверх */
body.split .drawer:not(.linked){position:fixed;left:calc(var(--sidew) + var(--strip));right:0;width:auto;
  transform:translateX(100%);box-shadow:-8px 0 24px rgba(0,0,0,.05);
  border-left:var(--stroke-w) solid var(--stroke);
  /* Левый край карточки едет вместе с меню (то же время и кривая), а не прыгает: --sidew
     лежит на самом элементе и меняется сразу, поэтому плавность даёт переход left. Пока
     тянут границу списка, переход гасится (см. ниже), иначе карточка отставала бы от мыши. */
  transition:transform .2s cubic-bezier(.4,0,.2,1),left var(--sidet)}
body.resizing.split .drawer:not(.linked),body.resizing.split .drawer:not(.linked).on,body.resizing #stripGrip{transition:none}
/* На стыке списка и карточки должна остаться одна обводка. Правый край
   таблицы упирается ровно в левый край карточки, и две половинки пикселя
   читаются как целый — край таблицы убираем, линию рисует карточка. */

body.split .drawer:not(.linked).on{transform:none;
  transition:transform .32s var(--openc),left var(--sidet)}
/* В режиме «список + карточка» затемнения нет — но скрыто оно прозрачностью, а не display: при смене
   display переход прозрачности не играет, и затемнение вспыхивало бы разом, а не проявлялось плавно
   (как при открытии соседней сущности из таблицы). Нужным оно становится через .scrim.on ниже. */
body.split .scrim{opacity:0;pointer-events:none}
/* Настраивают вид карточки — список и меню слева на это время гаснут:
   сейчас не работают с записями, и случайное нажатие увело бы из настройки. */
body.split.cardset .scrim.on{opacity:1;pointer-events:auto}
/* Новая запись из календаря показывается окном: карточка встаёт по центру,
   у́же обычной и без панели общения — обсуждать пока нечего, запись ещё
   не создана. Фон затемняется, чтобы было видно, что решение одно: завести
   или отменить. */
/* Окно встаёт рядом с нажатым днём — как в календарях: заготовку в клетке
   оно не перекрывает, координаты приходят из самого нажатия. Без выездов:
   просто появляется на месте, чуть подрастая. */
/* Селектор по идентификатору: у обычной карточки свои правила положения
   в нескольких режимах, и окно должно перебивать их все, а не соревноваться
   в количестве классов. */
body.cardnew #drawer:not(.linked){position:fixed;z-index:60;
  left:var(--cx);top:var(--cy);right:auto;bottom:auto;
  transform:scale(.97);opacity:0;width:min(560px,92vw);max-height:min(78vh,720px);
  height:auto;border-radius:var(--radius);overflow:hidden;border-left:0;
  box-shadow:0 18px 56px rgba(0,0,0,.22);
  transition:opacity .16s ease,transform .16s var(--ez)}
body.cardnew #drawer:not(.linked).on{transform:scale(1);opacity:1}
/* Фон затемняется, а заготовка в клетке остаётся поверх: видно, куда
   встанет запись. */
body.cardnew .scrim{display:block}
.calev.draft{position:relative;z-index:41}
/* В часовой сетке заготовка уже позиционирована — ей нужен только слой. */
.tgev.draft{z-index:41}
/* Через #drawer, а не через класс: правило раскладки «карточка рядом со
   списком» записано на идентификатор и иначе перебивает это. */
body.cardnew #drawer:not(.linked) .dside,body.cardnew #drawer:not(.linked) .dgrip,
body.cardnew #drawer:not(.linked) .dnav,body.cardnew #drawer:not(.linked) .dgear,
body.cardnew .dcarddel{display:none}
/* Запись, заведённая из раздела чужой карточки, показывается тем же окном.
   Она живёт во второй карточке — та обычно занимает правую половину экрана,
   а здесь должна стать таким же окном поверх: карточка, из которой заводят,
   остаётся видна за ним. */
body.cardnew2 #drawer2{position:fixed;left:var(--cx);top:var(--cy);right:auto;bottom:auto;
  width:min(560px,92vw);max-height:min(78vh,720px);height:auto;
  border-radius:var(--radius);overflow:hidden;border-left:0;
  box-shadow:0 18px 56px rgba(0,0,0,.22);z-index:60}
body.cardnew2 #drawer2 .dside,body.cardnew2 #drawer2 .dgrip,
body.cardnew2 #drawer2 .dgear{display:none}
body.cardnew2 #drawer2 .dsplit > .db{flex:1 1 auto}
body.cardnew2 #drawer2 .dnew{display:flex}
body.cardnew .dsplit > .db{flex:1 1 auto}
body.cardnew #drawer .dnew{display:flex}
/* Запись, открытая не из списка: карточка приезжает справа окном — так же,
   как соседняя сущность. Полоса при этом не собирается, календарь остаётся. */
body.asaside #drawer:not(.linked){left:auto;right:0;top:0;bottom:0;width:min(1040px,var(--vw88,88vw));
  height:auto;max-height:none;border-radius:0;opacity:1;
  transform:translateX(100%);box-shadow:-6px 0 28px rgba(0,0,0,.14);
  border-left:var(--stroke-w) solid var(--stroke);
  transition:transform .2s var(--ez)}
body.asaside #drawer:not(.linked).on{transform:none}
body.asaside .scrim{display:block}
/* Пока значение, по которому красится плашка, не выбрано, день держит белую
   заготовку: видно, куда встанет запись, но цвет ещё не обещан. */
.calev.draft{background:#fff!important;color:#3A3A3C!important;
  box-shadow:0 0 0 var(--stroke-w) var(--stroke) inset, 0 2px 6px rgba(0,0,0,.10)}
/* Нижняя панель с действиями — вторая опора карточки после шапки, поэтому
   и тень у неё своя, направленная вверх. Своя стопка нужна по той же
   причине, что и у шапки: иначе тень красится под сплошным фоном соседа. */
.dnew{display:none;gap:10px;align-items:center;justify-content:flex-end;flex:0 0 auto;
  padding:12px 18px;border-top:var(--stroke-w) solid var(--stroke);background:var(--card-bg);
  position:relative;box-shadow:var(--shadow-foot)}

/* карточка делится надвое: поля и общение по записи. Ширину полей считаем
   один раз здесь: её берут и сама колонка, и хват границы — иначе, упёршись
   в предел, подсветка хвата уезжает дальше самой границы. */
.dsplit{flex:1;min-height:0;display:flex;position:relative}
.dsplit > .db{flex:1 1 auto;min-width:0}
/* Границу можно тянуть. Хват шире самой линии — в полпикселя не прицелишься;
   пока тянут, переходы выключены, иначе граница отстаёт от курсора. */
.grip{position:absolute;top:0;bottom:0;width:9px;cursor:col-resize;z-index:60}
.grip:hover{background:var(--accent);opacity:.2}
.grip.drag{background:var(--accent);opacity:.3}
body.resizing .main,body.resizing .drawer{transition:none}
#stripGrip{position:fixed;left:calc(var(--sidew) + var(--strip) - 4px);display:none;transition:left var(--sidet)}
body.split #stripGrip,body.modstrip #stripGrip{display:block}
.dgrip{left:calc(var(--dbw) - 4px);display:none}
/* Доля полей в карточке: --dbwn (рядом со списком) и --dbwo (окно поверх чужой страницы) пишет applyPanes; здесь выбор
   по режиму — карточка-окно: соседняя запись (.linked) или основная вне режима «список + карточка». Не заданы — 62,5% и 60%. */
.dsplit > .db,.dgrip{--dbw:var(--dbwn,clamp(320px,62.5%,calc(100% - 260px)))}
.drawer.linked .dsplit > .db,.drawer.linked .dgrip,body:not(.split) #drawer .dsplit > .db,body:not(.split) #drawer .dgrip{
  --dbw:var(--dbwo,clamp(320px,60%,calc(100% - 260px)))}
body.split #drawer .dgrip,.drawer.linked .dgrip,
body.asaside #drawer .dgrip{display:block}
/* Общение по записи есть в обеих карточках: в основной — когда она открыта
   полосой, в соседней — всегда, она и открывается отдельным окном. */
.dside{display:none}
body.split #drawer .dside,.drawer.linked .dside,
body.asaside #drawer .dside{display:flex;flex:1 1 0;min-width:0;position:relative;
  flex-direction:column;border-left:var(--stroke-w) solid var(--stroke);background:var(--chat-surface);
  /* Тень своя, не соседская: полутон карточки читается на границе с чатом,
     а не тонет под сплошным фоном dside, если рисовать её у карточки. */
  box-shadow:var(--shadow-chat)}
/* Заданная ширина полей — в разумных пределах: сузишь окно или растянешь
   список, и поля всё равно не схлопнутся в столбик по букве, а общению
   останется место, где видно хотя бы строку переписки. */
body.split #drawer .dsplit > .db,.drawer.linked .dsplit > .db,
body.asaside #drawer .dsplit > .db{flex:0 0 var(--dbw)}
/* Вкладки прокручиваются, шестерёнка закреплена: пяти вкладкам в узкой
   полосе тесно, и настройки ленты уезжали за край — их было не найти. */
.dstabs{display:flex;align-items:flex-start;gap:10px;padding:14px 10px 0;flex:0 0 auto;
  border-bottom:var(--stroke-w) solid var(--stroke);background:var(--card-bg)}
.dstabs-r{display:flex;align-items:flex-start;gap:10px;flex:0 0 auto}   /* поиск по ленте и шестерня */
.dstabs-l{display:flex;gap:18px;flex:1 1 0;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.dstabs-l::-webkit-scrollbar{display:none}
.dstabs button{border:0;background:none;padding:0 0 10px;cursor:pointer;color:#8E8E93;
  font:400 12px/16px "SF Pro Text",-apple-system,Inter,sans-serif;position:relative;
  white-space:nowrap}
.dstabs button.on{color:#000}
.dstabs button.on::after{content:'';position:absolute;left:0;right:0;bottom:-0.5px;height:2px;
  background:var(--accent);border-radius:1px}
/* Лента прижата к краям окна: лицо отбито от левого края на десять точек,
   как в макете, — двадцать съедали и без того нешироную полосу. */
.dsbody{flex:1;overflow:auto;padding:10px}
/* Шрифт карточки задан на её теле, а переписка живёт рядом — повторяем,
   иначе браузер берёт свой стандартный и текст выглядит чужим. */
.dside{--cfs:14px;--cff:var(--font-body)}
/* Переписка по записи: кто, когда и что написал.
   Подряд идущие сообщения одного человека стоят теснее — так видно, где
   продолжение мысли, а где ответ другого. */
/* ---------- лента записи ----------
   Разговор и история правок идут одним потоком: реплики — облачками, как
   в переписке, а то, что система записала сама, — мелкой строкой между ними.
   Так по одной ленте видно и что обсуждали, и что в это время делали. */
/* Мерка для собрания снимков — сама полоса переписки, а не окно браузера. */
.dsbody{background:var(--chat-surface);container-type:inline-size;position:relative}
.fd-more{display:block;margin:0 auto 10px;padding:5px 14px;border-radius:999px;
  border:var(--stroke-w) solid var(--stroke);background:#fff;cursor:pointer;
  font:400 12.5px/16px var(--cff);color:var(--accent-d)}
.fd-more:hover{background:var(--accent-soft)}
.fd-day{margin:15px 0;text-align:center}
/* Подпись дня держится наверху, пока листают. Остановились — прилипшая
   растворяется, а те, что стоят в самой ленте, остаются на месте. */
.fd-day{position:sticky;top:0;z-index:5}
.fd-day.прилип span{opacity:0}
.dsbody.идёт .fd-day.прилип span{opacity:1}
#altWrap.идёт .fd-day.прилип span{opacity:1}
.klist.идёт .fd-day.прилип span{opacity:1}
#notifWrap.идёт .fd-day.прилип span{opacity:1}
#listPane.идёт .fd-day.прилип span{opacity:1}
.fd-day:first-child{margin-top:0}
/* Подпись дня стоит на своей плашке: фон непрозрачный на семь десятых и
   размывает то, что под ним, — иначе прилипшая сверху дата читается поверх
   текста и мешает обоим. */
.дата-старт .fd-day span{transition:none !important}   /* первая расстановка после перерисовки — без перехода (см. датыБезПерехода) */
.fd-day span{display:inline-block;padding:3px 12px;border-radius:999px;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);box-shadow:var(--pill-shadow);
  color:#6C6C70;font:400 12px/16px var(--cff);transition:opacity .25s ease}
.fd-av{flex:0 0 auto;width:32px;height:32px;border-radius:100px;background:#D1D1D6 center/cover;
  display:flex;align-items:center;justify-content:center;
  font:600 12px/1 var(--cff);color:#fff}
.fd-av-x{background:none}                     /* место под лицо в слитной цепочке */
/* Системная строка. Всё в одну строку с переносом: имя действия, стрелка,
   чип с новым значением — и время у правого края. */
.fd-sys{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin:0 0 8px;
  font:400 12px/16px var(--cff);color:#8E8E93}
/* Между собой отметки стоят тесно — это один поток. А вот к разговору они
   не должны прижиматься: после реплики отступ такой же, как между людьми. */
.fd-row + .fd-sys{margin-top:10px}
/* Лицо в журнале действий — того же размера, что в верхней плашке свёрнутой группы (22 px; на телефоне 24 px). */
.fd-sys .fd-av{width:22px;height:22px;font-size:9px}
/* Лица тех, кто правил запись, — внахлёст: видно сразу, сколько людей и кто, не занимая ширины. */
.fd-avs{display:inline-flex;align-items:center}
.fd-avs .fd-av{margin-left:-6px;box-shadow:0 0 0 2px var(--chat-surface,#fff)}
.fd-avs .fd-av:first-child{margin-left:0}
.fd-av-more{background:#E5E5EA;color:#636366}
.fd-arr{color:#C7C7CC}
.fd-lnk{color:var(--accent-d)}
.fd-ital{font-style:italic}
/* Что сделано в карточке — обычный курсивный текст, без плашек (цвет статуса задаёт сам вызов). */
.fd-iv{font-style:italic;color:#3A3A3C;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Длинное значение — целиком и с переносом: адрес или примечание в одну строку
   не влезают, а ради них в ленту и заглядывают. */
.fd-val{flex:1 1 100%;order:1;white-space:pre-wrap;word-break:break-word;overflow:visible}
.fd-sys .fd-time{margin-left:auto}
.fd-time{color:#8E8E93;font:400 11.5px/16px var(--cff);white-space:nowrap}
/* Прочитано — галочки цветом времени рядом с ним: приглушённые, пока никто
   не видел, ярче, когда хоть кто-то из остальных дочитал досюда. Цвет времени
   у своего сообщения разный смотря по фону пузыря (акцентный или как у
   задачи) — держимся за currentColor, а не заводим свой на каждый случай. */
.fd-seen{display:inline-flex;margin-left:3px;vertical-align:-1px;color:inherit;opacity:.55}
.fd-seen svg{width:14px;height:9px;stroke:currentColor;stroke-width:1.4;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.fd-seen.on{opacity:1}
.fd-row.my .fd-b.task .fd-seen.on{color:var(--accent)}
/* Реплика. Своё — справа тёмным, чужое — слева белым: кто написал, видно
   раньше, чем прочитано имя. */
/* Отступы разговора: между репликами одного человека — три точки, между
   разными людьми — десять. Так цепочка читается как одна мысль, а смена
   говорящего видна до того, как прочитано имя. */
.fd-row{display:flex;align-items:flex-end;gap:5px;margin:10px 0 0}
.fd-row.same{margin-top:3px}
.fd-row.my{justify-content:flex-end}
/* Цепочка чужих реплик: лицо одно на всю цепочку, стоит у нижнего края
   и липнет к нему, пока цепочка проходит перед глазами. Иначе у длинного
   сообщения или у трёх подряд не видно, чьи они, ровно тогда, когда
   это и нужно. */
.fd-chain{display:flex;align-items:flex-end;gap:5px;margin:10px 0 0}
.fd-chain > .fd-av{position:sticky;bottom:0}
.fd-chain-l{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start}
.fd-chain .fd-row{margin:0;width:100%}
/* Облачко задачи (лента и доска) — на всю ширину цепочки, как и строка
   чата выше. Без этого .fd-chain-l{align-items:flex-start} подгоняет
   карточку под содержимое, а эта подгонка у высокой карточки с текстом
   и чек-листом досчитывается уже вторым кадром: ширина менялась задним
   числом, за ней высота, а за высотой подпрыгивали залипшие лица
   постановщиков — тот самый скачок при переносе карточки и отметке
   в чек-листе. */
.fd-chain-l > .feed-card,.fd-chain-l > .kcard.tkcard{align-self:stretch}
.fd-chain .fd-row + .fd-row{margin-top:3px}
.fd-row > .fd-av{position:sticky;bottom:0}
/* Отметки не прижимаются и к цепочке. */
.fd-chain + .fd-sys{margin-top:10px}
/* Ширину задаём по содержимому явно: у облачка, которому включили движение,
   браузер переставал её подбирать сам, и короткое «ок» растягивалось во всю
   полосу. */
/* Скругление облачка и поля — переменные: снимки и документы внутри берут из них своё скругление (ниже), чтобы углы оставались концентричными облачку на любой раскладке
   (на телефоне облачко 20 px с полями 8/14, на компьютере 18 px с полями 7/13). `--fdi` — зазор от края облачка до снимка. */
.fd-b{--fdr:18px;--fdpy:7px;--fdpx:13px;--fdi:1px;position:relative;width:fit-content;max-width:min(84%,420px);padding:var(--fdpy) var(--fdpx);
  border-radius:var(--fdr);background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04)}
/* Текст и время — одной строкой: время садится на нижнюю строку текста,
   а не отводит себе отдельную. Держим его слоем поверх нижнего правого угла,
   а в самом тексте оставляем под него ровно столько места, сколько нужно:
   в общем ряду время отнимало ширину у каждой строки, и у длинной реплики
   справа оставалась пустая полоса во всю высоту облачка. */
.fd-line{display:block;position:relative}
.fd-line .fd-t{display:inline;min-width:0}
.fd-line .fd-t::after{content:'';display:inline-block;width:var(--tw,46px);height:1px}
.fd-line > .fd-time{position:absolute;right:0;bottom:0}
/* Облачко без текста — только вложение: там время стоит само по себе, у правого края облачка. */
.fd-line.fd-only{display:flex;align-items:flex-end;justify-content:flex-end;gap:7px}
.fd-line.fd-only > .fd-time{position:static}
/* Своё облачко — цветом темы: он и так стоит на кнопках и выделении, и
   переписка не должна быть единственным местом со своим синим. */
.fd-row.my .fd-b{background:var(--accent-bub,var(--accent))}
.fd-who{margin:0 0 2px;font:600 13px/17px var(--cff);color:#2E4257}
/* Имя и должность идут одним потоком: имя занимает первую строку, должность — сразу за ним, а если
   не помещается, переносится на следующую строку (раньше это были две колонки, и длинное имя
   ломалось пополам рядом с должностью). */
.fd-who span{font-weight:400;color:#8E8E93;font-size:12px;margin-left:8px}
/* В узкой полосе должность отбрасываем: имя и так переносится на две строки,
   а вместе с должностью шапка съедает половину облачка. */
@container (max-width: 330px){ .fd-who span{display:none} }
.fd-t{font:400 13.5px/1.4 var(--cff);color:var(--tx);
  white-space:pre-wrap;word-break:break-word}
.fd-row.my .fd-t{color:var(--accent-ink,#fff)}
.fd-line .fd-time{flex:0 0 auto;padding-bottom:1px}
.fd-row.my .fd-time{color:var(--accent-ink2,rgba(255,255,255,.65))}
/* Только что отправленное всплывает от того угла, где стоит поле ввода:
   короткий разгон, лёгкий перелёт и возврат — как будто письмо подбросили,
   и оно улеглось. Повторно движение не показывают. */
@keyframes fdpop{
  0%{transform:scale(.94) translateY(16px);opacity:0}
  30%{opacity:1}
  72%{transform:scale(1.012) translateY(-1px)}
  100%{transform:scale(1) translateY(0);opacity:1}
}
/* Длинная мягкая дуга без рывка в конце: разгон почти незаметен, а последнюю
   треть пути облачко доходит само. Короткое и резкое читается как щелчок.
   Имя класса своё, не общее «pop»: под этим именем в системе живёт панель
   настроек — с рамкой и обрезкой содержимого. Свежее облачко подхватывало
   и то и другое: вокруг него появлялась обводка, а ручки реакций уезжали
   за его край и пропадали. */
.fd-b.fd-pop{animation:fdpop .44s cubic-bezier(.16,1,.3,1) both;transform-origin:100% 100%}
.fd-row:not(.my) .fd-b.fd-pop{transform-origin:0 100%}
@media (prefers-reduced-motion:reduce){ .fd-b.fd-pop{animation:none} }
/* Цитата в облачке: полоска цвета темы, автор и кусок текста. Нажатие
   уводит к самому сообщению. */
/* Цитата стоит своей плашкой — как приложенный файл: видно, что это кусок
   чужого сообщения, а не начало своего. */
.fd-q{display:flex;flex-direction:column;gap:1px;margin:0 0 4px;padding:4px 8px;
  border-left:2px solid var(--accent);border-radius:0 8px 8px 0;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  cursor:pointer;max-width:100%}
.fd-q b{font:600 12px/16px var(--cff);color:var(--accent-d)}
.fd-q span{font:400 12px/16px var(--cff);color:#8E8E93;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-row.my .fd-q{border-left-color:var(--accent-ink,#fff);
  background:rgba(255,255,255,.14)}
.fd-row.my .fd-q b{color:var(--accent-ink,#fff)}
.fd-row.my .fd-q span{color:var(--accent-ink2,rgba(255,255,255,.65))}
/* Цитата с вложением: слева миниатюра снимка или плашка с расширением документа, справа автор и подпись. Текстовая цитата — как была
   (внутри только колонка `.fd-q-c`). */
.fd-q-c{display:flex;flex-direction:column;gap:1px;min-width:0}
.fd-q.fd-q-m{flex-direction:row;align-items:center;gap:8px;padding:4px 8px 4px 4px}
.fd-q-th,.fd-q-doc{flex:none;width:36px;height:36px;border-radius:6px;box-sizing:border-box}
.fd-q-th{display:block;object-fit:cover;background:rgba(0,0,0,.06)}
.fd-q-doc{display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--cff);font-style:normal;letter-spacing:.2px;
  background:var(--accent);color:var(--accent-ink,#fff)}
.fd-row.my .fd-q-doc{background:rgba(255,255,255,.28);color:var(--accent-ink,#fff)}
.dsreply .fd-q-th,.dsreply .fd-q-doc{width:30px;height:30px;border-radius:5px}
/* Куда перешли по цитате — подсвечиваем на секунду. */
.fd-hit .fd-b{box-shadow:0 0 0 2px var(--accent)}
/* Реакции под сообщением. Время садится в эту же строку, к правому краю:
   у нижнего угла облачка, а не на строке текста над реакциями. */
.fd-re{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:5px 0 0}
.fd-re .fd-time{margin-left:auto;padding-left:8px;align-self:flex-end}
.fd-rc{display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;height:28px;padding:0 9px;border-radius:999px;
  border:var(--stroke-w) solid var(--stroke);background:rgba(142,142,147,.3);cursor:pointer;
  font:400 17px/1 var(--cff);color:var(--tx)}
.fd-rc i{font-style:normal;font-size:13px;font-weight:500;color:#8E8E93}
.fd-rc.my{border-color:var(--accent)}
/* Лица тех, кто поставил реакцию (до трёх): мелкие, внахлёст, с рамкой цвета чипа, чтобы края читались. Чип с лицами
   подтянут справа — лицо садится у самого края, как в Telegram. Селектор длинный нарочно: мобильное `html.mob .fd-av`
   (36 px) иначе перебивало размер, и на телефоне лицо вырастало больше самого чипа. */
.fd-rc:has(.fd-rav){padding-right:3px}
.fd-rc .fd-rav{display:inline-flex;align-items:center}
.fd-rc .fd-rav .fd-av{width:22px;height:22px;font-size:10px;line-height:1;font-weight:600;color:#fff;box-shadow:0 0 0 1.5px var(--rc-bg,#fff);margin-left:-6px}
.fd-rc .fd-rav .fd-av:first-child{margin-left:0}
/* Размеры капсулы реакции: телефон — высота 28 px, эмодзи 17, лицо 22; компьютер — 24 / 16 / 18 (лицо по размеру эмодзи). Капсула не сжимается (flex:0 0 auto): в узком ряду её содержимое иначе вылезало за край. */
html:not(.mob) .fd-rc{height:24px;padding:0 8px;gap:3px;font-size:16px}
html:not(.mob) .fd-rc:has(.fd-rav){padding-right:3px}
html:not(.mob) .fd-rc i{font-size:12.5px}
html:not(.mob) .fd-rc .fd-rav .fd-av{width:18px;height:18px;font-size:10px;margin-left:-5px;box-shadow:0 0 0 1.5px var(--rc-bg,#fff)}
html:not(.mob) .fd-rc .fd-rav .fd-av:first-child{margin-left:0}
/* Капсула — серая, 30% непрозрачности, поэтому кольцо вокруг лица красим не в цвет капсулы, а в цвет облачка с той же серой
   подмешанной на 30%: края лиц читаются и на светлом облачке, и на цветном своём. */
.fd-rc{--rc-bg:color-mix(in srgb,#fff 70%,#8E8E93 30%)}
.fd-row.my .fd-rc{--rc-bg:color-mix(in srgb,var(--accent-bub,var(--accent)) 70%,#8E8E93 30%)}
/* Список «кто какую реакцию поставил» — по правой кнопке на реакции. */
.fd-rl{position:absolute;z-index:41;min-width:190px;max-width:calc(100% - 12px);max-height:260px;overflow:auto;padding:6px;border-radius:calc(14px * var(--el));
  background:var(--card-bg);border:var(--stroke-w) solid var(--stroke);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.fd-rl-h{padding:4px 8px 6px;font:500 12px/16px var(--cff);color:#8E8E93}
.fd-rl-r{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:calc(9px * var(--el));font:400 13.5px/18px var(--cff);color:var(--tx)}
.fd-rl-r:hover{background:var(--accent-soft)}
.fd-rl-r .fd-av{width:24px;height:24px;font-size:12px;line-height:24px}
.fd-rl-r b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-rl-r span{flex:0 0 auto;font-size:17px}
.fd-rc.my i{color:var(--accent-d)}
/* Ручки у сообщения — только при наведении, чтобы не мельтешили. */
.fd-b{position:relative}
/* Ручки стоят НАД облачком, не поверх текста: нижний край панели совпадает
   с верхним краем облачка — так она ничего не закрывает. */
/* Панель на пару точек заходит на облачко: между ними не должно быть щели —
   курсор пересекает её, наведение теряется, и панель исчезает под рукой. */
/* Панель раскрывается в ту сторону, где есть место: у чужого облачка оно
   справа, у своего — слева. Иначе на коротком «Ок» панель уезжала за край
   полосы, и крайняя кнопка оказывалась обрезанной. */
.fd-act{position:absolute;bottom:100%;margin-bottom:-3px;left:4px;right:auto;
  /* Панель «ответить / реакция» появляется, только когда курсор задержался на облачке дольше 2 секунд
     (задержка перехода, поэтому уход курсора раньше её отменяет); ушёл с облачка — гаснет сразу. */
  display:flex;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .12s ease,visibility 0s linear .12s;
  gap:1px;padding:1px;white-space:nowrap;
  border-radius:999px;background:#fff;border:var(--stroke-w) solid var(--stroke);
  box-shadow:0 4px 12px rgba(0,0,0,.12)}
.fd-row.my .fd-act{left:auto;right:4px}
/* У облачка со снимками панель уходит внутрь, в верхний угол поверх фото:
   такое облачко бывает в пол-экрана, и панель над ним оказывалась выше
   видимой части ленты — до неё было не дотянуться. Поверх снимка она
   ничего не закрывает. */
.fd-b:has(.fd-ph) .fd-act,.fd-b:has(.fd-docs) .fd-act{
  bottom:auto;top:6px;right:6px;left:auto;margin-bottom:0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.fd-row.my .fd-b:has(.fd-ph) .fd-act,.fd-row.my .fd-b:has(.fd-docs) .fd-act{
  right:6px;left:auto}
.fd-b:hover .fd-act{visibility:visible;opacity:1;pointer-events:auto;
  transition:opacity .15s ease 2s,visibility 0s linear 2s}
/* Пока курсор над самим файлом или снимком, панель действий не появляется: у облачка с файлами она нарисована
   внутри, поверх них, и вылезала прямо над тем, на что нажимают (файл — скачать, снимок — в галерею). Над
   остальными местами облачка (имя, текст, поля) она работает как обычно; сама панель — не файл, поэтому, когда
   курсор уходит на неё, она остаётся. */
.fd-b:has(.fd-phi:hover,.dc-i:hover) .fd-act{visibility:hidden;opacity:0;pointer-events:none;transition:none}
.fd-act button{border:0;background:none;cursor:pointer;padding:0 5px;border-radius:999px;
  font:400 12.5px/17px var(--cff);color:#8E8E93}
.fd-act button:hover{background:var(--accent-soft);color:var(--accent-d)}
/* Выбор реакции. */
.fd-pick{position:absolute;z-index:40;display:flex;flex-direction:column;gap:2px;padding:4px;
  border-radius:18px;background:#fff;border:var(--stroke-w) solid var(--stroke);
  box-shadow:0 10px 26px rgba(0,0,0,.16)}
/* Полный набор — тремя рядами: позитивные, нейтральные, негативные. */
.fd-pg{display:flex;gap:2px}
.fd-pg + .fd-pg{border-top:var(--stroke-w) solid var(--stroke);padding-top:2px}
.fd-pick button{border:0;background:none;cursor:pointer;font-size:17px;line-height:1;
  padding:3px;border-radius:50%}
.fd-pick button:hover{background:var(--accent-soft);transform:scale(1.15)}
/* ---------- собрание вложений ----------
   Месяц и его вложения — один блок; блоки отбиты друг от друга заметно,
   чтобы месяцы не сливались в одну простыню. Заголовок отступает от края
   ровно на скругление карточек: так подпись стоит по их левому краю. */
.md-blk{padding:10px}
.md-blk + .md-blk{margin-top:25px}
.md-h{margin:0 0 10px calc(9px * var(--el));
  font:600 14px/normal "SF Pro Rounded","SF Pro Text",-apple-system,sans-serif;color:var(--tx)}
/* Снимки: не больше четырёх в ряд, каждый от ста до ста сорока точек,
   перенос — сам. Ряд ограничен по ширине, поэтому четыре и есть потолок. */
/* Снимки идут вплотную: между ними две точки и по горизонтали, и по
   вертикали, а размер подстраивается под ширину полосы. */
.md-grid{display:grid;gap:2px;
  grid-template-columns:repeat(auto-fill,minmax(min(100px,100%),1fr))}
/* Четыре в ряд — потолок: дальше снимки не мельчают, а растут. */
@container (min-width: 380px){ .md-grid{grid-template-columns:repeat(4,1fr)} }
.md-i{display:block;aspect-ratio:1;border-radius:calc(9px * var(--el));overflow:hidden;
  background:#EDEDF0}
.md-i img{width:100%;height:100%;object-fit:cover;display:block}
/* Документы: карточки от шестидесяти до восьмидесяти точек, зазор в две. */
.dc-grid{display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start}
.dc-grid .dc-i{flex:0 0 auto}
.dc-i{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  flex:1 0 60px;min-width:60px;max-width:80px;padding:10px 0;
  border-radius:calc(9px * var(--el));background:#fff;text-decoration:none;color:var(--tx)}
.dc-i:hover{background:var(--accent-soft)}
.dc-i i{display:flex;align-items:center;justify-content:center;width:34px;height:40px;
  border-radius:6px;border:1.5px solid #E5484D;color:#E5484D;font-style:normal;
  font:700 9px/1 var(--cff)}
/* Подписи не упираются в края карточки: пять точек с боков, между именем
   и размером — три. */
.dc-i b{max-width:100%;padding:0 5px;box-sizing:border-box;
  font:400 12.5px/16px var(--cff);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-i span{padding:0 5px;color:#8E8E93;font:400 11px/14px var(--cff)}
.dc-i{gap:3px}
.dc-i i{margin-bottom:2px}
/* Вложения. Картинки — плиткой во всю ширину облачка, прочее — строкой
   с расширением и размером: по строке видно, что скачаешь. */
/* Снимки в облачке идут до его краёв: от кромки две точки, между собой —
   тоже две. Подпись и время остаются под ними. */
.fd-ph{display:grid;gap:1px;margin:calc(var(--fdi) - var(--fdpy)) calc(var(--fdi) - var(--fdpx)) 4px;
  border-radius:calc(var(--fdr) - var(--fdi)) calc(var(--fdr) - var(--fdi)) 2px 2px;overflow:hidden}
/* Снимков несколько — идут рядами по 70–100 точек, с переносом. Ширину
   набирают по числу снимков, но не шире облачка. */
/* Желаемую ширину считаем числом, но за облачко не вылезаем: плюс двадцать
   две точки — это те самые поля, на которые снимки заходят по бокам. */
.fd-ph.many{grid-template-columns:repeat(var(--n,3),1fr);
  max-width:calc(100% + 2 * (var(--fdpx) - var(--fdi)))}
/* Мозаика (несколько снимков): ряды столбиком, в ряду снимки по пропорциям кадра (flex-grow считает скрипт), высота ряда задана. */
.fd-ph.mos{display:flex;flex-direction:column;gap:1px;max-width:calc(100% + 2 * (var(--fdpx) - var(--fdi)))}
.fd-ph.one{display:block;max-width:calc(100% + 2 * (var(--fdpx) - var(--fdi)))}   /* одиночный снимок с известными размерами: ширину задаёт скрипт */
.fd-pr{display:flex;gap:1px;min-width:0}
.fd-pr .fd-phi{flex:1 1 0;min-width:0;height:100%}
.fd-pr .fd-phi img{width:100%;height:100%;max-height:none;object-fit:cover}
/* Сообщение ещё грузится (`отправитьСФайлами`): на каждом снимке по центру тёмный кружок с кольцом прогресса и крестиком отмены, как в Telegram; снимок чуть притушен.
   Дуга кольца — доля `--p` от длины окружности (2π·20 = 125.7), само кольцо медленно вращается, пока идёт загрузка. Ручки ответа и реакций у такого сообщения не нужны. */
.fd-pend .fd-phi,.fd-pend .dc-i{position:relative}
.fd-pend .fd-phi img{filter:brightness(.82)}
.fd-pend .fd-act{display:none}
.pg{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pg > svg{position:absolute;inset:0;width:100%;height:100%;animation:pgspin 1.1s linear infinite;transform-origin:50% 50%}
.pg-bg{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2.5}
.pg-arc{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:125.7;
  stroke-dashoffset:calc(125.7px * (1 - var(--p,.08)));transition:stroke-dashoffset .2s ease;transform:rotate(-90deg);transform-origin:50% 50%}
.pg i{position:relative;display:grid;place-items:center}
.pg i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pg.late{cursor:default}
.pg.late i{opacity:.45}
@keyframes pgspin{to{transform:rotate(360deg)}}
html.lite .pg > svg{animation:none}
.fd-ph.many .fd-phi{aspect-ratio:1}
.fd-ph.many .fd-phi img{height:100%}
.fd-phi{display:block;line-height:0}
.fd-phi img{width:100%;height:100%;max-height:240px;object-fit:cover;display:block}
.fd-ph.many .fd-phi img{max-height:150px}
/* Облачко только со снимками (`.fd-media`, без подписи): снимки на всё облачко, но с тем же узким полем облачка вокруг (`--fdi`, 2 px) и концентричными углами; время — тёмной полупрозрачной капсулой
   в правом нижнем углу поверх снимков, как в Telegram. */
.fd-b.fd-media{padding:var(--fdi);overflow:hidden}
.fd-b.fd-media .fd-ph{margin:0;border-radius:calc(var(--fdr) - var(--fdi))}
/* Снимки и документы одного сообщения лежат вплотную друг к другу с тем же зазором, что и снимки между собой (2 px = `--fdi`); раньше между ними было 4 px у снимков и ещё отрицательный отступ у документов. */
/* Облачко «только снимки» с именем автора над ними (`fd-media-w`, чужое сообщение): имя — на белом облачке со своими полями, снимок под ним идёт во всю
   ширину облачка (она — по более широкому из имени и снимка: `width:100%` и `min-width` от посчитанной скриптом ширины `--ш`) и вплотную к низу и бокам;
   время — тёмной капсулой на снимке, как у облачка без имени, и пустой полосы под снимком нет. Высота снимка идёт от пропорций кадра (`--асп`), не больше 420 px. */
.fd-b.fd-media.fd-media-w > .fd-who{margin:0;padding:7px 13px 6px}
.fd-b.fd-media.fd-media-w .fd-ph{margin:0;width:100%!important;min-width:var(--ш,0);
  border-radius:3px 3px calc(var(--fdr) - var(--fdi)) calc(var(--fdr) - var(--fdi))}
.fd-b.fd-media.fd-media-w .fd-ph.one .fd-phi img{height:auto!important;aspect-ratio:var(--асп);max-height:420px!important}
.fd-ph:has(+ .fd-docs){margin-bottom:var(--fdi)}
.fd-docs[style*="width"]{max-width:calc(100% + 2 * (var(--fdpx) - var(--fdi)))}
.fd-ph + .fd-docs{margin-top:0}
.fd-b.fd-media .fd-ph.mos,.fd-b.fd-media .fd-ph.many,.fd-b.fd-media .fd-ph.one,.fd-b.fd-media .fd-docs{max-width:100%}
.fd-b.fd-media .fd-line.fd-only{position:absolute;right:calc(var(--fdi) + 6px);bottom:calc(var(--fdi) + 6px);display:block;margin:0;padding:0}
.fd-b.fd-media .fd-line.fd-only > .fd-t{display:none}
.fd-row .fd-b.fd-media .fd-time{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fd-row .fd-b.fd-media .fd-time *{color:inherit}
/* Реакции облачка только со снимками (4.11.2026) — отдельной строкой ПОД облачком, как в Telegram. Ряд `.fd-re-out` — сетка: облачко и строка реакций — две
   ячейки одного столбца (зазор 2 px — ближе к своему сообщению, чем к следующему; снизу у строки ещё 4 px сверх обычного отступа ряда), лицо отправителя — в первой
   строке, по низу облачка (а не по строке реакций). Выравнивание по краю облачка: у своего сообщения реакции у правой границы, у чужого — у левой. Столбец —
   по самому широкому из двух, но не шире 84% (как облачко). В цепочке (`.fd-chain`) лицо снаружи ряда — столбец один. Время остаётся тёмной капсулой на снимках. */
.fd-row.fd-re-out{display:grid;grid-template-columns:auto fit-content(min(84%,420px));justify-content:start;column-gap:5px;row-gap:2px;align-items:end}
.fd-row.fd-re-out:not(:has(> .fd-av)){grid-template-columns:fit-content(min(84%,420px))}
.fd-row.fd-re-out > .fd-av{grid-column:1;grid-row:1;align-self:end}
.fd-row.fd-re-out > .fd-b{grid-column:-2;grid-row:1;justify-self:start;max-width:100%}
.fd-row.fd-re-out > .fd-re{grid-column:-2;grid-row:2;justify-self:start;margin:0 0 4px;max-width:100%}
.fd-row.my.fd-re-out{grid-template-columns:fit-content(min(84%,420px));justify-content:end}
.fd-row.my.fd-re-out > .fd-b{justify-self:end}
.fd-row.my.fd-re-out > .fd-re{justify-self:end}
/* Лицо цепочки стоит снаружи рядов и держится низа последнего ряда — а у него внизу строка реакций; поднимаем лицо на её высоту (24 + зазор 2 + отступ 4), чтобы оно стояло по низу облачка, а не по реакциям. */
.fd-chain:has(> .fd-chain-l > .fd-row.fd-re-out:last-child) > .fd-av{margin-bottom:30px}
/* Документы в облачке — тем же рядом карточек, от края до края. */
/* Документы в облачке живут по тем же правилам, что и снимки: та же сетка,
   те же две точки между карточками, ряды поровну и до края облачка. */
.fd-docs{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:1px;
  margin:calc(var(--fdi) - var(--fdpy)) calc(var(--fdi) - var(--fdpx)) 4px;
  border-radius:calc(var(--fdr) - var(--fdi)) calc(var(--fdr) - var(--fdi)) 2px 2px;overflow:hidden}
.fd-docs .dc-i{min-width:0;max-width:none;background:#fff}
/* Когда над вложением стоит имя, оно не лезет на подпись: встаёт под ней
   и скругляется минимально — верхнего края облачка оно уже не касается,
   и большой радиус там неоткуда взять. */
.fd-b:has(.fd-who) .fd-ph,.fd-b:has(.fd-who) .fd-docs{margin-top:5px;border-radius:2px}
.fd-row.my .fd-docs .dc-i{color:var(--tx)}
.fd-file{display:flex;align-items:center;gap:8px;margin:3px 0 0;padding:6px 8px;
  border-radius:10px;background:#fff;border:var(--stroke-w) solid var(--stroke);
  text-decoration:none;color:var(--tx)}
.fd-file:hover{border-color:var(--accent)}
.fd-file i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;background:var(--accent-soft);
  font:600 9.5px/1 var(--cff);font-style:normal;color:var(--accent-d)}
.fd-file b{flex:1;min-width:0;font:400 12.5px/16px var(--cff);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-file span{flex:0 0 auto;color:#8E8E93;font:400 11.5px/16px var(--cff)}
.fd-row.my .fd-file{background:rgba(255,255,255,.14);border-color:transparent;
  color:var(--accent-ink,#fff)}
.fd-row.my .fd-file i{background:rgba(255,255,255,.2);color:var(--accent-ink,#fff)}
.fd-row.my .fd-file span{color:var(--accent-ink2,rgba(255,255,255,.7))}
/* Пустая строка под вложением без подписи — только время. */
.fd-only .fd-t{display:none}
/* Куда бросают файлы. */
.dsbody.fd-drop{outline:2px dashed var(--accent);outline-offset:-6px;
  background:var(--accent-soft)}
/* Удалённое: место остаётся, чтобы ответы на него не повисли в воздухе. */
.fd-b.gone{background:#F2F2F7;border:var(--stroke-w) dashed var(--stroke)}
.fd-b.gone .fd-t{color:#8E8E93;font-style:italic}
.fd-row.my .fd-b.gone .fd-t{color:#8E8E93}
.fd-b.gone .fd-act{display:none !important}
/* Пересланное: откуда пришло. */
.fd-fwd{margin:0 0 3px;font:400 11.5px/15px var(--cff);color:#8E8E93}
/* У облачка с файлами ширину задаёт сам файл (снимок — по своим пропорциям с потолком высоты), а не строка
   «Переслано: …»: nowrap-подпись растягивала облачко шире снимка, снимок тянулся на всю ширину и из-за
   max-height обрезался (cover) — «изменился размер». Здесь подпись ширину не распирает и при нужде
   переносится. */
.fd-b:has(.fd-ph) .fd-fwd,.fd-b:has(.fd-docs) .fd-fwd{width:0;min-width:100%}
/* Вложение под подписью «Переслано» — с отступом, а не вплотную: у обычного снимка отрицательный верхний
   отступ тянет его к краю облачка, а под строкой подписи это выходило тесно. */
.fd-b:has(.fd-fwd) .fd-ph,.fd-b:has(.fd-fwd) .fd-docs{margin-top:6px;border-radius:2px}
/* Радиус вложения зависит от соседей. Сверху облачка вложение повторяет его изгиб (15px), снизу всегда
   стоит время или подпись — там 2px. Если сверху есть шапка (имя, «Переслано», цитата) или перед ним
   стоит другой блок вложений, верхние углы тоже 2px: со всех сторон вложение окружено содержимым облачка. */
.fd-b:has(.fd-q) .fd-ph,.fd-b:has(.fd-q) .fd-docs,.fd-ph ~ .fd-docs{border-radius:2px}
.fd-fwd b,.fd-fwd-go{font-weight:600;color:var(--accent-d)}
.fd-fwd-go{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color .15s}
.fd-fwd-go:hover{text-decoration-color:currentColor}
/* Имя автора в шапке облачка и карточки задачи — ссылка на его карточку, но выглядит как раньше: цвет шапки,
   подчёркивание только под курсором. */
.fd-who a.fd-who-go{color:inherit;margin-left:0;font:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color .15s}
.fd-who a.fd-who-go:hover{text-decoration-color:currentColor}
.fd-row.my .fd-fwd,.fd-row.my .fd-fwd b,.fd-row.my .fd-fwd-go{color:var(--accent-ink2,rgba(255,255,255,.7))}
/* Куда переслать: поиск по всем записям системы. */
.dsfwd{position:absolute;z-index:40;width:min(300px,90%);padding:10px;
  border-radius:var(--radius);background:#fff;border:var(--stroke-w) solid var(--stroke);
  box-shadow:0 12px 32px rgba(0,0,0,.16)}
.dsfwd-q{width:100%;height:30px;margin:0 0 6px;border-radius:calc(9px * var(--el));
  border:var(--stroke-w) solid var(--stroke);padding:0 9px;
  font:400 12.5px/1 var(--cff);color:var(--tx)}
.dsfwd-q:focus{outline:none;border-color:var(--accent)}
.dsfwd-l{max-height:210px;overflow:auto}
.dsfwd-l button{display:flex;align-items:baseline;gap:8px;width:100%;border:0;background:none;
  padding:5px 6px;border-radius:8px;cursor:pointer;text-align:left;
  font:400 13px/17px var(--cff);color:var(--tx)}
.dsfwd-l button:hover{background:var(--accent-soft)}
.dsfwd-l b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsfwd-l span{margin-left:auto;flex:0 0 auto;color:#8E8E93;font-size:11.5px}
/* Короткая весть о том, что действие прошло. */
.dsnote{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);z-index:45;
  padding:6px 14px;border-radius:999px;background:rgba(28,28,30,.92);color:#fff;
  font:400 12.5px/17px var(--cff);white-space:nowrap;
  animation:fdpop .3s cubic-bezier(.16,1,.3,1) both}
/* Название записи в вести о пересылке — ссылка на её карточку. */
.dsnote-go{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.dsnote-go:hover{text-decoration-thickness:2px}
/* Упоминание в тексте — цветом темы: видно, к кому обращаются. */
.fd-at{color:var(--accent-d);font-weight:500}
.fd-row.my .fd-at{color:var(--accent-ink,#fff);text-decoration:underline}
/* Подсказка при вводе «@»: сотрудники этой системы. */
/* Над общим стеклом нижней панели (`.dside::after`, z-index 2): без своего `position`/`z-index` подсказка «@» оставалась под стеклом и её не было видно. */
.dsment{position:relative;z-index:3;max-height:190px;overflow:auto;border-top:var(--stroke-w) solid var(--stroke);
  background:#fff}
.dsment button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;
  padding:6px 14px;cursor:pointer;text-align:left;font:400 13px/17px var(--cff);color:var(--tx)}
.dsment button.on,.dsment button:hover{background:var(--accent-soft)}
.dsment i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#D1D1D6 center/cover;
  display:flex;align-items:center;justify-content:center;font:600 10px/1 var(--cff);color:#fff;
  font-style:normal}
.dsment b{font-weight:600}
.dsment span{margin-left:auto;color:#8E8E93;font-size:12px}
/* На что отвечаем — над полем ввода. */
.dsreply{position:relative;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 16px;
  border-top:var(--stroke-w) solid var(--stroke);background:#FBFBFC}
.dsreply .fd-q-l{width:2px;align-self:stretch;background:var(--accent);border-radius:2px}
.dsreply b{font:600 12px/16px var(--cff);color:var(--accent-d)}
.dsreply .fd-q-t{flex:1;min-width:0;font:400 12px/16px var(--cff);color:#8E8E93;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsreply button{border:0;background:none;cursor:pointer;color:#8E8E93;font-size:16px;
  line-height:1;padding:0 2px}
.dsreply button:hover{color:var(--tx)}
/* Лоток вложений над полем ввода: что выбрали, перетащили или вставили, лежит здесь до отправки. Зона чата растёт вверх на высоту
   лотка (лента над ним ужимается сама — колонка гибкая). Плитки лежат сеткой: до трёх в ряд (число колонок — `--кол`, его ставит скрипт
   по числу файлов, ширина подстраивается под окно, одна плитка не растягивается шире 220 px) и не больше трёх рядов в высоту — дальше
   лоток прокручивается, не съедая переписку. Картинка и видео заполняют плитку (обрезка по центру), документ — карточка со значком. */
.dstray{--ряд:104px;flex:0 0 auto;display:grid;grid-template-columns:repeat(var(--кол,3),minmax(0,220px));gap:8px;
  padding:10px 16px 2px;max-height:min(45%,calc(var(--ряд) * 3 + 52px));overflow-y:auto;
  background:none}
.dstray + .dsbar{padding-top:8px}
/* Поле приёма: пока файл тащат над панелью чата, над строкой ввода плавно вырастает рамка «отпустите сюда» (под лотком, если он уже есть).
   Растёт высотой и проявляется прозрачностью; лента над ним ужимается вместе с ростом, без скачка. */
.dsdrop{flex:0 0 auto;max-height:0;opacity:0;overflow:hidden;padding:0 16px;
  transition:max-height .32s cubic-bezier(.16,1,.3,1),opacity .22s ease,padding .32s cubic-bezier(.16,1,.3,1)}
.dsdrop.on{max-height:120px;opacity:1;padding:10px 16px 2px}
.dsdrop-in{box-sizing:border-box;height:84px;display:flex;align-items:center;justify-content:center;gap:10px;
  border:2px dashed var(--accent);border-radius:calc(9px * var(--el));background:var(--accent-soft);color:var(--accent-d);
  font:500 13px/17px var(--cff);transition:background .15s,transform .15s}
.dsdrop-in svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dsdrop.hot .dsdrop-in{background:var(--accent);color:var(--accent-ink,#fff);transform:scale(.99);animation:none;
  box-shadow:0 0 0 4px var(--accent-soft),0 6px 18px rgba(0,0,0,.12)}
/* Подсветка поля приёма: пока файл над панелью, рамка мягко «дышит» кольцом цвета темы; над самим полем она горит сплошным цветом. */
.dsdrop.on:not(.hot) .dsdrop-in{animation:dsdropring 1.5s ease-in-out infinite}
@keyframes dsdropring{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px var(--accent-soft)}}
.dsdrop + .dsbar{padding-top:8px}
html.lite .dsdrop,html.lite .dsdrop-in{transition:none;animation:none!important}
/* Строка над плитками: сколько вложено, переключатель сжатия и «Убрать все». Без своего фона — лоток стеклянный, и сплошная полоса резала бы его; не липнет (при прокрутке уходит вместе с плитками). */
.dst-head{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;white-space:nowrap;
  margin:-10px -16px 0;padding:6px 16px 4px;font:400 12px/16px var(--cff);color:#8E8E93}
.dst-all{border:0;background:none;padding:0;cursor:pointer;font:500 12px/16px var(--cff);color:var(--accent-d)}
.dst-all[hidden],.dst-zip[hidden]{display:none}
/* Переключатель «Сжать фото / Как файлы»: таблетка в строке над плитками, между счётчиком и «Убрать все». */
.dst-zip{flex:0 0 auto;white-space:nowrap;margin:0 10px 0 auto;border:var(--stroke-w) solid var(--stroke);background:var(--card-bg);color:#8E8E93;border-radius:999px;padding:1px 10px;cursor:pointer;
  font:500 12px/16px var(--cff);transition:background .15s,color .15s,border-color .15s}
.dst-zip.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-d)}
.dst-zip.on::before{content:"✓ "}
.dst-all:hover{text-decoration:underline;text-underline-offset:2px}
/* Вложения собраны — строка ввода работает в одном из двух режимов, и режим выбирает нажатие. Нажали «Комментарий» — он растягивается
   на всю строку, «Добавить задачу» прячется; нажали «Добавить задачу» — открывается форма (комментарий прячется), а плитки уезжают в неё
   и пока скрыты (вернутся, если форму отменят). */
.dsbar.вложено:has(.dsin:not(.task):focus) > .dsin.task{display:none}
.dsbar.вложено:has(.dsin:not(.task):focus) > .dsin:not(.task){flex-grow:1}
.dstray:has(+ .dsbar.tskopen){display:none}
/* Скругление плиток — по общему правилу «элемент = N px × --el», тем же числом, что у снимков вкладки «Медиа» (.md-i) и карточек документов в ленте (.dc-i): 9 px при 100%,
   нуль при «без скруглений», вдвое при 200% — следует настройке оформления, а не своему числу. */
.dst{position:relative;height:var(--ряд);min-width:0;border-radius:calc(9px * var(--el));overflow:hidden;background:var(--chip-bg);
  animation:dstin .22s var(--ez) both}
.dst-img img,.dst-img video{display:block;height:100%;width:100%;object-fit:cover}
.dst-img img{cursor:zoom-in}
/* Системная обводка поверх плитки (накладкой, а не рамкой): светлый снимок страницы иначе сливается с белым лотком, а рамка под картинкой
   была бы скрыта самой картинкой. */
.dst::after{content:"";position:absolute;inset:0;border-radius:inherit;border:var(--stroke-w) solid var(--stroke);pointer-events:none}
.dst-x{z-index:1}
.dst-play{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
  background:rgba(28,28,30,.55);pointer-events:none}
.dst-play::after{content:"";position:absolute;left:11px;top:8px;border:6px solid transparent;border-left:9px solid #fff;border-right:0}
.dst-doc{box-sizing:border-box;padding:10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:var(--field-bg,var(--chip-bg))}
.dst-doc .fkind{width:34px;height:34px;flex-basis:34px;font-size:10px}
.dst-doc b{max-width:100%;font:500 12px/15px var(--cff);color:var(--tx);overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.dst-doc span{font:400 11px/13px var(--cff);color:#8E8E93}
/* Крестик — в уголке и только при наведении; на сенсорных экранах, где наведения нет, виден всегда. */
.dst-x{position:absolute;top:5px;right:5px;width:22px;height:22px;padding:0;border:0;border-radius:50%;
  background:rgba(28,28,30,.72);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .12s}
.dst-x svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.dst:hover .dst-x,.dst-x:focus-visible{opacity:1}
.dst-x:hover{background:rgba(28,28,30,.92)}
@media (hover:none){.dst-x{opacity:1}}
/* На телефоне панель ниже, а плиток может быть много: чуть мельче, чтобы лента над лотком не исчезала совсем. */
@media (max-width:600px){
  .dstray{--ряд:116px;gap:6px;padding:8px 12px 2px;grid-template-columns:repeat(var(--кол,3),minmax(0,150px))}
  .dst-doc{padding:8px}
  .dst-head{margin:-8px -12px 0;padding:6px 12px 4px}
}
/* Телефон (в том числе широкий): плитка не растягивается на всю строку — до 150 px шириной и 116 высотой, один снимок — не полоса, а нормальная карточка. */
html.mob .dstray{--ряд:116px;gap:6px;padding:8px 12px 2px;grid-template-columns:repeat(var(--кол,3),minmax(0,150px))}
@keyframes dstin{from{opacity:0;transform:scale(.92)}}
html.lite .dst{animation:none}
/* ---------- кто здесь ----------
   Стопка лиц в шапке: кто сейчас смотрит эту же запись или этот же раздел.
   Лица наезжают друг на друга, как в местах, где такое показывают давно, —
   так пятеро занимают место троих, а порядок читается слева направо. */
.hereav{display:flex;align-items:center;flex:0 0 auto;padding-left:6px}
.hereav .hav{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--panel,#fff) center/cover no-repeat;
  border:2px solid var(--panel,#fff);
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;
  font:600 10.5px/1 var(--cff,inherit);color:#fff;font-style:normal}
/* Лица наезжают на предыдущее, а счётчик остаётся в конце — читается
   слева направо, как список. */
.hereav .hav + .hav{margin-left:-8px}
/* Наведённое лицо выходит вперёд — иначе соседнее перекрывает половину. */
.hereav .hav{position:relative;transition:transform .12s var(--ez,ease)}
.hereav .hav:hover{z-index:2;transform:translateY(-1px)}
/* Подпись своя: системная всплывает через секунду и уезжает за край окна,
   а лица стоят у самого правого края. Эту прижимаем правым краем к правому
   краю лица и растим влево — за границу окна ей уйти некуда. */
.havtip{position:absolute;top:calc(100% + 7px);right:-2px;
  display:none;white-space:nowrap;pointer-events:none;
  padding:5px 9px;border-radius:calc(8px * var(--el,1));
  background:rgba(28,28,30,.94);color:#fff;
  font:400 12px/1.35 var(--cff,inherit);font-weight:400;font-style:normal;
  box-shadow:0 6px 18px rgba(0,0,0,.22);z-index:60}
.hereav .hav:hover .havtip{display:block}
/* У левого края окна (узкая полоса) подпись прижимаем к левому краю лица:
   иначе она уходит за границу уже с другой стороны. */
.hereav.слева .havtip{right:auto;left:-2px}
.hav-t{background:#B9BEC6}
.hav-more{background:var(--bg,#EFEFF3);color:var(--tx2,#6C6C70)}
/* Человек не в списке, а внутри какой-то записи этого раздела. Ободок узкий
   и приглушённый: это пометка, а не тревога. */
.hereav .hav.hav-rec{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 0 0 3px var(--acc2,rgba(10,132,255,.22))}
/* Появление нового лица: не возникает рывком, а собирается — приходит
   крупным и прозрачным и садится на своё место. */
@keyframes hav-приход{
  from{transform:scale(1.55);opacity:0}
  60%{opacity:1}
  to{transform:scale(1);opacity:1}
}
.hereav .hav.hav-нов{animation:hav-приход .34s cubic-bezier(.22,.9,.28,1) both}
/* Уход — обратное появлению: лицо сжимается и вместе с ним схлопывается его
   место, так что стопка смыкается сама, а не дёргается в конце.
   Переходом, а не кадрами: у первого лица нет наезда на соседа, и заданные
   кадрами отступы дёрнули бы его на восемь точек в сторону. Переход же идёт
   от того значения, которое у лица есть сейчас. */
.hereav .hav.hav-уход{
  transition:transform .26s cubic-bezier(.4,0,.7,.4), opacity .2s ease,
             width .26s ease, flex-basis .26s ease, margin-left .26s ease,
             border-width .26s ease;
  transform:scale(.35);opacity:0;pointer-events:none;
  width:0;flex-basis:0;margin-left:0;border-width:0}
@media (prefers-reduced-motion: reduce){
  .hereav .hav.hav-нов{animation:none}
  .hereav .hav.hav-уход{transition:none}
}
/* В шапке раздела стопка стоит у правого края, на одной высоте с названием.
   В полосе рядом с открытой карточкой её не показываем: там и места нет,
   и говорит она о том же — за неё отвечает стопка в самой карточке. */
.topav{position:absolute;right:20px;top:22px}
.top{position:relative}
body.split .topav{display:none}

/* Точка непрочитанного — в списке и на доске: новое видно, ещё не открывая
   карточку. */
/* Точке нужна опорная ячейка (position), но закреплённая колонка и номера строк
   уже position:sticky, а он тоже опора. Правило с полным весом перебивало
   закрепление: у строки с точкой первая ячейка становилась relative и уезжала
   при горизонтальной прокрутке (у остальных строк стояла на месте). :where()
   обнуляет вес — sticky побеждает там, где он есть, relative остаётся там, где
   закрепления нет. */
:where(#body tr.новьё) td:first-child{position:relative}
#body tr.новьё td:first-child::before{content:'';position:absolute;left:4px;top:50%;
  margin-top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.kcard.новьё{position:relative}
.kcard.новьё::after{content:'';position:absolute;right:7px;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
/* ---------- поиск, закреплённое, непрочитанное ----------
   Три полосы над лентой: строка поиска, закреплённое и черта прочитанного
   внутри самой ленты. */
.dsfind-b{flex:0 0 auto;padding:0 0 10px;border:0;background:none;cursor:pointer;
  color:#8E8E93}
.dsfind-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.dsfind-b:hover,.dsfind-b.on{color:var(--accent-d)}
.dsfind{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#fff;
  border-bottom:var(--stroke-w) solid var(--stroke)}
.dsfind > svg{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:#8E8E93;stroke-width:1.8}
.dsfind input{flex:1 1 0;min-width:0;border:0;background:none;padding:0;
  font:400 13px/18px var(--cff);color:var(--tx)}
.dsfind input:focus{outline:none}
.dsfind-n{flex:0 0 auto;font-style:normal;color:#8E8E93;
  font:400 12px/16px var(--cff);white-space:nowrap}
.dsfind > button{flex:0 0 auto;border:0;background:none;cursor:pointer;color:#8E8E93;
  font-size:16px;line-height:1;padding:0 2px}
.dsfind > button:hover{color:var(--tx)}
.fd-mark{background:#FFE39A;color:inherit;border-radius:3px;padding:0 1px}
.fd-row.my .fd-mark{background:rgba(255,255,255,.32);
  color:var(--accent-ink,#fff);box-shadow:inset 0 -1px 0 rgba(255,255,255,.5)}
/* Пока ищут, лента — список найденного: ручки сообщения там ни к чему,
   нажатие уводит к самому месту в переписке. */
.dsbody.ищем .fd-act{display:none !important}
.dsbody.ищем .fd-row,.dsbody.ищем .fd-sys{cursor:pointer}
.dsbody.ищем .fd-row:hover .fd-b{box-shadow:0 0 0 1.5px var(--accent-soft2)}
/* Закреплённое — полосой над лентой: главное в долгой переписке не должно
   тонуть. */
.dspin{display:flex;align-items:center;gap:9px;padding:6px 12px;background:#fff;
  border-bottom:var(--stroke-w) solid var(--stroke);cursor:pointer}
.dspin:hover{background:var(--accent-soft)}
.dspin-i{width:12px;height:12px;flex:0 0 12px;fill:var(--accent)}
.dspin-t{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.dspin-t b{font:600 11px/14px var(--cff);color:var(--accent-d)}
.dspin-t span{font:400 12px/16px var(--cff);color:#8E8E93;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dspin-x{flex:0 0 auto;border:0;background:none;cursor:pointer;color:#C7C7CC;
  font-size:15px;line-height:1;padding:0 2px}
.dspin-x:hover{color:var(--tx)}
/* Значок у времени: это сообщение закреплено. */
.fd-pini{width:9px;height:9px;fill:currentColor;margin-right:3px;opacity:.7;
  vertical-align:-1px}
.fd-act svg{width:11px;height:11px;fill:currentColor;vertical-align:-1px}
/* Черта прочитанного: под ней — то, чего человек ещё не видел. */
.fd-new{display:flex;align-items:center;gap:9px;margin:16px 2px 10px;
  color:var(--accent-d);font:600 10.5px/14px var(--cff);
  text-transform:uppercase;letter-spacing:.05em}
.fd-new::before,.fd-new::after{content:'';flex:1;height:1px;background:var(--accent);
  opacity:.3}
/* Число нового на вкладке и точка у вкладки с черновиком. */
.dstabs button .нов{display:inline-block;min-width:16px;height:15px;margin-left:5px;
  padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;
  font:600 10px/15px var(--cff);text-align:center;vertical-align:1px;font-style:normal}
.dstabs button.on .нов{background:var(--accent)}
.dstabs button.есть-черн::before{content:'';position:absolute;left:-6px;top:4px;
  width:4px;height:4px;border-radius:50%;background:#FF9F0A}
/* Задача — то же облачко, но обведённое: её видно в ленте с одного взгляда.
   Своя задача остаётся светлой: на тёмной подложке обводка и слово «Задача»
   сливались, а задача должна читаться одинаково, чья бы она ни была. */
.fd-b.task,.fd-row.my .fd-b.task{border:1.5px solid var(--accent);padding:10px 13px;
  background:#fff}
.fd-row.my .fd-b.task .fd-t{color:var(--tx)}
.fd-row.my .fd-b.task .fd-time{color:#8E8E93}
/* Каждый параметр («Задача …», ссылка на источник, «для …») — свой цельный
   кусок: переносится на новую строку целиком, если не влез, но не рвётся
   посередине себя на две строки, как рвётся обычный текст. Только «до …» —
   отдельный блок ниже, ему положено быть на своей строке всегда. */
.fd-task{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 4px;
  font:600 13.5px/18px var(--cff);color:var(--tx)}
.fd-task[data-taskopen]{cursor:pointer}
.fd-ttitle,.fd-in,.fd-tfor{white-space:nowrap}
.fd-due,.fd-tfor{font-weight:400;color:#8E8E93;font-size:12.5px}
/* Итог написан — задача выполнена, название зачёркнуто, тем же взглядом,
   что и отмеченный пункт чек-листа на самой карточке. */
.fd-b.task.done .fd-t{color:#8E8E93;text-decoration:line-through}
.fd-row.my .fd-b.task.done .fd-t{color:#8E8E93}
.fd-result{font:400 13px/1.4 var(--cff);color:#8E8E93;margin-top:2px}
.fd-fin{display:block;width:100%;box-sizing:border-box;border:0;outline:0;background:none;
  padding:4px 0 0;margin-top:2px;font:400 13px/1.4 var(--cff);color:var(--tx);
  border-top:var(--stroke-w) solid var(--stroke);resize:none;overflow:hidden}
.fd-fin::placeholder{color:#8E8E93}
.fd-fin.fd-noline{border-top:0;padding-top:0;margin-top:0}
/* Общая карточка задачи (пузырь в чате и строка ленты «Задач» — один и тот
   же вид, taskCardHtml). Галочка после слова «Задача» — не отметка
   выполнения, а просто эмблема типа сообщения: живёт своим цветом всегда. */
.fd-tcard{display:flex;flex-direction:column}
/* Время постановки — только вне чата (лента, вкладка «Задачи»): там своего
   времени сообщения нет, а знать, когда завели задачу, всё равно нужно. */
.fd-tat{align-self:flex-end;margin-top:4px}
.fd-tick{width:11px;height:11px;color:#34C759;flex:0 0 auto}
.fd-in{color:var(--accent);font-weight:500}
.fd-tfor[data-taskwho]{cursor:pointer}
.fd-tfor[data-taskwho]:hover{text-decoration:underline}
.fd-stpills{display:flex;flex-wrap:wrap;gap:6px;margin:1px 0 7px}
.fd-stpill{padding:2px 9px;border-radius:20px;
  background:#F3EDE3;color:#8A6D3B;font:500 11.5px/16px var(--cff)}
.fd-stpill-overdue{background:#FFE0DE;color:#AE1F17}
/* Срок просроченной задачи — тем же красным, что и плашка и рамка. */
.fd-due.overdue{color:var(--red)}
.fd-ttitle{font:600 13.5px/18px var(--cff);color:var(--tx)}
.fd-tdesc{font:400 13.5px/1.4 var(--cff);color:var(--tx);margin:0 0 7px}
.fd-tck{border:0;margin:0 0 7px}
.fd-tck .ck-item{padding:3px 0}
/* Итог написан — задача выполнена: рамка и плашка статуса зеленеют, текст
   и пункты чек-листа зачёркиваются, тем же взглядом, что и отмеченный
   пункт чек-листа на самой карточке. Чек-бокс при этом не трогаем — он
   показывает своё, отдельное от общего «выполнено» состояние. Правило
   общее для пузыря в чате (.fd-b.task) и строки ленты (.feed-card) —
   один и тот же taskCardHtml внутри обоих. */
.fd-b.task.done,.fd-row.my .fd-b.task.done,.feed-card.done,.kcard.tkcard.done{border-color:#34C759}
.fd-b.task.done .fd-stpill,.feed-card.done .fd-stpill,.kcard.tkcard.done .fd-stpill
  {background:#DBF4E1;color:#1B7534}
.fd-b.task.done .fd-ttitle,.fd-b.task.done .fd-tdesc,.fd-b.task.done .fd-tck .ck-text,
.feed-card.done .fd-ttitle,.feed-card.done .fd-tdesc,.feed-card.done .fd-tck .ck-text,
.kcard.tkcard.done .fd-ttitle,.kcard.tkcard.done .fd-tdesc,.kcard.tkcard.done .fd-tck .ck-text
  {color:#8E8E93;text-decoration:line-through}
.fd-b.task.done .fd-result,.feed-card.done .fd-result,.kcard.tkcard.done .fd-result
  {background:#DBF4E1;border-radius:calc(8px * var(--el));padding:6px 8px;margin:0 -8px}
/* Просрочена — срок в прошлом, не выполнена (taskOverdue): только рамка,
   без зачёркивания и смены плашки — задача ещё не закрыта, а её содержимое
   не стало неактуальным, просто время вышло. */
.fd-b.task.overdue,.fd-row.my .fd-b.task.overdue,.feed-card.overdue,.kcard.tkcard.overdue
  {border-color:var(--red)}
/* ---------- вид: лента (сущность «Задачи») ---------- */
/* Без этого шрифт задачи в ленте (taskCardHtml полагается на --cff/--cfs
   всюду, они заведены только внутри .dside для чата) молча проваливался
   в системный Times New Roman — шорткат font с неизвестной переменной
   становится невалидным целиком, а не только в части шрифта. */
.feed-sort{display:flex;gap:8px;padding:15px 15px 0;max-width:640px;margin:0}
.feed-sortbtn{border:var(--stroke-w) solid var(--stroke);border-radius:20px;background:#fff;
  padding:5px 13px;font:400 12.5px/16px var(--cff, Inter, -apple-system, sans-serif);
  color:#8E8E93;cursor:pointer}
.feed-sortbtn.on{border-color:var(--accent);color:var(--accent);font-weight:500}
.feed-list{--cfs:14px;--cff:var(--font-body);
  display:flex;flex-direction:column;gap:10px;padding:15px;max-width:640px;margin:0}
.feed-card{background:#fff;border:1.5px solid var(--accent);
  border-radius:calc(13px * var(--el));padding:10px 13px;cursor:pointer}
/* Цепочка — тот же .fd-chain, что и в чате: свой отступ сверху тут лишний,
   расстояние между цепочками уже держит gap самого .feed-list; между
   карточками внутри одной цепочки — чуть теснее, чем между цепочками. */
.feed-list .fd-chain{margin-top:0}
.feed-chain .feed-card + .feed-card{margin-top:6px}
/* В чате под лентой стоит поле ввода — аватар, залипая, останавливается
   с естественным отступом от него. В ленте «Задач» и на доске такого поля
   нет: зазор даёт не bottom у самого аватара (это сдвинуло бы его и тогда,
   когда чейн целиком помещается на экране и залипать ещё нечему — ровно
   тот сбой с «повисшим» аватаром, на который указал Руслан), а запас
   снизу у самого скролл-контейнера (padding-bottom ниже, у #altWrap
   и .klist) — тогда bottom:0 у аватара остаётся точным везде. */
/* Подпись дня в чате липнет прямо к верхнему краю полосы переписки — там
   над ней ничего своего нет. В ленте «Задач» сверху та же лента без
   зазора, и дата вплотную к краю экрана выглядела прижатой. */
.feed-list .fd-day{top:15px}
.dsempty{color:#AEAEB2;font:400 13px/1.5 var(--cff);max-width:280px}
/* Шестерёнка ленты стоит в строке вкладок, у правого края. */
.dscog{flex:0 0 auto;padding:0 0 10px;border:0;background:none;cursor:pointer;color:#8E8E93}
.dscog svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.dscog:hover{color:var(--tx)}
.dssub{position:absolute;z-index:30;min-width:240px;max-width:320px;padding:10px;
  border-radius:var(--radius);background:#fff;border:var(--stroke-w) solid var(--stroke);
  box-shadow:0 12px 32px rgba(0,0,0,.14)}
.dssub-h{font:600 13px/18px var(--cff);color:var(--tx);margin:0 0 6px}
.dssub label{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:8px;
  font:400 13px/17px var(--cff);color:var(--tx);cursor:pointer}
.dssub label:hover{background:var(--accent-soft)}
.dssub label i{margin-left:auto;font-style:normal;color:#8E8E93;font-size:12px}
/* Виды событий — вторым ярусом под своей подпиской: пока не подписался,
   выбирать нечего. */
.dssub-k{margin:0 0 4px 22px;display:flex;flex-wrap:wrap;gap:0 10px}
.dssub-k label{padding:2px 4px;font-size:12.5px;color:#3A3A3C}
.dssub-all{margin-left:auto;color:var(--accent-d)}
.dssub-note{padding:2px 4px;color:#8E8E93;font:400 12px/17px var(--cff)}
/* Свёрнутый всплеск отметок. */
/* ---------- залипание подписей в ленте чата (правила владельца) ----------
   Подписи — день и блок «Группа» — лежат каждая в своей секции .fd-ds, до следующей подписи: залипшая
   не может выйти за секцию, поэтому следующая её вытесняет, а не накладывается.
   1. В Группе капсула дат и пилюля («лица · N изменений · развернуть») — зазор 5px; обе по содержимому и по центру.
   2. Свёрнутая Группа ведёт себя как обычная дата: залипает, гаснет в покое и вытесняется следующей.
   3. Раскрытая Группа — отдельный, главный уровень: её шапка залипает первой (.fd-gopen), а даты внутри
      залипают под ней и сменяют друг друга по обычным правилам (второй уровень, --rh = высота шапки + 10).
   4. Нижний блок («N изменений · свернуть») прячется за шапку; приоритет Группы кончается, когда он уходит
      за край: шапка лежит в контейнере группы и уезжает вместе с ним, дальше — обычные правила.
   5. Залипший элемент отстоит от верхнего края на 10px — это padding-top ленты (10px) при top:0.
   6. Минимальный зазор, при котором залипшая начинает уступать место новой, — 10px: это margin-top у подписи. */
.fd-ds > .fd-day{margin-top:10px}
.dsbody > .fd-ds:first-child > .fd-day{margin-top:0}
.fd-gday{margin:10px 0 0;padding:0;cursor:pointer}
.fd-gtop,.fd-gsub{display:flex;justify-content:center}
.fd-gsub{margin-top:5px}
.fd-gpill{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;gap:8px;
  padding:3px 12px;border-radius:999px;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--pill-shadow);font:400 12px/16px var(--cff);color:#6C6C70}
.fd-gpill small{font:inherit;color:inherit}
.fd-gpill .fd-arr{font:normal 400 12px/16px var(--cff);color:var(--accent-d)}
.fd-gday:hover .fd-arr{text-decoration:underline}
/* Группа в пределах одного дня — обычный элемент внутри секции своего дня (не подпись): не залипает, без капсулы. */
.fd-g1{text-align:center}
.fd-gpill .fd-av{width:22px;height:22px;font-size:9px}
/* Свёрнутая Группа гаснет в покое и тогда не ловит мышь — как залипшая дата. */
.fd-gday[data-fold].прилип{opacity:0;pointer-events:none;transition:opacity .25s ease}
.dsbody.идёт .fd-gday[data-fold].прилип{opacity:1;pointer-events:auto}
/* Раскрытая Группа. --rh (высота шапки + 10) выставляет paintChat по факту; здесь запасное значение:
   капсула 22 + зазор 5 + пилюля 28 = 55, и 10 до даты под ней. Без капсулы (группа одного дня) — 28 + 10. */
.fd-rgrp{--rh:65px;margin-top:10px}
.fd-rgrp > .fd-gopen{position:sticky;top:0;z-index:6;margin:0;padding:0}
.fd-rgrp .fd-ds > .fd-day{top:var(--rh)}
/* Раскрытая группа одного дня (.fd-g1c) лежит внутри секции своего дня: её шапка со «свернуть» залипает под
   подписью этого дня (высота даты — --dayh, +5px зазора), чтобы группу можно было свернуть, не листая назад. */
.fd-rgrp.fd-g1c{--rh:38px}
/* Секция без подписи дня (её открыла раскрытая группа после свёрнутой): шапка встаёт к самому верху, а не под несуществующую дату. */
.fd-ds-g > .fd-rgrp.fd-g1c > .fd-gopen{top:0}
/* Дата дня и группа его правок — одна группа: между капсулой даты и пилюлей 5px (как между капсулой дат
   и пилюлей внутри самой Группы), и когда залипли, и в обычном положении, если группа идёт сразу за датой. */
.fd-rgrp.fd-g1c > .fd-gopen{top:calc(var(--dayh,22px) + 5px)}
.fd-day + .fd-g1,.fd-day + .fd-rgrp.fd-g1c{margin-top:5px}
/* Нижний блок группы лежит ниже шапки по наложению (z-index шапки 6): подъезжая, он прячется за ней. */
.fd-gend{position:static;margin:10px 0 0;padding:0}
/* Плашки шапки раскрытой группы — такое же стекло, как у свёрнутой и у шапки чата (белое 70% с размытием): подпись дня, которую
   вытесняет следующая, уходя вверх под шапку группы, слегка просвечивает сквозь них. Раньше они были плотными. */
.dssub-f{margin:6px 4px 0;color:#8E8E93;font:400 11.5px/15px var(--cff)}
.dssub-ok{display:block;width:100%;margin:10px 0 0;height:30px;border:0;cursor:pointer;
  border-radius:calc(9px * var(--el));background:var(--accent-soft);color:var(--accent-d);
  font:600 12.5px/1 var(--cff)}
.dssub-ok:hover{background:var(--accent-soft2)}
/* Плюс в конце вкладок заводит свою тему, ввод для названия встаёт тут же. */
.dstab-add{flex:0 0 auto;color:#C7C7CC;font-size:16px}
.dstab-add:hover{color:var(--accent)}
.dstab-new{flex:0 0 120px;height:22px;margin:0 0 8px;border-radius:calc(7px * var(--el));
  border:var(--stroke-w) solid var(--accent);padding:0 7px;
  font:400 12.5px/1 var(--cff);color:var(--tx)}
.dstab-new:focus{outline:none}
.dstabm{position:absolute;z-index:30;min-width:160px;padding:4px;border-radius:var(--radius);
  background:#fff;border:var(--stroke-w) solid var(--stroke);
  box-shadow:0 12px 32px rgba(0,0,0,.14)}
.dstabm button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:6px 8px;border-radius:8px;cursor:pointer;
  font:400 13px/17px var(--cff);color:var(--tx)}
.dstabm button:hover{background:var(--accent-soft)}
/* Меню сообщения — то же по виду, что и меню темы, только шире: в нём
   строки длиннее. */
.fdmenu{min-width:196px;z-index:46}
/* Быстрые реакции — первая строка меню сообщения (позитивные, нейтральные, негативные подряд,
   без разделителей), справа «больше реакций». Своя реакция подсвечена. */
.fdmenu .fdq{display:flex;align-items:center;gap:2px;padding:2px 0 6px;margin-bottom:4px;
  border-bottom:var(--stroke-w) solid var(--stroke)}
.fdmenu .fdq button{flex:0 0 auto}   /* не сжимать: тесный ряд обрезаем сами (см. app.js, «⋯» должна остаться целой) */
.fdmenu .fdq button,.fdmenu .fdq-extra button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  padding:0;border-radius:50%;font-size:17px;line-height:1;transition:transform .12s ease,background-color .12s ease}
/* hover — только там, где есть мышь: на iPhone нажатие по кнопке с :hover и transition принимается за «наведение» (iOS ждёт, не изменится
   ли содержимое), и реакция в шторке срабатывала лишь со второго касания. */
@media (hover:hover){
  .fdmenu .fdq button:hover,.fdmenu .fdq-extra button:hover{background:var(--accent-soft);transform:scale(1.15)}
}
.fdmenu .fdq .fdq-e.on,.fdmenu .fdq-extra .fdq-e.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
/* Остальные реакции — над быстрым рядом; свёрнуты в ноль и раздвигаются по нажатию на «⋯». */
.fdmenu .fdq-extra{display:flex;flex-wrap:wrap;gap:2px;height:0;overflow:hidden;
  /* Ширину меню задаёт быстрый ряд; добавочный не должен её раздувать, а переносится по ней. */
  width:0;min-width:100%;
  transition:height .18s cubic-bezier(.4,0,.2,1)}
.fdmenu .fdq .fdq-more.on{background:var(--accent-soft)}
.fdmenu .fdq .fdq-more{margin-left:auto;color:var(--icon-fg2)}
.fdq-more svg{width:16px;height:16px;fill:currentColor}
/* Меню заголовка таблицы (сортировка, условное форматирование) — тот же
   вид, что у меню «Создать» (.phmenu.cmenu), только шире. */
.thmenu{min-width:220px}
/* Пометка о правке — рядом со временем, тем же мелким шрифтом. */
.fd-ed{font-style:normal;margin-right:5px;opacity:.7}
/* Полоса выделенного: что делать с отмеченными сообщениями. */
.dssel{position:relative;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 12px;background:#fff;
  border-bottom:var(--stroke-w) solid var(--stroke)}
.dssel b{margin-right:auto;font:600 12px/16px var(--cff);color:var(--tx)}
.dssel button{flex:0 0 auto;border:0;cursor:pointer;border-radius:999px;padding:3px 10px;
  background:var(--accent-soft);color:var(--accent-d);font:500 12px/16px var(--cff)}
.dssel button:hover{background:var(--accent-soft2)}
.dssel button[data-s="удалить"]{background:#FDEDEC;color:#C0392B}
.dssel button[data-s="отмена"]{background:none;color:#8E8E93;font-size:15px;padding:0 4px}
/* Пока выбирают, ручки при наведении не мешают: щелчок отмечает строку. */
.dsbody.выбор .fd-row{cursor:pointer}
.dsbody.выбор .fd-act{display:none !important}
.fd-row.выбран .fd-b{box-shadow:0 0 0 2px var(--accent)}
/* Имя записи, из которой пришло событие. */
.fd-who .fd-lnk{margin-left:8px;font-weight:400;font-size:12px}
.fd-go{cursor:pointer}
/* Нижняя панель чата — «стекло»: строка ввода, лоток вложений и поле приёма — фон на 80% плотности, размытие подложки (`backdrop-filter`), линия
   системного цвета сверху. Размытие осмысленно, только если под панелью что-то лежит, поэтому панель целиком (всё, что стоит под лентой:
   лоток, поле приёма, строка ответа, строка ввода) ложится поверх ленты: скрипт (`стекСчитать`) измеряет её высоту в переменную `--стек`, а лента
   на эту высоту уходит под неё отрицательным нижним отступом и получает такой же запас снизу (при прокрутке сообщения идут под панелью, в конце
   лежат над ней). Открытая форма задачи и строка ответа/подсказка «@» остаются со сплошным фоном. */
.dside{--стек:0px}
.dsbody{margin-bottom:calc(var(--стек) * -1);padding-bottom:calc(var(--стек) + 12px)}
.dsbar{--строка:58px;position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:flex-end;gap:10px;padding:12px 16px;background:var(--card-bg)}
/* Стекло — ОДИН слой на всю нижнюю панель, а не по слою на лоток, поле приёма и строку: у каждого своё размытие брало подложку только внутри своих границ, и на стыке
   была видна шва-линия («разделитель»). Слой — псевдоэлемент `.dside::after` высотой `--стек` (сумма высот панели, меряет скрипт), снизу вверх; сами лоток, поле
   приёма и строка ввода прозрачны и лежат над ним. Верхняя линия панели — его же верхняя рамка, одна. */
/* Кнопка «вниз» — к последнему сообщению (появляется, когда ленту пролистали вверх). Лежит над стеклом нижней панели, на высоте панели. */
.fd-down{position:absolute;right:14px;bottom:calc(var(--стек,0px) + 14px);z-index:6;width:38px;height:38px;padding:0;border-radius:50%;
  border:var(--stroke-w) solid var(--stroke);background:rgba(255,255,255,.8);color:#3a3a3c;cursor:pointer;      /* белая, полупрозрачная, с размытием — по виду как капсула времени, но светлая */
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(8px) scale(.85);transition:opacity .16s ease,transform .22s cubic-bezier(.2,.9,.3,1)}
.fd-down.on{opacity:1;pointer-events:auto;transform:none}
.fd-down:hover{background:rgba(255,255,255,.95)}
.fd-down:active{transform:scale(.93)}
.fd-down svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.fd-down{transition:none}}
.dside::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--стек,0px);z-index:2;pointer-events:none;
  background:var(--card-bg);border-top:var(--stroke-w) solid var(--stroke)}      /* сплошной цвет карточки: без прозрачности и размытия (решение владельца, 2.11.2026) */
.dstray,.dsdrop{position:relative;z-index:3;background:none}
.dsbar:not(.tskopen){background:none}
.dsbar.tskopen{background:var(--card-bg)}
/* Лента — свой слой наложения: липкие подписи дней и плашки «N изменений» держат z-index выше нижней панели и проступали сквозь неё, налезая на поле.
   isolation замыкает их z-index внутри ленты, панель (z-index 3) всегда выше всей ленты. */
.dsbody{isolation:isolate}
/* «Печатает…» — строкой над полем ввода, тем же приёмом, что и ответ/правка
   (.dsreply): появляется и пропадает без анимации, это статус на сейчас,
   а не событие, которое стоит подчёркивать движением. */
.dstyping{position:relative;z-index:3;flex:0 0 auto;padding:6px 16px 0;font:400 12.5px/1.3 var(--cff);
  color:var(--tx2,#8E8E93);font-style:italic}
.dsplus{width:30px;height:30px;flex:0 0 30px;box-sizing:border-box;border:var(--stroke-w) solid var(--stroke);border-radius:calc(15px * var(--el));
  background:var(--chip-bg);color:var(--icon-fg2);font-size:18px;line-height:1;cursor:pointer}
/* Поле растёт вместе с сообщением и раздвигается, когда в нём пишут: длинную
   мысль набирают вслепую, если видно одну строку, а два поля поровну делят
   полосу и обоим тесно. */
.dsin{flex:1 1 0;min-width:0;box-sizing:border-box;height:34px;min-height:34px;max-height:150px;
  overflow-y:auto;resize:none;font-family:var(--cff);line-height:19px;
  transition:flex-grow .2s var(--ez);border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(11px * var(--el));padding:7px 12px;background:#fff;
  font:400 13px/19px var(--cff)}
.dsin:focus{outline:none;border-color:var(--accent);flex-grow:4}
.dsin.wide{flex-grow:4}
/* Поле задачи — одна строка: это её название, а не разговор. Кнопка вместо
   поля ввода: по нажатию на её месте разворачивается компактная форма. */
.dsin.task{height:34px;min-height:34px;max-height:34px}
.dsin.task{border-color:var(--accent);text-align:left;cursor:pointer;color:#8E8E93;
  background:#fff;flex:0 0 auto;white-space:nowrap}
.dsin.task:hover{color:var(--accent)}
/* Кнопка «Отправить» (стрелка вверх): видна, только пока в поле есть текст. */
.dssend{display:none;flex:0 0 30px;width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:var(--accent);color:#fff;cursor:pointer;align-items:center;justify-content:center}
.dssend svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dssend:hover{background:var(--accent-d)}
.dsbar.печатают>.dssend{display:flex}
/* Пока форма открыта, остальная строка ввода не нужна — задача занимает
   собой весь низ панели, тем же приёмом, что и растущее поле сообщения. */
.dsbar.tskopen{flex-wrap:wrap}
.dsbar.tskopen>.dsplus,.dsbar.tskopen>.dsin{display:none}
/* transform/opacity, не max-height: высота блока (а с ней и раскладка ленты
   над ним) устанавливается сразу, целиком, до начала перехода — меняется
   только сам блок, а не то, что вокруг. Оттого и не дёргается остальное. */
/* Стартовый transform/opacity перехода считает и ставит сам openTaskPop
   (приём FLIP — от прямоугольника кнопки к месту формы), тут — только
   постоянный вид самого блока. */
.tskpop{flex:1 1 100%;border:1.5px solid var(--accent);
  border-radius:calc(13px * var(--el));background:#fff}
.tskpop-h{display:flex;align-items:baseline;gap:8px;padding:11px 13px 0;cursor:pointer;
  font:600 13px/18px var(--cff);color:#6B3FA0}
.tskpop-pos{font-weight:400;color:#8E8E93;font-size:12.5px}
.tskpop-row1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  padding:6px 13px 10px;font:400 13.5px/1.4 var(--cff);color:var(--tx)}
.tskchip{border:0;background:none;padding:0;color:var(--accent);font:inherit;
  cursor:pointer;font-weight:500}
.tskwhat{flex:1 1 140px;min-width:120px;border:0;border-bottom:var(--stroke-w) solid var(--stroke);
  padding:2px 0;font:inherit;color:var(--tx);background:none}
.tskwhat:focus{outline:none;border-color:var(--accent)}
.tskdate,.tsktime{border:var(--stroke-w) solid var(--stroke);border-radius:calc(7px * var(--el));
  padding:3px 6px;font:400 12.5px/1.4 var(--cff);color:var(--tx);background:#fff}
.tskphrases{display:flex;flex-wrap:wrap;gap:6px;padding:0 13px 10px}
.tskphrase{border:var(--stroke-w) solid var(--stroke);border-radius:20px;background:#fff;
  padding:3px 11px;font:400 12px/16px var(--cff);color:var(--tx);cursor:pointer}
.tskphrase:hover{border-color:var(--accent);color:var(--accent)}
.tskpop-body{border-top:var(--stroke-w) solid var(--stroke)}
/* Тот же вид, что у подписи поля «Описание» на самой карточке (.fcap) —
   обычным начертанием и приглушённым цветом, не жирным подзаголовком. */
.tskcap{display:block;width:100%;text-align:left;border:0;background:none;
  padding:var(--row) 13px 0;color:#8E8E93;font:400 var(--cfs)/1.4 var(--cff);cursor:default}
.tskdesc{display:block;width:100%;box-sizing:border-box;border:0;outline:none;
  resize:vertical;padding:10px 13px;font:400 13px/1.4 var(--cff);color:var(--tx);
  border-bottom:var(--stroke-w) solid var(--stroke)}
/* Правило по class бьётся по специфичности с обычным [hidden] на равных,
   и выигрывает как более позднее — без этой строки поле видно всегда,
   даже до нажатия «+». */
.tskdesc[hidden]{display:none}
.tskcklist[hidden]{display:none}
.tskcklist{border-bottom:var(--stroke-w) solid var(--stroke)}
.tskcklist .ck-item{padding:8px 13px}
.tskfiles{display:flex;flex-wrap:wrap;gap:6px;padding:0 13px}
.tskfiles:not(:empty){padding-bottom:10px}
/* Файлы в форме задачи — теми же плитками, что и лоток чата: до трёх в ряд, до трёх рядов, дальше прокрутка. */
.tskfiles.dst-grid{--ряд:84px;display:grid;grid-template-columns:repeat(var(--кол,3),minmax(0,1fr));gap:8px;padding-top:8px;
  max-height:calc(var(--ряд) * 3 + 36px);overflow-y:auto}
.fitem-mini{border:var(--stroke-w) solid var(--stroke);border-radius:20px;
  padding:3px 11px;font:400 12px/16px var(--cff);color:#8E8E93}
.tskpop-f{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:11px 13px}

/* список слева: заголовок этапа и карточки под ним */
.listpane{background:#EFEFF3;padding:0}
/* Карточка доски, показанная в полосе: та же, только на всю её ширину
   и с разделительной чертой вместо зазора. */
#listPane{background:#fff}
#listPane .kcard{border-bottom:var(--stroke-w) solid var(--line);cursor:pointer}
/* Полоса и доска держат все записи сразу: полторы тысячи карточек — это
   двадцать семь тысяч узлов, и раскладка их всех занимала больше времени,
   чем всё остальное открытие карточки. Разрешаем браузеру не считать то,
   что за экраном; размер он запоминает сам, поэтому полоса не дёргается. */
/* Оценку высоты берём близкой к настоящей: браузер заменяет её на истинную,
   когда карточка доезжает до экрана, и на разнице дёргается ползунок. В полосе
   карточки крупнее, чем на доске, поэтому оценки разные. Указываем высоту
   содержимого — к ней браузер сам добавит отступы. */
#listPane .kcard{content-visibility:auto;contain-intrinsic-size:auto 74px}
.klist .kcard{content-visibility:auto;contain-intrinsic-size:auto 50px}
/* Прокрутку не подтягиваем к содержимому: подмена оценки на истинную высоту
   заставляла браузер поправлять положение, и список подрагивал под рукой. */
#listPane,.klist{overflow-anchor:none}
#listPane .kcard:hover{background:color-mix(in srgb, var(--accent) 5%, #fff)}
/* Пока тащим, соседние карточки не подсвечиваем: двойник закрывает курсор,
   и подсветка вспыхивала под ним сама по себе — будто система выбрала
   не ту карточку. */
body.fdragging .kcard:hover{background:none}
/* Место, куда ляжет карточка: белый прямоугольник ровно в открывшемся зазоре.
   Рисуем соседу, а не отдельным блоком, — отдельный сдвинул бы остальных. */
.kcard.land,.kcard.land-end{position:relative}
.kcard.land::before,.kcard.land-end::after{content:'';position:absolute;
  left:0;right:0;height:var(--gap,80px);background:#fff;
  border-radius:calc(9px * var(--el));box-shadow:inset 0 0 0 1px var(--accent);
  opacity:0;animation:landin .16s ease forwards;pointer-events:none}
.kcard.land::before{bottom:100%}
.kcard.land-end::after{top:100%}
@keyframes landin{to{opacity:1}}
#listPane .kcard.on{background:var(--accent-soft)}

/* Заголовок этапа липнет к верхнему краю, пока листаешь его записи: в этапе
   бывает три сотни карточек, и без этого через экран уже не помнишь, где ты.
   Следующий заголовок доходит доверху и подменяет прежний. */
.lgroup{padding:10px;display:flex;flex-direction:column;gap:5px;
  position:sticky;top:0;z-index:3}
.lgroup .lg-t{display:flex;align-items:center;justify-content:space-between;
  font:700 15px/18px "SF Pro Rounded","SF Pro Text",-apple-system,sans-serif;color:#000}
.lgroup .lg-n{font:400 12px/15px Inter,-apple-system,sans-serif;color:rgba(0,0,0,.5)}
/* открытая строка таблицы — та же подсветка, что у выбранной записи в списке */
tr.opened .cell{background:var(--accent-soft)}
/* фиксированная раскладка: браузер считает ширины по colgroup, а не по 29 000 ячеек */
/* Ширину таблицы задаём суммой колонок в buildHead.
   width:max-content не давал сужать колонки — таблица распирала себя содержимым. */
table{border-collapse:separate;border-spacing:0;min-width:100%;table-layout:fixed}
th{position:sticky;top:0;z-index:2;background:var(--th-bg);font-size:12.5px;font-weight:600;
  color:#3A3A3C;padding:calc(var(--row) + 1px) 12px;text-align:left;white-space:nowrap;cursor:pointer;
  border-bottom:var(--stroke-w) solid var(--line);border-right:var(--stroke-w) solid var(--line2);
  overflow:hidden;text-overflow:ellipsis}
th:hover{background:color-mix(in srgb, var(--accent) 7%, var(--th-bg))}
/* ручка изменения ширины на границе колонки */
.rz{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:3}
.rz:hover{background:var(--accent);opacity:.35}
body.resizing{cursor:col-resize;user-select:none}
/* Светится ручка, за которую тянут, а не все сразу: пока меняли ширину
   в карточке, подсвечивались и границы колонок в таблице под ней. */
.rz.drag{background:var(--accent);opacity:.35}
th .ar{color:var(--accent);display:inline-flex;vertical-align:-2px}
th .ar .i.up{transform:rotate(180deg)}
/* height:1px + height:100% у содержимого — приём, растягивающий ячейку
   на всю высоту строки: иначе в пустых полях подсветка занимала бы
   только высоту текста */
td{height:1px;padding:0;
  border-bottom:var(--stroke-w) solid var(--line2);border-right:var(--stroke-w) solid var(--line2);
  white-space:nowrap;max-width:250px;overflow:hidden}
/* Наведение — в цвете темы: подсветка строки и ячейки берут системный цвет
   из оформления, а не собственный синеватый оттенок. */
tbody tr:hover td{background:color-mix(in srgb, var(--accent) 4%, #fff)}
.cell{padding:var(--row) 12px;display:block;height:100%;box-sizing:border-box;
  overflow:hidden;text-overflow:ellipsis}
/* Намёк на редактируемость — курсор и еле заметная подложка.
   Явная рамка появляется только когда поле уже редактируется. */
.cell[data-edit]{cursor:cell}
.cell[data-edit]:hover{background:color-mix(in srgb, var(--accent) 8%, #fff)}
/* Выделение рисуется рамкой по краю всего диапазона (inline из paintSel),
   заливку получают все ячейки кроме той, с которой начали — как в таблицах. */
/* Заливку выделения не должно перебивать правило наведения — иначе ячейка
   под курсором выпадала белым пятном из общего прямоугольника. */
.cell.inrange,body[data-mode="table"] .cell[data-edit].inrange:hover{
  background:color-mix(in srgb, var(--accent) 10%, transparent)}
tbody.dragsel{user-select:none}

/* ---------- режим таблицы ----------
   Включённый тумблер убирает всю наведённую мишуру: подсветку строки, подложку
   ячейки и значки при наведении. Остаётся сетка и выделение — как в редакторе таблиц. */
/* Наведение на строку остаётся и в режиме таблицы — лёгкое, на всю строку. Раньше его снимали со всех ячеек
   (background:none), а закреплённые колонки подсвечивались своим правилом (applyFrozen) и в итоге
   светились одни они, а не вся полоса. Номера строк — как закреплённые: свой серый плюс оттенок. */
body[data-mode="table"] #body tr:not(.rowsel):hover td.gut{background:color-mix(in srgb, var(--accent) 6%, var(--frozen-bg))}
/* Чередование строк (Оформление → «Чередование строк»). Каждая вторая строка — прозрачной подложкой, не цветом темы.
   :where(#body) снимает вес id: закреплённые колонки (#body td:nth-child) остаются со своим сплошным фоном,
   иначе под ними просвечивали бы уезжающие колонки. Наведение возвращаем после, чтобы подсветка не пропала на чётных. */
/* Монохромные значки меню. Цвет плитки в символах nv-* — не атрибут, а
   переменная с прежним цветом по умолчанию: переменная наследуется внутрь
   <use>, а сам символ общий, и атрибут поменять у одной кнопки нельзя.
   Цвет — графит значков на кнопках шапки (фильтры, отчёты, планы),
   --icon-fg2 темы: меню и шапка читаются одним набором.
   Открытый раздел (.on) остаётся своим цветом. */
html.navmono .nav:not(.on) .navi{--nv-tile:var(--icon-fg2)}
html.zebra :where(#body) tr:nth-child(even):not(.draftrow) td{background:var(--zebra)}
/* Колонка номеров (.gut) на чётной строке: свой фон --frozen-bg плюс полоса поверх, как у закреплённых
   ячеек. Правило выше перебивало .gut по специфичности и заменяло его серый на почти прозрачный: номера
   на полосатых строках выходили светлее, на обычных — темнее, то есть наоборот строкам. Выбранную строку
   (#body tr.rowsel td.gut) не перебивает — у неё идентификатор. */
html.zebra :where(#body) tr:nth-child(even):not(.draftrow) td.gut{
  background:linear-gradient(var(--zebra),var(--zebra)),var(--frozen-bg)}
html.zebra :where(#body) tr:nth-child(even):hover:not(.draftrow) td{background:color-mix(in srgb, var(--accent) 4%, var(--zebra))}
body[data-mode="table"] .cell[data-edit]:hover{background:none}
body[data-mode="table"] .pen{display:none}
body[data-mode="table"] .cell[data-edit]{cursor:cell}

/* В режиме таблицы текст не выделяется мышью — протяжка выделяет ячейки. */
body[data-mode="table"] #body{user-select:none}

/* Колонка с номерами строк и строка с буквами колонок */
.gut{width:44px;text-align:center;color:#9A9AA0;font-size:11px;background:var(--frozen-bg);
  border-right:var(--stroke-w) solid var(--stroke);user-select:none}
#head th.gut,#head2 th.gut{background:var(--frozen-head-bg)}
#head2{display:none}
body[data-mode="table"] #head2{display:table-row}
#head2 th{top:0;height:21px;padding:0;text-align:center;font:500 10.5px/21px
  "SF Pro Text",-apple-system,Inter,sans-serif;color:#A8A8AE;background:#F4F4F7;
  cursor:default;border-bottom:var(--stroke-w) solid var(--line2);user-select:none}
/* Строка с названиями прилипает под строкой с буквами — вместе с её чертой.
   Раньше она вставала на полволоска выше и закрывала черту собой: при
   прокрутке линия между буквами и названиями пропадала. */
body[data-mode="table"] #head th{top:calc(21px + var(--stroke-w))}
/* номер строки и буква колонки подсвечиваются вместе с выделением */
#body tr.rowsel td.gut{background:var(--accent-soft2);color:#3A3A3C}
#head2 th.colsel{background:var(--accent-soft2);color:#3A3A3C}
#head th.colsel{background:var(--accent-soft)}
/* Плашка режима таблицы. Выключенной она размером со значок, включённая
   разворачивается вправо: адрес выделения и стрелки отмены живут внутри неё. */
/* max-width задан числом, а не auto: из auto плашка схлопывалась бы разом,
   а ей нужно сжиматься вместе с полосой. */
.modepill{display:flex;align-items:center;gap:10px;height:35px;box-sizing:border-box;
  flex:0 0 auto;padding:0 10px;border-radius:calc(13px * var(--el));background:var(--chip-bg);max-width:240px}
.modepill[hidden]{display:none}
/* без режима таблицы плашке нечего показывать */
body:not([data-mode="table"]) .modepill{display:none}
.mode-ic{border:0;background:none;padding:0;cursor:pointer;color:var(--icon-fg2);
  display:flex;align-items:center;justify-content:center}
.mode-ic svg{width:15px;height:15px;display:block;fill:none}
.mode-ic.flip svg{transform:scaleX(-1)}
.mode-ic:hover{color:#5A5A5F}
.mode-ic[disabled]{cursor:default;color:#C6C6CB}
.mode-ic[disabled]:hover{color:#C6C6CB}

.addr{font:400 12px/15px Inter,-apple-system,sans-serif;color:#000;padding:0 5px}
.addr:empty{display:none}
.mode-hist{display:flex;align-items:center;gap:10px}
/* без режима таблицы плашка сжимается до одного значка */
body:not([data-mode="table"]) .mode-hist{display:none}
.cell.strong{font-weight:600}
/* правка поверх выгрузки: значение расходится с исходной таблицей */
.dirty{box-shadow:inset 3px 0 0 var(--amber)}
.sup{color:var(--entity-color);cursor:pointer;font-weight:500}
.sup:hover{text-decoration:underline}
.linkcell{display:flex;align-items:center;gap:6px;cursor:pointer}
.linkcell .blank{color:#B4B4B9;flex:1}
.pen{opacity:0;border:0;background:none;color:var(--tx2);cursor:pointer;padding:2px;
  border-radius:calc(5px * var(--el));display:flex;margin-left:auto;transition:opacity .12s}
.linkcell:hover .pen{opacity:.65}
.pen:hover{opacity:1 !important;background:var(--bg);color:var(--accent-d)}

.projcell{display:flex;align-items:center;gap:5px}
/* Название занимает только свою ширину: остальная часть ячейки свободна,
   чтобы по ней можно было выделить или открыть правку, не задев ссылку. */
.projcell .ptext{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;cursor:text}
/* Адрес сайта и другие ссылки-значения в ячейке — это «ссылки», а не «сущности»:
   их цвет задаёт «Цвет ссылок» в «Оформлении». Раньше стоял акцент, и выбранный
   там цвет на них не действовал (менялись только телефоны и ссылки в тексте). */
.plink{color:var(--link-color);text-decoration:none;cursor:pointer}
.plink:hover{text-decoration:underline}
.i12{width:12px;height:12px;display:block}
/* Значок звена проявляется при наведении на ячейку, чтобы таблица не рябила. */
.sitebtn{margin-left:0}
.projcell:hover .sitebtn,.sites-on .projcell .sitebtn{opacity:.55}
.sitebtn:hover{opacity:1 !important;background:var(--bg);color:var(--accent-d)}
/* в режиме таблицы наведение ничего не показывает — значок даёт выбранная ячейка */
body[data-mode="table"] .projcell.inrange .sitebtn{display:flex;opacity:.55}
/* Числа стоят слева, как и текст: в разнородной таблице глаз ищет начало
   значения в одном месте, а не прыгает от края к краю. Моноширинные цифры
   оставляем — по ним разряды всё равно читаются столбиком. */
.num{text-align:left;font-variant-numeric:tabular-nums}
/* Без своей заливки: белёсый #FCFCFD на белом не виден, а полосы чередования и подложка закреплённых колонок
   под ним пропадали — автоматические ячейки выпадали из рисунка. */
.calc{color:var(--tx2)}
.fresh{color:var(--green);font-weight:600}
.stale{color:var(--red);font-weight:600}   /* тариф не обновляли дольше срока из настроек */
/* строка правила: «старше [30] дней — красным» */
.daterule{display:flex;align-items:center;gap:6px;color:#8E8E93;white-space:nowrap}
.daterule input{width:44px;text-align:center;border:var(--stroke-w) solid var(--stroke);border-radius:calc(7px * var(--el));
  padding:3px 4px;font:inherit;color:#000;background:#fff;outline:none}
.daterule input:focus{border-color:var(--accent)}
.dash{color:#C7C7CC;padding:0 3px}
.grad{font-weight:600;text-align:center;border-radius:0}
.pos{color:var(--green);font-weight:600}
.neg{color:var(--red);font-weight:600}
.pill{display:inline-block;padding:2px 9px;border-radius:calc(20px * var(--el));font-size:12px;background:var(--bg)}
.stat{display:inline-block;padding:3px 10px;border-radius:calc(7px * var(--el));font-size:12px;font-weight:600;
  white-space:nowrap}
.funnel{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:2px 0 10px;
  align-items:center}
.fst{border:0;border-radius:calc(7px * var(--el));padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;
  opacity:.85;transition:opacity .15s,box-shadow .15s}
.fst:hover{opacity:1}
.fst.on{opacity:1;box-shadow:0 0 0 2px var(--accent)}
.fst b{font-weight:700;margin-left:3px;opacity:.75}
.fsep{color:var(--line);margin:0 2px}
input.ed{width:100%;border:0;outline:none;box-shadow:0 0 0 2px var(--accent) inset;border-radius:calc(6px * var(--el));
  padding:9px 11px;font:inherit;background:#fff}
select.ed{width:100%;border:0;outline:none;box-shadow:0 0 0 2px var(--accent) inset;border-radius:calc(6px * var(--el));
  padding:9px 34px 9px 11px;font:inherit;background-color:#fff}
.rng{display:flex;gap:4px;align-items:center;padding:4px 6px}
.rng input{width:100%;min-width:0;border:0;outline:none;box-shadow:0 0 0 2px var(--accent) inset;border-radius:calc(6px * var(--el));
  padding:5px 7px;font:inherit;text-align:left}

/* Правка поля в карточке — тем же способом, что и в таблице: рамку рисует
   сама ячейка, а поле внутри прозрачное и без своих отступов. Тогда текст
   при входе в правку остаётся ровно там же, где был при чтении. */
/* Правка помечается классом, а не «внутри есть поле ввода»: в настройке
   разделов списки стоят в ячейках постоянно, и они получали бы рамку правки.
   Скругление не задаём — строка внутри блока прямоугольная, а на первой и
   последней углы обрежет сам блок, и выделение повторит форму ячейки. */
.fv.fvedit{box-shadow:inset 0 0 0 2px var(--accent);background:#fff;border-radius:0}
/* На краях блока рамке нужен его радиус: обрезка по скруглению съедала бы
   угол, и рамка обрывалась бы, не дойдя до него. */
.frow:first-child .fv.fvedit{border-top-right-radius:calc(var(--radius) - 1px)}
.frow:last-child .fv.fvedit{border-bottom-right-radius:calc(var(--radius) - 1px)}
/* Поле на всю ширину (c.full) — та же обрезка блоком, но подписи слева
   нет, и до левого угла в краевой строке достаёт сама рамка тоже. */
.fcap-wrap:first-child .fv.fvedit{border-top-left-radius:calc(var(--radius) - 1px);
  border-top-right-radius:calc(var(--radius) - 1px)}
.fcap-wrap:last-child .fv.fvedit{border-bottom-left-radius:calc(var(--radius) - 1px);
  border-bottom-right-radius:calc(var(--radius) - 1px)}
.fv.fvedit input,.fv.fvedit textarea,.fv.fvedit select,
.fcard .fv.fvedit input,.fcard .fv.fvedit textarea,.fcard .fv.fvedit select{width:100%;
  border:0;outline:0;background:none;padding:0;margin:0;font:inherit;box-shadow:none;
  border-radius:0;display:block;min-width:0;min-height:0;
  /* Цвет берём обычный текстовый: у незаполненного поля подпись серая, и
     набранное наследовало бы её серость. */
  color:var(--tx)}
/* Многострочное поле растёт под текст — как и при чтении, без своей прокрутки. */
.fv.fvedit textarea{resize:none;overflow:hidden;line-height:inherit}

/* Правка ячейки таблицы: своей рамки у поля нет — утолщается граница самой
   ячейки. Иначе внутри выделенной ячейки появлялась вторая обводка. */
#body .cell:has(input,select,textarea){box-shadow:inset 0 0 0 2px var(--accent)!important;
  background:#fff!important}
/* Рамку правки в таблице рисует сама ячейка — у поля своей быть не должно,
   иначе внутри ячейки появляется вторая обводка. */
#body input.ed,#body select.ed,#body textarea.ed,#body .rng input,#body .rng{
  outline:0;box-shadow:none;border:0;border-radius:0;background:none;padding:0;font:inherit}
#body select.ed{padding-right:18px}
/* Обычный диапазон делит ширину ячейки поровну. */
#body .rng{padding:0;gap:6px;width:100%}
#body .rng input{text-align:left;flex:1 1 0;min-width:0}
/* Дата и время — по содержимому: коробка вырастает и ложится поверх соседнего
   столбца, как в табличных редакторах. Столбцу на это время разрешаем
   показывать выходящее за край — раньше он обрезал правку на середине поля,
   и от ячейки оставалась половина рамки. Рамку рисует сама коробка: у ячейки
   она была бы обрублена по краю столбца. */
#body td:has(.rng.wide){overflow:visible;position:relative;z-index:6}
#body .cell:has(.rng.wide){box-shadow:none!important;background:none!important;
  overflow:visible;padding:0}
/* Рамка правки — во всю высоту ячейки и без скругления, как у любой другой
   ячейки в таблице: там её рисует сама ячейка, а здесь коробка, потому что
   она шире столбца. Отступ тот же, что у ячейки, — текст не прыгает. */
/* Коробку кладём прямо на столбец: сверху и снизу вровень с ним — рамка
   выходит ровно в высоту строки, как у любой другой ячейки. Проценты и
   растяжение тут не годятся: высоту строке задаёт таблица, и для вложенного
   блока она остаётся неопределённой. Вширь коробка растёт вправо. */
#body .rng.wide{position:absolute;top:0;bottom:0;left:0;
  width:max-content;min-width:100%;align-items:center;
  background:#fff;padding:0 12px;box-shadow:inset 0 0 0 2px var(--accent);border-radius:0}
#body .rng.wide input{flex:0 0 auto;width:auto}
/* Многострочная правка в ячейке. Перенос строки некуда показать в пределах
   строки таблицы, поэтому коробка растёт вниз и ложится поверх соседних —
   как в табличных редакторах. Рамку рисует она сама: у ячейки та обрывалась
   бы по краю строки. Отступы те же, что у ячейки, — текст не прыгает. */
#body td:has(textarea.ed){overflow:visible;position:relative;z-index:6}
#body .cell:has(textarea.ed){overflow:visible;padding:0;
  box-shadow:none!important;background:none!important}
#body textarea.ed{position:absolute;left:0;right:0;top:0;min-height:100%;
  padding:var(--row) 12px;background:#fff;box-shadow:inset 0 0 0 2px var(--accent);
  resize:none;overflow:hidden;display:block;box-sizing:border-box;
  font:inherit;line-height:1.4;color:var(--tx)}
/* Ширина половины — по её формату, а не по умолчанию поля ввода: иначе
   «чч:мм» получает место под два десятка знаков и стоит в пустоте. */
#body .rng.wide.pd input{width:76px}
#body .rng.wide.pt input{width:40px}
#body .rng.wide.pdt input{width:118px}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.18);opacity:0;pointer-events:none;
  transition:opacity .22s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
/* Гаснет быстрее, чем проявляется: закрыли карточку — затемнение не должно ещё договаривать над пустым местом.
   Берётся время состояния, в которое идёт переход (после снятия .on, и в режиме «список + карточка» после ухода
   соседней карточки), поэтому проявление осталось прежним. */
.scrim:not(.on),body.split:not(.linkedopen):not(.cardset) .scrim{transition-duration:.13s}
/* Открыта карточка соседней сущности: затемнение — над основной карточкой (z 50) и под самой соседней
   (z 52), и в режиме «список + карточка» тоже (там оно скрыто правилом body.split .scrim). */
body.linkedopen .scrim{z-index:51}
body.linkedopen .scrim.on{opacity:1;pointer-events:auto}
/* Хват границы списка лежит выше затемнения (z-index 60): пока открыта соседняя карточка, мышью он
   не ловится (а целиком фон выключен через inert — см. app.js). */
body.linkedopen #stripGrip{pointer-events:none}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(620px,var(--vw90,90vw));background:var(--card-bg);
  z-index:50;transform:translateX(-100%);transition:transform .2s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:6px 0 28px rgba(0,0,0,.14)}
.drawer.on{transform:none}
/* Карточка связанной сущности выезжает справа — видно, что это соседняя
   запись, а не та, с которой работаешь. */
/* linked, а не side: класс side уже занят боковым меню и приносил
   с собой центрирование содержимого. */
/* Соседняя запись — окно на две колонки: поля и общение. Шире обычного,
   иначе на поля остаётся половина от половины. */
.drawer.linked{left:auto;right:0;width:min(1040px,var(--vw88,88vw));transform:translateX(100%);
  box-shadow:-6px 0 28px rgba(0,0,0,.14);z-index:52;
  /* Тень карточки меняется плавно: при переходе вглубь (.dstack) она раньше менялась скачком — на левом
     краю это читалось как моргание. Остальные свойства переходят как у .drawer. */
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .24s ease}
.drawer.linked.on{transform:none}
/* Вылет справа стартует сразу и замедляется к концу (быстрый старт, мягкая посадка). Прежняя
   кривая .4,0,.2,1 первые 60 мс почти стоит на месте — вылет читался как «задумался». Берётся
   кривая состояния, в которое идёт переход, поэтому закрытие осталось прежним. */
.drawer.linked.on,body.asaside #drawer:not(.linked).on{
  transition-duration:.32s;transition-timing-function:var(--openc)}
/* Смена уровней в соседней карточке — слайды (app.js: слайдСнимок/слайдВход). Снимок прежнего содержимого лежит
   слоем .sg внутри карточки: вглубь — под новым (его закрывает наезжающее справа тело), назад — над ним
   (.sg-top), и уезжает вправо. Слой не принимает нажатий и держит свой фон: сквозь него ничего не должно
   проступать. Тень слева — край листа, что уезжает. */
.sg{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;background:var(--card-bg);
  overflow:hidden;pointer-events:none}
.sg.sg-top{z-index:6;box-shadow:-10px 0 26px rgba(0,0,0,.14)}
/* Тень шапки в соседней карточке видна только сбоку от неё (под шапкой её закрывает тело). На время слайда у
   карточки стоит overflow:hidden и боковую часть тени срезает — она пропадала и возвращалась, это «скакало».
   Тени шапки здесь нет вовсе: вид одинаков в покое и на слайде. */
.drawer.linked > .dh{box-shadow:none}
.drawer.linked.dstack{box-shadow:-16px 0 44px rgba(0,0,0,.20)}
/* Шапка карточки: строка заголовка и под ней навигация по разделам.
   Разделы висят всегда — это не вкладки, а переход к нужному блоку. */
.dh{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:18px;
  border-bottom:var(--stroke-w) solid var(--line);background:var(--card-bg);
  /* Своя стопка над dsplit: тень шапки иначе красится под сплошным фоном
     соседа снизу и попросту не видна. Число z-index не ставим (см. .top) —
     иначе .dh становится коробкой наложения и ловит в себя свои всплывающие
     окна: они и от затемнения не гаснут, но и сама шапка тогда неправильно
     остаётся светлой поверх затемнения, хотя должна темнеть вместе с
     карточкой — в том числе когда карточка открыта не из своего списка,
     а по ссылке из чужой сущности. */
  position:relative;box-shadow:var(--shadow-head)}
/* В окнах заголовок и крестик стоят в строку: там нет второго яруса
   с кнопками, ради которого шапка карточки собрана столбцом. */
.modal .dh{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.dh-top{display:flex;align-items:center;gap:10px;width:100%}
.dh h2{margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* к названию записи — подпись, из какой она сущности */
/* Из правой карточки можно уйти глубже — кнопка возврата ведёт назад по цепочке */
/* В раскладке «список — карточка» закрывают шевроном слева, как в переписке */
.dback1{flex:0 0 auto;border:0;background:none;padding:0 4px 0 0;cursor:pointer;color:var(--accent)}
.dback1[hidden]{display:none}
.dback1 svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dback1:hover{color:var(--accent-d)}
/* Звезда — личная пометка «заметить», без всякого смысла для уведомлений
   (та теперь у колокольчика в шапке справа, см. .dbell). Живёт внутри
   самого заголовка, сразу справа от названия — не отдельной кнопкой
   в шапке, которую при коротком названии унесло бы к правому краю. */
.dlike{display:inline-flex;vertical-align:-2px;border:0;background:none;
  padding:0;margin-left:6px;cursor:pointer;color:var(--tx);opacity:.35;
  transition:opacity .12s,color .12s}
.dlike svg{width:17px;height:17px;display:block;fill:currentColor}
.dlike:hover{opacity:.6}
.dlike.on{color:var(--accent);opacity:1}
.dlike.on:hover{opacity:.85}
body.split #dclose{display:none}
.dback2{display:flex;align-items:center;gap:4px;flex:0 0 auto;border:0;background:none;
  padding:0;cursor:pointer;color:var(--accent);max-width:40%;
  font:400 17px/1.2 "SF Pro Text",-apple-system,Inter,sans-serif}
.dback2[hidden]{display:none}
.dback2 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dback2 svg{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dback2:hover{color:var(--accent-d)}
.dh h2 .dent{margin-left:10px;color:#8E8E93;
  font:400 14px/17px "SF Pro Text",-apple-system,Inter,sans-serif}
/* Номер записи в шапке карточки: по нему же открывается запись по ссылке; щелчок копирует ссылку. */
.rt-num{margin-left:8px;border:0;background:none;padding:0;cursor:pointer;color:#8E8E93;
  font:400 14px/17px "SF Pro Text",-apple-system,Inter,sans-serif;font-variant-numeric:tabular-nums}
.rt-num:hover{color:var(--accent)}
.mr-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,8px);opacity:0;z-index:99999;pointer-events:none;
  padding:9px 16px;border-radius:12px;background:rgba(28,28,30,.92);color:#fff;font:500 13px/16px "SF Pro Text",-apple-system,Inter,sans-serif;
  transition:opacity .2s,transform .2s}
.mr-toast.on{opacity:1;transform:translate(-50%,0)}
/* Навигация по разделам карточки: живёт в теле карточки (buildCardNav переносит её туда) и липнет к верху.
   Все пункты — в одной капсуле по центру: цвет и размытие, как у подписи дня в ленте (.fd-day span), с
   «жидким стеклом» — светлая кромка и отсвет сверху. Не помещаются — капсула занимает всю ширину, лишние
   пункты прячутся за край и выезжают при листании карточки. */
.dnav{display:flex;justify-content:center;width:100%;--navp:calc(var(--row) * .3)}   /* зазор от подложки до краёв капсулы: 3 px при обычной плотности */
.dnav[hidden]{display:none}
.db > .dnav{position:sticky;top:-16px;z-index:5;margin:-16px -18px 0;padding:calc(var(--pad) * .75) 18px;width:auto;
  background:transparent;pointer-events:none}
/* «Туман» над капсулой: от оси капсулы (середина её высоты) вверх до шапки идёт полоса цвета фона карточки —
   у шапки плотная (до 80%), к оси сходит на нет, так что прокручиваемое под полосой растворяется, а не режется. */
.db > .dnav::before{content:'';position:absolute;left:0;right:0;top:0;height:50%;pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--card-bg) 80%, transparent), transparent)}
.db .fsec{scroll-margin-top:var(--navh,67px)}      /* высота липкой полосы — её измеряет buildCardNav */
/* Капсула статична: у конца прокрутки карточки её не «пружинит» и не уезжает вместе с телом (резиновая отдача
   у края — в Safari и на тачпаде), а при прокрутке самих пунктов край дорожки тоже не тянется. */
.db{overscroll-behavior:none}
.db > .dnav{will-change:transform;transform:translateZ(0)}
/* Всё оформление — из общих настроек: скругление элементов (--el), обводка (--stroke, --stroke-w), цвета и
   тема (--card-bg, --tx, --tx2), шрифт и размер текста карточки (--cff, --cfs), плотность (--row) и поле
   страницы (--pad). Своих «жёстких» значений у капсулы нет. */
.dnav-cap{position:relative;max-width:100%;border-radius:calc((9px + var(--navp) + var(--stroke-w)) * var(--el));overflow:hidden;pointer-events:auto;
  /* Радиус капсулы = радиус подложки (9) + зазор от неё до наружного края (отступ дорожки + рамка): тогда зазор
     по углам такой же ровный, как по сторонам, при любой плотности строк. */
  background:color-mix(in srgb, var(--card-bg) 70%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);
  border:var(--stroke-w) solid color-mix(in srgb, var(--card-bg) 70%, var(--stroke));
  box-shadow:var(--pill-shadow)}                       /* та же тень, что у подписи дня в ленте (.fd-day span) */
/* Дорожка с пунктами листается внутри капсулы; маска растворяет только её содержимое, а не саму капсулу. */
.dnav-track{position:relative;display:flex;align-items:center;gap:2px;padding:var(--navp);overflow-x:auto;
  overscroll-behavior:none;scrollbar-width:none}
.dnav-track::-webkit-scrollbar{display:none}
.dnav-track.ovl.ovr{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%)}
.dnav-track.ovl:not(.ovr){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px);mask-image:linear-gradient(90deg,transparent 0,#000 30px)}
.dnav-track.ovr:not(.ovl){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent 100%)}
.dnav button{flex:0 0 auto;position:relative;z-index:1;background:transparent;
  border:var(--stroke-w) solid transparent;            /* как у плашки этапа: та же рамка — тот же размер */
  border-radius:calc(9px * var(--el));padding:var(--pill-py) var(--pill-px);
  cursor:pointer;color:var(--tx2);white-space:nowrap;
  /* Размер, шрифт и отступы — как у плашки этапа в шапке (--pill-*); межстрочный — целое число точек: тогда
     высота пункта и зазоры подложки до краёв капсулы не дробятся и при привязке к пикселям не расходятся. */
  font:400 var(--pill-fs)/var(--pill-lh) var(--cff, var(--font-body));
  transition:color .2s ease}
.dnav button:hover{color:var(--tx)}
.dnav button.here{color:var(--tx)}
/* Подложка выбранного пункта: одна на всю капсулу, ездит за пунктами (положение и ширину ставит buildCardNav). */
.dnav-hl{position:absolute;left:0;top:var(--navp);bottom:var(--navp);width:0;border-radius:calc(9px * var(--el));
  pointer-events:none;
  background:color-mix(in srgb, var(--accent) 8%, transparent)}   /* системный цвет, прозрачный — как подсветка ячейки при наведении (.cell[data-edit]:hover), без тени */
/* Подложка переезжает к новому пункту (или ряду пунктов) мягко: положение чуть дольше, ширина чуть быстрее — получается
   лёгкая «жидкая» растяжка, но без пружины и перелёта. Первая расстановка (класс .on ещё не стоит) — без перехода. */
.dnav-hl.on{transition:transform .36s cubic-bezier(.33,.7,.3,1),width .3s cubic-bezier(.33,.7,.3,1)}
.dnav button{transition:color .2s ease}
/* ПРОБА: навигация полосой на всю ширину, вплотную к шапке, без скруглений (html.navbar; выключается константой NAV_ПОЛОСА
   в app.js). Стекло, размытие, обводка и тень — те же, что у капсулы; пункты слева, поля по бокам 10 px, сверху и снизу 5 px, зазор между пунктами 0, до первого блока 15 px. */
html.navbar .dnav{--navp:5px;justify-content:stretch}              /* вертикальный зазор от пунктов до краёв полосы — 5 px */
html.navbar .db > .dnav{padding:0;margin-bottom:15px}               /* от полосы до первого блока карточки — 15 px */
html.navbar .db > .dnav::before{display:none}
html.navcap .dnav{--navp:5px}
html.navcap .dnav-cap{background:color-mix(in srgb, var(--card-bg) 84%, transparent)}
html.navbar .dnav-cap{width:100%;max-width:none;border-radius:0;border-width:0 0 var(--stroke-w) 0;
  background:color-mix(in srgb, var(--card-bg) 84%, transparent)}   /* непрозрачность полос — 84% (у капсулы было 70%): под ними текст проглядывает слабее */
html:is(.navbar,.navcap) .dnav button{font-size:12px;line-height:14px;padding:5px 10px;border:0}   /* пункт — по тексту: 12 px, межстрочный 14, поля 10 по бокам и 5 сверху/снизу → плашка 24 px высотой */
html.navbar .dnav-track{justify-content:flex-start;gap:0;padding:var(--navp) 10px}
html.navcap .dnav-track{gap:0}
html.navbar .db .fsec{scroll-margin-top:calc(var(--navh,44px) + 15px)}
/* Шапка чата (вкладки «История и чат…») — те же параметры, что у полосы навигации: поля 5 px сверху/снизу и 10 по бокам,
   пункты по тексту 12 px с полями 10/5, зазор 0, выбранный — подложка цвета «Облачка чата» (8%) вместо черты;
   фон, размытие, обводка и тень — те же, что у полосы навигации. */
html.navbar .dstabs{align-items:center;gap:0;padding:5px 10px;position:relative;z-index:20;      /* выше залипающих подписей дней (z 5–6): они уходят за шапку */
  
  background:color-mix(in srgb, var(--card-bg) 84%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);
  border-bottom:var(--stroke-w) solid color-mix(in srgb, var(--card-bg) 70%, var(--stroke));box-shadow:var(--pill-shadow)}
html.lite.navbar .dstabs{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb, var(--card-bg) 92%, transparent)}
/* Лента заходит под полупрозрачную шапку чата, как карточка под полосу навигации: лента сдвигается вверх на высоту шапки и
   получает такой же верхний отступ (только когда лента стоит сразу за шапкой — без строки поиска и панелей между ними). */
html.navbar .dstabs + .dsbody{margin-top:calc(-34px - var(--stroke-w));padding-top:calc(34px + var(--stroke-w) + 10px)}
/* Залипающая подпись дня (у неё поле сверху 15 px) в зафиксированном положении целиком прячется за шапкой, а не торчит из-под неё. */
html.navbar .dstabs + .dsbody .fd-day{top:-6px}
/* Вид «капсула»: шапка чата — две плавающие капсулы рядом, как у навигации: слева вкладки, справа отдельно поиск и шестерня.
   Оболочка (.dstabs) прозрачная; лента заходит под капсулы. Отступ от шапки карточки до капсул — 10 px. */
html.navcap .dstabs{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 10px 0;padding:0;position:relative;z-index:20;
  background:none;border:0;box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
html.navcap .dstabs-l{flex:0 1 auto}      /* капсула вкладок — по содержимому; обе капсулы вместе стоят по центру шапки, а когда места мало — вкладки листаются внутри */
html.navcap .dstabs-l,html.navcap .dstabs-r{display:flex;align-items:center;gap:0;padding:5px;
  border:var(--stroke-w) solid color-mix(in srgb, var(--card-bg) 70%, var(--stroke));border-radius:calc((9px + 5px + var(--stroke-w)) * var(--el));
  background:color-mix(in srgb, var(--card-bg) 84%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);box-shadow:var(--pill-shadow)}
html.lite.navcap .dstabs-l,html.lite.navcap .dstabs-r{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb, var(--card-bg) 92%, transparent)}
/* Строка поиска внутри правой капсулы. По нажатию на лупу правая капсула растягивается на всю ширину шапки, а левая (вкладки) в то же время
   сжимается влево в ноль и по мере сжатия постепенно гаснет (к нулевой ширине полностью прозрачна; ширина и прозрачность идут одним переходом) — одним переходом для обеих (.анимируется: ширины заданы в пикселях из JS, у левой ещё поле и рамка
   идут в ноль, а вкладки обрезаются краем капсулы, а не налезают друг на друга). */
html.navcap .dsfind{display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;height:24px;padding:0;background:none;border:0;
  opacity:0;transition:opacity .16s ease .06s}
html.navcap .dsfind.on{opacity:1}
html.navcap .dsfind > svg{display:none}
html.navcap .dsfind input{flex:1 1 auto;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:12px;color:var(--tx);padding:0 0 0 8px}
html.navcap .dsfind-n{flex:0 0 auto;font-size:11px;color:var(--tx2)}
html.navcap .dsfind button{flex:0 0 auto}
html.navcap .dstabs.анимируется{justify-content:flex-start}
/* Поиск растягивается, капсула с вкладками сжимается до нуля (без затухания), зазор между капсулами всегда 8 px. Правая капсула сама занимает остаток (flex:1),
   левая (ширину и высоту ведёт JS: WAAPI, сначала по ширине до кружка, потом вместе до нуля), её поля и рамка идут в ноль одним переходом; вкладки обрезаются краем капсулы. */
html.navcap .dstabs.анимируется .dstabs-l{flex:none;box-sizing:border-box;overflow:hidden;
  transition:margin-left var(--ps,260ms) cubic-bezier(.4,0,.2,1),padding var(--ps,260ms) cubic-bezier(.4,0,.2,1),border-width var(--ps,260ms) cubic-bezier(.4,0,.2,1),
    box-shadow var(--ps,260ms) cubic-bezier(.4,0,.2,1)}
html.navcap .dstabs.анимируется .dstabs-r{flex:1 1 0;min-width:0;box-sizing:border-box;transition:margin-right var(--ps,260ms) cubic-bezier(.4,0,.2,1)}
html.navcap .dstabs.ищет .dstabs-l{padding:0;border-width:0;box-shadow:none;pointer-events:none}
html.navcap .dstabs.анимируется.старт .dstabs-l,html.navcap .dstabs.анимируется.старт .dstabs-r{transition:none}
html.navcap .dstabs + .dsbody{margin-top:calc(-1 * (10px + 34px + 2 * var(--stroke-w)));padding-top:calc(10px + 34px + 2 * var(--stroke-w) + 10px)}
html.navcap .dstabs + .dsbody .fd-day{top:-6px}
/* Отступ от шапки до первого элемента ленты один и тот же и в свёрнутом, и в раскрытом виде: у раскрытой группы (.fd-rgrp) свой верхний
   отступ 10 px, на первом месте он лишний. */
html:is(.navbar,.navcap) .dstabs + .dsbody > :first-child{margin-top:0}
html.navcap .db > .dnav{padding:10px 18px}                            /* от шапки карточки до капсулы и от капсулы до блока — 10 px */
html:is(.navbar,.navcap) .dstabs-l,html:is(.navbar,.navcap) .dstabs-r{gap:0}
html:is(.navbar,.navcap) .dstabs button{padding:5px 10px;border-radius:calc(9px * var(--el));font-size:12px;line-height:14px;transition:color .2s ease,background .2s ease}
html:is(.navbar,.navcap) .dstabs button.on{color:var(--tx);background:color-mix(in srgb, var(--accent-bub, var(--accent)) 8%, transparent)}   /* цвет «Облачка чата» из оформления, прозрачность та же, что у ползунка навигации (8%) */
html:is(.navbar,.navcap) .dstabs button.on::after{display:none}
html:is(.navbar,.navcap) .dstabs .dscog,html:is(.navbar,.navcap) .dstabs .dsfind-b{display:flex;align-items:center;height:24px;padding:0 5px}
html.lite .dnav-hl.on{transition:none}
@media (prefers-reduced-motion:reduce){.dnav-hl.on{transition:none}}
html.lite .dnav-cap{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:color-mix(in srgb, var(--card-bg) 92%, transparent)}

/* Основные этапы записи — в шапке карточки. Пройденные — цветом темы, текущий — нейтральным, будущие —
   бледные и прозрачные. */
.dstages{display:flex;align-items:center;flex-wrap:wrap;gap:4px;width:100%;margin-top:4px}
.dstages[hidden]{display:none}
.dstg{border:var(--stroke-w) solid var(--stroke);background:none;border-radius:calc(9px * var(--el));
  padding:var(--pill-py) var(--pill-px);
  font:400 var(--pill-fs)/var(--pill-lh) var(--font-body);color:var(--tx2);white-space:nowrap;cursor:default;
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.dstg.done{background:var(--accent);border-color:var(--accent);color:#fff}
.dstg.cur{background:var(--chip-bg);border-color:var(--chip-bg);color:var(--tx);font-weight:500}
.dstg.next{background:color-mix(in srgb, var(--card-bg) 45%, transparent);opacity:.7}
/* Стык пройденных этапов: зазор 3 px, обращённые друг к другу углы — по 2 px (внешние — обычные). */
.dstg.jl{margin-left:-1px;border-top-left-radius:calc(2px * var(--el));border-bottom-left-radius:calc(2px * var(--el))}
.dstg.jr{border-top-right-radius:calc(2px * var(--el));border-bottom-right-radius:calc(2px * var(--el))}
/* Пройденный этап, когда выбран исход: узкая полоска без текста; название — в подсказке по наведению. */
.dstg.dstg-mini{width:20px;min-width:0;padding-left:0;padding-right:0;font-size:0;color:transparent !important;overflow:visible}
.dstg.dstg-mini::after{font-size:12.5px}
.dstg.can{cursor:pointer}
.dstg.can:hover{opacity:1;border-color:var(--accent)}
.dstg-sep.fade{opacity:.45}                        /* как у самой плашки ещё не наступившего этапа */
.dstg-sep{width:11px;height:11px;flex:0 0 11px;fill:none;stroke:var(--tx2);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* Настройка этапов в карточке-настройке: тот же вид, что у остальных разделов — название над блоком, строки
   «подпись — значение» внутри. */
.stgset{display:flex;flex-direction:column;gap:7px;margin:0 0 30px}
.stgset .fvals{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.stgset .fv{justify-content:space-between;gap:12px}
.stgset-prev{margin-top:0}
.stgset-del{white-space:nowrap}
.stgset .stgadopt{gap:8px}
.stgset .stgad-l{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--tx2);min-width:0}
.stgset .stgad-l .rsel,.stgset .stgadopt>.rsel{width:100%;max-width:260px}
.stgset .stgsrc{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.stgset .stgbtn{flex:0 0 auto;white-space:nowrap}
.stgset .stgbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:6px 14px;border:0;border-radius:calc(9px * var(--el));
  background:var(--side-bg,#F2F2F7);color:var(--accent);cursor:pointer;font-weight:400;font-size:var(--fs,13px);line-height:1.25;font-family:inherit;transition:background .15s,opacity .15s}
.stgset .stgbtn:hover{background:color-mix(in srgb, var(--accent) 12%, var(--side-bg,#F2F2F7))}
.stgset .stgbtn.main{background:var(--accent);color:#fff}
.stgset .stgbtn.main:hover{background:var(--accent-d,var(--accent))}
.stgset .stgbtn[disabled]{opacity:.35;cursor:default;pointer-events:none}
.stgset .stgfoot .lnk{color:var(--tx2);font-weight:400;font-size:12.5px}
.stgset .stgfoot .lnk:hover{color:var(--accent)}
.stgset .stgsw{display:flex;align-items:center;gap:9px;font-size:var(--fs,13px);color:var(--tx);cursor:pointer;min-width:0}
.stgset .stgsw span:last-child{min-width:0;overflow-wrap:normal;word-break:normal}
/* Анимации исходов — список в две колонки: слева положительный исход, справа отрицательный. */
.stgset .stganim{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 24px;align-items:start;width:100%}
.stgset .stganim-g{display:flex;flex-direction:column;gap:8px;min-width:0}
.stgset .stganim-t{font-size:12px;color:var(--tx2);margin-bottom:2px}
.stgset .stgstart{margin-top:4px}
.stgset .stgstart span{white-space:normal;overflow:visible;line-height:1.35}
.stgset .stgstart input{margin-top:1px}
.stgset .stgtitle{height:25px;min-width:0;width:100%;max-width:260px;border:1px solid var(--stroke);border-radius:calc(8px * var(--el));padding:0 8px;font:inherit;color:inherit;background:none}
.stgset .stgtitle:focus{outline:none;border-color:var(--accent)}
/* Пояснение за значком «i»: текст появляется при наведении или фокусе и не занимает места на странице. */
.stgi{position:relative;display:inline-flex;vertical-align:middle;margin-left:6px;cursor:help;outline:none}
.stgi svg{width:15px;height:15px;fill:none;stroke:var(--tx2);stroke-width:1.4;stroke-linecap:round;opacity:.75;transition:opacity .15s}
.stgi:hover svg,.stgi:focus svg{opacity:1;stroke:var(--accent)}
.stgi-tx{position:fixed;left:0;top:0;z-index:2000;width:min(280px,70vw);padding:9px 12px;border-radius:calc(10px * var(--el));
  background:var(--card-bg,#fff);color:var(--tx);border:1px solid var(--stroke);box-shadow:var(--pill-shadow,0 6px 20px rgba(0,0,0,.14));
  font-size:12px;line-height:1.45;font-weight:400;text-transform:none;letter-spacing:0;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.stgi:hover .stgi-tx,.stgi:focus .stgi-tx{opacity:1;visibility:visible;transform:none}
.stmv{border:0;background:none;padding:0 2px;cursor:pointer;color:inherit;opacity:.55;font-size:13px;line-height:1}
.stmv:hover:not(:disabled){opacity:1}
.stmv:disabled{opacity:.18;cursor:default}
/* Номер — действие, а не просто текст: по нажатию предлагаем, чем звонить */
.phv{cursor:pointer;border-bottom:1px dashed var(--stroke)}
.phv:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Фото записи: колонка слева от полей главного раздела (макет 38632291).
   В правке блоки стоят порознь через 5 пикс, в рабочем виде — это один
   контейнер, и фото отделено от полей только тонкой чертой. */
.fsec-b{display:flex;align-items:stretch;gap:0}
.fsec-b > .fcard{flex:1 1 auto;min-width:0}
.fphoto{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:10px;align-self:stretch}
.fsec-b.withphoto{background:var(--field-bg);border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sec)}
/* Тень раздела — на общем контейнере: у вложенного .fcard её снимаем,
   иначе в теме с тенью она рисуется дважды — вокруг всего блока и ещё
   раз вокруг одних полей, будто фото в отдельной рамке. */
.fsec-b.withphoto > .fcard{border:0;border-radius:0;background:none;box-shadow:none}
.fsec-b.withphoto > .fphoto:not(.setmode){border-right:var(--stroke-w) solid var(--stroke)}
/* в правке — прежняя композиция из отдельных блоков, у неё своя обводка */
.fsec-b:has(.fcard.setmode){gap:5px;background:none;border:0;border-radius:0;overflow:visible}
.fphoto:not(.setmode) .fpic{width:50px;height:50px;flex:0 0 50px}
/* обводка та же, что у строк полей: блок один, разнотон читается как брак */
.fphoto.setmode{background:#FBFBFC;border:var(--stroke-w) solid var(--stroke);
  border-radius:var(--radius-in) 2px 2px 2px}
/* кнопка по макету 38632303: 51x51, скругление 13, значок 20x18 */
.fpic{width:51px;height:51px;flex:0 0 51px;padding:0;border-radius:calc(13px * var(--el));
  border:var(--stroke-w) solid var(--stroke);background:#FBFBFC;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--accent)}
.fpic img{width:100%;height:100%;object-fit:cover;display:block}
.fpic svg{width:20px;height:18px;flex:0 0 20px;fill:currentColor}
.fpic:hover{background:#F2F2F7}
/* показ выключен — значок гаснет вместе с тумблером */
.fphoto.off .fpic{color:#C7C7CC}
.fphoto.off .fpic img{opacity:.45;filter:grayscale(1)}

.fpicdel{border:0;background:none;padding:0;cursor:pointer;color:#8E8E93;
  font:400 11px/13px "SF Pro Text",-apple-system,sans-serif}
.fpicdel:hover{color:var(--red)}
/* Вложения (макет 38632130): строка на файл, значок 30x30, под именем размер */
.flist{display:flex;flex-direction:column}
.flist.over{background:var(--accent-soft)}
/* два списка подряд в одном разделе — своё и подтянутое: отделяем чертой */
.flist + .flist{border-top:var(--stroke-w) solid var(--stroke)}
.fitem{display:flex;align-items:center;gap:5px;padding:10px;
  border-bottom:var(--stroke-w) solid var(--stroke)}
/* имя своё: .fico — это значок кнопки фильтров */
.fkind{width:30px;height:30px;flex:0 0 30px;border-radius:calc(7px * var(--el));display:flex;
  align-items:center;justify-content:center;color:#fff;
  font:600 9px/1 Inter,-apple-system,sans-serif;letter-spacing:.2px}
.fkind.k-pdf{background:#E5484D} .fkind.k-doc{background:#2B579A}
.fkind.k-xls{background:#1D6F42} .fkind.k-ppt{background:#D24726}
.fkind.k-img{background:#7C5CFF} .fkind.k-zip{background:#8A8A8E}
.fkind.k-any{background:#AEAEB2} .fkind.k-url{background:var(--accent)}
.fmeta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.fmeta b{font:400 var(--cfs)/1.2 var(--cff);color:#000;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmeta i{font:400 12px/1.2 var(--cff);color:#8A8A8E;font-style:normal}
.fmeta:hover b{color:var(--accent)}
/* имя своё: .fdel — это крестик условия в фильтрах, с другими размерами */
.fxdel{flex:0 0 22px;width:22px;height:22px;border:0;background:none;border-radius:calc(6px * var(--el));
  padding:0;color:#C7C7CC;cursor:pointer;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.fitem:hover .fxdel{opacity:1}
.fxdel:hover{background:#F2F2F7;color:var(--red)}
.fadd2{border:0;background:none;padding:12px 10px;width:100%;cursor:pointer;
  color:var(--accent);font:400 var(--cfs)/1.2 var(--cff)}
.fadd2:hover{background:color-mix(in srgb, var(--accent) 2.5%, #fff)}
/* в таблице у вложений видно только их число — сами файлы живут в карточке */
.fcnt{color:#3A3A3C}
/* Чек-лист: тот же приём, что и вложения, — список во всю ширину, свой
   флажок вместо готового «.chk», потому что здесь это кнопка, а не значок. */
/* Пустой чек-лист — одна свёрнутая строка, тем же взглядом, что и «Не
   заполнено» у обычного поля: раскрывается по нажатию. */
.ck-toggle{display:block;width:100%;text-align:left;border:0;background:none;
  padding:var(--row) 10px;color:#C2C2C7;font:400 var(--cfs)/1.4 var(--cff);
  cursor:pointer;border-bottom:var(--stroke-w) solid var(--stroke)}
.ck-toggle:hover{color:var(--accent)}
/* Подсказка внутри уже непустого списка — та же строка, но без своей
   черты: черту внизу и так рисует «.ck-list». */
.ck-toggle.ck-inline{border-bottom:0;padding:10px}
/* Черта — одна, в самом низу всего блока, как у «.fcap-wrap»: внутри
   (шапка, каждый пункт) — только отступ, без линий между ними. */
.ck-list{display:flex;flex-direction:column;border-bottom:var(--stroke-w) solid var(--stroke)}
.ck-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 10px 4px;color:#8A8A8E;font:400 var(--cfs)/1.2 var(--cff);font-family:var(--font-2)}
.ck-head b{color:#3A3A3C;font-weight:400}
/* Верхний край, не середина: у длинного пункта в несколько строк флажок
   иначе съезжал бы к середине текста, а не к его первой строке. */
.ck-item{display:flex;align-items:flex-start;gap:8px;padding:10px}
.ck-box{flex:0 0 16px;width:16px;height:16px;box-sizing:border-box;padding:0;margin-top:2px;
  border-radius:calc(4px * var(--el));border:var(--stroke-w) solid var(--stroke);background:none;
  display:inline-flex;align-items:center;justify-content:center;color:transparent;
  font:700 11px/1 var(--cff);cursor:pointer}
.ck-box.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ck-box:disabled{cursor:default}
.ck-text{flex:1 1 auto;min-width:0;padding-top:2px;font:400 var(--cfs)/1.4 var(--cff);
  word-break:break-word;cursor:pointer}
.ck-item.done .ck-text{color:#8E8E93;text-decoration:line-through}
.ck-del{flex:0 0 22px;width:22px;height:22px;border:0;background:none;border-radius:calc(6px * var(--el));
  padding:0;color:#C7C7CC;cursor:pointer;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.ck-item:hover .ck-del{opacity:1}
.ck-del:hover{background:#F2F2F7;color:var(--red)}
/* Рамка правки — та же, что у любой редактируемой ячейки в карточке:
   рисует её строка целиком, а не только поле внутри. */
.ck-item:focus-within{box-shadow:inset 0 0 0 2px var(--accent);background:#fff}
/* Поле пункта — растущее многострочное, а не однострочное: длинный текст
   расширяет саму строку, а не уезжает вбок. Строка добавления — тот же
   «.ck-item», с тем же пустым квадратиком слева: будущий пункт виден
   таким же рядом ещё до того, как его завели. */
/* «.fcard textarea» — общее правило для многострочной правки в карточке
   (своя рамка, своя ручка растяжения, свой минимум высоты) — специфичнее
   голого класса, поэтому побеждало бы. У чек-листа рамку и так рисует
   «.ck-item:focus-within», а расти поле должно по тексту, а не иметь
   чужой минимум — снимаем всё это через предка, с запасом по весу. */
.ck-item .ck-add{flex:1 1 auto;min-width:0;border:0;outline:0;background:none;padding:0;margin:0;
  display:block;resize:none;overflow:hidden;box-shadow:none;min-height:0;border-radius:0;
  font:400 var(--cfs)/1.4 var(--cff);color:#000}
.ck-add::placeholder{color:#8E8E93}
/* Пункт правится тем же нажатием, что и любой текст: клик по тексту
   открывает ввод на месте, без отдельного окна. */
.ck-item .ck-edit{border:0;outline:0;background:none;padding:0;margin:0;width:100%;
  display:block;resize:none;overflow:hidden;box-shadow:none;min-height:0;border-radius:0;
  font:400 var(--cfs)/1.4 var(--cff);color:#000}
/* настройка «из другой сущности»: через какую связь и что берём */
/* Путь подборки — самая длинная подпись в настройке: «через «Поставщик» →
   Поставщики». Ему ячейка пошире, иначе обрывается на середине. */
.fe-line .fe-lk-r{flex:1 1 200px}
.fe-lk-n{color:#8E8E93;font-style:normal;
  font:400 12px/14.3px "SF Pro Text",-apple-system,Inter,sans-serif}

/* лицо рядом со значением-связью: та же запись, только мельче */
.vface{width:15px;height:15px;flex:0 0 15px;border-radius:100px;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:-3px;
  margin-right:7px;background:#EFEFF3}
.vface img{width:100%;height:100%;object-fit:cover;display:block}
/* Удаление — про всю карточку, поэтому стоит под ней, а не в шапке раздела */
.dcarddel{display:flex;justify-content:flex-end;padding:22px 18px 8px}
.fadd.del{color:var(--red)}
.fadd.del:hover{background:#FFF0EF}
/* Обязательное поле: звёздочка у подписи, а пустое — заметно */
.req{color:var(--red);font-style:normal;margin-left:3px}
.frow.need .fk{color:var(--red)}
.frow.need{box-shadow:inset 2px 0 0 var(--red)}
.freq{flex:0 0 16px;width:16px;height:16px;border:0;background:none;padding:0;cursor:pointer;
  color:#C7C7CC;font:600 15px/16px "SF Pro Text",-apple-system,sans-serif;border-radius:5px}
.freq:hover{background:#EFEFF3}
.freq.on{color:var(--red)}
/* Отступ слева тут был от прежней разметки, где список стоял вплотную за
   названием в одной ячейке. Теперь у каждого параметра своя ячейка со своими
   полями, и лишние десять пикселей только сдвигали текст относительно
   названия — и съедали ширину на каждом параметре. */
.ftype{color:#8E8E93;font:400 12px/1 "SF Pro Text",-apple-system,Inter,sans-serif;
  font-style:italic;text-transform:none;letter-spacing:0}
/* Подпись вида раздела стоит рядом с его названием — ей отступ нужен. */
.fhead .ftype{margin-left:10px}
.ftitle[data-secren]{cursor:text}
.ftitle[data-secren]:hover{color:var(--accent)}
.secren{border:1px solid var(--accent);border-radius:calc(8px * var(--el));padding:2px 8px;font:inherit;
  outline:none;min-width:160px}
.x{width:30px;height:30px;border-radius:calc(8px * var(--el));border:0;background:var(--bg);cursor:pointer;flex:0 0 30px}
.db{flex:1;overflow:auto;padding:16px 18px 48px;background:var(--card-bg)}
.sec{font-size:12px;font-weight:700;color:var(--tx2);text-transform:uppercase;
  letter-spacing:.4px;margin:22px 0 8px;display:flex;align-items:center;gap:8px}
.sec:first-child{margin-top:0}
.sec i{flex:1;height:1px;background:var(--line);font-style:normal}
.kv{background:var(--bg);border-radius:calc(10px * var(--el));overflow:hidden}
.kv .r{display:flex;gap:12px;padding:9px 12px;border-bottom:1px solid #fff;font-size:13.5px}
.kv .r:last-child{border-bottom:0}
.kv .k{flex:0 0 165px;color:var(--tx2)}
.kv .v{flex:1;white-space:pre-wrap;word-break:break-word;min-width:0;
  border-radius:calc(6px * var(--el));margin:-3px -6px;padding:3px 6px}
.kv .v.edit{cursor:text}
.kv .v.edit:hover{background:color-mix(in srgb, var(--accent) 5%, #fff)}
.kv .v.blank{color:#B4B4B9}
.kv textarea,.kv .ed{width:100%;font:inherit;border:0;outline:none;box-shadow:0 0 0 2px var(--accent) inset;
  border-radius:calc(6px * var(--el));padding:6px 8px;background:#fff;resize:vertical;min-height:34px}
.kv textarea{min-height:96px}

/* ---------- страница «Контакты» ---------- */
.fpanel.hide{display:none}
.ctable{table-layout:auto;width:100%}
.ctable th:nth-child(1){width:32%}
.ctable th:nth-child(2){width:185px}
.ctable th:nth-child(3){width:16%}
.ctable th:nth-child(4){width:210px}
.ctable th:nth-child(5){width:96px}
.ctable td:nth-child(4) .sup{word-break:normal;overflow-wrap:anywhere}
.ctable td{white-space:normal}
.ctable .cell{white-space:pre-wrap;word-break:break-word}
.phcell{cursor:pointer}
.ctable tr.arch{background:#FBFBFC}
.ctable tr.arch .cell{opacity:.55}
.dup,.archtag{font-style:normal;font-size:10.5px;font-weight:600;margin-left:7px;
  padding:1px 6px;border-radius:calc(20px * var(--el));vertical-align:1px}
.dup{background:#FFF1D6;color:#8F5D00}
.archtag{background:#EFEFF2;color:#8E8E93}
.archtag.invited{background:#E4F0FF;color:#0B62D6}
.archtag.disabled{background:#FCE7E6;color:#B0392F}
/* Полные права — не тревога, но и не рядовое: тёплая метка, заметная
   при беглом взгляде по списку. */
.archtag.full{background:#FFF3DC;color:#8A5B0F}
.archtag.nolog{background:#EFEFF3;color:#6C7278}
.utable tr.noLogin td{background:#FCFCFD}
/* Колонка отметки: узкая, по центру, без отступов ячейки. */
.ctable.utable th.uchk,.ctable.utable td.uchk{text-align:center;padding-left:8px;padding-right:0}
.ctable.utable td.uchk input,.ctable.utable th.uchk input{margin:0;cursor:pointer}
/* Полоса общего действия — появляется только когда есть что делать. */
.ubulk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 20px 12px;padding:9px 14px;border-radius:calc(9px * var(--el));
  background:var(--accent-soft,#EAF6FD);border:var(--stroke-w) solid var(--stroke);
  font-size:12.5px;color:var(--tx);max-width:940px}
.ubulk b{font-weight:600}
.ubulk select{border:var(--stroke-w) solid var(--line);border-radius:calc(7px * var(--el));
  padding:4px 8px;font:inherit;background:#fff}
/* Окошко редких настроек человека — у строки, а не отдельным экраном. */
.umore{position:fixed;z-index:130;width:340px;max-width:calc(100vw - 24px);
  background:#fff;border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(13px * var(--el));box-shadow:0 12px 34px rgba(0,0,0,.16);
  padding:14px 16px}
.umore-t{font:600 14px/20px "SF Pro Rounded",Inter,-apple-system,sans-serif;margin-bottom:12px}
.umore-f{display:block;margin-bottom:12px}
.umore-f span{display:block;font-size:11.5px;color:var(--tx2);margin-bottom:5px}
.umore-f input{width:100%}
.umore-b{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:14px}
/* «Мои устройства» — то же окошко, шире: в строке значок устройства, название, где открыто и кнопка «Выйти». */
.dv-pop{width:400px}
.dv-list{display:flex;flex-direction:column;gap:2px}
.dv-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:var(--stroke-w) solid var(--line2)}
.dv-row:first-child{border-top:0}
.dv-ic{flex:0 0 17px;width:17px;height:17px;margin-top:2px;color:var(--icon-fg2)}
.dv-row.on .dv-ic{color:var(--accent)}
.dv-main{flex:1 1 auto;min-width:0}
.dv-t{font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dv-me{font-style:normal;font-size:11px;font-weight:400;color:var(--tx2);background:var(--chip-bg);border-radius:8px;padding:1px 7px}
.dv-s{font-size:12.5px;color:var(--tx2);margin-top:2px;display:flex;align-items:center;gap:6px}
.dv-row.on .dv-s:not(.dv-s2){color:var(--tx)}
.dv-s2{font-size:11.5px}
.dv-dot{width:7px;height:7px;border-radius:50%;background:#34C759;flex:0 0 7px}
.dv-note,.dv-hint{font-size:12.5px;color:var(--tx2);line-height:1.45}
.dv-hint{margin-top:12px}

/* Полоса состояний людей — тот же переключатель, что «Дашборды / Отчёты /
   Планы» (.pl-scope): 35 снаружи, 30 внутри, выбранное — белой подложкой.
   Раньше это был узкий .seg в 460 px: «В отпуске» ломалось на две строки,
   а счётчики стояли то пузырём, то голой цифрой. Число — просто серым
   рядом с названием, без подложки. */
/* Сверху — тот же воздух от линии шапки, что у полосы дашбордов в «Отчётах
   и планах» (~20): вплотную к линии полоса читалась частью шапки. Снизу
   до таблицы — столько же, чтобы полоса стояла посередине. */
.useg2{padding:20px}
.us-seg{display:inline-flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
.us-seg::-webkit-scrollbar{display:none}
.us-seg button{flex:0 0 auto;gap:6px}
.us-seg em{font-style:normal;font-size:calc(var(--cfs) - 1.5px);color:var(--tx2);
  font-variant-numeric:tabular-nums;font-weight:400}
/* Пояснение под полем в окне — тем же серым, что и остальные подсказки. */
.uhint{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:#8E8E93}
/* Последний вход: не правится руками, поэтому без вида «нажми и меняй». */
.utable .useen{color:var(--tx2);font-size:12.5px;white-space:nowrap}
/* ---------- доска оргструктуры ----------
   Плитка нарочно маленькая — значок и название: подробности на доске
   превратили бы схему в стену текста, по которой не видно самой структуры.
   Всё остальное открывается карточкой справа, как у обычной записи. */
.org-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 20px 12px}
.org-hint{flex:1;min-width:200px;font-size:12px;line-height:1.45;color:var(--tx2)}
.org-zoom{display:flex;align-items:center;border:var(--stroke-w) solid var(--line);
  border-radius:calc(9px * var(--el));overflow:hidden;background:#fff}
.org-zoom button{border:0;background:none;color:var(--tx2);width:26px;height:26px;
  cursor:pointer;font:400 15px/1 var(--font-body)}
.org-zoom button:hover{background:var(--bg)}
.org-zoom span{font:500 11.5px/1 var(--font-body);
  color:var(--tx2);padding:0 7px;min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
/* Высоту не угадываем формулой от окна: над доской то шапка страницы, то
   строка подсказки, и любое вычитание промахивается — снизу оставалась
   пустая полоса. Меряем по месту при отрисовке (orgFitHeight). */
.org-wrap{display:flex;min-height:320px;border-top:var(--stroke-w) solid var(--line)}
.org-canvas{flex:1;min-width:0;position:relative;overflow:hidden;cursor:grab;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px}
.org-canvas.grab{cursor:grabbing}
/* will-change держим только во время движения. Постоянный слой браузер
   растеризует один раз и потом просто растягивает — текст на приближении
   замыливался. Сняли подсказку — слой отпускается, и надписи перерисовываются
   в настоящем размере, резко. */
.org-stage{position:absolute;top:0;left:0;transform-origin:0 0}
.org-stage.moving{will-change:transform}
.org-wires{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.org-wires path{fill:none;stroke:var(--line2);stroke-width:1.5}
/* Плитка — такой же блок, как разделы карточки: то же скругление и та же
   тень из оформления. Своё скругление в 15 точек и плоский фон выбивались
   из системы и не ехали за настройкой скругления. */
.org-node{position:absolute;width:152px;border-radius:var(--radius);
  cursor:grab;user-select:none;padding:13px 10px 11px;text-align:center;
  border:1px solid transparent;background:var(--field-bg);
  box-shadow:var(--shadow-sec);transition:box-shadow .15s ease}
.org-node:hover{box-shadow:0 6px 18px rgba(16,24,40,.10)}
/* Подразделение — системным цветом, приглушённо: оно отличается от должности
   родом, а не важностью, и не должно перетягивать взгляд со схемы. Свой
   оранжевый выбивался из палитры и не менялся вместе с темой. */
.org-node.unit{background:var(--accent-soft)}
.org-node.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.org-node.drag{opacity:.45}
.org-node.drop{border-color:#2E7D57;box-shadow:0 0 0 3px #E6F2EC}
.org-ic{width:24px;height:24px;margin:0 auto 8px;display:block;color:var(--tx2)}
.org-node.unit .org-ic{color:var(--accent-d);opacity:.75}
.org-role{display:block;font:600 12px/1.35 var(--font-body);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.org-name{display:block;font-size:11px;line-height:1.4;color:var(--tx2);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-name.none,.org-role.none{font-style:italic;opacity:.7;font-weight:400}
.org-tag{display:inline-block;margin-top:7px;font-size:9.5px;line-height:1.7;
  padding:0 6px;border-radius:6px;background:#FFF3DC;color:#8A5B0F}
.org-plus{position:absolute;width:21px;height:21px;border-radius:50%;
  border:var(--stroke-w) solid var(--line2);background:#fff;color:var(--accent-d);
  font:400 14px/1 var(--font-body);cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;padding:0;z-index:3;
  transition:opacity .13s ease,transform .13s ease}
.org-node:hover .org-plus{opacity:1}
.org-plus:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.14)}
.org-plus.down{left:50%;bottom:-10px;margin-left:-10px}
/* Свернуть ветку — там же, где и в списке, значком у нижнего края плитки.
   У свёрнутой показываем, сколько людей спрятано: иначе ветка исчезает
   бесследно и её теряют. */
/* Сворачивание — в левом нижнем углу плитки: середину снизу занимает «+»,
   который добавляет подчинённого, и две кнопки на одном месте перекрывали
   друг друга. */
.org-fold{position:absolute;left:10px;bottom:-11px;
  min-width:22px;height:20px;padding:0 6px;border-radius:calc(10px * var(--el));
  border:var(--stroke-w) solid var(--line2);background:#fff;color:var(--tx2);
  font:500 11px/1 var(--font-body);cursor:pointer;display:flex;align-items:center;
  justify-content:center;z-index:4}
.org-fold:hover{color:var(--tx);border-color:var(--tx2)}
.org-plus.right{top:50%;right:-10px;margin-top:-10px}
/* Настройка самого узла — под значком «ещё», как у строк в списке людей:
   щелчок по плитке открывает карточку человека, а не схему. */
.org-cog{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;
  background:none;cursor:pointer;padding:0;opacity:.45;border-radius:6px;
  display:flex;align-items:center;justify-content:center;transition:opacity .13s ease}
.org-cog svg{width:20px;height:20px}
.org-node:hover .org-cog{opacity:1}
.org-cog:focus-visible{opacity:1}
.org-cog:hover{background:rgba(0,0,0,.06)}
.org-ghost{position:fixed;z-index:200;pointer-events:none;opacity:.92;
  box-shadow:0 14px 32px rgba(16,24,40,.24)}
.org-side{flex:0 0 320px;background:#fff;border-left:var(--stroke-w) solid var(--line);
  display:flex;flex-direction:column;overflow:hidden}
.org-side.hide{display:none}
.org-sh{padding:14px 16px;border-bottom:var(--stroke-w) solid var(--line);
  display:flex;gap:11px;align-items:flex-start}
.org-sic{flex:0 0 40px;width:40px;height:40px;border-radius:calc(11px * var(--el));
  background:var(--field-bg);display:flex;align-items:center;justify-content:center;color:var(--tx2)}
.org-sic svg{width:21px;height:21px}
.org-sht{flex:1;min-width:0}
.org-sht .k{font:500 10px/1 var(--font-body);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx2);display:block;margin-bottom:5px}
.org-sht input{width:100%;border:1px solid transparent;border-radius:7px;padding:3px 6px;
  margin-left:-6px;font:600 14px/1.3 var(--font-h2);
  background:none;color:var(--tx)}
.org-sht input:hover{background:var(--field-bg)}
.org-sht input:focus{outline:none;border-color:var(--accent);background:#fff}
.org-sb{flex:1;overflow-y:auto;padding:16px 16px 22px}
.org-sb .fsec{margin-bottom:20px}
.org-none{font-style:normal;color:var(--tx2)}
.org-in{padding:0;overflow:hidden}
.org-inr{display:flex;align-items:center;gap:9px;width:100%;padding:7px 11px;border:0;
  background:none;cursor:pointer;text-align:left;font:inherit;color:var(--tx);
  border-bottom:var(--stroke-w) solid var(--stroke)}
.org-inr:last-child{border-bottom:0}
.org-inr:hover{background:var(--bg)}
.org-ina{flex:0 0 22px;width:22px;height:22px;border-radius:6px;background:#fff;
  border:var(--stroke-w) solid var(--stroke);display:flex;align-items:center;
  justify-content:center;font:600 9.5px/1 var(--font-body);color:var(--tx2)}
.org-inn{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-int{font-size:11px;color:var(--tx2);white-space:nowrap}
.org-del{color:var(--red)}
/* Охват на узле — тремя положениями, как в матрице прав: «все» и «свои» это
   не «включено и выключено», а два разных разрешения. */
.org-acl{padding:0;overflow:hidden}
.org-aclr{display:grid;grid-template-columns:minmax(0,1fr) min(332px,58%);gap:8px;align-items:center;
  padding:6px 11px;border-bottom:var(--stroke-w) solid var(--stroke)}
.org-aclr:last-child{border-bottom:0}
.org-acln{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-acls{display:flex;gap:2px;background:var(--bg);border-radius:calc(7px * var(--el));padding:2px}
.org-acls button{border:0;background:none;border-radius:calc(5px * var(--el));padding:2px 7px;
  cursor:pointer;color:var(--tx2);
  font:500 10.5px/1.5 var(--font-body)}
.org-acls button.on{background:#fff;color:var(--tx);font-weight:600;
  box-shadow:0 1px 2px rgba(16,24,40,.10)}
.org-acls button.on.inh{color:var(--tx2);font-weight:500;font-style:italic}
/* Размеры взяты из макета: переключатель и охваты — равные доли, высота 35,
   скругление на 2 меньше внешнего, выбранное — плашкой. Ни цвет, ни начертание
   числом не задаём:
   в макете это Literata, но в системе шрифт выбирает сам пользователь
   в оформлении, и карточка обязана слушаться этого выбора. */
/* Контейнер переключателя — такой же блок, как все прочие в карточке:
   тот же фон, обводка и скругление, что у .fcard. Своего оттенка у него
   быть не должно — он ничем не особеннее соседних разделов. */
#ogKind{padding:3px;gap:0;background:var(--field-bg);
  border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius);
  box-shadow:var(--shadow-sec)}
#ogKind button{flex:1 0 0;padding:7px 0;min-height:35px;
  font:400 var(--cfs)/1.4 var(--cff);border-radius:calc(var(--radius) - 2px)}
/* Цвет плашки берём из темы (--chip-bg): в обычной он серо-сиреневый,
   в «Олд Мани» — тёплый #E4E4E3. Своего числа здесь быть не должно, иначе
   переключение темы этот элемент не заметит. */
#ogKind button.on{background:var(--chip-bg);color:var(--tx);font-weight:400;box-shadow:none}
/* Строки доступа живут по общей плотности строк карточки: та же переменная,
   что и у .fk/.fv, иначе раздел выбивается ростом из соседних. */
.org-aclr{padding:0 12px;min-height:0}
.org-acls{padding:3px;gap:3px;background:none;border-radius:0}
.org-acls button{flex:1 0 0;padding:calc(var(--row) - 3px) 0;
  font:400 var(--cfs)/1.4 var(--cff);border-radius:calc(var(--radius) - 2px)}
.org-acls button.on{background:var(--chip-bg);color:var(--tx);box-shadow:none}
.org-acls button.on,.org-acls button.on.inh{font-weight:400}
/* Взятое сверху — та же плашка, отличается только цветом текста: без плашки
   выбранное значение читалось как «ничего не выбрано», хотя оно действует. */
.org-acls button.on.inh{background:var(--chip-bg);color:var(--tx2);font-style:normal}
.org-acln{font:400 var(--cfs)/1.4 var(--cff)}
/* Цепочка подчинения: точками показываем глубину, свою строку выделяем —
   человек должен сразу видеть себя, а не искать. */
.org-hier{padding:0;overflow:hidden}
.org-hr{display:flex;align-items:center;gap:9px;padding:var(--row) 12px;
  border-bottom:var(--stroke-w) solid var(--stroke);cursor:pointer;
  font:400 var(--cfs)/1.4 var(--cff);color:var(--tx2)}
.org-hr:last-child{border-bottom:0}
.org-hr:not(.me):hover{background:color-mix(in srgb, var(--accent) 2.5%, #fff)}
.org-hr.me{color:var(--tx);font-weight:600;cursor:default}
.org-hd{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--stroke)}
.org-hr.me .org-hd{background:var(--tx2)}
/* Действия карточки — в один ряд, разреженно: их немного, и каждое
   заметное. */
.org-acts{flex-direction:row;justify-content:space-between;gap:16px}
/* Пометки в кадровых колонках — приписками к значению, а не отдельными
   колонками: место в таблице дороже. */
.hr-probe{margin-left:7px;font-size:calc(var(--cfs) - 3px);color:var(--tx2);font-style:normal}
.hr-probe.late{color:var(--red)}
.hr-exp{margin-left:7px;font-size:calc(var(--cfs) - 3px);color:var(--tx2);font-style:normal}
.org-late span:last-child{color:var(--red);font-weight:600}
.org-done{color:var(--tx2)}
.org-done span:first-child{text-decoration:line-through}
.org-non{color:var(--tx2);cursor:default}
.org-non:hover{background:none}
/* Правимое значение в карточке узла — тем же признаком, что и обычные поля:
   ячейка это сам .fv, а не вложенный span. Обёртка .cell пришла из таблицы
   и давала второй отступ — строка вырастала с 26 точек до 35. */
.fv.oedit{cursor:pointer}
.fv.oedit:hover{background:var(--bg)}
.fv.blank{color:var(--tx2);font-style:italic}
.org-pw{letter-spacing:.14em;color:var(--tx2)}
/* Фото на плитке — вместо значка, тем же местом и размером: схема не должна
   прыгать оттого, что кому-то загрузили снимок, а кому-то нет. */
.org-pic{width:26px;height:26px;margin:0 auto 8px;display:block;border-radius:50%;
  overflow:hidden;background:var(--bg)}
.org-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* Значок в шапке карточки — кнопка: по нему и грузят фото. */
.org-sic{border:0;padding:0;cursor:pointer;overflow:hidden}
.org-sic:hover{filter:brightness(.96)}
.org-sic.has{background:var(--bg)}
.org-sic img{width:100%;height:100%;object-fit:cover;display:block}
.org-ina img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}
.org-ina{overflow:hidden}
/* Значение, которое не правят руками (роль, логин, кто выше) — просто текст,
   без вида «нажми и меняй»: иначе обещали бы правку, которой нет. */
/* Подпись поля у́же общей: базовые 140 пикселей рассчитаны на широкую
   карточку, а здесь панель в 320 — на подпись уходило больше половины,
   и значению не оставалось места. */
.org-sb .fk{flex:0 0 108px}
/* Список в покое — как в таблице людей: тонкая обводка и белый фон.
   Класс .ed сюда не годится: в системе он означает «поле правят прямо
   сейчас» и рисует обводку цветом внутрь — списки выглядели бы вечно
   открытыми на правку. */
.org-sb .fv select{width:100%;max-width:100%;border:var(--stroke-w) solid var(--line);
  border-radius:calc(8px * var(--el));padding:5px 30px 5px 9px;background-color:#fff;
  font:400 13px/1.35 var(--font-body);color:var(--tx)}
.org-sb .fv select:hover{border-color:var(--line2)}
.org-sb .fv select:focus{outline:none;border-color:var(--accent)}
.org-ro{font-size:13px;color:var(--tx)}
.org-ro.blank{color:var(--tx2);font-style:italic}
.org-sb .fv .cell.edit{cursor:pointer;border-radius:calc(6px * var(--el));padding:1px 5px;margin:-1px -5px}
.org-sb .fv .cell.edit:hover{background:var(--bg)}
.org-sb .fv .cell.blank{color:var(--tx2);font-style:italic}
.org-sb .fv input.ed{width:100%}

/* ---------- страница «Пользователи» ----------
   Собрана из тех же кирпичей, что и настройка сущности (.fsec / .fcard /
   .frow / .fk / .fv) — чтобы служебный экран не выглядел приезжим. */
.useg{padding:0 20px 14px;max-width:520px}
.utbl{overflow:auto}
/* Переключатель ролей: тот же сегментный, что и у видов, плюс число людей
   в роли — настраивая права, надо видеть, скольких это заденет. */
.prm{padding:4px 20px 28px;max-width:1080px}
.prm-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.prm-roles{flex:1;min-width:300px;max-width:640px}
/* Полоса своей роли — спокойная: это не предупреждение, а место,
   где у роли есть две дополнительные возможности. */
.prm-own-role{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 22px;padding:9px 13px;border-radius:calc(9px * var(--el));
  background:var(--field-bg);border:var(--stroke-w) solid var(--stroke);
  font-size:12px;color:var(--tx2);max-width:1080px}
.prm-own-role span{flex:1;min-width:220px}
.prm-roles button{display:flex;align-items:center;justify-content:center;gap:6px}
.prm-roles em{font-style:normal;font-size:11px;color:var(--tx2);
  background:var(--bg);border-radius:9px;padding:0 6px;min-width:17px}
.prm-roles button.on em{background:var(--chip-bg)}
/* Оба класса нарочно: базовые .fk (жёсткие 140px под подпись) и .fv
   объявлены ниже по файлу и при равной силе побеждали — описание права
   сминалось в узкий столбик, а переключатель уезжал в пустоту. */
/* align-items у базового .fk — center, и в колонке он выравнивал строки
   по середине: подпись с описанием стояли столбиком по центру пустой ширины. */
.fk.prm-k{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;color:var(--tx);
  align-items:flex-start;justify-content:center;text-align:left;padding:12px 14px;
  font-weight:600}
.fk.prm-k em{font-style:normal;font-weight:400;font-size:11.5px;line-height:1.45;
  color:var(--tx2);max-width:62ch}
.fv.prm-v{flex:0 0 74px;display:flex;align-items:center;justify-content:flex-end;
  padding:12px 14px}
.prm-tblcard{padding:0;overflow:hidden}
.prm-tbl{display:flex;flex-direction:column}
.prm-hd,.prm-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,124px);
  align-items:center}
.prm-hd{padding:9px 12px;background:var(--bg);
  font:400 11.5px/1.3 "SF Pro Text",-apple-system,Inter,sans-serif;color:var(--tx2)}
.prm-hd span+span,.prm-c{text-align:center;justify-self:center}
.prm-row{padding:7px 12px;border-top:var(--stroke-w) solid var(--stroke)}
.prm-nm{font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Охват тремя положениями: «все / свои / нет». Мельче сегментного
   переключателя видов — их в строке четыре штуки. */
.scp{display:inline-flex;background:var(--bg);border-radius:calc(7px * var(--el));
  padding:2px;gap:1px}
.scp-b{border:0;background:none;cursor:pointer;padding:3px 7px;
  border-radius:calc(5px * var(--el));color:var(--tx2);
  font:400 11px/1.35 "SF Pro Text",-apple-system,Inter,sans-serif;white-space:nowrap}
.scp-b:hover{color:var(--tx)}
.scp-b.on{background:#fff;color:var(--tx);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.09)}
/* Помечаем только выбранное: пока «свои» не выбрано, красить его незачем —
   иначе кажется, что оно уже включено во всех строках сразу.
   Имя с приставкой нарочно: .warn в системе уже занят плашкой-предупреждением,
   и без приставки все «свои» получали её жёлтый фон. */
.scp-b.scp-nc.on{color:#B4741E}
.scp-b.scp-nc.on::after{content:' ·'}
.scp-b:focus-visible{outline:2px solid var(--accent-d);outline-offset:1px}
/* Поля-владельцы — над матрицей: без них охват «свои» ничего не значит,
   поэтому вопрос «чья это запись» стоит первым. */
.acl-own{border:var(--stroke-w) solid var(--stroke);border-radius:calc(11px * var(--el));
  background:var(--field-bg);padding:12px 14px;margin-bottom:16px}
.acl-own-t{font:600 13px/18px "SF Pro Rounded",Inter,-apple-system,sans-serif;
  margin-bottom:8px}
.acl-own-l{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:8px}
.acl-own-h{font-size:11.5px;line-height:1.45;color:var(--tx2)}

/* Переключатель «можно / нельзя». Свой, а не галочка: тут два состояния
   равноправны, а галочка читается как «отметил — сделал». */
.acl-t{width:38px;height:22px;border:0;border-radius:11px;background:#D6D6DB;
  position:relative;cursor:pointer;padding:0;flex:0 0 auto;
  transition:background .16s ease}
.acl-t::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.22);
  transition:transform .16s ease}
.acl-t.on{background:var(--accent)}
.acl-t.on::after{transform:translateX(16px)}
.acl-t:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .acl-t,.acl-t::after{transition:none}
}

/* Доступы у сущности — та же матрица, только одна сущность и все роли. */
.acl-roles{max-width:680px;margin:0 auto;text-align:left}
.acl-hint{margin:0 0 16px;color:var(--tx2);font-size:12.5px;line-height:1.5}
.acl-tbl{border:var(--stroke-w) solid var(--stroke);border-radius:calc(11px * var(--el));
  overflow:hidden;background:var(--field-bg)}
.acl-hd,.acl-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,120px);
  align-items:center}
.acl-hd{padding:8px 12px;background:var(--bg);
  font:400 11.5px/1.3 "SF Pro Text",-apple-system,Inter,sans-serif;color:var(--tx2)}
.acl-hd span+span,.acl-c{text-align:center;justify-self:center}
.acl-row{padding:6px 12px;border-top:var(--stroke-w) solid var(--stroke)}
.acl-nm{font-size:13px;color:var(--tx)}

/* Полоса предпросмотра роли — поверх всего, чтобы из режима нельзя было
   выйти забыв, что ты в нём. */
.rolebar{position:fixed;left:var(--sidew);right:0;bottom:0;z-index:120;transition:left var(--sidet);
  display:flex;align-items:center;gap:14px;padding:11px 20px;
  background:var(--tx);color:#fff;font-size:13px}
.rolebar b{font-weight:600}
.rolebar button{margin-left:auto;border:0;background:rgba(255,255,255,.16);color:#fff;
  border-radius:calc(8px * var(--el));padding:6px 14px;cursor:pointer;font:inherit}
.rolebar button:hover{background:rgba(255,255,255,.26)}

/* Журнал доступа: служебный список, поэтому набран мельче и спокойнее
   самой таблицы — он для разбирательств, а не для ежедневной работы. */
.ulog{margin:26px 20px 30px;max-width:940px}
/* Сводка: сверху числа, ниже — списки того, что требует внимания. Плитки
   и списки собраны из тех же блоков, что и вся карточка, своей вёрстки
   не заводим. */
.hrs{padding:14px 20px 40px;max-width:940px}
.hrs-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-bottom:14px}
.hrs-t{background:var(--field-bg);border:var(--stroke-w) solid var(--stroke);
  border-radius:var(--radius);padding:13px 15px;box-shadow:var(--shadow-sec)}
.hrs-t b{display:block;font:600 24px/1.15 var(--font-h2);margin-bottom:4px;
  font-variant-numeric:tabular-nums}
.hrs-t span{display:block;font-size:calc(var(--cfs) - 1px);color:var(--tx2)}
.hrs-t em{display:block;font-style:normal;font-size:calc(var(--cfs) - 3px);
  color:var(--tx2);margin-top:3px}
.hrs-per{display:flex;align-items:center;gap:10px;margin:0 0 22px}
.hrs-per > span{font-size:calc(var(--cfs) - 1px);color:var(--tx2)}
.hrs-per .seg{flex:0 0 auto}
.hrs .fsec{margin-bottom:22px}
.hr-bad{color:var(--red);font-weight:600}
/* Остаток отпуска — в шапке раздела, рядом с названием: это ответ на первый
   вопрос, который задают, открывая отсутствия. */
.hr-bal{margin-left:auto;margin-right:12px;font-size:calc(var(--cfs) - 2px);color:var(--tx2)}
/* Отбор в журнале — одной строкой над записями. */
.ulog-f{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px 4px}
.ulog-q{flex:1 1 180px;min-width:140px}
.ulog-s{border:var(--stroke-w) solid var(--line);border-radius:calc(8px * var(--el));
  padding:5px 26px 5px 9px;background-color:#fff;color:var(--tx);
  font:400 calc(var(--cfs) - 1px)/1.35 var(--font-body)}
.ulog-h{display:flex;align-items:center;gap:9px;width:100%;padding:0 var(--radius) 7px;
  background:none;border:0;cursor:pointer;font:inherit;color:var(--tx);text-align:left}
.ulog-h span{font:600 14px/20px "SF Pro Rounded",Inter,-apple-system,sans-serif}
.ulog-h em{font-style:normal;font-size:12px;color:var(--tx2)}
.ulog-h i{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--accent-d)}
.ulog-b{background:var(--field-bg);border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(11px * var(--el));overflow:hidden}
.ulog-r{display:flex;gap:14px;padding:8px 14px;font-size:12.5px;line-height:1.5;
  border-top:var(--stroke-w) solid var(--stroke)}
.ulog-r:first-child{border-top:0}
.ulog-d{color:var(--tx2);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:112px}
.ulog-w{font-weight:600;white-space:nowrap;min-width:130px}
.ulog-t{color:var(--tx2)}
.ulog-t em{font-style:normal;color:var(--tx)}
.ulog-e{color:var(--tx2)}

/* ---------- лента уведомлений ---------- */
.nt-tabs{display:flex;align-items:center;gap:4px;padding:12px 20px;flex-wrap:wrap}
.nt-tabs button{border:0;background:none;cursor:pointer;padding:6px 12px;border-radius:20px;
  font:500 13px/1.3 var(--font-body);color:var(--tx2);white-space:nowrap}
.nt-tabs button:hover{background:var(--chip-bg)}
.nt-tabs button.on{background:var(--tx);color:#fff}
.nt-tabs button i{font-style:normal;margin-left:5px;opacity:.75}
.nt-allread{margin-left:auto;color:var(--accent-d)!important}
.nt-row{display:flex;gap:12px;align-items:flex-start;padding:var(--row) 20px;cursor:pointer;
  border-top:var(--stroke-w) solid var(--stroke)}
.nt-row:hover{background:var(--field-bg)}
.nt-row.unread{background:var(--accent-soft)}
.nt-row.unread:hover{background:var(--accent-soft2)}
.nt-body{flex:1;min-width:0}
.nt-line{font-size:13.5px;line-height:1.45;color:var(--tx)}
.nt-line b{font-weight:600}
.nt-prev{font-size:12.5px;color:var(--tx2);margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* Слитые правки идут списком: каждая своей строкой, чтобы читалось как
   перечень, а не как одна длинная фраза через запятую. */
.nt-many{white-space:normal;display:flex;flex-direction:column;gap:1px}
.nt-many span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 7px;margin-top:6px}
.nt-time{font-size:11.5px;color:var(--tx2);white-space:nowrap;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.nt-empty{padding:50px 20px;text-align:center;color:var(--tx2);font-size:13.5px}
/* Вкладка «Настройки» на той же странице — не лента, обычная форма из тех же
   кирпичей, что и «Оформление» (.fsec/.fhead/.ftitle/.fcard), но без своей
   боковой панели, поэтому ширину и отступы задаём сами. */
.nt-settings{max-width:520px;padding:20px}
.nt-muted-row{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-bottom:var(--stroke-w) solid var(--stroke)}
.nt-muted-row:last-child{border-bottom:0}
.nt-muted-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-muted-row b{color:var(--tx2);font-weight:400;font-size:12.5px;white-space:nowrap}
/* Та же лента в полосе рядом с открытой карточкой. Полоса узкая (--strip),
   поэтому время уходит из строки вниз, к тексту, а не жмёт его сбоку;
   открытая строка помечается так же, как карточка в обычном списке. */
#listPane .nt-row{padding:var(--row) 14px;gap:9px;position:relative}
#listPane .nt-row.on{background:var(--accent-soft)}
#listPane .nt-row.on.unread{background:var(--accent-soft2)}
#listPane .nt-line{font-size:12.5px}
#listPane .nt-prev{font-size:11.5px}
#listPane .nt-time{position:absolute;right:14px;bottom:8px;font-size:10.5px}
#listPane .nt-body{padding-bottom:12px}
#listPane .nt-empty{padding:30px 14px;font-size:12.5px}
#listPane .fd-day{margin:10px 0}
/* Раздел и запись в строке — ссылки на сущность, а не произвольный URL:
   цвет тот же, что у «.sup» в таблице и карточке (--entity-color), а не
   у ссылок в тексте. Подчёркивание только под указателем: в ленте их две
   на строку, и постоянная линия рябит. */
.nt-lnk{color:var(--entity-color);cursor:pointer;text-decoration:none;font-weight:500}
.nt-lnk:hover{text-decoration:underline}
/* Счётчик непрочитанных уведомлений у самой записи — в таблице у названия,
   на карточке доски и в календаре, в шапке открытой карточки. Тот же красный
   кружок, что и у разделов в меню: одно и то же значит одинаково. */
.nt-cnt{display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--red,#FF3B30);color:#fff;font:700 10px/16px var(--font-body);
  font-style:normal;vertical-align:1px;margin-left:6px;flex:0 0 auto}
/* На карточке доски — в углу, поверх содержимого: место у неё то же, что
   и у точки нового, только точка стоит правее и ниже не мешая. */
.kcard{position:relative}
.nt-cnt.kc-cnt{position:absolute;right:6px;top:6px;margin:0;z-index:2;
  box-shadow:0 0 0 2px var(--card-bg,#fff)}
.kcard.новьё .nt-cnt.kc-cnt{right:18px}
/* В шапке карточки — рядом с названием, чуть крупнее: там места хватает. */
.nt-cnt.nt-cnt-card{min-width:18px;height:18px;font-size:11px;line-height:18px;
  margin-left:8px}
/* В плашке календаря места мало: значок ужимаем и обводку убираем — он и так
   стоит на цветном поле, а лишний ободок в 11-пиксельной плашке только сорит. */
.nt-cnt.cal-cnt{min-width:14px;height:14px;font-size:9px;line-height:14px;
  padding:0 3px;margin:0;vertical-align:0}

/* Звезда-метка «это отмечено» — рядом с названием записи, где бы оно
   ни стояло: 12×12, основным цветом темы, без своего состояния «выключено» —
   её просто нет, если не отмечена (см. notifЗвездаЗначок). */
.nt-star{width:12px;height:12px;flex:0 0 auto;display:inline-block;
  vertical-align:-1px;color:var(--accent);margin-left:4px}

/* Расхождение со списком входов — заметно, но не тревожной краснотой:
   это повод разобраться, а не поломка. Радиус и обводка — общие для
   системы, чтобы плашка не выглядела наклейкой поверх экрана. */
.uorph{margin:14px 20px 0;max-width:940px;
  padding:12px 15px;border-radius:calc(11px * var(--el));
  background:#FFF8EC;border:var(--stroke-w) solid #EBD9B4;color:#7A5A16;
  font:400 12.5px/1.55 "SF Pro Text",-apple-system,Inter,sans-serif}
.uorph b{font-weight:600;color:#5E4511}
.rowact{display:flex;gap:8px;align-items:center;justify-content:flex-end}
/* Кнопка меню строки — та же «ещё», что и в шапке разделов: один значок,
   набор действий внутри. В строке она всегда одна и на одном месте. */
.urow-m{border:0;background:none;cursor:pointer;padding:0;display:flex;
  border-radius:calc(6px * var(--el));flex:0 0 auto}
.urow-m svg{width:26px;height:26px;display:block}
.urow-m:hover{background:var(--chip-bg)}
.cdel2{border:0;background:none;color:#C7C7CC;cursor:pointer;padding:3px;border-radius:calc(5px * var(--el));
  display:flex}
.cdel2:hover{background:#FFE9E7;color:var(--red)}
.rate-edit input{width:64px;text-align:center;font-size:11px;padding:3px 4px}
.rate.edit{cursor:text}
.rate.edit:hover{background:#E3E7E7}

/* удаление контакта */
.cdel{flex:0 0 auto;border:0;background:none;color:#C7C7CC;cursor:pointer;padding:2px;
  border-radius:calc(5px * var(--el));display:flex;opacity:0;transition:opacity .12s}
.crow:hover .cdel{opacity:1}
.cdel:hover{background:#FFE9E7;color:var(--red)}

/* значения, различающиеся по регионам */
.byreg{display:block;font-size:11px;color:#B4B4B9;font-weight:400;margin-top:2px}
.regs{display:flex;flex-direction:column;gap:2px}
.regrow{display:flex;gap:10px;align-items:flex-start;padding:4px 0;
  border-bottom:1px solid rgba(0,0,0,.05)}
.regrow:last-of-type{border-bottom:0}
.regname{flex:0 0 130px;color:var(--tx2);font-size:12.5px;padding-top:2px}
.regval{flex:1;min-width:0;word-break:break-word;border-radius:calc(6px * var(--el));
  margin:-3px -6px;padding:3px 6px}
.regval.edit{cursor:text}
.regval.edit:hover{background:color-mix(in srgb, var(--accent) 5%, #fff)}
.alln{align-self:flex-start;margin-top:6px}

/* редактируемые блоки регламента */
.qa{border:var(--stroke-w) solid var(--line);border-radius:calc(10px * var(--el));overflow:hidden}
.qa .r{display:flex;gap:12px;border-bottom:var(--stroke-w) solid var(--line2);font-size:13.5px;
  align-items:stretch}
.qa .r:last-child{border-bottom:0}
.qa .k{flex:0 0 190px;color:var(--tx2);padding:10px 12px;background:none;
  display:flex;align-items:flex-start}
.qa .v{flex:1;min-width:0;padding:10px 12px;white-space:pre-wrap;word-break:break-word;
  cursor:text;min-height:40px}
.qa .v:hover{background:color-mix(in srgb, var(--accent) 5%, #fff)}
.qa .v.blank{color:#C7C7CC}
.qa .v.edited{box-shadow:inset 3px 0 0 var(--amber)}
.qa textarea{width:100%;border:0;outline:none;box-shadow:0 0 0 2px var(--accent) inset;border-radius:calc(6px * var(--el));
  padding:8px 10px;font:inherit;resize:vertical;min-height:72px;background:#fff}

/* ---------- единый вид поля в правке ----------
   Любое поле ввода в приложении обводится нашим акцентом внутрь, а системное
   кольцо фокуса гасим: у браузера оно другого синего и лежит поверх соседей. */
input:focus-visible,select:focus-visible,textarea:focus-visible,
input:focus,select:focus,textarea:focus{outline:none}
.qa textarea:focus,.kv textarea:focus,.kv .ed:focus,
input.ed:focus,select.ed:focus,.rng input:focus{box-shadow:0 0 0 2px var(--accent) inset}

/* ---------- карточка поставщика по макету Figma 594:15704 ----------
   Inter; секции gap 30; карточка radius 9; строка 35; ключ 140 без заливки;
   разделители #E5E5EA; текст 12/15, заголовки 14/20, подписи 10/12. */
/* Шрифт карточек — две переменные, чтобы сравнить варианты и откатить одним движением.
   Сейчас: как в таблице (системный 14px). Было: Inter 12px — см. .db.inter ниже. */
.db{--cfs:14px;
    --cff:var(--font-body);
    font-family:var(--cff);font-size:var(--cfs)}
.db.inter{--cfs:12px; --cff:Inter,-apple-system,sans-serif}
/* Расстояние между блоками — 30 во всех окнах. */
.fsec{display:flex;flex-direction:column;gap:7px;margin-bottom:30px}
.fsec:last-child{margin-bottom:0}
/* Разделы, поставленные в один ряд. Доли ширины задаются в настройке, а
   в узком окне ряд переносится сам: колонка по 320 пикселей — предел,
   ниже которого поля начинают ломаться. */
/* Ряд разделов: соседи стоят вершинами вровень, разной высоты им не мешает.
   Модификатор именно «duo», а не «pair»: под тем именем в системе уже
   живут диапазоны дат, и их центрирование сползало сюда. */
.fsecrow{display:flex;align-items:flex-start;gap:18px;margin-bottom:30px;flex-wrap:wrap}
.fsecrow:last-child{margin-bottom:0}
.fsecrow > .fsec{flex:1 1 320px;min-width:0;margin-bottom:0;
  transition:flex-grow .18s var(--ez),flex-basis .18s var(--ez)}
/* Пока тянут границу, переходы выключены: иначе раздел плавно догоняет
   курсор и движение кажется вязким. */
body.secsizing .fsecrow > .fsec{transition:none}
/* Ряд из одного раздела ничем не отличается от прежней строки: он и есть
   строка. Нужен он ради переноса — в него открывается место под приходящий. */
.fsecrow:not(.duo) > .fsec{flex:1 1 100%}
/* Пустое место, которое открывается под раздел, пока его несут: соседи
   ужимаются, заготовка расширяется — и видно, куда он ляжет. */
.secslot{flex:0 0 0;align-self:stretch;min-height:60px;border-radius:var(--radius);
  border:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  transition:flex-basis .18s var(--ez),flex-grow .18s var(--ez);opacity:0}
.secslot.on{flex:1 1 0;opacity:1}
/* Место между рядами: раздел встанет своей строкой. Полоса низкая нарочно —
   раздел бывает в пол-экрана, и разрыв в его рост только сбивает с толку. */
.secband{height:0;margin:0;opacity:0;border-radius:var(--radius);box-sizing:border-box;
  border:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  transition:height .16s var(--ez),margin .16s var(--ez),opacity .16s ease}
.secband.on{height:34px;margin:0 0 30px;opacity:1}
/* Пока место открыто, соседи по ряду делят остаток: без этого раздел во всю
   ширину не отдавал ни пикселя и заготовка оставалась щелью. */
.fsecrow:has(.secslot.on) > .fsec{flex:1 1 0}
/* Граница между соседями по ряду: за неё тянут, меняя доли. Сама полоска
   тонкая, а хват шире — в два пикселя не прицелиться. */
.secgrip{align-self:stretch;flex:0 0 0;width:0;position:relative;margin:0 -9px;cursor:col-resize}
.secgrip::before{content:'';position:absolute;top:26px;bottom:0;left:-9px;width:18px;
  cursor:col-resize}

@media (max-width:900px){ .fsecrow > .fsec{flex:1 1 100%} .secgrip{display:none} }
/* Насечка у заголовка раздела и подсветка того, куда он ляжет: слева от
   соседа — своей строкой, справа — с ним в один ряд. */
.sechand{width:8px;height:13px;flex:0 0 8px;color:#BDBDC1;margin-right:8px;pointer-events:none}
/* Заголовок раздела прижат влево: у шапки раскладка «по краям», и насечка
   слева отталкивала название к правому краю — раздел выглядел сломанным. */
.fhead.grab{cursor:grab;user-select:none}
.fhead.grab .ftitle{margin-right:auto}
.fhead.grab:hover .sechand{color:var(--accent)}
.fhead.grab:active{cursor:grabbing}
/* Раздел, который несут, остаётся на месте бледной тенью, а за курсором едет
   двойник — поднятый подложкой цвета темы. Так же ведут себя плашки разделов
   и карточки доски: рука двигает вещь, а не ждёт перерисовки. */
.fsec.secdrag{opacity:.3}
.fghost.secghost{border-radius:var(--radius);will-change:transform;
  background:color-mix(in srgb, var(--accent) 8%, #fff);
  box-shadow:0 0 0 var(--stroke-w) var(--accent),0 10px 30px rgba(0,0,0,.16);
  padding:6px 0}
.secover{position:relative}
.secover::after{content:'';position:absolute;top:0;bottom:0;left:-9px;width:3px;
  border-radius:2px;background:var(--accent)}
.secover.secover-r::after{left:auto;right:-9px}
/* Пока настраиваешь, видно, что разделы стоят вместе: общая подложка в цвете
   темы и тонкая обводка вокруг ряда. В рабочем виде ничего этого нет —
   там разделы просто стоят рядом. */
/* Объединённый ряд — одна плашка: подложка цвета темы, обводка тем же цветом
   и общее скругление. Внутри разделы остаются белыми карточками. */
.fsecrow.tuned{padding:12px;margin:0 -12px 30px;border-radius:var(--radius);gap:16px;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border:var(--stroke-w) solid color-mix(in srgb, var(--accent) 55%, transparent)}
.fsecrow.tuned > .secgrip{margin:0 -14px}
/* Стрелка ширины появляется, когда наводишь на границу между разделами. */
.fsecrow.tuned .secgrip::after{opacity:0;content:'';position:absolute;top:34px;bottom:6px;
  left:-0.5px;width:1px;background:var(--stroke);transition:opacity .15s ease}
.fsecrow.tuned .secgrip:hover::after,.fsecrow.tuned .secgrip.drag::after{
  opacity:1;background:var(--accent);width:2px;left:-1px}
/* Как они слипаются и расходятся. Съехались — половины сходятся навстречу,
   подложка проявляется; разошлись — ушедший раздел приезжает на своё место
   сверху. Движение короткое: это подсказка, а не представление. */
@keyframes secjoin{from{background:transparent;border-color:transparent}}
@keyframes secjoinA{from{transform:translateX(-14px);opacity:.4}}
@keyframes secjoinB{from{transform:translateX(14px);opacity:.4}}
@keyframes secpart{from{transform:translateY(-10px);opacity:.35}}
.fsecrow.joined{animation:secjoin .3s var(--ez)}
.fsecrow.joined > .fsec:first-of-type{animation:secjoinA .3s var(--ez)}
.fsecrow.joined > .fsec:last-of-type{animation:secjoinB .3s var(--ez)}
.fsec.parted{animation:secpart .3s var(--ez)}
/* Пока держишь раздел над соседом, тот подаётся навстречу — видно, что
   они слипнутся. */
.secover{transition:transform .15s var(--ez)}
.secover.secover-r{transform:translateX(-5px)}
.secover:not(.secover-r){transform:translateX(5px)}
/* Плашки разделов, стоящих в одном ряду, слиты в одну: общая подложка
   в цвете темы и общая обводка, а сами плашки внутри — без своих. */
/* Разделы, стоящие в одном ряду, обведены общей плашкой: подложка в цвете
   темы на десятую долю, обводка тем же цветом в полволоска, отступ 3 и зазор 5 —
   сами плашки внутри остаются собой. Размеры из макета 38632450. */
.dsecpair{display:inline-flex;align-items:center;gap:5px;padding:3px;
  border-radius:calc(12px * var(--el));
  border:var(--stroke-w) solid var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent)}
.dsecpair.joined{animation:secjoin .3s var(--ez)}
.dsecpair.joined .dsec:first-child{animation:secjoinA .3s var(--ez)}
.dsecpair.joined .dsec:last-child{animation:secjoinB .3s var(--ez)}
/* Заголовок блока и кнопка действия — один стандарт во всех окнах:
   SF Pro Rounded 600/14 и SF Pro 500/12, отступ от края блока 18. */
.fhead{display:flex;align-items:center;justify-content:space-between;padding:0 var(--radius)}
.ftitle{font:600 14px/20px "SF Pro Rounded",Inter,-apple-system,sans-serif;color:#000;
  font-family:var(--font-h2)}
.fadd{display:flex;align-items:center;gap:5px;border:0;background:none;cursor:pointer;
  color:#8E8E93;font:500 12px/14px "SF Pro Text",-apple-system,Inter,sans-serif;padding:0}
.fadd:hover{color:#007AFF}
.fadd .i{width:12px;height:12px;stroke-width:1.8}

.fcard{background:var(--field-bg);border:var(--stroke-w) solid var(--stroke);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sec)}

/* Плотность строк — одна на всю систему: как в таблице, так и в карточке.
   «Тесно» должно быть тесно везде, иначе настройка выглядит половинчатой. */
/* Высоту задаёт содержимое, как в таблице: у строки был свой наименьший
   размер, и растянутая по нему ячейка добавляла к нему ещё и свои отступы —
   поле в карточке выходило на пятнадцать пикселей выше строки таблицы. */
.frow{display:flex;align-items:stretch;border-bottom:var(--stroke-w) solid var(--stroke)}
.frow:last-child{border-bottom:0}
/* Подпись тянется на всю высоту строки: черта между подписью и значением
   должна идти от края до края. Пока подпись была ростом с текст, а значение —
   со список, черта обрывалась на середине. */
.fk{flex:0 1 140px;min-width:96px;align-self:stretch;background:none;padding:var(--row) 10px;color:#8E8E93;
  font:400 var(--cfs)/1.4 var(--cff);display:flex;align-items:center;
  border-right:var(--stroke-w) solid var(--stroke);word-break:break-word;
  font-family:var(--font-2)}
/* Подпись поля во всю ширину строки — та же «.fk», только своей строкой
   сверху, а не сбоку: значению внизу тогда не тесно под короткое слово.
   Черта — одна, в самом низу всего блока, а не между подписью и текстом:
   это один ряд, а не два разных. */
.fcap-wrap{border-bottom:var(--stroke-w) solid var(--stroke)}
.fcap{padding:var(--row) 10px;color:#8E8E93;font:400 var(--cfs)/1.4 var(--cff);
  font-family:var(--font-2)}
/* block, а не flex: внутри текст вперемешку со ссылками —
   во flex-контейнере они разъезжались бы по колонкам */
.fv{flex:1;min-width:0;padding:var(--row) 10px;color:#000;
  font:400 var(--cfs)/1.4 var(--cff);white-space:pre-wrap;word-break:break-word}
.fc{flex:1;min-width:0;padding:var(--row) 10px;
  font:400 var(--cfs)/1.4 var(--cff);border-right:var(--stroke-w) solid var(--stroke);
  display:flex;align-items:center}
.fempty{padding:22px;text-align:center;color:#8E8E93;
  font:400 var(--cfs)/1.4 var(--cff)}

/* вложенный список «регион → человек» */
.fv.nested{display:flex;flex-direction:column;align-items:stretch;padding:0}
.nrow{display:flex;align-items:center;border-bottom:var(--stroke-w) solid var(--stroke);min-height:35px}
.nrow:last-child{border-bottom:0}
.nreg{flex:0 0 45%;padding:10px;color:#8E8E93;border-right:var(--stroke-w) solid var(--stroke);
  align-self:stretch;display:flex;align-items:center}
.nper{flex:1;min-width:0;padding:10px;display:flex;align-items:center;gap:8px;color:#000}
/* аватар и имя в одну строку — иначе .mini как flex-блок уводит имя вниз */
.person{display:inline-flex;align-items:center;gap:8px}
.mini{width:20px;height:20px;border-radius:50%;flex:0 0 20px;font-style:normal;
  background:linear-gradient(135deg,#7A8EA8,#4A5C72);color:#fff;font-size:8.5px;
  display:flex;align-items:center;justify-content:center;font-weight:600}

/* Сетка без скруглений — скруглён только внешний контейнер */
.edit{cursor:text}
.edit:hover{background:color-mix(in srgb, var(--accent) 5%, #fff)}
.blank{color:#C2C2C7}
.fcard textarea,.fcard input.ed,.fcard select.ed{width:100%;
  font:400 var(--cfs)/1.4 var(--cff);border:0;outline:none;
  box-shadow:0 0 0 2px var(--accent) inset;
  border-radius:0;padding:6px 8px;background:#fff;resize:vertical}
.fcard textarea{min-height:76px}
.cname{flex:1.1;display:block;white-space:pre-wrap;word-break:break-word}
.cphone{flex:0 0 165px;border-right:0;font-variant-numeric:tabular-nums;white-space:nowrap;
  position:relative;cursor:pointer}
.phlink{color:var(--link-color)}
.cphone:hover .phlink{text-decoration:underline}

/* меню действий по телефону */
.phmenu{position:fixed;z-index:80;min-width:172px;
  background:#fff;border:var(--stroke-w) solid var(--stroke);border-radius:calc(9px * var(--el));overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.16);display:flex;flex-direction:column;cursor:default}
.phmenu button{border:0;background:none;text-align:left;padding:var(--row) 12px;cursor:pointer;
  font:400 var(--cfs)/1.4 var(--cff);color:#000;
  border-bottom:var(--stroke-w) solid var(--stroke);display:flex;gap:6px;align-items:baseline}
.phmenu button:last-child{border-bottom:0;color:#8E8E93}
.phmenu.cmenu button{color:#000}   /* в меню «Создать» оба пункта равнозначны */
.phmenu button:hover{background:color-mix(in srgb, var(--accent) 10%, #fff)}
.phmenu em{font-style:normal;color:#8E8E93;font-size:11px}
.crow .cdel{align-self:center;margin-right:8px}
.msg{margin:0;border:0;border-radius:0;background:none;max-height:320px;overflow:auto;
  padding:10px;white-space:pre-wrap;word-break:break-word;
  font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#000}

/* ---------- блок «Проекты» — по макету Figma 594:15719 ----------
   Токены взяты из файла: Inter, #007AFF, #F6F6F6, #E5E5EA, радиусы 9 и 5, шаг 5/10. */
.projsec{font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  display:flex;flex-direction:column;gap:5px;margin-top:22px}
.projhead{display:flex;align-items:center;justify-content:space-between;padding:0 9px}
.projttl{font-size:14px;line-height:20px;font-weight:500;color:#000}
.addproj{display:flex;align-items:center;gap:5px;border:0;background:none;cursor:pointer;
  color:#8E8E93;font:500 var(--cfs)/1.35 var(--cff);padding:0}
.addproj:hover{color:#007AFF}
.addproj .i{width:12px;height:12px;stroke-width:1.8}

.projrow{cursor:pointer}
.projrow:hover{background:color-mix(in srgb, var(--accent) 5%, #fff)}
.pname{flex:0 0 32%;color:#007AFF;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcity{color:#000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Вход и Исход — одна общая плашка на два столбца (макет Figma 638:16341) */
.prates{flex:0 0 auto;padding:5px;border-right:0}
.ratebox{display:flex;gap:5px;background:#EEF0F0;border-radius:calc(7px * var(--el));padding:0}
.rate{flex:0 0 auto;min-width:96px;background:none;border-radius:calc(7px * var(--el));padding:2px 5px;
  display:flex;flex-direction:column;align-items:center;gap:1px}
.rate em{font:600 calc(var(--cfs) - 3px)/1.2 var(--cff);color:#6B6B6B;font-style:normal}
.rate b{font:400 calc(var(--cfs) - 3px)/1.2 var(--cff);color:#6B6B6B;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.mchip{flex:0 0 auto;padding:2px 9px;border-radius:calc(20px * var(--el));font-size:12px;font-weight:600}
.warn{background:#FFF6E5;border:1px solid #FFE1A8;border-radius:calc(10px * var(--el));padding:10px 12px;
  font-size:13px;margin-top:8px}
.warn b{display:block;margin-bottom:4px;color:#9A6400}
.note{color:#8E8E93;font:400 calc(var(--cfs) - 1px)/1.4 var(--cff);
  margin:-22px 9px 30px}   /* висит под своей секцией: 8 от неё, 30 до следующей */
.addf{border:0;background:var(--bg);color:var(--accent-d);border-radius:calc(7px * var(--el));padding:5px 10px;
  cursor:pointer;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;
  display:inline-flex;align-items:center;gap:5px}
.addf:hover{background:var(--accent-soft)}
a{color:var(--link-color);word-break:break-all}
.empty{padding:50px 20px;text-align:center;color:var(--tx2)}

/* ---------- форма создания ЖК ---------- */
/* Окно с вопросом — поверх всего, включая настройку сущности: с прежними
   шестьюдесятью оно оказывалось под её панелью, и от вопроса было видно
   только затемнение по краям. */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:90;
  display:none;align-items:center;justify-content:center;padding:24px}
.modal-bg.on{display:flex}
/* Данные не доехали. Экран во всю страницу, а не окошко: за ним всё равно
   нет ничего, что имело бы смысл показывать. */
.nosrv{position:fixed;inset:0;background:var(--bg,#F2F2F7);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px}
.nosrv-c{background:var(--panel,#fff);border-radius:calc(14px * var(--el,1));
  padding:28px 30px;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.nosrv-c h2{margin:0 0 12px;font-size:20px}
.nosrv-c p{margin:0 0 12px;line-height:1.5;color:var(--tx2,#5C6672)}
.nosrv-c p b{color:var(--tx,#12161C)}
.nosrv-w{padding:10px 12px;border-radius:8px;
  background:var(--amber-soft,#FAF1DE);color:var(--amber-ink,#8A6414)}
.nosrv-e{font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--tx2,#8E8E93);margin-top:14px !important}
.modal{background:#fff;border-radius:var(--radius);width:min(760px,100%);max-height:90vh;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.form{padding:16px 20px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.form .wide{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--tx2);
  font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.form input,.form select{border:var(--stroke-w) solid var(--line);border-radius:calc(9px * var(--el));padding:9px 11px;
  font:14px/1.4 inherit;outline:none;background-color:#fff;color:var(--tx);text-transform:none;
  letter-spacing:0;font-weight:400;min-width:0;width:100%}
.form select{padding-right:34px}
.form input:focus,.form select:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}
.form input.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,59,48,.13)}
.pair{display:flex;gap:8px;align-items:center}
.pair .dash{color:var(--tx2)}
.mprev{align-self:end;padding:9px 11px;border-radius:calc(9px * var(--el));font-weight:700;text-align:center;
  border:var(--stroke-w) solid var(--line);background:var(--bg);color:var(--tx2);font-size:14px}
.fbar{display:flex;gap:10px;align-items:center;justify-content:flex-end;
  padding:12px 20px;border-top:var(--stroke-w) solid var(--line);background:#fff}
.err{flex:1;color:var(--red);font-size:13px;font-weight:500}
.hint{font-size:11.5px;color:var(--tx2);font-weight:400;text-transform:none;letter-spacing:0}

/* ======================= МЕРОПРИЯТИЯ =======================
   Сущность описана данными (EV_BASE + свои поля), а не разметкой:
   таблица, календарь и канбан читают один и тот же список полей,
   поэтому новое поле появляется сразу во всех трёх видах. */

/* переключатель вида — слева, там же где у тарифов режим таблицы */
/* Переключатель видов — значками, подписи ушли в подсказки.
   Таблица нажимается дважды: первый раз включает вид, второй — режим таблицы
   (как в Google Таблицах). Поэтому у неё три состояния: обычная, выбранная,
   выбранная с режимом — последняя горит синим. */
/* Блок ростом со строку: 35 снаружи, как поиск и кнопки. Внутри оправа 5,
   кнопки вида по 25 и значки по 15 — так свёрнутый блок сходится в те же 35. */
.vmode{display:flex;gap:5px;background:var(--chip-bg);padding:5px;height:35px;box-sizing:border-box;
  align-items:center;border-radius:calc(12px * var(--el));flex:0 0 auto}
.vmode:empty{display:none}
.vmode button{border:0;background:none;border-radius:calc(7px * var(--el));height:25px;width:25px;cursor:pointer;
  color:#8E8E93;display:flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto}
.vmode button:hover{color:#5A5A5F}
/* Выбранный вид горит синим — и только. Белая подложка занята под режим
   таблицы: она собирает значок, адрес ячейки и отмену в одну плашку, как
   в Гугл-таблицах, и по ней сразу видно, что система в этом режиме. */
.vmode button.on{background:none;color:var(--accent);box-shadow:none}
.vmode button.on:hover{color:var(--accent)}
/* Белая плашка режима: оправа 5, шаг 10, радиус 7 и обводка в полпикселя —
   внутри неё значок и стрелки стоят голыми, без своих подложек, поэтому она
   выходит ростом 25 и вместе с оправой блока даёт те же 35. */
.vsheet{display:flex;align-items:center;gap:10px;padding:5px;height:25px;box-sizing:border-box;
  flex:0 1 auto;min-width:0;background:#fff;border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(7px * var(--el))}
.vsheet button[data-vm]{width:15px;height:15px;border-radius:0;flex:0 0 auto}
.vsheet .modepill{background:none;height:auto;padding:0;border-radius:0;min-width:0;gap:10px}
.vsheet .addr{padding:0}
/* в полосе от режима остаётся один значок — плашке там нечего показывать */
body.narrow .vsheet{background:none;border-color:transparent;height:auto;padding:0}
body.narrow .vsheet button[data-vm]{width:25px;height:25px}
/* Размер = размеру окна значка: тело выходит ровно 15 px у всех трёх */
.vmode svg{width:15px;height:15px;display:block;fill:none}
.vmode button[data-vm="calendar"] svg{height:16px}

/* Календарь и доска — во всю ширину, как таблица: у доски свои поля заданы
   на .kan, календарю они не нужны вовсе. Лента — список карточек, ей поля
   как у прочих списков. */
#altWrap{padding:0}
#altWrap:has(.feed-list){padding:0 var(--pad)}
#altWrap[hidden]{display:none}

/* --- таблица --- */
.etable{table-layout:fixed;width:100%}
.etable td{white-space:nowrap}
.etable .cell{cursor:default}
.etable tbody tr{cursor:pointer}
.etable tr.past td{color:#8A8A8E}
.etable .cell.blank{color:#C7C7CC}
.echip{display:inline-block;border-radius:calc(7px * var(--el));padding:2px 9px;max-width:100%;
  font:500 12px/16px "SF Pro Rounded",Inter,-apple-system,sans-serif;
  overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
/* Плашка связи: фото и название той записи, на которую ссылаемся. */
.reffv.many{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.refchip{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-width:0;
  background:var(--bg);border-radius:calc(9px * var(--el));padding:2px 9px 2px 3px;
  color:var(--accent-d);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.refchip img{width:19px;height:19px;border-radius:50%;object-fit:cover;flex:0 0 19px}
.refchip:not(:has(img)){padding-left:9px}
.refchip:hover{background:var(--accent-soft)}
/* Плашка размноженного поля: два телефона, три метки. Тот же вид, что
   и у плашки связи, только без фото и без перехода в чужую карточку. */
.fv.many{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.mchip{display:inline-flex;align-items:center;max-width:100%;min-width:0;
  background:var(--bg);border-radius:calc(9px * var(--el));padding:2px 9px;
  color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.mchip{color:var(--accent-d);text-decoration:none}
a.mchip:hover{background:var(--accent-soft)}
.mchip .phv,.mval .phv{cursor:pointer}
.mstat{display:inline-flex;align-items:center}
/* Набор связей прямо в поле: плашки и курсор в одной строке, как адресаты
   в почте. Ввод тянется на остаток строки и переносится вместе с плашками. */
/* Отступы даёт сама ячейка — свои у полосы с плашками не нужны: их сумма
   раздвигала строку вдвое, стоило нажать на поле. Растёт она только по
   содержимому, когда плашки перестают помещаться в строку. */
.tokin{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:0;
  box-sizing:border-box}
.tokin .refchip{cursor:default}
.tokx{border:0;background:none;padding:0;margin-left:4px;cursor:pointer;color:#8E8E93;
  display:inline-flex;align-items:center;flex:0 0 auto}
.tokx svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}
.tokx:hover{color:var(--red)}
/* Ввод занимает остаток строки, но не требует себе места: с широким минимумом
   он срывался на вторую строку и удваивал высоту поля на пустом месте. */
.tokq{border:0;outline:none;background:none;flex:1 1 24px;min-width:24px;
  font:400 var(--cfs)/1.4 var(--cff);color:var(--tx);padding:0;height:1.4em}
/* У поля с несколькими целями подсказка подписана сущностью: одинаковые
   названия в разных сущностях иначе не различить. */
.tokent{float:right;font-style:normal;color:#8E8E93;font-size:11px;margin-left:10px}
/* Значения размноженного поля — строка на значение, обычным текстом.
   В карточке они стоят столбиком: так видно, где кончается одно и начинается
   другое, и не нужно ни подложек, ни разделителей.
   Правило именное: у плашек связи свой контейнер с теми же словами в классе,
   и общее правило разворачивало их в столбик по центру. */
.fv.many.lines{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.fv.many.chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.mval{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Одно значение — обычный текст, ничем не отмеченный. Значений несколько —
   каждое подчёркнуто точками: видно, где кончается одно и начинается другое,
   а лишнего цвета и подложек по-прежнему нет. Телефон и ссылка отмечают себя
   сами — им второй черты не нужно. */
.pack .mval:not(:has(.phv)):not(:has(a)){border-bottom:1px dashed var(--stroke)}
/* В ячейке таблицы места на столбик нет — значения идут в строку. */
.cell.mcell .mval + .mval::before{content:', ';color:var(--tx2)}
.cell.mcell{display:block;white-space:nowrap}
.cell.mcell .mval{display:inline}
.cell.mcell{display:flex;align-items:center;gap:4px;overflow:hidden}
.cell.mcell .stat{flex:0 0 auto}
.esup{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);color:#1E93C6;
  border-radius:calc(7px * var(--el));padding:2px 8px;margin:0 4px 0 0;max-width:100%;
  font:500 12px/16px "SF Pro Text",-apple-system,sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esup:hover{background:#D9EDFA}
.esup .sx{border:0;background:none;padding:0;cursor:pointer;color:#8E8E93;display:flex}
.esup .sx svg{width:11px;height:11px;fill:currentColor}
.esup .sx:hover{color:var(--red)}

/* --- календарь --- */
/* Календарь на два столбца: слева ближайшее по времени, справа занятость
   месяца. Список отвечает на «что дальше», сетка — на «как идёт месяц». */
.cal{display:flex;height:100%;background:var(--panel);min-height:0}
.calmain{flex:1;min-width:0;display:flex;flex-direction:column}
/* Список календарей — над расписанием: сначала «что показываем», потом «что
   ближайшее». Строка узкая: галочка, цвет, название и, если дат несколько,
   выбор даты. */
/* Список календарей не должен съедать расписание: у кого-то воронок пять,
   а у кого-то полсотни. Дальше восьми строк он прокручивается внутри себя. */
.calsubs{flex:0 0 auto;max-height:min(38vh, 244px);overflow:auto;background:#fff;
  padding:10px;border-bottom:var(--stroke-w) solid var(--stroke)}
/* Названия блоков слева — те же, что у блоков в карточке: одна вещь названа
   одинаково, где бы она ни встретилась. */
.cs-h{font:600 14px/20px "SF Pro Rounded",Inter,-apple-system,sans-serif;color:#000;
  margin-bottom:6px}
.cs-row{display:flex;align-items:center;gap:8px;padding:3px 0;min-width:0}
/* Галочка — та же, что во всех списках системы: своя рамка в полволоска
   общего цвета, а не браузерная. */
.cs-on{display:flex;flex:0 0 auto}
.cs-on input{appearance:none;-webkit-appearance:none;flex:0 0 15px;width:15px;height:15px;
  border:var(--stroke-w) solid var(--stroke);border-radius:calc(4px * var(--el));
  background:#fff;cursor:pointer;margin:0;position:relative}
.cs-on input:checked{background:var(--accent);border-color:var(--accent)}
.cs-on input:checked::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Кружок цвета — такой же, как у значений списков. */
.cs-dot{width:12px;height:12px;flex:0 0 12px;border:0;border-radius:50%;cursor:pointer;padding:0}
.cs-dot:hover{transform:scale(1.25)}
.cs-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 var(--fs)/18px "SF Pro Text",-apple-system,Inter,sans-serif;color:var(--tx)}
/* Под стрелку списка общий стиль отводит тридцать четыре пикселя — здесь это
   треть ширины, и название даты обрывалось на середине. Оставляем ровно
   столько, сколько занимает сама стрелка. */
/* Ширину список берёт по самому длинному своему пункту, а не по выбранному:
   у короткой «Даты» между надписью и стрелкой зияла дыра. Прижимаем надпись
   к стрелке — тогда пусто остаётся слева, где его никто не замечает. */
.cs-one{padding-right:0;cursor:default;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cs-k{flex:0 1 auto;min-width:0;max-width:150px;border:0;background-color:transparent;
  cursor:pointer;color:#8E8E93;padding:0 12px 0 0;background-size:9px;
  background-position:right center;text-align:right;
  font:400 11.5px/16px "SF Pro Text",-apple-system,Inter,sans-serif}
/* Слева две части: закреплённый список календарей и прокручиваемое
   расписание. Раньше они прокручивались вместе, и список уезжал наверх —
   особенно заметно после нажатия: расписание подводит себя к сегодняшнему
   дню и утаскивало список за собой. */
.calside{flex:0 0 var(--calside);min-width:0;display:flex;flex-direction:column;overflow:hidden;
  border-right:var(--stroke-w) solid var(--line);background:#EFEFF3}
/* Главный календарь: колонка календарей и расписания занимает всю высоту
   рабочей области — над ней пустовала полоса в шесть десятков пикселей.
   Заголовок, поиск и «Создать» сдвигаются вправо, за колонку. */
body.calpage .main{position:relative}
body.calpage .top{padding-left:calc(var(--calside) + 20px)}
body.calpage .cal{padding-left:var(--calside)}
body.calpage .cal .calside{position:absolute;left:0;top:0;bottom:0;width:var(--calside);
  /* Колонка лежит поверх .top (он растягивается на всю ширину, а его
     содержимое просто отступает под колонку паддингом) — числовой z-index
     здесь обгоняет .top, у которого своего z-index нет (он не коробка
     наложения, см. его же комментарий): иначе тень шапки красится поверх
     списка календарей. Число небольшое и намеренно: колонка должна погаснуть
     вместе со списком, когда открыта панель «Оформление» и её затемнение
     (.popscrim, z-index 40) — выше него подниматься незачем. */
  z-index:4}
/* Колонку отсчитываем от всей рабочей области, а не от места под верхней
   строкой: иначе она начинается там же, где раньше, и смысл теряется. */
body.calpage #altWrap{position:static}
.calagenda{flex:1 1 auto;min-height:0;overflow:auto}
/* Заголовок расписания стоит над прокруткой, а не внутри неё: изнутри
   полоса прокрутки шла поверх него и налезала на надпись. */
.calside > .aghead{position:static;flex:0 0 auto}
/* Строка расписания — такой же элемент списка, как в других видах: белая
   на общем фоне. В полосе рядом с карточкой список не должен менять вид. */
.agit{padding:var(--row) 16px;background:#fff;cursor:pointer;
  border-bottom:var(--stroke-w) solid var(--stroke);
  display:flex;flex-direction:column;gap:8px}
.agit:hover{background:color-mix(in srgb, var(--accent) 5%, #fff)}
.agit.today{box-shadow:inset 3px 0 0 var(--accent)}
.agit.on{background:var(--accent-soft)}
/* в полосе расписание занимает её целиком и живёт по своим правилам списка */
body.narrow #listPane .agit{padding:12px 14px 14px}
/* Шапка расписания: подпись и порядок. Закреплена — порядок нужен и на
   середине списка, а не только у начала. */
.aghead{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;
  padding:0 16px;height:38px;background:#fff;
  border-bottom:var(--stroke-w) solid var(--stroke);
  font:600 14px/20px "SF Pro Rounded",Inter,-apple-system,sans-serif;color:#000}
body.narrow #listPane .aghead{padding:0 14px}
.agsort{margin-left:auto;display:flex;align-items:center;gap:5px;
  padding:4px 9px 4px 6px;border:0;border-radius:calc(8px * var(--el));
  background:#EFEFF3;color:#3A3A3C;cursor:pointer;
  font:500 12px/16px "SF Pro Text",-apple-system,Inter,sans-serif}
.agsort:hover{background:#E5E5EA}
.agsort svg{width:13px;height:13px;fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.agsort svg.up{transform:rotate(180deg)}
/* Дата и время — заголовок строки: по ним ищут глазами, поэтому крупно и чёрным. */
.ag-d{font:600 15px/20px "SF Pro Rounded","SF Pro Text",-apple-system,sans-serif;color:#000}
.ag-d b{font-weight:600;margin-left:8px}
.ag-r{display:flex;align-items:center;gap:8px;min-width:0}
.ag-chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:2px 9px;border-radius:calc(9px * var(--el));
  font:500 12.5px/17px "SF Pro Text",-apple-system,Inter,sans-serif}
.ag-v{margin-left:auto;flex:0 0 auto;color:#8E8E93;
  font:400 12.5px/17px "SF Pro Text",-apple-system,Inter,sans-serif}
.ag-who{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  font:400 12.5px/17px "SF Pro Text",-apple-system,Inter,sans-serif;color:#3A3A3C}
.ag-who img,.ag-who i{width:18px;height:18px;flex:0 0 18px;border-radius:50%;object-fit:cover;
  background:#EFEFF3;color:#8E8E93;font:600 9px/18px Inter,sans-serif;text-align:center;
  font-style:normal}
.agempty{padding:20px 14px;color:#AEAEB2;font:400 13px/1.5 var(--cff)}
/* Полоса с календарём: миниатюра закреплена сверху, прокручивается список. */
body.narrow.aslist #listPane:has(.mm){display:flex;flex-direction:column;overflow:hidden}
.agscroll{flex:1;min-height:0;overflow:auto}
/* Миниатюра месяца в полосе: только числа и точки занятости. */
.mm{flex:0 0 auto;background:#fff;padding:10px 12px 12px;
  border-bottom:var(--stroke-w) solid var(--stroke)}
.mm-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mm-h b{font:600 14px/18px "SF Pro Rounded",Inter,-apple-system,sans-serif}
.mm-h button{width:24px;height:24px;border:0;background:none;cursor:pointer;color:#8E8E93;
  display:flex;align-items:center;justify-content:center;border-radius:calc(7px * var(--el))}
.mm-h button:hover{background:#EFEFF3;color:#000}
.mm-h svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.mm-w,.mm-g{display:grid;grid-template-columns:repeat(7,1fr)}
.mm-w i{text-align:center;font:500 10px/16px Inter,sans-serif;color:#AEAEB2;font-style:normal}
.mmd{position:relative;border:0;background:none;cursor:pointer;padding:0;height:26px;
  font:500 12px/26px "SF Pro Text",-apple-system,Inter,sans-serif;color:#3A3A3C;
  border-radius:calc(8px * var(--el))}
.mmd:hover{background:#EFEFF3}
.mmd.oth{color:#C7C7CC}
.mmd.today{background:var(--accent);color:#fff}
.mmd.has::after{content:'';position:absolute;left:50%;bottom:3px;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:var(--accent)}
.mmd.today.has::after{background:#fff}
/* Окошко «завести запись на этот день»: дата уже выбрана нажатием, спрашиваем
   только время — остальное человек допишет в карточке. */
.picker.calnew{width:210px;padding:12px;gap:10px}
.cn-h{font:600 14px/18px "SF Pro Rounded",Inter,-apple-system,sans-serif;color:#000}
.cn-t{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:400 13px/17px var(--cff);color:#3A3A3C}
.cn-t input{border:var(--stroke-w) solid var(--stroke);border-radius:calc(8px * var(--el));
  padding:4px 7px;font:inherit;outline:none;background:#fff}
.cn-t input:focus{border-color:var(--accent)}
.cn-go{width:100%;height:32px;justify-content:center}
.calday{cursor:pointer}
/* Шапка календаря (макет 38632214): строка 30 высотой, отступы и зазоры по 10.
   Период — стрелки и месяц без рамки, они читаются как одна подпись; в рамке
   только то, что открывает выбор: масштаб и возврат к сегодня. */
.calbar{display:flex;align-items:center;gap:10px;padding:10px;flex:0 0 auto;
  border-bottom:var(--stroke-w) solid var(--line)}
.calnav{display:flex;align-items:center;gap:10px;height:30px}
.calnav b{min-width:96px;text-align:center;color:#000;
  font:600 14px/20px "SF Pro Rounded","SF Pro Text",-apple-system,sans-serif}
.calnav button{width:20px;height:20px;border:0;background:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#000;border-radius:6px}
.calnav button:hover{color:var(--accent)}
.calpill{height:30px;padding:5px 10px;display:flex;align-items:center;gap:5px;
  border:var(--stroke-w) solid var(--stroke);background:#fff;color:#000;cursor:pointer;
  border-radius:calc(9px * var(--el));
  font:400 12px/20px "SF Pro Text",-apple-system,Inter,sans-serif}
.calpill:hover{background:#F7F7FA}
.calnav svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Ключ ведёт в настройку страницы: у календаря там поле-дата и состав события. */
.calcfg{margin-left:auto;width:30px;height:30px;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:calc(9px * var(--el))}
.calcfg:hover{background:#F2F2F7}
.calcfg svg{width:18px;height:18px;fill:#8A8A8E}
.calcfg:hover svg{fill:var(--tx)}
.calby{margin-left:auto;color:#8A8A8E;font:400 12px/1.3 "SF Pro Text",-apple-system,sans-serif}
.calby + .calcfg{margin-left:0}
.calby b{color:var(--tx);font-weight:600}

/* Часовая сетка недели и дня. Сутки показываем целиком и прокручиваем к делам:
   обрезать края — терять ранние и ночные записи. */
.tghead{display:grid;flex:0 0 auto;background:var(--thead-bg);
  border-bottom:var(--stroke-w) solid var(--line)}
.tgh{padding:7px 10px;display:flex;align-items:baseline;gap:6px;
  border-left:var(--stroke-w) solid var(--line2)}
.tgh i{font:600 12px/16px "SF Pro Text",-apple-system,sans-serif;color:#8A8A8E;font-style:normal}
.tgh.we i{color:#C0424A}
.tgh b{font:600 15px/18px "SF Pro Rounded",Inter,-apple-system,sans-serif}
.tgh.today b{background:var(--accent);color:#fff;border-radius:50%;
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.tgcap{padding:6px 8px;color:#AEAEB2;text-align:right;
  font:400 11px/14px "SF Pro Text",-apple-system,sans-serif}
.tgad{display:grid;flex:0 0 auto;max-height:96px;overflow:auto;
  border-bottom:var(--stroke-w) solid var(--line)}
.tgadc{padding:5px 6px;display:flex;flex-direction:column;gap:3px;min-width:0;
  border-left:var(--stroke-w) solid var(--line2);cursor:pointer}
.tgbody{display:grid;flex:1;min-height:0;overflow:auto}
.tgtimes{border-right:var(--stroke-w) solid var(--line2)}
/* Подпись стоит под своей чертой, а не над ней: над верхней чертой места нет,
   и первый час обрезался бы краем окна. */
.tgt{height:44px;padding:3px 8px 0;text-align:right;color:#AEAEB2;
  font:400 11px/1 "SF Pro Text",-apple-system,sans-serif}
/* Часовые линии — обычные элементы со своим строуком: градиентом та же
   линия ложилась на разные доли пикселя и выглядела то толще, то тоньше. */
.tgc{position:relative;height:1056px;cursor:pointer;background:#fff;
  border-left:var(--stroke-w) solid var(--line2)}
.tgc:hover{background:#FCFDFF}
/* Фон от расширений (окна приёма и т.п.): полупрозрачная полоса под событиями, мышь пропускает — нажатие по дню работает как прежде. */
.tgbg{position:absolute;left:0;right:0;opacity:.16;pointer-events:none}
/* Свободный слот расписания: рамка цвета расписания с началом времени, ниже событий и мыши не мешает. */
.tgbg.tgsl{opacity:1;left:3px;right:3px;border:1.5px dashed var(--c);border-radius:6px;background:color-mix(in srgb,var(--c) 9%,transparent);font:500 11px/1.2 var(--font-body);color:var(--c);padding:2px 5px;overflow:hidden}
.tgbg.tgsl span{filter:brightness(.7)}
.tgl{display:block;height:44px;border-bottom:var(--stroke-w) solid var(--line2);
  pointer-events:none}
.tgev{position:absolute;border-radius:calc(6px * var(--el));padding:3px 7px;overflow:hidden;
  font:500 11.5px/15px "SF Pro Text",-apple-system,sans-serif;
  white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.tgev b{font-weight:600;opacity:.75;margin-right:3px}
.tgev:hover{filter:brightness(.95)}
.tgev.draft{background:#fff!important;color:#3A3A3C!important;
  box-shadow:0 0 0 var(--stroke-w) var(--stroke) inset,0 2px 6px rgba(0,0,0,.10)}

/* Год: двенадцать месяцев подряд, занятые дни помечены точкой. Отвечает на
   «когда вообще было густо», а не «что именно в этот день». */
.calyear{flex:1;overflow:auto;padding:18px 20px;display:grid;gap:20px 22px;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));align-content:start}
.ym > b{display:block;margin:0 0 8px 2px;cursor:pointer;
  font:600 14px/18px "SF Pro Rounded",Inter,-apple-system,sans-serif}
.ym > b:hover{color:var(--accent)}
.ym-w,.ym-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ym-w i{text-align:center;font-style:normal;color:#AEAEB2;
  font:600 9.5px/16px "SF Pro Text",-apple-system,sans-serif}
.ymd{height:22px;border:0;background:none;border-radius:6px;cursor:pointer;position:relative;
  color:#3A3A3C;font:400 11.5px/22px "SF Pro Text",-apple-system,sans-serif;padding:0}
.ymd:hover{background:#F2F2F7}
.ymd.has{font-weight:600;color:var(--tx)}
.ymd.has::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--accent)}
.ymd.today{background:var(--accent);color:#fff;font-weight:600}
.ymd.today::after{background:#fff}
.calhead{display:grid;grid-template-columns:repeat(7,1fr);flex:0 0 auto;background:var(--thead-bg);
  border-bottom:var(--stroke-w) solid var(--line)}
.calhead div{padding:7px 10px;color:#8A8A8E;text-align:left;
  font:600 12px/16px "SF Pro Text",-apple-system,sans-serif}
.calhead div.we{color:#C0424A}
.calgrid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);
  grid-auto-rows:minmax(96px,1fr);overflow:auto}
.calday{border-right:var(--stroke-w) solid var(--line2);border-bottom:var(--stroke-w) solid var(--line2);
  padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
.calday:nth-child(7n){border-right:0}
.calday.oth{background:#FBFBFC}
.calday .dn{font:600 12px/17px "SF Pro Text",-apple-system,sans-serif;color:#3A3A3C;
  width:17px;height:17px;border-radius:50%;text-align:center;flex:0 0 auto}
.calday.oth .dn{color:#C7C7CC}
.calday.today .dn{background:var(--accent);color:#fff}
/* Сегодняшняя ячейка — вся, а не только число: системный цвет, полупрозрачный,
   поэтому ложится и на белую ячейку, и на «чужой» месяц, и в любой теме. */
.calday.today,.calday.oth.today{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tgc.today{background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* Плашка со счётчиком: текст жмётся и обрезается, число остаётся целым —
   иначе при длинном названии обрезалось бы как раз оно. */
.calev{border-radius:calc(6px * var(--el));padding:2px 6px;cursor:pointer;min-width:0;
  font:500 11.5px/15px "SF Pro Text",-apple-system,sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:4px}
.calev-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.calev:hover{filter:brightness(.95)}
.calmore{border:0;background:none;padding:1px 6px;text-align:left;cursor:pointer;color:#8A8A8E;
  font:500 11px/14px "SF Pro Text",-apple-system,sans-serif}
.calmore:hover{color:var(--accent)}

/* --- канбан (макет 38631907: колонка 288, отступы 18, зазор 10) ---
   Колонка — цветная шапка со счётчиком и белый список карточек под ней.
   Карточки разделены линией, а не зазором: так колонка читается как один список. */
/* Поля у доски те же, что у таблицы и списков: свои 18 по бокам сдвигали
   её относительно соседних видов, и при переключении содержимое прыгало. */
.kan{display:flex;gap:10px;padding:var(--pad);height:100%;overflow:auto;align-items:flex-start}
/* Столбец доски — это блок, как карточка и как раздел: скругление берёт
   у «Скругления блоков», а не у элементов. */
/* Тень — той же переменной, что и у остальных разделов (--shadow-sec):
   в обычной теме её нет, в «Олд Мани» появляется сама, без своего кода. */
.kcol{flex:0 0 288px;border-radius:var(--radius);overflow:hidden;max-height:100%;
  display:flex;flex-direction:column;background:#fff;
  border:var(--stroke-w) solid var(--stroke);box-shadow:var(--shadow-sec)}
.kcol.over .klist{background:var(--accent-soft)}
/* Карточек больше, чем помещается на экран, — столбец снизу не замыкаем:
   он уходит за край, и сразу видно, что список продолжается. Замкнутый низ
   означает ровно одно: это все карточки. */
.kcol.cut{max-height:calc(100% + 18px);margin-bottom:-18px;border-bottom:0;
  border-bottom-left-radius:0;border-bottom-right-radius:0}
.khead{display:flex;align-items:center;gap:8px;padding:calc(var(--row) + 1px) 16px;flex:0 0 auto}
.khead .kt{font:700 14px/18px "SF Pro Text",-apple-system,Inter,sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khead .kn{margin-left:auto;font:400 13px/18px "SF Pro Text",-apple-system,sans-serif;opacity:.75}
/* Блок, а не флекс: у флекс-элемента браузер не считается с заявленной
   высотой, и карточка за экраном схлопывалась до одних отступов — двадцать
   пикселей вместо восьмидесяти. Список от этого «рос» под рукой во время
   прокрутки, и ползунок дёргался. */
.klist{display:block;overflow:auto;min-height:34px;background:#fff}
/* Карточка по макету 252-4483: отступы 10, между заголовком и параметрами 15,
   между параметрами 5. Слева необязательное фото ответственного 35×35 r13. */
.kcard{padding:var(--row);cursor:pointer;display:flex;gap:10px;align-items:flex-start;
  border-bottom:var(--stroke-w) solid var(--stroke)}
.klist .kcard:last-child{border-bottom:0}
.kcard:hover{background:#FAFBFD}
.kcard.drag{visibility:hidden}
/* Доска «Задач» — те же облачки, что и в ленте и в чате, разложенные по
   столбцам этапа. Селектор точнее, чем .kcard, — правит только эти карточки
   и не зависит от того, чьё правило в файле раньше, .kcard или .feed-card. */
.kcol.taskcol{flex:0 0 420px}
/* Слева — 5px до аватара; само расстояние аватар–карточка даёт gap
   самого .fd-chain (5px, тот же класс, что и в чате) — карточке слева
   свой отступ давать не нужно. --cfs/--cff — тут, а не только внутри
   карточки: подпись дня (.fd-day) стоит рядом с карточкой, а не внутри
   неё, и без своих переменных бралась системным шрифтом покрупнее. */
/* Низ побольше (23 = 8 + запас в 15) — не ради отступа как такового, а
   чтобы у sticky-аватара (bottom:0) было куда «прилипнуть», не доходя
   вплотную до самого края столбца (см. .feed-chain > .fd-av выше). */
.kcol.taskcol .klist{padding:8px 0 23px 5px;--cfs:14px;--cff:var(--font-body)}
/* Справа побольше: у .klist свой ползунок прокрутки, и вплотную рамка
   карточки уходила под него. Отступ снизу — 0: margin-bottom у самой
   карточки раздвигал .fd-chain-l ниже, чем её последняя карточка, и
   аватар (align-items:flex-end) слипался не с карточкой, а с этой
   пустотой под ней. Между карточками одной цепочки отступ даёт margin-
   top у второй и следующих (правило ниже) — оно не трогает нижний
   край цепочки и не портит выравнивание. */
.kcard.tkcard{display:block;padding:0;margin:0 18px 0 0;border-bottom:0;
  background:#fff;border:1.5px solid var(--accent);border-radius:calc(13px * var(--el));
  overflow:hidden}
.feed-chain .kcard.tkcard + .kcard.tkcard{margin-top:10px}
/* .klist .kcard:last-child{border-bottom:0} (общее для доски правило,
   гасящее черту-разделитель у последней карточки списка) специфичнее
   одного класса .tkcard и отбирало нижнюю грань у одиночных карточек —
   а у облачка задачи снизу должна быть целая рамка, не разделитель. */
.klist .kcard.tkcard:last-child{border-bottom:1.5px solid var(--accent)}
.kcard.tkcard:hover{background:#fff}
.kcard.tkcard .fd-tcard{padding:10px 13px}
/* Подпись дня — тот же .fd-day, что и в чате: свои top/margin не задаём,
   те же правила (top:0, margin:15px 0, у первой в списке — margin-top:0). */
/* Незаполненное место — название поля серым: видно, чего не хватает. */
.kc-p.none,.kc-title.none{color:#C0C0C5}
/* Поле-список — своей плашкой, как в таблице и в карточке. */
.kc-p.chip{border-radius:999px;padding:1px 8px;align-self:flex-start}
/* Правая половина строки — по правому краю, плашки в том числе: иначе плашка
   висит посреди карточки, а текст рядом с ней прижат к краю. */
.kc-h.r .kc-p.chip{align-self:flex-end}
.kc-ava{flex:0 0 35px;width:35px;height:35px;border-radius:calc(13px * var(--el));overflow:hidden;
  background:#EFEFF3;color:#8E8E93;display:flex;align-items:center;justify-content:center;
  font:600 12px/1 "SF Pro Text",-apple-system,sans-serif;font-style:normal}
.kc-ava img{width:100%;height:100%;object-fit:cover;display:block}
.kc-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:15px}
.kc-top{display:flex;align-items:center;gap:5px;min-width:0}
.kc-title{min-width:0;font:500 14px/16.7px "SF Pro Rounded",Inter,-apple-system,sans-serif;
  color:#000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-flag{flex:0 0 13px;width:13px;height:13px;display:block;fill:#FFE030}
.kc-badge{flex:0 0 auto;min-width:17px;height:17px;border-radius:calc(10px * var(--el));background:var(--accent);
  color:#fff;font:300 12px/17px Inter,-apple-system,sans-serif;text-align:center;
  padding:0 5px;box-sizing:border-box}
/* Два столбца параметров прижаты к низу: слева их бывает больше, чем справа */
/* Строки карточки: пара мест в строке делит место поровну, зазор десять
   пикселей. Если в паре одно место — оно занимает всю строку. */
.kc-par{display:flex;flex-direction:column;gap:5px}
.kc-row{display:flex;align-items:flex-end;gap:10px}
.kc-h{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.kc-h.r{align-items:flex-end;text-align:right}
.kc-h.full{flex:1 1 100%}
.kc-col{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 0}
.kc-col.r{align-items:flex-end;text-align:right}
.kc-p{font:400 12px/14.5px Inter,-apple-system,sans-serif;color:#8E8E93;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.kc-p.dark{color:#000}
.kempty{padding:16px;text-align:center;color:#C7C7CC;
  font:400 12.5px/16px "SF Pro Text",-apple-system,sans-serif}

/* --- карточка мероприятия и связанные списки --- */
.evrow{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
  border-bottom:var(--stroke-w) solid var(--stroke)}
.evrow:last-child{border-bottom:0}
.evrow:hover{background:color-mix(in srgb, var(--accent) 2.5%, #fff)}
.evrow .ed{flex:0 0 82px;color:#8E8E93;font:500 var(--cfs)/1.3 var(--cff)}
.evrow .et{flex:1;min-width:0;font:400 var(--cfs)/1.3 var(--cff);word-break:break-word}
.dback{border:0;background:none;color:var(--accent);cursor:pointer;padding:0 0 8px;
  font:500 12px/16px "SF Pro Text",-apple-system,sans-serif;display:flex;align-items:center;gap:5px}
.dback svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.fv.chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fv .addv{border:1px dashed var(--stroke);background:none;border-radius:calc(7px * var(--el));padding:1px 9px;cursor:pointer;
  color:#8E8E93;font:500 12px/16px "SF Pro Text",-apple-system,sans-serif}
.fv .addv:hover{border-color:var(--accent);color:var(--accent)}

/* --- настройка отображения --- */
.set-view .frow{align-items:center}
.set-view .fv{padding:var(--row) 10px}
.set-view select{width:100%;height:29px;border:var(--stroke-w) solid var(--line);border-radius:calc(9px * var(--el));
  background-color:#fff;padding:0 30px 0 9px;font:400 12px/1 "SF Pro Text",-apple-system,sans-serif}
.newf{display:flex;gap:6px;padding:8px}
.newf input{flex:1;min-width:0;height:29px;border:var(--stroke-w) solid var(--line);border-radius:calc(9px * var(--el));
  padding:0 9px;font:400 12px/1 "SF Pro Text",-apple-system,sans-serif}
.newf select{height:29px;border:var(--stroke-w) solid var(--line);border-radius:calc(9px * var(--el));background-color:#fff;
  padding:0 28px 0 9px;font:400 12px/1 "SF Pro Text",-apple-system,sans-serif}
.newf button{height:29px;padding:0 12px;border:0;border-radius:calc(9px * var(--el));background:var(--accent);
  color:#fff;cursor:pointer;font:600 12px/1 "SF Pro Text",-apple-system,sans-serif}

/* --- наладка сущности --- */
/* Строка поля в настройке карточки (макет 922-30093 / 922-30437).
   В правке общего контейнера нет: строки сами складываются в один блок —
   у верхней скруглены верхние углы, у нижней кнопки нижние, у середины 2. */
.fcard.setmode{background:none;border:0;border-radius:0;overflow:visible;
  display:flex;flex-direction:column;gap:5px}
.frow.fedit{display:flex;align-items:stretch;padding:0;margin:0;
  background:#FBFBFC;border:var(--stroke-w) solid var(--stroke);border-radius:2px;overflow:hidden}
.fcard.setmode .frow.fedit:first-child{border-radius:var(--radius-in) var(--radius-in) 2px 2px}
/* Рядом с фото верхний левый угол первой строки скруглять нельзя: колонка
   фото и строки полей складываются в один блок, и угол уже занят ею. */
.fsec-b.withphoto .fcard.setmode .frow.fedit:first-child{border-radius:2px var(--radius-in) 2px 2px}
/* Кнопка стоит под всем блоком, вместе с колонкой фото, и тянется во всю
   его ширину — поэтому живёт рядом с .fsec-b, а не внутри списка полей. */
.fsec > .frow.addf{border-radius:2px 2px var(--radius-in) var(--radius-in);background:#F2F2F7;
  border:var(--stroke-w) solid var(--stroke);justify-content:center;padding:10px 13px;
  /* у раздела свой отступ между частями в 7px, а строки блока стоят через 5 —
     подрезаем, чтобы кнопка стояла на том же расстоянии, что и поля */
  margin:-2px 0 0}
.fsec > .frow.addf .fadd{color:#007AFF;background:none;
  font:400 14px/20px "SF Pro Text",-apple-system,Inter,sans-serif}
/* перетаскивание строк: строку ведёт двойник под курсором, а место вставки
   показывает синяя черта — так видно, куда поле встанет. */
/* Место, откуда вещь взяли, остаётся пустым — это и есть та дырка, в которую
   она встанет. Показывать здесь же полупрозрачный дубль незачем: под курсором
   уже едет он сам. */
.frow.fedit.dragging{visibility:hidden}
/* Взятая вещь едет непрозрачной: сквозь неё не должно просвечивать то,
   над чем она пролетает. */
.fghost{position:fixed;z-index:120;pointer-events:none;background:#fff;
  border-radius:calc(9px * var(--el));box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden}
/* Ни курсора, ни запрета выделения на всей странице: обе эти вещи
   наследуются, и браузер пересчитывает стиль каждого элемента под ними —
   на канбане в полторы тысячи карточек это заметная задержка в момент,
   когда карточку только взяли. Выделение и так не появляется: нажатие
   отменено, а что вещь взяли — видно по ней самой. */
/* Соседи расступаются, а не перепрыгивают: движение объясняет, что вещь
   встанет именно сюда. Сам переход навешивается на те немногие элементы,
   которые и правда едут: правило в таблице стилей заставило бы браузер
   пересчитать стиль всех полутора тысяч карточек канбана — полсотни
   миллисекунд в момент, когда человек только взялся за карточку. */

/* Ячейки стоят вплотную, а разделяют их не рамки, а просветы в полволоска:
   рамка живёт у края ячейки и на переносе строки исчезает, просвет же виден
   всегда — и между соседями, и между рядами. Поэтому линии сетки рисует фон
   контейнера, проглядывающий в эти просветы. */
.fe-cell{display:flex;align-items:center;gap:10px;padding:var(--row) 10px;min-width:0;
  background:#fff;flex:1 1 118px}
/* Все параметры поля — одним шрифтом: SF Pro, обычное начертание, курсив.
   Курсив здесь не украшение, а признак: это настройка, а не значение.
   Название поля и его ключ остаются прямыми — они и есть данные. */
.fe-line .fe-cell:not(.fe-name):not(.fe-id),
.fe-line .fe-cell:not(.fe-name):not(.fe-id) select,
.fe-line .fe-cell:not(.fe-name):not(.fe-id) input,
.fe-line .fe-cell:not(.fe-name):not(.fe-id) button{
  font-family:"SF Pro Text",-apple-system,Inter,sans-serif;font-weight:400;font-style:italic}
/* крайние контейнеры: слева перенос и тумблер, справа ключ и удаление */
.fe-ctl,.fe-id{flex:0 0 auto;align-self:stretch;padding:var(--row) 10px;background:#FBFBFC}
.fe-ctl{border-right:var(--stroke-w) solid var(--stroke)}
.fmove{width:8px;height:13px;flex:0 0 8px;color:#BDBDC1;cursor:grab;display:block}
.fmove:active{cursor:grabbing}
.fe-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-self:stretch;
  background:var(--stroke)}
/* Сдвиг автодаты: «сегодня [30] дн.» — это один параметр, поэтому подписи
   живут внутри своей ячейки и жмутся к числу, а не растекаются по строке. */
.fa-shift{gap:6px}
.fa-k{color:#8E8E93;font:italic 400 11.5px/16px "SF Pro Text",-apple-system,Inter,sans-serif;
  white-space:nowrap}
.fa-n{width:52px;height:29px;border:var(--stroke-w) solid var(--stroke);
  border-radius:calc(9px * var(--el));padding:0 8px;text-align:center;
  font:400 12px/1 "SF Pro Text",-apple-system,Inter,sans-serif;color:var(--tx)}
.fa-n:focus{outline:none;border-color:var(--accent)}
/* Строка параметров. Их бывает много — часы, период, правило автодаты,
   вид результата у формулы, — и в один ряд они не помещаются. Тогда ряд
   продолжается следующей строкой, разделённой чертой: ячейки те же и той же
   высоты, порядок — слева направо, сверху вниз. */
/* Все линии внутри строки — одного рода: просвет в полволоска, сквозь который
   виден фон. Рамками их рисовать нельзя: рамка живёт у края ячейки, и на
   перенесённом ряду обрывалась посреди строки огрызком. Поэтому ряд не
   переносится вовсе — параметры, которые в него не помещаются, уходят
   следующей строкой целиком, и каждая линия идёт от края до края. */
.fe-line{display:flex;align-items:stretch;min-width:0;flex:1 1 auto;
  background:var(--stroke)}
/* Черту между ячейками рисует рамка, а не просвет между ними. Просвет в пол-
   волоска — это меньше половины настоящего пикселя: на одних границах он
   попадал в пиксель и рисовался, на других округлялся в ноль и пропадал —
   у названия поля черта исчезала совсем. Рамку браузер в таком случае всё
   равно проводит волоском, как и везде в карточке. */
.fe-line > * + *{border-left:var(--stroke-w) solid var(--stroke)}
.fe-line + .fe-line{border-top:var(--stroke-w) solid var(--stroke)}
/* Параметру нужно место на его подпись: «без времени», «период: с и по».
   Не помещаются в ряд — переносятся целой ячейкой на следующий, а не жмутся
   до трёх букв. Названию поля тоже: «Исход конкурента» в прежние 126 пикселей
   не влезало и обрывалось на середине слова. */
.fe-line .fe-name{flex:0 1 168px}
/* формула длиннее прочего: ей вся строка, итогу — ячейка справа по содержимому */
.fe-line .fe-fx{flex:1 1 220px;cursor:text}
.fe-line .fe-res{flex:0 1 auto;justify-content:flex-end;min-width:74px}
.fe-line .fe-wide{flex:1 1 100%}
/* у ключа своя тонкая граница слева */
.fe-id{justify-content:flex-end;border-right:0;
  border-left:var(--stroke-w) solid var(--stroke);white-space:nowrap;
  color:#8E8E93;font:400 8px/9.7px Inter,-apple-system,sans-serif}
/* крестик и тумблер */
.frow.fedit .fx{width:17px;height:17px;flex:0 0 17px;border:0;background:none;padding:0;
  border-radius:calc(5px * var(--el));color:#8E8E93;cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:12px;line-height:1}
.frow.fedit button.fx:hover{background:#EFEFF3;color:var(--red)}
.fsw{flex:0 0 auto;display:flex}
/* Тумблер — форма, а не оформление: выпрямленный он читается как поле ввода. */
.fsw input{appearance:none;-webkit-appearance:none;width:25px;height:17px;border-radius:13px;
  background:#D1D1D6;position:relative;cursor:pointer;margin:0;transition:background .15s}
.fsw input::after{content:'';position:absolute;top:1px;left:1px;width:15px;height:15px;
  border-radius:50%;background:#fff;transition:left .15s}
.fsw input:checked{background:var(--accent)}
.fsw input:checked::after{left:9px}
/* поля ввода внутри ячеек — без своих рамок, только текст */
/* Название поля, его тип и формула — такие же данные, как значение в ячейке
   и в карточке, значит и размер тот же. Размером отделяем не экраны друг
   от друга, а главное от служебного: ключ поля и подписи остаются мельче. */
.frow.fedit .fname,.frow.fedit .ftype,.frow.fedit .fform{
  border:0;background:none;padding:0;height:auto;min-width:0;
  font:400 var(--fs)/1.4 "SF Pro Text",-apple-system,Inter,sans-serif}
.frow.fedit .fname{flex:1 1 106px;color:#000}
.frow.fedit .fname:disabled{color:#8E8E93}
.frow.fedit .fname:focus{outline:none}
/* Выпадающий список занимает всю ячейку: нажатие в пустое место рядом
   с надписью должно открывать его, а не проваливаться мимо. */
/* Стрелки у этих списков нет: общий сброс полей в строке гасит фон вместе
   с ней. Значит, и запас под неё не нужен — справа просто оставалось пустое
   место, вдвое больше отступа слева. Отступы теперь одинаковые с обеих сторон,
   а то, что это список, видно по нажатию: открывается наш выбор. */
.frow.fedit .ftype{flex:1 1 auto;width:100%;min-width:0;color:#8E8E93;font-style:italic;
  padding-right:0;cursor:pointer}
/* Поле формулы: занимает свою строку целиком — на длинную формулу иначе
   оставалась пара сантиметров, а подсказка полей ложилась поверх ввода. */
.fe-fx .fform{flex:1 1 100%}
/* итог формулы прямо в строке — сразу видно, считается она или нет */
.fxres{flex:0 0 auto;color:#8E8E93;white-space:nowrap;
  font:400 12px/14.3px "SF Pro Text",-apple-system,Inter,sans-serif}
.fxres b{color:#000;font-weight:600}
.fxerr{color:var(--red)}
/* подсказки полей: те же, что при вводе значения в ячейку */
.fxsug{background:#fff;border-top:var(--stroke-w) solid var(--stroke);padding:4px;
  max-height:186px;overflow:auto}
.fxsug[hidden]{display:none}
.fxopt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border:0;background:none;padding:7px 9px;border-radius:calc(8px * var(--el));cursor:pointer;text-align:left;
  font:400 12.5px/1.2 "SF Pro Text",-apple-system,sans-serif;color:#000}
.fxopt i{color:#8E8E93;font-style:normal;font:400 8px/9.7px Inter,-apple-system,sans-serif}
.fxopt:hover,.fxopt.on{background:var(--accent-soft)}
.frow.fedit .fform{flex:1 1 60px;width:100%;color:var(--accent);font-style:normal;
  text-overflow:ellipsis;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.frow.fedit .fform:focus{outline:none}
.frow.fedit.editing .fe-fx{background:#fff}
.frow.fedit.editing .fform{font-size:13px;line-height:20px}
/* Полосы во всю ширину — на белом: под ними тот же фон-разделитель. */
.fvals,.fe-body > .fxsug{background:#fff}
/* строка значений списка живёт в той же пилюле, под первой линией */
/* Своей черты сверху у полосы значений нет: её, как и все остальные линии
   строки, рисует просвет между ячейками. Иначе линия выходила двойной —
   просвет плюс рамка — и была заметно толще прочих. */
.fvals{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:10px}
.fvals .stchip{margin:0}
.fvals .stnew{min-width:110px;flex:0 0 auto}
.fvals .fplus{width:20px;height:20px;border:0;padding:0;background:none;color:#007AFF;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 20px}
.fvals .fplus svg{width:12px;height:12px;fill:currentColor;display:block}
/* Пока пишем формулу, соседние поля можно ткнуть — их ключ подставится */
body.picking .frow.fedit{cursor:copy}
body.picking .frow.fedit:not(.self) .fe-body *,
body.picking .frow.fedit:not(.self) .fe-ctl *,
body.picking .frow.fedit:not(.self) .fe-id *{pointer-events:none}
/* подсветка идёт по всей строке — у крайних контейнеров свой фон, снимаем */
body.picking .frow.fedit:hover{background:var(--accent-soft);border-color:var(--accent)}
body.picking .frow.fedit:hover .fe-ctl,
body.picking .frow.fedit:hover .fe-id{background:none}
body.picking .frow.fedit.self,body.picking .frow.fedit.self:hover{
  cursor:default;background:#FBFBFC;border-color:var(--stroke)}
.frow.addf{justify-content:center;padding:10px}
.frow.addf .fadd{color:var(--accent)}

.fv.reffv{display:flex;align-items:center;min-height:22px}
.fv.ro{color:#3A3A3C}

.reftbl{display:flex;flex-direction:column}
/* Подборка из другой сущности — те же строки, значит и плотность та же. */
.refrow{display:flex;gap:12px;padding:var(--row) 12px;
  border-bottom:var(--stroke-w) solid var(--stroke);cursor:pointer;
  font:400 var(--cfs)/1.4 var(--cff)}
.refrow:last-child{border-bottom:0}
.refrow span{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Подписи колонок в подборке — как в шапке таблицы: тот же размер, отличает
   их цвет, а не рост. Мельче они делали строку на три пикселя ниже соседних,
   и подборка выбивалась из общего ряда. */
.refrow.refhead{color:#8E8E93;cursor:default;background:var(--thead-bg);
  font:400 var(--cfs)/1.4 var(--cff)}
/* Наведение — в цвете темы (как в таблице, tbody tr:hover td), но прозрачнее: 2,5% вместо 4% — на строках карточки
   плотная подсветка читалась серой плашкой. Собственный синеватый оттенок выбивался. */
.refrow:not(.refhead):hover{background:color-mix(in srgb, var(--accent) 2.5%, #fff)}
/* правится на месте — показываем это подчёркиванием при наведении */
.refrow [data-refedit]{cursor:text;border-radius:calc(5px * var(--el))}
.refrow [data-refedit]:hover{background:#EFEFF3;box-shadow:0 0 0 3px #EFEFF3}
.refrow [data-refedit] input,.refrow [data-refedit] textarea{width:100%}
/* Сводка над подборкой — такая же строка, как остальные в карточке:
   слева подпись, справа число. Раньше она стояла особняком, двухэтажной
   плашкой, и выбивалась из карточки как чужая. */
.rsum{display:flex;flex-direction:column;padding:0}
.rsum-i{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:var(--row) 10px;
  border-bottom:var(--stroke-w) solid var(--stroke)}
.rsum-i i{font:400 var(--cfs)/1.4 var(--cff);color:#8E8E93;font-style:normal;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsum-i b{font:600 var(--cfs)/1.35 var(--cff);color:#000;flex:0 0 auto}
.raggs{display:flex;flex-direction:column;gap:5px}
.ragg{display:flex;gap:6px}
.ragg .rsel{flex:1;min-width:0}
/* Настройка раздела-подборки: те же строки «подпись — значение», что и в
   карточке, только с настоящими полями ввода вместо системных. */
/* Ячейки тянутся на всю высоту строки: при выравнивании по центру
   разделительная обводка обрывалась там, где кончалась подпись, — в высокой
   строке «Колонки» это особенно заметно. Сама подпись остаётся по центру:
   её центрирует уже своя ячейка. */
.refset .frow{align-items:stretch}
.refset .fv{display:flex;align-items:center;padding:7px 10px;white-space:normal}
.refset .rsel{width:100%;height:29px;border:var(--stroke-w) solid var(--stroke);border-radius:calc(9px * var(--el));
  background-color:#fff;padding:0 28px 0 9px;color:#000;
  font:400 12px/1 "SF Pro Text",-apple-system,sans-serif}
.refset .rsel:focus{outline:none;border-color:var(--accent)}
.refcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;
  width:100%;background:none;padding:0}
.refset .rcount{font-weight:600;font-style:normal}
.refset .rmuted{color:#8E8E93}

/* Миниатюра в панели рядом с настройкой карточки: та же карточка, мельче
   и без правки. Переписка на это время уходит — в настройке она не нужна. */
.dprev{flex:1;min-height:0;overflow:auto;padding:14px;background:#fff}
/* Масштаб макета задаётся числом при отрисовке — здесь только запас,
   чтобы до первого замера он не прыгал в натуральную величину. */
.dprev{zoom:.7}
.dprev[hidden]{display:none}
/* Настройка, открытая из самой карточки, показывает такой же макет —
   и работает он так же: раздел берут и переносят. Раньше здесь стояло
   наглухо «мимо мыши», и перенос жил только в окне настройки с воронки. */
body.cardset .drawer .dstabs,body.cardset .drawer .dsbody,
body.cardset .drawer .dsbar{display:none}

/* ---------- страница настройки сущности ----------
   Отдельный экран поверх всего: слева разделы настройки, посередине —
   миниатюра карточки в рабочем виде, справа — сама правка. */
/* Настройка занимает экран, но не боковое меню: разделы, профиль и выход
   остаются под рукой — из настройки одной сущности переходят в настройку
   другой, а не выходят и заходят заново. */
.eset{position:fixed;inset:0 0 0 var(--sidew);z-index:70;background:var(--bg);
  display:flex;flex-direction:column;transition:left var(--sidet)}
body.shared .eset{left:0}
.eset[hidden]{display:none}
.eset-h{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding:18px 20px;
  border-bottom:var(--stroke-w) solid var(--line);background:#fff}
.eset-t{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 23px/27px "SF Pro Rounded",Inter,-apple-system,sans-serif;color:#000}
.eset-t span{color:#8E8E93;font-weight:600}
/* Название сущности в заголовке — не подпись, а выбор: горит цветом системы,
   чтобы было видно, что по нему можно нажать и перейти к другой настройке. */
.eset-t #esetEnt{border:0;background:none;padding:0;font:inherit;cursor:pointer;
  color:var(--accent-d);border-bottom:var(--stroke-w) dashed var(--accent-soft2)}
.eset-t #esetEnt:hover{border-bottom-color:var(--accent)}
.eset-b{flex:1;min-height:0;display:flex}
/* Ширина — по самой длинной подписи, а не «на глаз»: триста пикселей уходили
   в пустоту, а место нужнее строкам полей справа. */
.eset-m{flex:0 0 214px;padding:14px 10px;display:flex;flex-direction:column;gap:2px;
  border-right:var(--stroke-w) solid var(--line);background:#fff}
/* Пункты — обычный текст системы, как везде; выбранный — как заголовок блока
   справа: одна и та же вещь названа одинаково, а не крупнее прочего. */
.eset-m button{display:flex;align-items:center;gap:12px;padding:9px 12px;border:0;background:none;
  border-radius:calc(9px * var(--el));text-align:left;cursor:pointer;color:var(--tx);
  font:400 var(--fs)/20px "SF Pro Text",-apple-system,Inter,sans-serif;white-space:nowrap}
.eset-m button svg{width:18px;height:18px;flex:0 0 18px}
.eset-m button:hover{background:var(--bg)}
.eset-m .eset-del{margin-top:auto;color:#C0392B}
.eset-m .eset-del:hover{background:rgba(192,57,43,.08)}
#askP{white-space:pre-line}
.eset-m button.on{background:#EFEFF3;
  font:600 14px/20px "SF Pro Rounded",Inter,-apple-system,sans-serif}
/* Миниатюра справа и мельче: она не для чтения, а чтобы видеть, что
   получается. Уменьшаем через zoom — им же задан общий масштаб системы,
   поэтому внутри всё остаётся ровным. */
.eset-prev{flex:0 0 var(--esprev,35%);min-width:0;overflow:auto;padding:20px;
  border-left:var(--stroke-w) solid var(--line);background:#fff}
/* Граница между правкой и макетом: в потоке, а не поверх — соседи и так
   стоят рядом, двигать её по вычисленной координате незачем. */
.eset-grip{position:relative;left:auto;flex:0 0 5px;display:block;align-self:stretch}
.eset-prev .db{zoom:var(--pvz,.7)}
.eset-pv{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.eset-zoom{display:flex;align-items:center;gap:2px;flex:0 0 auto;
  border:var(--stroke-w) solid var(--line);border-radius:calc(9px * var(--el));background:#fff}
.eset-zoom button{width:24px;height:26px;border:0;background:none;cursor:pointer;color:var(--tx2);
  font:400 16px/1 "SF Pro Text",-apple-system,Inter,sans-serif}
.eset-zoom button:hover{color:var(--tx)}
.eset-zoom b{min-width:38px;text-align:center;color:var(--tx2);
  font:400 12px/1 "SF Pro Text",-apple-system,Inter,sans-serif}
.eset-pick[hidden]{display:none}
.eset-pick{display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:6px 10px;
  border:var(--stroke-w) solid var(--line);border-radius:calc(9px * var(--el));
  background:#fff;color:var(--tx);cursor:pointer;max-width:100%;
  font:400 13px/18px "SF Pro Text",-apple-system,Inter,sans-serif}
.eset-pick:hover{background:var(--bg)}
.eset-pick b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eset-work{flex:1;min-width:380px;display:flex;flex-direction:column;overflow:hidden}
.eset-work .db{flex:1;min-height:0;overflow:auto;padding:20px}
.eset-soon{padding:40px 20px;text-align:center;color:#8E8E93;
  font:400 var(--cfs)/1.5 var(--cff)}
/* Доступы: список ролей внутри той же центрированной заглушки — сама форма
   слева направо, как любой список, а не по центру каждой строкой. */
.acl-roles{text-align:left;max-width:280px;margin:0 auto}
.acl-hint{margin:0 0 16px}
.acl-role{display:flex;align-items:center;gap:8px;padding:6px 0;
  font:400 var(--cfs)/1.4 var(--cff);cursor:pointer}
/* Этапы воронки — теми же плашками, что и значения в карточке: цвет этапа
   виден сразу, а не прячется в кружке. Насечка — перенос, точка — палитра,
   крестик — убрать этап. */
.kancols{gap:8px}
/* Обводку у цветных плашек оставляем: без неё светлая плашка сливается
   с белым полем. Берём её от цвета самой плашки, чтобы серая линия не спорила
   с ним. */
/* Скругление — общее для всех плашек системы: при перетаскивании плашка
   и так показывала его, а лежала при этом «таблеткой». */
.kancols .dsec{padding:6px 12px;border-radius:calc(9px * var(--el));gap:8px;
  border:var(--stroke-w) solid color-mix(in srgb, currentColor 28%, transparent);
  font:400 14px/20px "SF Pro Text",-apple-system,Inter,sans-serif}
.kancols .dsec:hover{filter:brightness(.97)}
.kancols .secmove,.kancols .kanmove{color:currentColor;opacity:.5}
.kancols .dsec .x{color:currentColor;opacity:.65;width:14px;height:14px;flex:0 0 14px}
.kancols .dsec .x:hover{opacity:1;color:currentColor}
.kandot{width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  border:0;padding:0;cursor:pointer}
.kandot:hover{transform:scale(1.15)}

/* Настройка мест — самой карточкой, ячейками, как конструктор разделов:
   те же 0,5 обводки, те же скругления, тумблер снаружи — с той стороны,
   где место окажется на карточке. */
.slotcard{display:flex;flex-direction:column;gap:5px}
.sc-row{display:flex;gap:5px}
/* То же правило, что и в настройке разделов: скругляются только внешние углы
   всей схемы, а ячейки внутри почти прямые. */
.sc-cell{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px;
  background:#FBFBFC;border:var(--stroke-w) solid var(--stroke);border-radius:2px}
.slotcard > .sc-row:first-child > .sc-cell:first-child{border-top-left-radius:var(--radius-in)}
.slotcard > .sc-row:first-child > .sc-cell:last-child{border-top-right-radius:var(--radius-in)}
.slotcard > .sc-row:last-child > .sc-cell:first-child{border-bottom-left-radius:var(--radius-in)}
.slotcard > .sc-row:last-child > .sc-cell:last-child{border-bottom-right-radius:var(--radius-in)}
.sc-cell.r{justify-content:flex-end}
/* В шапке карточки: фото по содержимому, заголовку — больше места,
   счётчику — меньше: так они и стоят на самой карточке. */
.sc-head .sc-cell:first-child{flex:0 0 auto}
.sc-head .sc-cell:nth-child(2){flex:1.7}
.sc-head .sc-cell:nth-child(3){flex:1}
.sc-ph{width:50px;height:50px;flex:0 0 50px;display:flex;align-items:center;justify-content:center;
  border:var(--stroke-w) solid var(--stroke);border-radius:calc(13px * var(--el));
  background:#fff;cursor:pointer;color:#B0B0B5}
.sc-ph:hover{color:var(--accent);border-color:var(--accent)}
.sc-ph svg{width:22px;height:22px;fill:currentColor;stroke:none}
.slot-p{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:0;background:none;padding:0;cursor:pointer;color:var(--tx);text-align:left;
  font:400 var(--cfs)/1.4 var(--cff)}
.slot-p:hover{color:var(--accent)}
.slot-p.off{color:#B0B0B5}
/* Тумблер места: тот же переключатель, что и у полей, только меньше. */
.slot-t{flex:0 0 34px;width:34px;height:20px;border:0;border-radius:999px;background:#E3E3E8;
  position:relative;cursor:pointer;transition:background .15s ease}
.slot-t::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .15s ease}
.slot-t.on{background:var(--accent)}
.slot-t.on::after{transform:translateX(14px)}

/* Макет доски в настройке: столбцы стоят в ряд и прокручиваются вбок,
   высоту держат по содержимому — это образец, а не рабочая доска. */
.eset-kan{display:flex;gap:10px;padding:0;overflow-x:auto;align-items:flex-start}
/* Столбцы в макете шире рабочих: там их разглядывают, а не работают в них —
   должно быть видно, что и как поместится на карточке. */
.eset-kan .kcol{flex:0 0 320px;width:320px;border-radius:var(--radius);
  overflow:hidden;border:var(--stroke-w) solid var(--stroke)}
.eset-kan .klist{overflow:visible}
.eset-ag{display:block}
/* Макет таблицы: та же сетка, что в работе, только мельче и без правки. */
.eset-tbl{border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius);overflow:auto}
.eset-tbl table{border-collapse:separate;border-spacing:0;width:100%;table-layout:auto}
.eset-tbl th,.eset-tbl td{padding:var(--row) 10px;text-align:left;white-space:nowrap;
  max-width:190px;overflow:hidden;text-overflow:ellipsis;
  border-bottom:var(--stroke-w) solid var(--stroke);
  border-right:var(--stroke-w) solid var(--stroke)}
.eset-tbl th:last-child,.eset-tbl td:last-child{border-right:0}
.eset-tbl tr:last-child td{border-bottom:0}
.eset-tbl th{background:var(--thead-bg);color:#3A3A3C;
  font:600 12.5px/17px "SF Pro Text",-apple-system,Inter,sans-serif}
.eset-tbl td{color:var(--tx);font:400 var(--fs)/1.4 "SF Pro Text",-apple-system,Inter,sans-serif}

/* Миниатюра — та же карточка, только мельче и без правки. Поля по бокам
   оставляем: слитый ряд выходит подложкой за края разделов, и без них
   заливку срезает край макета. */
.eset-prev .db{padding:0 14px}
/* Образец в настройке сущности листает не сам .db (он растёт по содержимому), а панель .eset-prev вокруг него. У .db стоит
   overscroll-behavior:none (капсула в карточке не пружинит) — он не давал колесу «пройти» на панель, и образец не листался. */
.eset-prev .db{overscroll-behavior:auto}
/* Шапка-пример в миниатюре: без тени и нажатий, во всю ширину поля макета */
.eset-pvhead{margin:0 -14px 14px;pointer-events:none;box-shadow:none;border-radius:calc(var(--radius) * .6)}
/* Миниатюра — образец, поля в ней не правят. Но за заголовок раздел берут,
   а за границу тянут ширину: этим двум место в миниатюре и есть. */
/* Макет — образец, поля в нём не правят: нажатия ему ни к чему. Кроме двух
   вещей — раздел берут целиком и тянут границу между разделами. Хватать
   только за шапку было нельзя: в уменьшенной миниатюре её высота
   одиннадцать пикселей.
   Внутренности раздела делаем насквозь непрозрачными для мыши целиком: пока
   часть из них ловила наведение сама, курсор над разделом моргал рукой
   и стрелкой — под ним оказывалась то ссылка, то ячейка, то сам раздел. */
.prevbody .fsec{pointer-events:auto;cursor:grab}
.prevbody .fsec *{pointer-events:none}
.prevbody .fsec.secdrag{cursor:grabbing}

/* Шапка карточки: шестерёнка уводит в настройку, «Сохранить» возвращает */
.dh .dgear{background:none;color:var(--icon-fg2)}
/* шестерня нарисована заливкой, а не обводкой, как остальные значки */
.dh .dgear .gear10{width:15px;height:15px;fill:currentColor;stroke:none}
.dh .dgear:hover{background:var(--bg);color:var(--tx)}
/* Колокольчик — подписка на уведомления, слева от шестерёнки. Разметка
   одна и та же на оба состояния (BELL_SVG, см. drawCard): тело и язычок
   стоят всегда, а два звуковых знака — отдельными path (.bwave), которые
   этот блок выпускает наружу или прячет обратно. Никакой подмены рисунка
   рывком — только переход, поэтому и бесшовно. */
.dh .dbell{background:none;color:var(--icon-fg2)}
.dh .dbell svg{width:16px;height:17px;display:block;overflow:visible;transform-origin:50% 6%}
.dh .dbell path{fill:currentColor}
.dh .dbell:hover{background:var(--bg);color:var(--tx)}
.dh .dbell.on{color:var(--accent)}
.dh .dbell.on:hover{color:var(--accent-d)}
.dh .dbell.muted{opacity:.5}
/* Дуги растут из точки, которой касаются колокола (fill-box — проценты
   считаются от рамки самого path, а не всей картинки), и одновременно
   проявляются — будто звук вылетает из-под колокола, а не выскакивает
   отдельно от него. Небольшая задержка на включении — чтобы дуги
   показались чуть позже начала тряски, а не одновременно с первым
   движением; выключаются без задержки, сразу. */
.dh .dbell .bwave{
  transform-box:fill-box;
  transform:scale(.25);
  opacity:0;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
}
.dh .dbell .bwave-l{transform-origin:100% 50%}
.dh .dbell .bwave-r{transform-origin:0% 50%}
.dh .dbell.on .bwave{transform:scale(1);opacity:1;transition-delay:.18s}
/* Тряска при включении: голый колокол (дуги ещё прячутся) раскачивается
   на подвесе, дзынь-дзынь, и через долю секунды из-под него проявляются
   звуковые дуги — см. transition-delay у .bwave выше. */
@keyframes dbell-ring{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-19deg)}
  30%{transform:rotate(15deg)}
  45%{transform:rotate(-11deg)}
  60%{transform:rotate(7deg)}
  75%{transform:rotate(-4deg)}
  88%{transform:rotate(2deg)}
}
.dh .dbell.ring svg{animation:dbell-ring .55s cubic-bezier(.36,.07,.19,.97)}
.dh .dsave{height:32px;padding:0 18px;flex:0 0 auto}
/* у .btn свой display, поэтому атрибут hidden сам по себе его не прячет */
.dh .dcancel{flex:0 0 auto;color:#8E8E93;font:400 14px/1 "SF Pro Text",-apple-system,sans-serif}
.dh .dcancel:hover{color:var(--tx)}
.dh .dsave[hidden],.dh .dgear[hidden],.dh .dcancel[hidden],.dh .dbell[hidden]{display:none}
body.cardset .dh .dgear{display:none}

/* Полоса разделов под названием */
.dsecs{display:flex;flex-wrap:wrap;gap:10px;padding:0 0 18px;
  border-bottom:var(--stroke-w) solid var(--line);margin-bottom:18px}
/* Без «.dsecs» впереди: двойник плашки на время переноса живёт вне своего
   ряда, и правило, привязанное к ряду, на него не действовало — плашка
   разваливалась на строки. */
.dsec{display:inline-flex;align-items:center;gap:10px;padding:5px 10px;
  border-radius:calc(9px * var(--el));border:var(--stroke-w) solid var(--stroke);background:#fff;
  color:#000;font:400 14px/20px "SF Pro Text",-apple-system,Inter,sans-serif}
.dsecs .dsec:hover{background:#FAFAFC}
.dsec .secmove{width:8px;height:13px;flex:0 0 8px;color:#BDBDC1;cursor:grab}
.dsec-t{cursor:text;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsec-t:hover{color:var(--accent)}
.dsecs .dsec.dragging{visibility:hidden}
.dsecs .dsec.on{background:var(--accent);color:#fff;border-color:transparent}
.dsec .x{width:15px;height:15px;flex:0 0 15px;border:0;background:none;padding:0;
  color:#C7C7CC;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dsec .x:hover{color:var(--red)}
.dsecs .dsecadd{display:inline-flex;align-items:center;gap:10px;padding:5px 10px;
  border:0;border-radius:calc(9px * var(--el));background:#F2F2F7;color:#007AFF;cursor:pointer;
  font:400 14px/20px "SF Pro Text",-apple-system,Inter,sans-serif}
.dsecs .dsecadd:hover{background:#E8E8EE}
.dsecs .dsecadd svg{width:12px;height:12px;fill:currentColor;flex:0 0 12px}

/* Вкладки разделов карточки */
.dtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.dtab{border:0;background:#EFEFF3;border-radius:calc(10px * var(--el));padding:7px 14px;cursor:pointer;
  color:#3A3A3C;font:500 13px/16px "SF Pro Text",-apple-system,Inter,sans-serif}
.dtab:hover{background:#E5E5EA}
.dtab.on{background:var(--accent);color:#fff}

.frow.tune{align-items:center}
.frow.tune .fk{flex:0 0 190px}
.tunev{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 10px}
.ttype{color:#8E8E93;font:400 12px/16px "SF Pro Text",-apple-system,sans-serif;
  background:#F2F2F7;border-radius:calc(6px * var(--el));padding:2px 8px;white-space:nowrap}
.tin{height:26px;border:var(--stroke-w) solid var(--line);border-radius:calc(8px * var(--el));padding:0 8px;min-width:0;
  width:100%;font:400 12.5px/1 "SF Pro Text",-apple-system,sans-serif;background:#fff}
.tin.wide{flex:1 1 200px;width:auto}
.tsel{height:26px;border:var(--stroke-w) solid var(--line);border-radius:calc(8px * var(--el));background-color:#fff;
  padding:0 26px 0 8px;font:400 12px/1 "SF Pro Text",-apple-system,sans-serif;
  background-size:12px;background-position:right 7px center}
.tin:focus{outline:none;border-color:var(--accent)}
.tlock{display:flex;align-items:center;gap:5px;color:#8E8E93;cursor:pointer;
  font:400 12px/16px "SF Pro Text",-apple-system,sans-serif}
.tlock input{margin:0}
.tunev .cdel2{margin-left:auto}
.stnew,.stren{height:25px;border:1px solid var(--accent);border-radius:calc(8px * var(--el));padding:0 8px;
  font:500 12px/1 "SF Pro Text",-apple-system,sans-serif;outline:none;min-width:120px}

/* ---------- галерея снимков (открытьГалерею) ----------
   Во весь экран, как в Telegram: фон затемнён и размыт (`backdrop-filter`; в «лёгком» режиме, `html.lite`, размытия нет — только плотнее затемнение),
   снимок вписан в экран без рамки и окна, закрывается крестиком, нажатием рядом со снимком, Esc и (на телефоне) свайпом вниз. Подпись «Фотография 5 из 11»
   и кто прислал — слева внизу, масштаб и скачивание — справа внизу, стрелки — по краям экрана. Лежит в <body>, а у него свой zoom (--ui): единицы
   vw/vh внутри масштабируются вместе с ним, поэтому где они нужны — делим на --ui. */
.glr{position:fixed;inset:0;z-index:5000;color:#fff;background:rgba(6,6,10,.62);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  opacity:0;transition:opacity .18s ease;overscroll-behavior:contain;font:400 13px/18px var(--cff,-apple-system,"SF Pro Text",Inter,sans-serif)}
html.lite .glr{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,6,10,.85)}
.glr.on{opacity:1}
.glr-w{position:absolute;inset:0}
/* Сцена — весь экран за вычетом полос сверху и снизу: снимок вписывается в неё, увеличенный выходит за её край и обрезается. */
.glr-st{position:absolute;inset:56px 84px 72px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
.glr-img{position:absolute;inset:0;margin:auto;display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  user-select:none;-webkit-user-drag:none;border-radius:calc(4px * var(--el,1));will-change:transform,opacity}
.glr-old{position:absolute;pointer-events:none}
.glr-img.anim{transition:transform .16s ease}
/* Пока вместо снимка превью (≈320 px), оно растянуто на окно, а не лежит маленьким в натуральном размере. */
.glr-img.pre{width:100%;height:100%}
.glr-st.zoomed{touch-action:none;cursor:grab;overflow:visible}
/* Снимок увеличен — интерфейс галереи (подпись, масштаб, миниатюры, стрелки) плавно гаснет, остаётся только крестик; снимок выходит за рамку сцены и занимает
   весь экран от верха до низу. Вернуть: двойное нажатие по снимку, клавиша 0, щипок или колесо в обратную сторону (при возврате к «вписан» интерфейс возвращается). */
.glr-bot,.glr-th{transition:opacity .22s ease}
.glr-nav{transition:background .12s ease,transform .12s ease,opacity .22s ease}
.glr.zoomed .glr-bot,.glr.zoomed .glr-th,.glr.zoomed .glr-nav{opacity:0;pointer-events:none}
.glr-st.zoomed.drag{cursor:grabbing}
.glr-top{position:absolute;top:0;right:0;padding:14px 18px;z-index:2}
.glr-bot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:12px 20px 16px;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.45),transparent)}
.glr-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.glr-n{font-size:15px;line-height:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glr-m{color:rgba(255,255,255,.7);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glr-b{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.1);
  color:#fff;cursor:pointer;text-decoration:none;flex:0 0 auto;transition:background .12s ease}
.glr-b:hover{background:rgba(255,255,255,.22)}
.glr-b svg,.glr-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.glr-zm{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.glr-zp{min-width:50px;height:30px;padding:0 6px;border:0;border-radius:15px;background:none;color:rgba(255,255,255,.75);font:inherit;font-size:12.5px;
  font-variant-numeric:tabular-nums;cursor:pointer}
.glr-zp:hover{background:rgba(255,255,255,.14);color:#fff}
.glr-navs{position:absolute;inset:0;pointer-events:none}
.glr-navs[hidden]{display:none}
.glr-nav{position:absolute;top:50%;margin-top:-22px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;pointer-events:auto;transition:background .12s ease,transform .12s ease}
.glr-nav:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.glr-prev{left:20px}
.glr-next{right:20px}
/* Лента миниатюр под снимком — когда снимков несколько (в посте, во вкладке «Медиа»): текущий обведён и чуть крупнее, лента сама докручивается до него.
   Сцена на её высоту ниже. */
.glr-th{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);display:none;gap:6px;max-width:min(88%,840px);overflow:hidden;padding:6px;
  scrollbar-width:none;z-index:2}
.glr-th::-webkit-scrollbar{display:none}
.glr.many .glr-th{display:flex}
.glr.many .glr-st{bottom:142px}
.glr-tb{flex:0 0 auto;width:52px;height:52px;padding:0;border:0;border-radius:calc(8px * var(--el,1));overflow:hidden;cursor:pointer;background:none;
  opacity:.7;outline:2px solid transparent;outline-offset:-2px;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:opacity .15s ease,transform .15s ease,outline-color .15s ease}
.glr-tb:hover{opacity:1}
.glr-tb.on{opacity:1;outline-color:#fff;transform:scale(1.06)}
.glr-tb img{display:block;width:100%;height:100%;object-fit:cover}
.glr-b:focus-visible,.glr-nav:focus-visible,.glr-zp:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Телефон: чёрный фон с лёгким размытием, сверху — кнопка закрытия слева и плашка «кто и когда» по центру (как в «Фото»), скачивание — справа
   сверху; снимок на весь экран; масштаб и стрелки не нужны (щипок, двойное нажатие и свайп). */
html.mob .glr{background:rgba(0,0,0,.92)}
html.mob .glr-st{inset:calc(64px + env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom)) 0}
html.mob .glr-top{top:0;left:0;right:auto;padding:calc(10px + env(safe-area-inset-top)) 14px 0}
html.mob .glr-b{width:42px;height:42px;background:rgba(44,44,46,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* Плашка «кто и когда» ровно по центру между кнопками: по 66 px слева (закрыть) и справа (скачать) — раньше справа отступа не было, она сдвигалась
   вправо и наезжала на «скачать». Не влезает в одну строку — данные переносятся на вторую строку, плашка растёт вниз. */
html.mob .glr-bot{top:0;bottom:auto;padding:calc(10px + env(safe-area-inset-top)) 66px 0 66px;background:none;pointer-events:none}
html.mob .glr-t{flex:0 1 auto;margin:0 auto;padding:5px 18px;border-radius:21px;background:rgba(44,44,46,.82);align-items:center;text-align:center;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.mob .glr-n{font-size:14px;line-height:19px}
html.mob .glr-m{font-size:11.5px;line-height:15px;white-space:normal;overflow:visible;text-overflow:clip}
html.mob .glr-t{max-width:100%;box-sizing:border-box}
html.mob .glr-zm,html.mob .glr-navs{display:none}
html.mob .glr-th{bottom:calc(12px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);padding:4px;gap:4px}
html.mob .glr-tb{width:44px;height:44px}
html.mob .glr.many .glr-st{bottom:calc(76px + env(safe-area-inset-bottom))}
html.mob .glr-dl{position:absolute;top:calc(10px + env(safe-area-inset-top));right:14px;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.glr,.glr-nav,.glr-img.anim{transition:none}}

/* Стрелка «назад» при свайпе: вылезает из-за левого края (положение и прозрачность задаёт app.js на каждом
   событии жеста, поэтому переходов по transform здесь нет — они бы отставали от пальцев). На срабатывании —
   вспышка акцентным цветом и уход. */
.swipe-hint{position:fixed;left:0;top:0;margin:-22px 0 0 -22px;z-index:99999;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--card-bg,#fff);color:var(--accent);
  border:var(--stroke-w,1px) solid var(--stroke,rgba(0,0,0,.12));
  box-shadow:0 4px 16px rgba(0,0,0,.22);pointer-events:none;opacity:0;transform:scale(.3)}
.swipe-hint svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
  stroke-linejoin:round}
/* Круг стоит под курсором (left/top задаёт app.js по координатам жеста) и растёт из него; сам курсор на это время скрыт
   (щит .swipe-nocursor). Цвет — акцентный цвет
   системы, как у стрелки «назад» в самой карточке (.dback1), и он не меняется: перекраска на срабатывании
   мельтешила. Срабатывание (.go): круг чуть вздрагивает, стрелка внутри подаётся вперёд, от круга расходится
   тонкое кольцо, и он тает на месте, слегка уменьшаясь. */
.swipe-hint::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--accent);opacity:0;pointer-events:none}
.swipe-hint.swipe-hint-go{animation:swipego .28s linear forwards}
.swipe-hint.swipe-hint-go::after{animation:swipering .28s ease-out forwards}
.swipe-hint.swipe-hint-go svg{animation:swipenudge .28s ease-out}
@keyframes swipego{0%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  26%{opacity:1;transform:scale(1.1);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{opacity:0;transform:scale(.7)}}
@keyframes swipering{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes swipenudge{0%{transform:translateX(0)}30%{transform:translateX(2px)}100%{transform:translateX(0)}}
/* «Вперёд» (свайп влево): та же стрелка, зеркально; подача вперёд — тоже зеркально. */
.swipe-hint.swipe-hint-fwd svg{transform:scaleX(-1)}
/* Значок листания календаря — двойная стрелка (.swipe-p2), для карточек — одинарная (.swipe-p1). Классы с приставкой:
   голые .cal/.go/.fwd общие на всё приложение — .cal у календаря растянул круг в эллипс (padding-left под боковую панель). */
.swipe-hint:not(.swipe-hint-cal) .swipe-p2,.swipe-hint.swipe-hint-cal .swipe-p1{display:none}
.swipe-hint.swipe-hint-fwd.swipe-hint-go svg{animation-name:swipenudgef}
@keyframes swipenudgef{0%{transform:scaleX(-1) translateX(0)}30%{transform:scaleX(-1) translateX(2px)}100%{transform:scaleX(-1) translateX(0)}}
@media (prefers-reduced-motion:reduce){.swipe-hint.swipe-hint-go,.swipe-hint.swipe-hint-go::after,.swipe-hint.swipe-hint-go svg{animation-duration:.01s}}
/* Прозрачный щит над страницей на время стрелки при свайпе: курсор над ним скрыт. Ниже стрелки (z-index), чтобы
   не перекрывать её; снимается самим app.js (и сторожем через 1,5 с). */
.swipe-nocursor{position:fixed;inset:0;z-index:99998;cursor:none;background:transparent}

/* ===== Лёгкий режим анимаций (html.lite — Safari по умолчанию, см. начало app.js) =====
   Переходы свойств раскладки (ширины, отступы, flex-grow, gap, left) оставлены только там, где Chrome их тянет
   легко; в Safari при открытии и закрытии главной карточки их идёт около тридцати разом, и страница подлагивает.
   Здесь они выключены, остаются простые: прозрачность, цвет фона, тень и сдвиг самой карточки. Селекторы повторяют
   исходные правила целиком (с приставкой html.lite — выше по специфичности), у составных переходов оставлена только
   безобидная часть. */
html.lite .side,html.lite .sidebox,html.lite .nav.ent .ntxt,html.lite .nav.ent .navbadge,html.lite .main,
html.lite .bar-side,html.lite .bar-mid,html.lite .search,html.lite .fbtn,html.lite #stripGrip,html.lite .rolebar,
html.lite .eset,html.lite .dsin,html.lite #listPane{transition:none}
html.lite .nav.ent,html.lite .sidetog{transition:background-color .15s ease}
html.lite .nav.out .nlab,html.lite .nav.mode-sw .nlab{transition:opacity .1s ease}
html.lite .side.open .nav.out .nlab,html.lite .side.peek .nav.out .nlab,
html.lite .side.open .nav.mode-sw .nlab,html.lite .side.peek .nav.mode-sw .nlab{transition:opacity .16s ease .1s}
html.lite .bar-mid .btn,html.lite .bar-mid .btn span,html.lite .modepill,html.lite .vmode,
html.lite #shareBtn,html.lite #lookBtn,html.lite #setBtn,html.lite #moreBtn,html.lite #rbtn,html.lite #pbtn{transition:opacity .18s ease}
html.lite .bar-mid .btn .i{transition:opacity .16s ease}
html.lite .vmode button{transition:opacity .18s ease,background-color .2s ease,box-shadow .2s ease}
html.lite body.split .drawer:not(.linked){transition:transform .2s cubic-bezier(.4,0,.2,1)}
html.lite body.split .drawer:not(.linked).on{transition:transform .24s cubic-bezier(.22,1,.36,1)}

/* «Расширения»: каталог плиток по группам. Плитка — значок, название с описанием и справа кнопка (владельцу) или состояние (остальным). */
.ex-wrap{padding-bottom:40px}
.ex-note{margin:16px 0 0;color:var(--tx2);font-size:13px}
.ex-sec{padding:22px 0 6px}
.ex-sec + .ex-sec{border-top:var(--stroke-w) solid var(--line);margin-top:10px}
.ex-sec h3{margin:0 0 6px;font:600 20px/1.2 var(--font-h2);display:flex;align-items:baseline;gap:8px}
.ex-sec h3 span{font:500 13px var(--font-2);color:var(--tx2)}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:36px}
.ex-t{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:var(--stroke-w) solid var(--line);cursor:pointer}
.ex-ic{flex:0 0 auto;width:48px;height:48px;border-radius:calc(13px * var(--el));display:flex;align-items:center;justify-content:center}
.ex-ic svg{width:26px;height:26px}
.ex-tx{flex:1;min-width:0}
.ex-nm{font:500 15px/1.3 var(--font-body);color:var(--tx);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ex-lic{font:600 11px var(--font-2);color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);padding:1px 7px;border-radius:calc(6px * var(--el))}
.ex-ds{margin-top:3px;font-size:13px;line-height:1.35;color:var(--tx2)}
.ex-t:not(.open) .ex-d1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex-on{color:var(--green)}
.ex-err{margin-top:3px;font-size:13px;color:var(--red)}
.ex-more{display:none;margin-top:8px;font-size:13px;line-height:1.45;color:var(--tx)}
.ex-more > div:not(.ex-ds)::before{content:"•";color:var(--tx2);margin-right:6px}
.ex-t.open .ex-more{display:block}
.ex-ac{flex:0 0 auto;display:flex;align-items:center;min-height:30px}
.ex-b{border:0;cursor:pointer;font:500 13px var(--font-body);padding:5px 14px;border-radius:calc(13px * var(--el));background:var(--accent-soft);color:var(--accent-d)}
.ex-b:hover{background:var(--accent-soft2)}
.ex-b.off{background:var(--chip-bg);color:var(--tx2)}
.ex-b.off:hover{color:var(--tx)}
.ex-st{font-size:13px;color:var(--tx2)}
.ex-st.on{color:var(--green)}
.ex-t.soon .ex-ic{opacity:.55}
.ex-t.soon .ex-nm{color:var(--tx2)}
.ex-empty{padding:40px 0;color:var(--tx2);text-align:center}
.ex-log{padding-bottom:20px}
.ex-lg{padding:5px 0;font-size:13px;color:var(--tx2)}
.ex-lg b{color:var(--tx);font-weight:500}
.ex-lt{display:inline-block;min-width:92px;font-variant-numeric:tabular-nums}
body.narrow .ex-grid{grid-template-columns:1fr}

/* «Активность» на странице «Пользователи»: общая лента действий и время в системе. Новые классы с приставкой ac-. */
.ac-av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#7A8EA8,#4A5C72);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:600 11px var(--font-body);font-style:normal}
.ac-av img{width:100%;height:100%;object-fit:cover}
.ac-av-s{width:22px;height:22px;flex-basis:22px;font-size:9px}
.ac-av0{background:var(--chip-bg);color:var(--tx2)}
.ac-note{font-size:12.5px;color:var(--tx2);padding:8px 2px}
.ac-tbl{margin-top:10px;background:var(--card-bg);border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius-in);overflow:auto}
.ac-th{color:var(--tx2);font-weight:500;background:var(--thead-bg)}
.ac-tr[data-acpick]{cursor:pointer}
.ac-tr[data-acpick]:hover,.ac-tr.on{background:var(--accent-soft)}
.ac-p{display:flex;align-items:center;gap:8px;min-width:0}
.ac-p b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-ak{color:var(--accent-d);font-weight:600}
.ac-o{position:relative;padding-bottom:5px}
.ac-bar{position:absolute;left:0;bottom:0;height:3px;width:var(--w);max-width:100%;border-radius:2px;background:var(--accent);opacity:.4}
.ac-det{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:14px;background:var(--card-bg);border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius-in);padding:12px 16px}
.ac-det h4{margin:0 0 8px;font:500 12.5px var(--font-body);color:var(--tx2)}
.ac-days,.ac-hours{display:flex;align-items:flex-end;gap:3px;height:86px}
.ac-d{flex:1;min-width:6px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}
.ac-d i{display:block;width:100%;border-radius:3px 3px 1px 1px;background:var(--accent);min-height:2px}
.ac-d em{font:400 9.5px var(--font-body);font-style:normal;color:var(--tx2);height:11px}
.ac-pl{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;border-bottom:var(--stroke-w) solid var(--stroke)}
.ac-pl span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-pl b{font-weight:500;font-variant-numeric:tabular-nums}
.ac-ds{position:relative}
.ac-day{position:sticky;top:0;z-index:5;display:flex;justify-content:center;padding:10px 0 6px;pointer-events:none}
/* Цепочка событий одного человека: лицо одно, у нижнего края, и липнет к нему, как .fd-chain в чате. */
.ac-chain{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
.ac-chain > .ac-av{position:sticky;bottom:10px;width:32px;height:32px;flex-basis:32px}
.ac-chain-l{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.ac-day span{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;color:#6C6C70;font:500 12px var(--font-body);padding:3px 12px;border-radius:999px;box-shadow:var(--pill-shadow)}
.ac-r{display:block}
.ac-b{flex:1;min-width:0;background:var(--card-bg);border-radius:var(--radius-in);padding:8px 12px 9px;position:relative}
.ac-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ac-who{font-weight:600;font-size:13px}
.ac-where{display:inline-flex;align-items:baseline;gap:4px;font-size:12.5px;color:var(--tx2);min-width:0}
.ac-lnk{color:var(--link-color);cursor:pointer;text-decoration:none}
.ac-lnk:hover{text-decoration:underline}
.ac-sep{opacity:.6}
.ac-gone{font-style:italic}
.ac-b time{margin-left:auto;font:400 11.5px var(--font-body);color:var(--tx2);font-variant-numeric:tabular-nums}
.ac-t{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:13px}
.ac-t svg{color:var(--ic);flex:0 0 auto}
.ac-msg{margin-top:4px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.ac-chip{display:inline-block;margin-top:5px;margin-right:6px;font-size:12px;color:var(--tx2);background:var(--chip-bg);border-radius:8px;padding:2px 8px}
.ac-chgs{margin-top:4px;display:flex;flex-direction:column;gap:2px}
.ac-chg{font-size:12.5px;color:var(--tx);overflow-wrap:anywhere}
.ac-chg b{font-weight:500}
.ac-ar{color:var(--tx2)}
.ac-more-l{border:0;background:none;color:var(--link-color);cursor:pointer;font:500 12px var(--font-body);padding:3px 0}
.ac-empty{padding:40px 0;text-align:center;color:var(--tx2)}
.ac-moreb{display:flex;justify-content:center;padding:14px 0}
.ac-more{border:0;border-radius:calc(13px * var(--el));background:var(--accent-soft);color:var(--accent-d);font:500 13px var(--font-body);padding:8px 18px;cursor:pointer}
.ac-foot{margin-top:18px;padding:10px 12px;border-radius:var(--radius-in);background:var(--card-bg);font-size:12px;color:var(--tx2);line-height:1.45}
.ac-pos{font-size:12.5px;color:var(--tx2)}
.ac-files{margin-top:6px;max-width:440px}
.ac-files .fd-ph,.ac-files .fd-docs{margin:0;border-radius:calc(var(--radius-in) - 4px)}
.ac-files .fd-docs .dc-i{background:var(--chat-bg)}
.ac-stage{display:flex;align-items:center;gap:8px;margin-top:5px}
.ac-none{color:var(--tx2)}
/* Страница «Активность» — как чат: фон под шапкой страницы системный (цвет чата), облачка белые. */
.ac-mark{background:var(--accent-soft2);color:inherit;border-radius:3px;padding:0 1px}

/* Плашка нашей ссылки в сообщении: «Раздел › Название». Серая — раздела или записи нет или к ним нет доступа. */
.fd-ref{display:inline-block;max-width:100%;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:0 8px;border-radius:7px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  text-decoration:none;font-weight:500}
.fd-ref:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.fd-ref.off{background:rgba(142,142,147,.16);color:#8E8E93;cursor:default;font-weight:400}

/* Выданные ссылки в окне «Поделиться»: название, срок, число открытий и «Отозвать». */
.sh-iss{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:7px 0;border-top:1px solid var(--line,#d6d3d0)}
.sh-iss b{font-weight:500}
.sh-iss i{font-style:normal;color:#8E8E93;font-size:12px}
.sh-iss .lnk{margin-left:auto}
.sh-iss.off b{color:#8E8E93;text-decoration:line-through}

/* Условия перехода на этап. Окно у записи: что нужно заполнить, чтобы перейти (gtd-). */
.gtd-body{padding:6px 20px 14px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.gtd-lead{margin:8px 0 4px;line-height:1.45}
.gtd-ok{margin:10px 0;color:#1E7A3C;font-weight:500}
.gtd-st{margin:8px 0 0;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:#8E8E93}
.gtd-r{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:calc(10px * var(--el,1));
  background:rgba(142,142,147,.1)}
.gtd-r.bad{background:rgba(214,64,52,.08)}
.gtd-r.ok{background:rgba(52,160,90,.1)}
.gtd-ic{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:#D64034}
.gtd-r.ok .gtd-ic{background:#34A05A}
.gtd-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.gtd-t span{font-size:12px;color:#8E8E93}
.gtd-v{flex:0 1 220px;max-width:50%;min-height:30px;padding:5px 10px;border:1px solid rgba(142,142,147,.35);border-radius:calc(8px * var(--el,1));
  background:var(--card-bg,#fff);color:var(--tx);font:inherit;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtd-v:hover:not(:disabled){border-color:var(--accent)}
.gtd-v:disabled{opacity:.55;cursor:default}
.gtd-force{margin-right:auto;color:#8E8E93}
.gtd .fbar{align-items:center}
/* Настройка: условия по этапам (gts-). */
.gts-fv{display:block}
.gts-list{display:flex;flex-direction:column;gap:6px;width:100%}
.gts{border:var(--stroke-w) solid var(--stroke);border-radius:calc(10px * var(--el,1));overflow:hidden;background:#fff}
.gts-h-b{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.gts-h-b:hover{background:rgba(142,142,147,.08)}
.gts-n{flex:1;font-size:12px;color:#8E8E93}
.gts-ar{color:#8E8E93;font-size:11px}
.gts-b{padding:4px 12px 12px;border-top:var(--stroke-w) solid var(--stroke);background:#fff}
.gts-h{margin:8px 0 6px;font-size:12px;color:#8E8E93}
.gts-skip{margin-top:10px}
.gtd .btn:disabled{opacity:.4;cursor:default}
.gtd [hidden]{display:none !important}

/* Условия перехода, подсветка в карточке: красные поля, которые нужно заполнить, зелёные — уже заполненные, и полоса под этапами. */
/* Рамка — накладка поверх всей строки (подпись и значение), а не тень самой строки: ячейки внутри красят собственный фон и при наведении
   перекрашивались бы поверх тени, и обводка мигала и пряталась. Накладка лежит выше них и событий не ловит (pointer-events:none).
   Углы — как у выделенной ячейки (.fv.fvedit): прямоугольная в середине блока, на первой и последней строке — со скруглением блока,
   иначе обрезка блоком съела бы угол рамки. */
.frow.gt-need,.frow.gt-done,.fcap-wrap.gt-need,.fcap-wrap.gt-done{position:relative}
.gt-need::after,.gt-done::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:0}
.gt-need::after{box-shadow:inset 0 0 0 2px #D64034;background:rgba(214,64,52,.07)}
.gt-done::after{box-shadow:inset 0 0 0 2px rgba(52,160,90,.6);background:rgba(52,160,90,.08)}
:is(.frow,.fcap-wrap):first-child.gt-need::after,:is(.frow,.fcap-wrap):first-child.gt-done::after{
  border-top-left-radius:calc(var(--radius) - 1px);border-top-right-radius:calc(var(--radius) - 1px)}
:is(.frow,.fcap-wrap):last-child.gt-need::after,:is(.frow,.fcap-wrap):last-child.gt-done::after{
  border-bottom-left-radius:calc(var(--radius) - 1px);border-bottom-right-radius:calc(var(--radius) - 1px)}
.gt-pulse::after{animation:gtpulse .9s ease-out 1}
@keyframes gtpulse{0%{background:rgba(214,64,52,.3)}100%{background:rgba(214,64,52,.07)}}
.gt-bar{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:8px 12px;border-radius:calc(10px * var(--el,1));
  background:rgba(214,64,52,.09);color:var(--tx);font-size:13px;line-height:1.4}
.gt-bar.ok{background:rgba(52,160,90,.12)}
.gt-tx{flex:1;min-width:0}
.gt-force{flex:0 0 auto;border:1px solid rgba(214,64,52,.5);background:var(--card-bg,#fff);color:#B3261E;border-radius:calc(8px * var(--el,1));
  padding:5px 10px;font:inherit;font-weight:500;cursor:pointer;white-space:nowrap}
.gt-force:hover{background:rgba(214,64,52,.08)}
.gt-x{flex:0 0 auto;border:0;background:none;color:#8E8E93;font-size:14px;cursor:pointer;padding:2px 4px}
.gt-x:hover{color:var(--tx)}
.gtd-danger{background:#D64034 !important}
@media (prefers-reduced-motion:reduce){.gt-pulse::after{animation:none}}

/* Условия значения поля-списка: замок на плашке в настройке поля и редактор правил под значениями (gtf-). */
.stchip .stlock{display:inline-flex;align-items:center;gap:2px;padding:0 1px;opacity:.45;font:inherit}
.stchip .stlock svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.stchip .stlock.on{opacity:1}
/* Панель условий — ещё одна строка блока поля, как значения над ней: белая, с волосяной чертой сверху, без собственной рамки и серой заливки
   (фон .fe-body — цвет линии, он просвечивает между строками). Кнопки правил — те же, что в планах и отчётах (.pl-rules). */
.gtf-b{display:flex;flex-direction:column;gap:9px;padding:10px 12px 12px;background:#fff;border-top:var(--stroke-w) solid var(--stroke);min-width:0}
.gtf-h{font:400 12px/16px "SF Pro Text",-apple-system,Inter,sans-serif;color:#8E8E93}
.gtf-h b{font-weight:600;color:var(--tx)}

/* Окно новой записи из главного календаря: выбор календаря (сущности) вверху. */
.dcalpick{display:flex;align-items:center;gap:8px;margin:6px 0 0;padding:0 2px}
.dcalpick[hidden]{display:none}
.dcp-l{font-size:12px;color:#8E8E93}
.dcp-b{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border:var(--stroke-w) solid var(--stroke);border-radius:calc(8px * var(--el,1));
  background:var(--card-bg,#fff);color:var(--tx);font:500 13px/16px var(--cff,inherit);cursor:pointer}
.dcp-b:hover{border-color:var(--line2,#bbb)}
.dcp-b svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.dcp-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}

/* ---------- «Активность»: две половины ----------
   Слева — отбор и сводка, справа — лента, как чат (серый фон, белые облачка). Каждая половина листается сама. */
#usersWrap.ac-on:not([hidden]){display:flex;flex-direction:column;overflow:hidden;padding:0}
#usersAct:not([hidden]){display:flex;flex:1 1 auto;min-height:0;width:100%;position:relative;
  --acb:clamp(320px, var(--acw, 50%), calc(100% - 320px))}               /* ширина левой половины: по умолчанию поровну, границу тянут */
.ac-left{flex:0 0 var(--acb);min-width:0;overflow:auto;padding:22px 28px 36px;background:var(--bg-page,var(--table-bg))}
.ac-right{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;background:var(--chat-bg);border-left:var(--stroke-w) solid var(--line)}
.ac-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:0 18px 26px;overscroll-behavior:none}
.ac-sec{margin:0 0 26px}
.ac-h3{display:flex;align-items:baseline;gap:10px;margin:0 0 10px 12px;font:600 16px/20px var(--font-h2)}
.ac-h3s{font:400 12px/16px var(--font-body);color:var(--tx2)}
.ac-h3 .ac-ref{margin-left:auto}
.ac-row{display:flex;align-items:center;gap:10px;min-width:0}
/* Капсула: контур, внутри плашки; выбранная плашка залита серым, невыбранная — просто серый текст. */
/* Лупа в капсуле людей: нажали — поле растягивается, плашки сужаются по набранному. */
/* Кнопки справа от капсулы. Не выбрано — серая заливка; всё выбрано / свой период задан — системный цвет. */
.ac-range{display:flex;align-items:center;gap:8px;margin:10px 0 0 4px}
.ac-range input{height:34px;border:var(--stroke-w) solid var(--stroke);border-radius:calc(10px * var(--el));background:var(--card-bg);padding:0 8px;font:400 13px var(--font-body);color:var(--tx)}
.ac-range .ac-btn{height:34px;padding:0 14px}
.ac-ref{width:28px;height:28px;border:0;border-radius:calc(10px * var(--el));background:none;color:var(--tx2);cursor:pointer;font-size:16px}
.ac-ref:hover{color:var(--tx);background:var(--chip-bg)}
.ac-sum{padding:0}
.ac-tr{display:grid;grid-template-columns:minmax(0,1.9fr) 1fr 1fr .65fr 1.25fr;gap:8px;align-items:center;padding:9px 12px;font-size:13.5px;border-top:var(--stroke-w) solid var(--stroke)}
.ac-tr:first-child{border-top:0}
.ac-th{padding-top:8px;padding-bottom:8px}
.ac-zero{color:#E5372E}
.ac-feed{padding-top:0}
@media (max-width:900px){
  #usersAct:not([hidden]){flex-direction:column;overflow:auto}
  .ac-left{flex:0 0 auto;overflow:visible}
  .ac-right{flex:0 0 auto;min-height:70vh;border-left:0;border-top:var(--stroke-w) solid var(--line)}
}

/* ---------- «Активность»: капсулы по правилам системы ----------
   Устройство — как у капсулы навигации карточки (.dnav-cap) и вкладок чата: радиус капсулы = радиус плашки (9) + зазор до края (отступ дорожки
   + рамка), поэтому зазор по углам такой же ровный, как по сторонам; отступ дорожки одинаков со всех четырёх сторон (--acp, плотность строк);
   плашка — с прозрачной рамкой того же размера, что у выбранной (выбранная не «растёт»); стекло, обводка и тень — те же, что у капсулы карточки.
   Скругление (--el), обводка (--stroke-w), цвета, тема, плотность (--row, --pill-*) — общие настройки; своё здесь только шрифт 14. */
/* Отступ от пунктов до края капсулы и зазор между пунктами — 5 px (по макету), радиус капсулы от него же. */
#usersAct{--acp:5px;--ac-gap:5px;--ac-rad:calc((9px + var(--acp) + var(--stroke-w)) * var(--el))}
.ac-cap,.ac-btn,.ac-ent{border-radius:var(--ac-rad);
  background:color-mix(in srgb, var(--card-bg) 70%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);
  border:var(--stroke-w) solid color-mix(in srgb, var(--card-bg) 70%, var(--stroke));
  box-shadow:var(--pill-shadow)}
.ac-cap{position:relative;display:flex;align-items:stretch;min-width:0;max-width:100%;overflow:hidden}
.ac-per{flex:0 0 auto;gap:var(--ac-gap);padding:var(--acp)}
.ac-ppl{flex:0 1 auto}                                    /* капсула людей по содержимому: лишнее место не растягивает её, поиск и «Выбрать всех» стоят вплотную; не помещается — сжимается и листается */
.ac-kinds{flex:0 1 auto}
.ac-track{display:flex;align-items:center;gap:var(--ac-gap);padding:var(--acp);min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;scrollbar-width:none}
.ac-track::-webkit-scrollbar{display:none}
.ac-track.ovl.ovr{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%)}
.ac-track.ovl:not(.ovr){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px);mask-image:linear-gradient(90deg,transparent 0,#000 30px)}
.ac-track.ovr:not(.ovl){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent 100%)}
.ac-per button,.ac-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;position:relative;
  background:transparent;border:var(--stroke-w) solid transparent;border-radius:calc(9px * var(--el));
  padding:var(--pill-py) var(--pill-px);cursor:pointer;color:var(--tx2);white-space:nowrap;
  font:400 14px/20px var(--cff, var(--font-body));transition:color .2s ease}
.ac-pill[hidden]{display:none}
.ac-per button:hover,.ac-pill:hover{color:var(--tx)}
.ac-per button.on,.ac-pill.on{background:var(--chip-bg);color:var(--tx)}
.ac-pill .ac-av{width:20px;height:20px;flex-basis:20px;font-size:9px}
/* Лупа в капсуле людей: живёт на всю высоту капсулы слева от дорожки; нажали — поле растягивается, плашки сужаются по набранному. */
/* Кнопки справа от капсулы той же высоты и того же скругления: не выбрано — серая заливка, горит системным цветом — выбрано всё / задан период. */
.ac-row{align-items:stretch}
.ac-btn,.ac-ent{display:inline-flex;align-items:center;flex:0 0 auto;padding:0 var(--pill-px);color:var(--tx2);font:400 14px/20px var(--cff, var(--font-body));cursor:pointer;white-space:nowrap}
.ac-btn{background:color-mix(in srgb, var(--chip-bg) 80%, transparent)}
.ac-btn[data-acrange]{background:color-mix(in srgb, var(--card-bg) 70%, transparent)}
.ac-btn:hover{color:var(--tx)}
.ac-btn.lit{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-d)}
.ac-ent{color:var(--tx);min-height:calc(20px + 2 * (var(--pill-py) + var(--acp) + var(--stroke-w)))}

.ac-grip{left:calc(var(--acb) - 4px)}
@media (max-width:900px){.ac-grip{display:none}}

/* Поиск по людям — своя капсула справа от капсулы людей (как поиск и шестерёнка рядом с вкладками чата): кнопка-плашка того же размера, что пункты;
   нажали — капсула растягивается полем ввода, а плашки людей сужаются по набранному. */
.ac-find{flex:0 0 auto;padding:var(--acp);gap:0;align-items:center}
.ac-srch{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:var(--stroke-w) solid transparent;border-radius:calc(9px * var(--el));
  padding:var(--pill-py) var(--pill-px);color:var(--tx2);cursor:pointer;transition:color .2s ease}
.ac-srch svg{width:16px;height:20px}
.ac-srch:hover,.ac-find.srch .ac-srch{color:var(--tx)}
.ac-psq{flex:0 0 0;width:0;min-width:0;border:0;outline:none;background:none;font:400 14px/20px var(--cff, var(--font-body));color:var(--tx);padding:0;opacity:0;transition:width .2s,opacity .15s}
.ac-find.srch .ac-psq{flex:0 0 160px;width:160px;padding:0 8px 0 0;opacity:1}

/* В левой половине (отбор и сводка) тени у капсул, кнопок и списка раздела не нужны: контур — обычная обводка системы. Тень остаётся у капсулы видов в ленте справа, как у вкладок чата. */
.ac-left :is(.ac-cap,.ac-btn,.ac-ent){box-shadow:none;border-color:var(--stroke);-webkit-backdrop-filter:none;backdrop-filter:none}

/* Плашка загрузки файла: имя, процент, полоса и «Отмена» (up- — приставка этого блока). */
.up-toast{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(24px + env(safe-area-inset-bottom));z-index:300;
  width:min(340px,calc(100vw - 32px));box-sizing:border-box;padding:10px 12px 12px 14px;border-radius:14px;
  background:#272727;color:#fff;font:500 13.5px/18px var(--cff,-apple-system,sans-serif);
  box-shadow:0 6px 22px rgba(0,0,0,.28);animation:fdpop .3s cubic-bezier(.16,1,.3,1) both}
.up-top{display:flex;align-items:center;gap:10px;min-width:0}
.up-name{flex:1 1 auto;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-pct{flex:0 0 auto;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7);font-weight:400}
.up-stop{flex:0 0 auto;border:0;background:rgba(255,255,255,.14);color:#fff;font:500 12.5px/1 var(--cff,-apple-system,sans-serif);
  padding:6px 10px;border-radius:999px;cursor:pointer}
.up-stop:hover{background:rgba(255,255,255,.24)}
.up-stop:disabled{opacity:.6;cursor:default}
.up-stop[hidden]{display:none}
.up-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin-top:9px;overflow:hidden}
.up-bar i{display:block;height:100%;width:0;border-radius:2px;background:#fff;transition:width .15s linear}

/* Галерея: оригинал снимка не загрузился (остаётся превью) — кнопка «повторить» по центру над миниатюрами */
.glr-retry{position:absolute;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:4;border:0;border-radius:999px;padding:8px 16px;
  font:500 13px/18px var(--cff,var(--font-body));color:#1c1c1e;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
html.mob .glr-retry{bottom:calc(96px + env(safe-area-inset-bottom,0px))}