/* Оформление платформы: своя дизайн-система, без фреймворков (R8.2). С раунда 31 — по
   макету Claude Design (08.10.2026): токены, шрифт, каркас и компоненты — его, имена классов —
   наши, на них держатся скрипты и тесты.

   Правила, из которых выведено остальное.

   1. ЦВЕТ, ШРИФТ, ОТСТУП И РАДИУС — ТОКЕНАМИ, а не значениями по месту. Тёмная тема — те же
      имена со своими значениями, а не инверсия: инверсия даёт серый текст на сером фоне ровно
      там, где его читают дольше всего.
   2. ПЯТЬ СМЫСЛОВ ЦВЕТА на весь портал: синий — идёт процесс или ждёт решения, зелёный —
      сделано, жёлтый — нужно внимание, красный — не получилось или просрочено, серый — справка.
      Жёлтое, которое значит «просто ждёт», перестаёт сигналить.
   3. КАРТОЧКИ БЕЗ ТЕНЕЙ — рамкой. Тень только у того, что всплывает: меню, воронка, перенос.
   4. ШИРИНА — В КОЛОНКИ. Широкий экран добавляет колонки, а не поля по краям; пояснения — не
      шире 72 знаков. Страница никогда не листается вбок: вбок листается только таблица, и это
      видно.
   5. ТЕМА ВЫБИРАЕТСЯ ЧЕЛОВЕКОМ И ПОМНИТСЯ у браузера (`data-theme` на <html>): это настройка
      глаз, а не учётки. «Как в системе» — отсутствие атрибута.
   6. ДВИЖЕНИЕ СЛУЖЕБНОЕ: только `transform`, `opacity` и цвет, 120–200 мс, и всё это
      выключается при `prefers-reduced-motion`. */

/* ── Шрифт: своими файлами — страница выглядит одинаково на любой машине ───────────────── */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }

/* ── Токены ────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* шрифт: восемь размеров на всё */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-cap: 500 12px/16px var(--font);     /* теги, счётчики, подписи под графиками */
  --f-meta: 400 13px/18px var(--font);    /* подписи полей, время, шапка таблицы */
  --f-meta-m: 500 13px/18px var(--font);
  --f-body: 400 14px/20px var(--font);    /* основной текст, ячейки, кнопки */
  --f-body-m: 500 14px/20px var(--font);
  --f-title: 600 16px/24px var(--font);   /* заголовок карточки, название блока */
  --f-h2: 600 20px/28px var(--font);      /* раздел длинной страницы */
  --f-h1: 600 24px/32px var(--font);      /* заголовок экрана, ФИО в карточке */
  --f-num: 600 28px/32px var(--font);     /* число в плитке */
  --f-group: 600 11px/16px var(--font);   /* группы колонок, ПРОПИСНЫМИ */

  /* отступы: шаг 4 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* скругления: метки, теги, кнопки и поля, карточки и плитки, панели телефона */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;

  /* высоты: в строках, обычные, под палец */
  --h-sm: 28px;
  --h-md: 36px;
  --h-lg: 44px;
  --row: 32px;   /* строка таблицы; 40 — просторно */

  /* каркас */
  --side-w: 240px;
  --band-h: 52px;
  --page-pad: 24px;
  --gap: 16px;
  /* Пояснение под заголовком — строкой до 900 точек, как в макете (раунд 31). */
  --text-max: 900px;

  /* цвет — светлая */
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef1f5;
  --line: #e3e7ed;
  --line-strong: #cbd2dc;
  --text: #141820;
  --text-2: #4a5361;
  --text-3: #636d7e;
  --accent: #2c5fd6;
  --accent-fill: #2c5fd6;
  --accent-fill-hover: #234fb8;
  --on-accent: #ffffff;
  --accent-soft: #ebf1fd;
  --accent-line: #b9cdf6;
  --warn-soft: #fff4d9;
  --warn-line: #ecc56b;
  --warn-text: #7f5200;
  --warn-mark: #e0a100;
  --danger: #c42f28;
  --danger-fill: #c42f28;
  --danger-soft: #fdecea;
  --danger-line: #f1bdb9;
  --success: #17784a;
  --success-soft: #e6f5ed;
  --success-line: #a9dcc0;
  --focus: rgb(44 95 214 / 40%);
  --sh-pop: 0 12px 32px rgb(16 24 40 / 14%), 0 2px 6px rgb(16 24 40 / 6%);
  --sh-drag: 0 8px 20px rgb(16 24 40 / 16%);
  --sh-edge: 4px 0 8px -6px rgb(0 0 0 / 30%);   /* край закреплённой колонки */
  --overlay: rgb(16 24 40 / 32%);
  /* стрелка списка выбора: SVG не умеет currentColor из data-адреса — цвет на тему свой */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5361' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23636d7e' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");

  --fast: 120ms;
  --slow: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
}

/* Тёмная — те же имена. «Как в системе» — ниже тем же набором: держите блоки одинаковыми. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116;
  --surface: #161a21;
  --surface-2: #1b2029;
  --surface-3: #232a35;
  --line: #2a313d;
  --line-strong: #3b4453;
  --text: #e7eaf0;
  --text-2: #b3bbc8;
  --text-3: #8d97a7;
  --accent: #6b97ff;
  --accent-fill: #3767ea;
  --accent-fill-hover: #4676f0;
  --on-accent: #ffffff;
  --accent-soft: #1b2742;
  --accent-line: #2f4a85;
  --warn-soft: #3a2d0e;
  --warn-line: #8a6519;
  --warn-text: #f1c55e;
  --warn-mark: #e8b236;
  --danger: #ff8c84;
  --danger-fill: #c93a32;
  --danger-soft: #3a1716;
  --danger-line: #7a2b27;
  --success: #5ed49a;
  --success-soft: #10301f;
  --success-line: #1f6140;
  --focus: rgb(107 151 255 / 50%);
  --sh-pop: 0 12px 32px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 35%);
  --sh-drag: 0 8px 20px rgb(0 0 0 / 50%);
  --sh-edge: 4px 0 8px -6px rgb(0 0 0 / 70%);
  --overlay: rgb(0 0 0 / 55%);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3bbc8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d97a7' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e1116;
    --surface: #161a21;
    --surface-2: #1b2029;
    --surface-3: #232a35;
    --line: #2a313d;
    --line-strong: #3b4453;
    --text: #e7eaf0;
    --text-2: #b3bbc8;
    --text-3: #8d97a7;
    --accent: #6b97ff;
    --accent-fill: #3767ea;
    --accent-fill-hover: #4676f0;
    --on-accent: #ffffff;
    --accent-soft: #1b2742;
    --accent-line: #2f4a85;
    --warn-soft: #3a2d0e;
    --warn-line: #8a6519;
    --warn-text: #f1c55e;
    --warn-mark: #e8b236;
    --danger: #ff8c84;
    --danger-fill: #c93a32;
    --danger-soft: #3a1716;
    --danger-line: #7a2b27;
    --success: #5ed49a;
    --success-soft: #10301f;
    --success-line: #1f6140;
    --focus: rgb(107 151 255 / 50%);
    --sh-pop: 0 12px 32px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 35%);
    --sh-drag: 0 8px 20px rgb(0 0 0 / 50%);
    --sh-edge: 4px 0 8px -6px rgb(0 0 0 / 70%);
    --overlay: rgb(0 0 0 / 55%);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3bbc8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d97a7' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
  }
}

/* ── Основа ────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Якорь (возврат к строке, оглавление карточки) встаёт под прилипшую полосу, а не под неё
   (раунд 32): у дерева над ним ещё полоса инструментов — свой `scroll-margin-top`. */
html { scroll-padding-top: calc(var(--band-h) + var(--s-4)); }
/* «К содержимому» — первым по Tab, за краем, пока не в фокусе. */
.skip-link { position: fixed; top: var(--s-2); left: var(--s-2); z-index: 90; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-pop); color: var(--text); font: var(--f-body-m); transform: translateY(-200%); }
.skip-link:focus { transform: none; text-decoration: none; }
main:focus { outline: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
h1 { font: var(--f-h1); letter-spacing: -0.01em; }
h2 { font: var(--f-title); }
h3 { font: 600 14px/20px var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
/* Только на телефоне и только не на телефоне — для двух подписей одной кнопки. */
.phone-only { display: none !important; }

/* Видимое кольцо фокуса 3 px у всего, что нажимается и правится (AA, работа с клавиатуры). */
:focus { outline: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
  border-radius: var(--r-sm);
}

/* ── Каркас: меню слева, справа — полоса блока, шапка экрана и содержимое ─────────────── */

.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.main { min-width: 0; display: flex; flex-direction: column; }

/* Меню. Рабочие блоки — строкой на пункт, «Скоро» — свёрнуто, учётка и тема — внизу. */
.side {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.side-top { flex: none; display: flex; align-items: center; height: 56px; padding: 0 var(--s-2) 0 var(--s-4); }
.side-logo { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; color: var(--text); font: var(--f-title); letter-spacing: -0.01em; }
.side-logo:hover { text-decoration: none; }
.side-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-md); background: var(--accent-fill); color: var(--on-accent); font: 600 14px/1 var(--font); }
/* Крестик закрытия — только у выезжающей панели телефона. */
.side-close { display: none; place-items: center; flex: none; width: var(--h-lg); height: var(--h-lg); border-radius: var(--r-md); color: var(--text-2); }
.side-close:hover { background: var(--surface-3); color: var(--text); }

.side-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2) var(--s-3); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.side-item {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--text);
  font: var(--f-body-m);
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.side-item svg { flex: none; color: var(--text-2); }
.side-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-item:hover { background: var(--surface-3); text-decoration: none; }
.side-item[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-item[aria-current] svg { color: currentColor; }
.side-sep { flex: none; height: 1px; margin: var(--s-2) var(--s-3); background: var(--line); }

/* «Скоро в портале»: строка со счётом и подсказкой; раскрытое помнит браузер. Без скрипта —
   раскрыто всегда (класса `js` нет), иначе его не свернуть и не раскрыть. */
.side-soon { display: flex; flex-direction: column; gap: 2px; }
.side-soon-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: var(--s-1) var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  font: var(--f-meta-m);
  text-align: left;
  cursor: pointer;
}
.side-soon-toggle:hover { background: var(--surface-3); color: var(--text); }
.side-soon-chevron { display: grid; place-items: center; flex: none; width: 18px; transition: transform var(--fast) var(--ease); }
.side-soon-title { flex: 1; min-width: 0; }
.side-soon-count { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font: var(--f-cap); }
.side-soon-hint { padding: 0 var(--s-3) 0 40px; color: var(--text-3); font: 400 12px/16px var(--font); }
.side-soon-list { display: flex; flex-direction: column; gap: 2px; }
.side-soon-item {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-3);
  font: var(--f-meta);
  white-space: nowrap;
}
.side-soon-item svg { flex: none; margin: 0 1px; }
.side-soon-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-soon-item:hover { background: var(--surface-3); color: var(--text-2); text-decoration: none; }
.side-soon-item[aria-current] { background: var(--surface-3); color: var(--text); font-weight: 500; }
.js .side-soon-list { display: none; }
.js.soon-open .side-soon-list, .js .side-soon.here .side-soon-list { display: flex; }
.js.soon-open .side-soon-hint, .js .side-soon.here .side-soon-hint, html:not(.js) .side-soon-hint { display: none; }
.js.soon-open .side-soon-chevron, .js .side-soon.here .side-soon-chevron, html:not(.js) .side-soon-chevron { transform: rotate(90deg); }

/* Учётка — она же личный кабинет (R24.1); под ней — тема и выход. */
.side-foot { flex: none; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.side-me { display: flex; align-items: center; gap: 10px; padding: 6px var(--s-2); border-radius: var(--r-md); color: var(--text); }
.side-me:hover { background: var(--surface-3); text-decoration: none; }
.side-me-text { flex: 1; min-width: 0; }
.side-me-text b { display: block; overflow: hidden; font: var(--f-body-m); text-overflow: ellipsis; white-space: nowrap; }
.side-me-text span { display: block; color: var(--text-3); font: var(--f-meta); }
.side-me[aria-current] { background: var(--accent-soft); color: var(--accent); }
.side-me[aria-current] .avatar { background: var(--surface); color: var(--accent); }
.side-me[aria-current] .side-me-text b { font-weight: 600; }
.side-me[aria-current] .side-me-text span { color: var(--text-2); }
.avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--surface-3); color: var(--text); font: 600 13px/1 var(--font); }
.side-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font: 600 12px/20px var(--font); text-align: center; animation: fade var(--fast) var(--ease); }
.side-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 0 var(--s-1); }
.themes { display: flex; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--surface-3); }
.themes button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.themes button:hover { color: var(--text); }
.themes button[aria-checked="true"] { border-color: var(--line); background: var(--surface); color: var(--text); }
.side-exit-form { margin: 0; }
.side-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-sm);
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  font: var(--f-meta-m);
  cursor: pointer;
}
.side-exit:hover { background: var(--surface-3); color: var(--text); }

/* Подложка под выезжающим меню телефона. */
.scrim { display: none; }

/* Строка сверху — только у телефона и вертикального планшета. */
.topbar { display: none; }

/* Полоса блока: название и вкладки подчёркиванием; прилипает при прокрутке. */
.band {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex: none;
  align-items: stretch;
  gap: var(--s-6);
  min-width: 0;
  height: var(--band-h);
  padding: 0 var(--page-pad);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.band-name { display: flex; flex: none; align-items: center; font: var(--f-title); white-space: nowrap; }
.band-tabs { display: flex; align-items: stretch; gap: var(--s-1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.band-tabs::-webkit-scrollbar { display: none; }
.band-tabs a {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0 var(--s-3);
  color: var(--text-2);
  font: var(--f-body-m);
  white-space: nowrap;
  transition: color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.band-tabs a:hover { color: var(--text); text-decoration: none; box-shadow: inset 0 -2px 0 var(--line-strong); }
.band-tabs a[aria-current] { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.band-tabs a.soon { color: var(--text-3); }
.band-tabs a.soon[aria-current] { color: var(--text-2); }

/* Содержимое: поля страницы — токеном, ширина — в колонки, без полей по краям. */
.page { flex: 1; min-width: 0; padding: var(--s-5) var(--page-pad) var(--s-8); }
/* Экран-инструмент (общая таблица): страница не листается, таблица занимает высоту окна. */
.page.fill { display: flex; flex-direction: column; min-height: 0; }

/* Шапка экрана: заголовок и одна фраза — слева, главные действия — справа. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-5); }
.page-title { flex: 1 1 380px; min-width: 0; }
.page-title h1 { font: var(--f-h1); letter-spacing: -0.01em; }
.page-title > p { max-width: var(--text-max); margin-top: 2px; color: var(--text-2); text-wrap: pretty; }
.page-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.back-link { margin: 0 0 var(--s-3); font: var(--f-meta-m); }
.back-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.back-link a:hover { color: var(--text); text-decoration: none; }

/* «?» у заголовка: правила экрана, пока к ним не привыкли. */
.help-pop { position: relative; }
.help-pop > summary { list-style: none; }
.help-pop > summary::-webkit-details-marker { display: none; }
.help-sheet {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(420px, calc(100vw - 32px));
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  color: var(--text-2);
  font: var(--f-meta);
  animation: rise var(--fast) var(--ease);
}
/* Кнопка у левого края — лист раскрывается вправо от неё (раунд 32, `app.js`). */
.help-sheet.to-right, .menu .sheet.to-right { right: auto; left: 0; }
/* Свёртка отбора есть только на телефоне (журнал, раунд 32). */
.filter-fold > .filter-fold-sum { display: none; }
.help-sheet ul { margin: 0; padding-left: 18px; }
.help-sheet li + li { margin-top: 6px; }

/* ── Компоненты ────────────────────────────────────────────────────────────────────── */

/* Кнопки. Без класса — главная (одна на экране); `.ghost` — обычная, `.quiet` — тихая,
   `.danger` — опасная, `.danger-line` — опасная с рамкой, `.danger-ghost` — тихая опасная.
   Размеры: 36 обычная, `.sm` 28 — в строках, `.lg` 44 — на телефоне. */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h-md);
  padding: 0 var(--s-4);
  border: 1px solid var(--accent-fill);
  border-radius: var(--r-md);
  background: var(--accent-fill);
  color: var(--on-accent);
  font: var(--f-body-m);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
button:hover, .button:hover { border-color: var(--accent-fill-hover); background: var(--accent-fill-hover); text-decoration: none; }
button:focus-visible, .button:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--focus); border-radius: var(--r-md); }
button.ghost, .button.ghost { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
button.ghost:hover, .button.ghost:hover { border-color: var(--text-3); background: var(--surface-2); }
button.ghost:focus-visible, .button.ghost:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
button.quiet, .button.quiet { padding: 0 var(--s-3); border-color: transparent; background: transparent; color: var(--text-2); }
button.quiet:hover, .button.quiet:hover { border-color: transparent; background: var(--surface-3); color: var(--text); }
button.quiet:focus-visible, .button.quiet:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
button.danger, .button.danger { border-color: var(--danger-fill); background: var(--danger-fill); color: #fff; }
button.danger:hover, .button.danger:hover { border-color: var(--danger-fill); background: var(--danger-fill); filter: brightness(1.08); }
button.danger-line, .button.danger-line { border-color: var(--danger-line); background: var(--surface); color: var(--danger); }
button.danger-line:hover, .button.danger-line:hover { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
button.danger-ghost, .button.danger-ghost { padding: 0 var(--s-3); border-color: transparent; background: transparent; color: var(--danger); }
button.danger-ghost:hover, .button.danger-ghost:hover { border-color: transparent; background: var(--danger-soft); color: var(--danger); }
button.sm, .button.sm { height: var(--h-sm); padding: 0 var(--s-3); font: var(--f-meta-m); }
button.lg, .button.lg { height: var(--h-lg); padding: 0 var(--s-5); }
button.block, .button.block { width: 100%; }
button.icon, .button.icon { width: var(--h-md); padding: 0; }
button:disabled, .button[aria-disabled="true"] { border-color: var(--line); background: var(--surface-2); color: var(--text-3); cursor: not-allowed; filter: none; }
button.link {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: var(--f-meta);
  text-decoration: underline;
}
button.link:hover { background: none; color: var(--text); }
/* Занята: показывает, что работает, и не нажимается второй раз. */
button[aria-busy="true"], .button[aria-busy="true"], form[aria-busy] button[type="submit"] { cursor: progress; opacity: 0.85; }
button[aria-busy="true"]::before, .button[aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
/* Поле с подписью и кнопка в одной строке: кнопка встаёт вровень с полем, а не по середине
   «подпись + поле». */

/* Переключатель из 2–4 вариантов: «Работают · Уволены · Все», «Идут · Завершены · Все». */
.segments { display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--surface-3); white-space: nowrap; }
.segments .seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font: var(--f-body-m);
  white-space: nowrap;
}
.segments .seg:hover { color: var(--text); text-decoration: none; }
.segments .seg b { color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.segments .seg.on { border-color: var(--line); background: var(--surface); color: var(--text); }
.segments .seg.on b { color: var(--accent); font-weight: 600; }

/* Теги — плашки состояний, пять смыслов цвета. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
  font: var(--f-cap);
  white-space: nowrap;
  vertical-align: middle;
}
.tag.accent { background: var(--accent-soft); color: var(--accent); }
.tag.ok, .tag.success { background: var(--success-soft); color: var(--success); }
.tag.warn { background: var(--warn-soft); color: var(--warn-text); }
.tag.danger, .tag.late, .tag.gone { background: var(--danger-soft); color: var(--danger); }
.tag.sm { height: 18px; padding: 0 6px; border-radius: var(--r-xs); font: 500 11px/16px var(--font); }
/* Сколько обязательных пусто — в строке таблицы, у блока карточки, в оглавлении. */
.gap-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--warn-line);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn-text);
  font: 600 11px/16px var(--font);
  font-variant-numeric: tabular-nums;
}

/* Плитки: число крупно и что оно значит; они же отбор. Подпись переносится, а не режется. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 84px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-2);
  font: var(--f-meta);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
a.tile:hover { border-color: var(--line-strong); text-decoration: none; }
.tile b { color: var(--text); font: var(--f-num); font-variant-numeric: tabular-nums; }
.tile span { text-wrap: pretty; }
.tile.warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn-text); font: var(--f-meta-m); }
.tile.warn b { color: var(--warn-text); }
.tile.late { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); font: var(--f-meta-m); }
.tile.late b { color: var(--danger); }
/* Ноль — серым и мельче: внимание к ненулевым. */
.tile.zero:not(.on) { border-color: var(--line); background: var(--surface); color: var(--text-3); font: var(--f-meta); }
.tile.zero:not(.on) b { color: var(--text-3); font: 600 20px/32px var(--font); }
.tile.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font: var(--f-meta-m); }
.tile.on b { color: var(--text); }
.tile.on::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 12px;
  height: 7px;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Компактная — в строке инструментов над деревом и таблицей. */
.tiles.compact { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tiles.compact .tile { flex-direction: row; align-items: center; gap: 6px; min-height: 0; height: var(--h-md); padding: 0 var(--s-3); border-radius: var(--r-md); font: var(--f-meta-m); white-space: nowrap; }
.tiles.compact .tile b { font: 600 16px/20px var(--font); }
.tiles.compact .tile.on::after { position: static; flex: none; width: 10px; height: 5px; margin-left: 2px; transform: rotate(-45deg) translateY(-2px); }

/* Карточка: поверхность, рамка 1 px, без тени. */
.card { min-width: 0; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.card > h2 { margin-bottom: var(--s-3); font: var(--f-title); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-3); margin-bottom: var(--s-3); }
.card-head h2 { margin: 0; font: var(--f-title); }
.card-head .meta { color: var(--text-3); font: var(--f-meta); }
.card.flush { padding: 0; overflow: hidden; }

/* Слова вокруг: подсказка, «пока ничего нет», пояснение под блоком. */
.hint { color: var(--text-3); font: var(--f-meta); }
.subtle { display: block; color: var(--text-3); font: var(--f-meta); }
.subtle.late { color: var(--danger); font-weight: 500; }
.empty-line { color: var(--text-2); }
.help-line { margin: var(--s-3) 0 0; color: var(--text-3); font: var(--f-meta); }
.card > h2 + .help-line { margin-top: calc(var(--s-1) * -2); margin-bottom: var(--s-3); }
.card > p.hint { margin: 0 0 var(--s-3); }
.card > p.hint:last-child { margin-bottom: 0; }

/* Сообщения. Отказ и предупреждение стоят рядом с тем, к чему относятся (`.note.warn`,
   `.error`); короткое подтверждение — всплывашка внизу слева (`.note.ok`). Значок — маской:
   разметке он не нужен. */
.note, .error, .alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--text);
  font: var(--f-body);
  animation: rise var(--slow) var(--ease);
}
.note::before, .error::before, .alert::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--note-icon) center / contain no-repeat;
  mask: var(--note-icon) center / contain no-repeat;
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E");
}
.note.warn {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn-text);
}
.note.warn::before, .note.small::before {
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4M12 17.3v.1'/%3E%3C/svg%3E");
}
.error {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}
.error::before, .alert.danger::before {
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
}
.alert.success { border-color: var(--success-line); background: var(--success-soft); }
.alert.success::before { color: var(--success); --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.alert.warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn-text); }
.alert.danger { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.note.small, .alert.small { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); font: var(--f-meta); }

/* Всплывашка подтверждения: внизу слева, уходит сама через 4 секунды (app.js), без скрипта
   — анимацией. Тёмная на светлом и светлая на тёмном: читается поверх чего угодно. */
.note.ok {
  position: fixed;
  left: calc(var(--side-w) + var(--s-6));
  bottom: var(--s-6);
  z-index: 70;
  align-items: center;
  width: max-content;
  max-width: min(560px, calc(100vw - var(--side-w) - 48px));
  margin: 0;
  padding: 10px 8px 10px var(--s-4);
  border: 0;
  background: var(--text);
  box-shadow: var(--sh-pop);
  color: var(--bg);
  font: var(--f-body-m);
  animation: rise var(--slow) var(--ease), toast-out var(--slow) var(--ease) 6s forwards;
}
.note.ok::before { --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); margin-top: 0; }
.note.ok a { color: inherit; text-decoration: underline; }
.note-close {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--h-sm);
  height: var(--h-sm);
  margin-left: var(--s-1);
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  font: 400 13px/1 var(--font);
  opacity: 0.7;
}
.note-close:hover { border: 0; background: rgb(127 127 127 / 20%); opacity: 1; }
.note.gone { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }

/* Пустые состояния: почему пусто и что можно сделать. Рамка — по содержимому. */
.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.empty-state .soon-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-3); color: var(--text-2); }
.empty-state h2 { margin: 4px 0 0; font: 600 15px/22px var(--font); }
.empty-state p:not(.help-line) { max-width: 56ch; color: var(--text-2); font: var(--f-meta); }
.empty-state .help-line { margin-top: 6px; }
.card.stub, .card.soon { border-style: dashed; border-color: var(--line-strong); }
.card.stub .soon-icon, .card.soon .soon-icon { background: var(--accent-soft); color: var(--accent); }
/* «Скоро здесь» — одной строкой в конце рабочей страницы. */
.soon-line { padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--text-3); font: var(--f-meta); }
.soon-line b { color: var(--text-2); font-weight: 600; }

/* Поля и формы. Подпись над полем, подсказка под ним. Одна высота у поля, списка и кнопки. */
label { display: block; margin-bottom: 6px; color: var(--text-2); font: var(--f-meta-m); }
input[type="email"], input[type="password"], input[type="text"], input[type="date"],
input[type="time"], input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  height: var(--h-md);
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: var(--f-body);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
textarea { height: auto; min-height: 68px; padding: 10px var(--s-3); line-height: 1.45; resize: vertical; }
/* У списка поля сверху и снизу — ноль: высоту держит `height`, текст браузер ставит по центру
   сам; иначе у «у», «р», «д» срезало хвосты (грабля 66). Стрелка — своя, на тему. */
select {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
select[multiple] { padding-right: var(--s-3); background-image: none; }
/* Раскрытый список рисует браузер. У списка с прозрачным фоном (поле «Место:», «Сотрудник:»)
   он брал белый фон, а текст — светлый тёмной темы: пунктов не было видно (раунд 32). Пункты
   красим сами — в любой теме. */
select option, select optgroup { background-color: var(--surface); color: var(--text); }
select option:disabled { color: var(--text-3); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
input:disabled, select:disabled, textarea:disabled { border-color: var(--line); background-color: var(--surface-2); color: var(--text-3); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-fill); }
.field { margin-bottom: var(--s-3); }
.field-hint { margin-top: 4px; color: var(--text-3); font: 400 12px/16px var(--font); }
.field.bad label, .field.bad .field-hint { color: var(--danger); }
.field.bad input, .field.bad select { border-color: var(--danger); }

/* Поиск с лупой внутри поля. */
.search { position: relative; display: block; }
.search > svg { position: absolute; top: 50%; left: 10px; color: var(--text-3); transform: translateY(-50%); pointer-events: none; }
.search input { padding-left: 36px; }

/* Отбор — поле с подписью внутри: «Событие: все события» (раунд 31). Строка отбора — одна,
   список начинается выше. Подпись — часть поля: щелчок по ней открывает список. Справа в
   строке — сколько нашлось. */
.filter-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.filter-line .filter-count { margin-left: auto; color: var(--text-3); font: var(--f-meta); white-space: nowrap; }
.pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: var(--h-md);
  margin: 0;
  padding: 0 0 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: var(--f-body);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.pick > span { flex: none; color: var(--text-3); }
.pick select, .pick input { field-sizing: content; width: auto; min-width: 0; max-width: 280px; height: calc(var(--h-md) - 2px); padding-left: 0; border: 0; background-color: transparent; text-overflow: ellipsis; cursor: pointer; }
.pick input { padding-right: var(--s-3); cursor: text; }
.pick select:focus, .pick input:focus { box-shadow: none; }
.pick:hover { border-color: var(--text-3); }
.pick:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.pick.on { border-color: var(--accent-line); background: var(--accent-soft); }

/* Список-таблица (корзина, инструменты, справочники). */
table.list { width: 100%; border-collapse: collapse; font: var(--f-body); }
table.list th, table.list td { padding: var(--s-2) 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.list th { color: var(--text-3); font: 600 12px/16px var(--font); }
table.list tr:last-child td { border-bottom: 0; }
table.list .num { width: 1%; color: var(--text-2); text-align: right; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); white-space: nowrap; }
.row-actions form { margin: 0; }
.row-actions button, .row-actions .button { height: var(--h-sm); padding: 0 var(--s-3); font: var(--f-meta-m); }

/* Меню действий на `<details>` — у узла дерева и у строки таблицы. */
.menu { position: relative; flex: none; }
.menu > summary {
  display: grid;
  place-items: center;
  width: var(--h-sm);
  height: var(--h-sm);
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { background: var(--surface-3); color: var(--text); }
.menu .sheet {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  padding: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  animation: rise var(--fast) var(--ease);
}
.menu .sheet a, .menu .sheet button {
  justify-content: flex-start;
  height: auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text);
  font: var(--f-body);
  text-align: left;
  white-space: nowrap;
}
.menu .sheet a:hover, .menu .sheet button:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
.menu .sheet button.danger { color: var(--danger); filter: none; }
.menu .sheet button.danger:hover { background: var(--danger-soft); }
.menu .sheet hr { margin: var(--s-1) 0; border: 0; border-top: 1px solid var(--line); }

/* Страницы длинного списка: «новее», номера, «старше», счёт справа. */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-1); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); font: var(--f-meta-m); }
.pager .numbers { display: flex; flex-wrap: wrap; gap: 2px; }
.pager a, .pager .now, .pager .gap, .pager .step {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: var(--h-sm);
  padding: 0 var(--s-2);
  border-radius: var(--r-md);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pager a:hover { background: var(--surface-3); text-decoration: none; }
.pager .now { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pager .gap { min-width: 16px; padding: 0; color: var(--text-3); }
.pager .step.off { color: var(--text-3); }
.pager .count { margin-left: auto; color: var(--text-3); font: var(--f-meta); }

/* Клавиша в подсказке. */
.kbd, kbd { padding: 0 5px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); color: var(--text-2); font: 500 11px/16px var(--font); }

/* Кружок с буквами имени. */
.face { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 14px/1 var(--font); }
.face.big { width: 64px; height: 64px; font-size: 22px; }
.face.sm { width: 28px; height: 28px; font-size: 12px; }

/* Полоска срока или доли. */
.progress { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.progress span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.progress.ok span { background: var(--success); }

/* Плашки условий: что отобрано и крестик, чтобы снять. */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: var(--h-sm); padding: 0 2px 0 10px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font: var(--f-meta-m); }
.chip .drop { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm); color: inherit; font-size: 11px; opacity: 0.75; }
.chip .drop:hover { background: rgb(0 0 0 / 8%); opacity: 1; text-decoration: none; }
.chips .reset { margin-left: var(--s-1); color: var(--text-2); font: var(--f-meta-m); }

/* ── Вход ──────────────────────────────────────────────────────────────────────────── */

.enter { display: grid; place-items: center; min-height: 100vh; padding: var(--s-6) var(--s-4); }
.enter .card { width: min(400px, 100%); padding: var(--s-6); }
.enter .brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-6); color: var(--text); font: var(--f-title); }
.enter .brand:hover { text-decoration: none; }
.enter .brand .mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--accent-fill); color: var(--on-accent); font: 600 15px/1 var(--font); }
/* Имя и подпись — двумя строками: в одну они слипались в «LDR HRплатформа» (раунд 32). */
.enter .brand .mark + span { display: flex; flex-direction: column; }
.enter .brand .mark + span b { font: var(--f-title); letter-spacing: -0.01em; }
.enter .brand .mark + span span { color: var(--text-3); font: var(--f-meta); }
.enter h1 { margin-bottom: var(--s-4); font: var(--f-h2); }
.enter input, .enter button { height: var(--h-lg); }
.enter .field { margin-bottom: var(--s-4); }
/* Ошибка входа — под полем, красной строкой, без плашки. */
.enter .field .error { display: block; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--danger); font: var(--f-meta); animation: none; }
.enter .field .error::before { content: none; }
.enter .card > p.enter-hint { margin: var(--s-4) 0 0; color: var(--text-3); font: var(--f-meta); }

/* ── Движение ──────────────────────────────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -140%) scale(0.96); } }
/* Форма, открытая на месте, появляется так же, как лист меню (раунд 32): найм и узел в дереве,
   «Начать …», формы строки процесса и встречи, «Вернуть» и «Отклонить», поле карточки,
   форма структуры. */
.form-panel, .start-panel[open], .row-form-body, .row-form td > *, .appr-form:not([hidden]),
.def-add[open] > :not(summary), .def-edit-row:not([hidden]) > td > *, .structure-panel:not([hidden]) {
  animation: rise var(--fast) var(--ease);
}
@keyframes grow { from { transform: scaleX(0); } }
@keyframes stretch { from { transform: scaleY(0); } }
@keyframes flash { 0%, 100% { background-color: transparent; } 15% { background-color: var(--accent-soft); } }
@keyframes saved { from { background-color: var(--success-soft); } to { background-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Общие правила узких экранов — до правил экранов: экран уточняет их, а не наоборот ──── */

@media (max-width: 767px) {
  .page { padding-top: var(--s-4); padding-bottom: var(--s-8); }
  /* Заголовок и главное действие — одной строкой, пояснение под ними (раунд 31). */
  .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-2); margin-bottom: var(--s-4); }
  .page-title { display: contents; }
  .page-title h1 { grid-column: 1; grid-row: 1; }
  .page-title > p { grid-column: 1 / -1; grid-row: 2; margin-top: 0; font: var(--f-meta); }
  .page-actions { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
  .page-actions .help-pop { display: none; }
  /* «?» в части экрана на телефоне — листом снизу во всю ширину: от кнопки он уходил за
     край (раунд 32). */
  .help-sheet { position: fixed; top: auto; right: var(--page-pad); bottom: var(--s-4); left: var(--page-pad); z-index: 50; width: auto; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .tile { min-height: 0; padding: var(--s-3); }
  .card { padding: var(--s-4); }
  .face.big { width: 52px; height: 52px; font-size: 18px; }
  .filter-line .pick { flex: 1 1 calc(50% - var(--s-1)); height: var(--h-lg); }
  /* Журнал: подпись и значение в половину строки не помещаются («Что изменилось: всё») —
     поля во всю ширину, кроме дат; всё — под «Отбор» (раунд 32). */
  .journal-filter .pick { flex-basis: 100%; }
  .journal-filter .pick:has(input[type="date"]) { flex-basis: calc(50% - var(--s-1)); }
  .journal-filter > .filter-count { display: none; }
  .filter-fold > .filter-fold-sum { display: flex; align-items: center; gap: var(--s-2); height: var(--h-lg); margin-bottom: var(--s-3); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font: var(--f-body-m); cursor: pointer; list-style: none; }
  .filter-fold > .filter-fold-sum::-webkit-details-marker { display: none; }
  .filter-fold > .filter-fold-sum .filter-count { margin-left: auto; color: var(--text-3); font: var(--f-meta); white-space: nowrap; }
  .filter-fold > .filter-fold-sum::after { content: ""; width: 8px; height: 8px; margin: 0 4px 4px 0; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform var(--fast) var(--ease); }
  .filter-fold[open] > .filter-fold-sum::after { margin-bottom: -4px; transform: rotate(-135deg); }
  .filter-line .pick select, .filter-line .pick input { flex: 1; max-width: none; height: calc(var(--h-lg) - 2px); }
  .filter-line .filter-count { flex-basis: 100%; margin-left: 0; }
  .phone-only { display: inline !important; }
  details.phone-only { display: block !important; }
  .hide-phone { display: none !important; }
}

/* ════════════════ Экраны — прежние правила, переходят на новую систему по одному ════════════════ */

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 5px 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }


/* Две операции в одной карточке: без черты они читаются как одна форма с четырьмя полями. */
hr.split { margin: 18px 0; border: 0; border-top: 1px solid var(--line); }







/* Отбор журнала — два ряда по четыре над списком: кто, где, что, откуда / кем, с, по и
   кнопки. Кнопки — в последней ячейке, а не отдельной строкой: форма не должна быть выше
   того, что она отбирает. */

/* ── Доступы: матрица и задачи Jira (раунды 19–21) ────────────────────────── */

/* «Нет ответственного» — пробел матрицы: виден, а не пропущен (R10.13). */
.lack { color: var(--warn-text); }
.lack.small { display: block; margin-top: 4px; font: var(--f-meta); }

/* Инструменты — чтением, правка по строке (R21.7): «как выдаётся» видно целиком. */
table.tools td { vertical-align: top; }
table.tools td.tool-name { width: 20%; font-weight: 500; }
table.tools td:nth-child(2) { width: 22%; }
table.tools .tool-note { color: var(--text-2); line-height: 1.45; }
table.tools td.num.none { opacity: 0.7; }
/* Где открыть и как войти — для сотрудника (R33.2): адрес — подписью сайта, ниже — как войти. */
table.tools .tool-open { min-width: 180px; color: var(--text-2); }
table.tools .tool-open a, table.tools .tool-open span { display: block; overflow-wrap: break-word; }
table.tools .tool-open input + input { margin-top: 6px; }
table.tools .tool-open input { width: 100%; }
table.tools input[type="text"], table.tools select { height: var(--h-md); padding: 0 9px; font: var(--f-body); }
/* «Держит увольнение» (S33): галочка под названием в правке, плашка — в показе. */
table.tools label.check { display: flex; align-items: center; gap: 6px; margin-top: var(--s-2); color: var(--text-2); font: var(--f-meta); font-weight: 400; }
table.tools label.check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
table.tools td.tool-name .tag { margin-left: 4px; font-weight: 400; }
table.tools textarea { display: block; min-height: var(--h-md); padding: 7px 9px; font: var(--f-body); resize: vertical; }
table.tools tr.editing td, table.tools tr.adding td { background: var(--surface-2); }
table.tools .actions-cell { width: 1%; padding-top: 0; white-space: nowrap; }
@media (max-width: 720px) {
  /* На телефоне строка — карточкой: пять колонок в 390 точек не читаются вовсе. */
  table.tools thead { display: none; }
  table.tools, table.tools tbody, table.tools tr, table.tools td { display: block; width: auto; }
  table.tools tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.tools tr:last-child { border-bottom: 0; }
  table.tools td, table.tools td.tool-name, table.tools td:nth-child(2), table.tools .actions-cell { width: auto; padding: 3px 0; border: 0; }
  table.tools td.num { width: auto; text-align: left; white-space: normal; }
  table.tools td[data-label]::before { content: attr(data-label) ": "; color: var(--text-3); font: var(--f-meta); }
  table.tools tr.editing td[data-label]::before, table.tools tr.adding td[data-label]::before { display: block; margin-bottom: 4px; }
  table.tools tr.editing td, table.tools tr.adding td { padding: 4px 8px; }
  table.tools .row-actions { justify-content: flex-start; margin-top: 6px; }
}

/* Выбор места и «добавить столбец». */
.unit-pick, .add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.unit-pick { margin: 4px 0 14px; }
.add-row { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.unit-pick label, .add-row label { color: var(--text-3); font: var(--f-meta); }
.unit-pick select, .add-row select { width: auto; min-width: 220px; max-width: 100%; height: var(--h-md); font: var(--f-body); }
.unit-pick select { min-width: 300px; }
@media (max-width: 720px) {
  .unit-pick select, .add-row select { flex: 1 1 100%; min-width: 0; }
}

.note-form { margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.note-form label { display: block; margin-bottom: 6px; font: var(--f-meta); color: var(--text-2); }
.note-form textarea { margin-bottom: 8px; }

/* Сетка места: инструменты строками, должности столбцами — должностей в месте единицы,
   инструментов десятки, и так таблица растёт вниз, а не вбок. */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.matrix { border-collapse: collapse; font: var(--f-meta); min-width: 100%; }
table.matrix th, table.matrix td { padding: 7px 10px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
table.matrix tr:last-child th, table.matrix tr:last-child td { border-bottom: 0; }
table.matrix thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); vertical-align: bottom; text-align: center; font-weight: 600; }
table.matrix .tool-col { position: sticky; left: 0; z-index: 1; min-width: 180px; border-left: 0; background: var(--surface); text-align: left; font-weight: 500; }
table.matrix thead .tool-col { z-index: 2; background: var(--surface-2); color: var(--text-3); font-weight: 600; }
table.matrix .pos { min-width: 96px; }
table.matrix .pos-name { display: block; }
table.matrix .pos-meta { display: block; margin-top: 2px; color: var(--text-3); font: var(--f-cap); font-weight: 400; }
table.matrix .pos-from, table.matrix .pos-own { display: block; margin-top: 3px; font: var(--f-cap); }
table.matrix .pos-from { color: var(--text-3); font-weight: 400; }
table.matrix .pos-own { color: var(--accent); font-weight: 500; }
table.matrix td { position: relative; text-align: center; white-space: nowrap; }
/* Галочка — ровно по центру столбца в каждой строке, ✎ — сбоку от неё и места не занимает:
   стоя рядом в строке, он сдвигал галочку влево только там, где он есть, и галочки шли
   зигзагом (раунд 32). */
table.matrix td .note-mark { position: absolute; top: 50%; left: calc(50% + 12px); margin: 0; transform: translateY(-50%); }
table.matrix td.on { background: var(--accent-soft); }
/* Набор сверху: галочка есть, но светлее — «положено, потому что так в департаменте». */
table.matrix td.inh { background: var(--surface-2); }
table.matrix td.inh input[type="checkbox"], table.matrix td.inh .tick { opacity: 0.6; }
table.matrix td input[type="checkbox"] { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--accent); }
table.matrix .tick { color: var(--accent); font-weight: 600; }
/* Инструменты без галочки в месте свёрнуты; `collapse`, а не `none`: ширина колонок не
   должна прыгать от того, что строки развернули (грабля 52). */
table.matrix tr.idle { visibility: collapse; }
table.matrix.all tr.idle { visibility: visible; }
.idle-toggle { margin: 10px 0 0; font: var(--f-meta); }
.grid-actions { margin-top: 14px; }
/* ✎ у галочки — «что сделать при выдаче этой должности». Синий — записано, виден всегда.
   Серый — «записать» — только под курсором и в фокусе: в каждой клетке он был шумом, о
   котором спрашивали «что это». Прозрачный, а не скрытый: скрытую ссылку не достать
   клавишей Tab, и место под значок держит ширину колонки (грабля 52). */
.note-mark { display: inline-block; margin-left: 4px; padding: 0 3px; border-radius: 4px; color: var(--text-3); font: var(--f-cap); opacity: 0; text-decoration: none; vertical-align: middle; }
.note-mark.has { color: var(--accent); opacity: 1; }
table.matrix td:hover .note-mark, .note-mark:focus-visible { opacity: 1; }
.note-mark:hover { background: var(--surface-3); text-decoration: none; }
table.matrix td.inh .note-mark { opacity: 0.6; }
/* Где наведения нет (телефон), «записать» видно всегда — иначе его не найти. */
@media (hover: none) { .note-mark, table.matrix td.inh .note-mark { opacity: 1; } }
.legend { margin: 0 0 10px; }
.legend .note-mark { margin: 0 2px 0 0; opacity: 1; }

/* Части «Доступов и ПО» — вкладками (R23.4): со скриптом видна одна часть, без скрипта — все
   три подряд, и вкладки работают как оглавление-якоря. */
.part-tabs { align-self: flex-start; width: fit-content; max-width: 100%; margin: 0 0 16px; }
.access.tabbed [data-panel]:not(.on) { display: none; }
/* Строка, открытая на правку, растёт вниз, а экран стоит: без этого браузер держал бы на
   месте то, что ниже, и строка уезжала бы вверх из-под курсора. */
.access [data-panel] { overflow-anchor: none; }
.access:not(.tabbed) [data-panel] + [data-panel] { margin-top: 16px; }
.access .card[data-panel] { animation: panel-in var(--fast) var(--ease); }
@keyframes panel-in { from { opacity: 0.4; } to { opacity: 1; } }
form[aria-busy] { opacity: 0.6; transition: opacity var(--fast) var(--ease); }

/* ✎ — окно рядом с галочкой (R23.4): открывается на месте, без перезагрузки и прокрутки. */
.note-pop {
  position: absolute;
  z-index: 40;
  width: min(360px, calc(100vw - 24px));
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top center;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.note-pop.above { transform-origin: bottom center; transform: translateY(4px) scale(0.98); }
.note-pop.shown { opacity: 1; transform: none; }
.note-pop .pop-title { margin: 0; color: var(--text-3); font: var(--f-cap); }
.note-pop .pop-what { margin: 2px 0 8px; font: var(--f-body-m); }
.note-pop .pop-text { margin: 0 0 8px; font: var(--f-body); white-space: pre-wrap; }
.note-pop textarea { display: block; min-height: 72px; font: var(--f-body); resize: vertical; }
.note-pop .pop-error { margin: 6px 0 0; color: var(--danger); font: var(--f-meta); }
.note-pop .pop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.note-pop .pop-actions .hint { margin-left: auto; font: var(--f-cap); font-weight: 400; }
span.note-mark[data-note] { cursor: pointer; }
@media (hover: none) { .note-pop .pop-actions .hint { display: none; } }
table.matrix td.saved { animation: flash 1.8s var(--ease); }

/* ── Разделы HR-процессов (AF-126) ───────────────────────────────────────── */

.start-panel { margin: 0 0 14px; }
.start-panel > summary { list-style: none; width: fit-content; cursor: pointer; }
.start-panel > summary::-webkit-details-marker { display: none; }
.start-panel[open] > summary { margin-bottom: 10px; }
.start-form, .row-form form { padding: var(--s-3) var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.fields-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.fields-inline label { margin: 0; color: var(--text-3); font: var(--f-meta); }
.fields-inline label.wide { flex: 1 1 280px; }
.fields-inline input[type="date"], .fields-inline select { display: block; width: auto; min-width: 170px; max-width: 100%; height: var(--h-md); margin-top: 4px; font: var(--f-body); }
.fields-inline input[type="time"] { display: block; width: auto; min-width: 112px; height: var(--h-md); margin-top: 4px; font: var(--f-body); }
/* Кого ещё позвать (R27.1): приглашённые — галочками, ещё одного — списком. */
.guests { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; margin: 12px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); }
.guests legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; color: var(--text-2); font: var(--f-meta); font-weight: 600; }
.guests label.check { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--text); font: var(--f-body); }
.guests label.check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.guests label.wide { flex: 1 1 260px; max-width: 420px; margin: 0; color: var(--text-3); font: var(--f-meta); }
.guests label.wide select { display: block; width: 100%; height: var(--h-md); margin-top: 4px; font: var(--f-body); }
.guests .hint { flex-basis: 100%; margin: 0 !important; }
.fields-inline label.wide select { width: 100%; }
.fields-inline label.check { display: flex; align-items: center; gap: 8px; color: var(--text-2); font: var(--f-body); }
.start-form .hint, .row-form .hint { margin: 10px 0 0; }
.start-form .actions, .row-form .actions { margin-top: 12px; }
.row-form td { padding: 4px 0 14px !important; background: transparent !important; }
.row-form .form-title { margin: 0 0 10px; font: var(--f-body-m); font-weight: 600; }
.results { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; padding: 0; border: 0; }
.results .radio { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font: var(--f-body); }
.results input { margin: 0; accent-color: var(--accent); }
.process-list .empty { margin: 18px 0 6px; font: var(--f-body); }

/* Кто отвечает за события: событие — строкой, выбор человека рядом. */
.events-list { margin: 0; padding: 0; list-style: none; }
.events-list li { display: grid; grid-template-columns: minmax(180px, 32%) minmax(0, 1fr); align-items: center; gap: 6px 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.events-list .event-name { font: var(--f-body-m); }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.inline-form select { width: auto; min-width: 260px; max-width: 100%; height: var(--h-md); font: var(--f-body); }
@media (max-width: 720px) {
  .events-list li { grid-template-columns: minmax(0, 1fr); }
  .events-list .inline-form select { flex: 1 1 200px; min-width: 0; }
}



/* «Отозвано N из M» у уволенного в общей таблице (AF-154). */
.revoke { flex: none; margin-left: 6px; font: var(--f-cap); font-weight: 400; padding: 1px 7px; }

/* ── Справочники: значения списков выбора (раунд 20, R20.9) ─────────────────── */

.dict + .dict { margin-top: 16px; }
table.dict-values td:first-child { width: 58%; }
table.dict-values input[type="text"] { width: 100%; max-width: 440px; height: var(--h-md); padding: 0 9px; font: var(--f-body); }
table.dict-values .dict-value { font-weight: 500; }
table.dict-values tr.off td { color: var(--text-3); }
table.dict-values tr.off .dict-value { font-weight: 400; }
table.dict-values tr.picked td { animation: flash 1.8s var(--ease); }
table.dict-values tr.renaming td { background: var(--surface-2); }
table.dict-values tr.adding td { background: var(--surface-2); }
.row-actions button.step { width: var(--h-sm); padding: 0; display: inline-grid; place-items: center; }
.row-actions button.step:disabled { opacity: 0.35; cursor: default; }
table.dict-values .rename { flex-wrap: nowrap; }
table.dict-values .rename input[type="text"] { flex: 1 1 auto; min-width: 180px; }
table.dict-values .rename-note { display: block; margin-top: 4px; font: var(--f-meta); }
table.dict-values .actions-cell { width: 1%; white-space: nowrap; }






/* ── Личный кабинет (AF-175, раунды 24 и 26) ─────────────────────────────── */

/* Кабинет читает каждый, а не только HR (раунд 26): крупнее шрифт, больше воздуха, даты
   словами, у каждого блока — одно дело. Общее с другими экранами — выше; здесь то, что есть
   только в кабинете. */

.more { margin: 12px 0 0; font: var(--f-body); }

/* «Обо мне»: кто я, частые дела крупно, «Сейчас» и «к кому обращаться», доступы, путь. */
.cab-me { margin-bottom: 16px; }
.cab-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); align-items: stretch; }
.cab-now { margin: 0 0 10px; font: var(--f-title); }
.cab-pairs { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; font: var(--f-body); }
.cab-pairs dt { color: var(--text-3); }
.cab-pairs dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.cab-pairs dd .subtle { display: inline; }
#accesses, #path { margin-bottom: 16px; }
/* Путь — линией сверху вниз: новое первым, первый рабочий день — внизу, закрашенной точкой. */
.cab-path { position: relative; margin: 0; padding: 0 0 0 24px; list-style: none; }
.cab-path::before { content: ""; position: absolute; top: 8px; bottom: 22px; left: 5px; width: 2px; background: var(--line); }
.cab-path > li { position: relative; padding: 0 0 14px; }
.cab-path > li::before { content: ""; position: absolute; top: 5px; left: -23px; width: 10px; height: 10px; background: var(--surface); border: 2px solid var(--accent); border-radius: 50%; }
.cab-path > li.start::before { background: var(--accent); }
.cab-path-day { display: block; color: var(--text-3); font: var(--f-meta); }
.cab-path ul, .cab-path p { margin: 2px 0 0; padding: 0; list-style: none; font: var(--f-body); }
.cab-data, .cab-team { margin-bottom: 16px; padding: 0; }
.cab-data > summary, .cab-team > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 18px 20px; list-style: none; cursor: pointer; }
.cab-data > summary::-webkit-details-marker, .cab-team > summary::-webkit-details-marker { display: none; }
.cab-data > summary::before, .cab-team > summary::before { content: ""; align-self: center; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform var(--fast) var(--ease); }
.cab-data[open] > summary::before, .cab-team[open] > summary::before { transform: rotate(45deg); }
.cab-data > summary .subtle, .cab-team > summary .subtle { display: inline; }
/* «Команда» (S49): коллега — строкой: лицо, имя с должностью, контакты справа. */
.cab-team-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px 28px; margin: 0; padding: 0 20px 18px; list-style: none; }
.cab-team-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.cab-team-who { display: grid; gap: 2px; min-width: 0; font: var(--f-body); }
.cab-team-who b, .cab-team-who .subtle { overflow-wrap: anywhere; }
.cab-team-how { grid-column: 2; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0; font: var(--f-meta); }
.cab-team-how dt { color: var(--text-3); }
.cab-team-how dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.cab-data-title { color: var(--text); font: var(--f-title); }
.cab-data-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; padding: 0 20px; }
.cab-data-groups h3 { margin: 0 0 8px; color: var(--text-2); }
.cab-data > .help-line { margin: 0; padding: 16px 20px 18px; }
.cab-missing p { margin: 0 0 8px; }
.cab-account { margin: 4px 0 0; color: var(--text-3); font: var(--f-meta); }

/* Ведущий HR, пришедший от отдела (AF-175): светлее своего — как набор доступов сверху. */
.grid td .inherited, .grid td .cell-link.inherited { color: var(--text-3); }
.fields .from-above { display: block; margin-top: 2px; color: var(--text-3); font: var(--f-meta); }


/* ── «Поля карточки» (AF-120) ─────────────────────────────────────────────────
   Классы со своей приставкой `def-`: имя `.fields` занято полями карточки (грабля 42). */
.def-add > summary, .def-edit > summary { list-style: none; }
.def-add > summary::-webkit-details-marker, .def-edit > summary::-webkit-details-marker { display: none; }
.def-add[open] > summary { margin-bottom: 14px; }
.def-form { display: grid; gap: 12px; }
.def-form .field { margin: 0; }
.def-form .actions { margin: 0; }
.def-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .def-grid { grid-template-columns: minmax(0, 1fr); } }
.def-choice { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.def-choice legend { margin-bottom: 4px; padding: 0; color: var(--text-2); font: var(--f-meta); }
.def-check { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); font: var(--f-body); cursor: pointer; }
.def-check input { flex: none; width: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--accent); }
.def-filled { display: block; margin-top: 2px; }
table.field-defs .actions-cell { width: 1%; }
table.field-defs tr.off td { color: var(--text-3); }
table.field-defs tr.picked td { animation: flash 1.8s var(--ease); }
/* Форма правки — строкой под полем на всю ширину таблицы: в ячейке действий она растягивала
   строку и сдвигала кнопку. Колонки — общей ширины во всех блоках (`colgroup`). */
/* На телефоне таблица не сжимается в столбик из букв, а прокручивается в своей рамке
   (`.table-scroll`): страница при этом шире экрана не становится (грабля 61). */
table.field-defs { table-layout: fixed; min-width: 680px; }
table.field-defs col.c-name { width: 34%; }
table.field-defs col.c-kind { width: 26%; }
table.field-defs col.c-acl { width: 20%; }
table.field-defs col.c-req { width: 10%; }
table.field-defs col.c-act { width: 112px; }
table.field-defs td { overflow-wrap: break-word; }
table.field-defs tr.def-edit-row > td .def-form { max-width: 920px; }
/* Таблица шире экрана (телефон) листается вбок — форма правки занимает видимую ширину и не
   уезжает за левый край вместе с таблицей (раунд 32). */
#fields-main .table-scroll { container-type: inline-size; }
table.field-defs tr.def-edit-row > td > * { position: sticky; left: 10px; width: min(920px, calc(100cqw - 20px)); }
table.field-defs tr.def-edit-row > td { padding: 4px 10px 16px; background: var(--surface-2); }
table.field-defs tr:has(+ tr.def-edit-row:not([hidden])) > td { background: var(--surface-2); }
.def-checks { display: grid; gap: 6px; align-content: end; }
.def-edit .actions { display: flex; gap: 8px; }
.def-edit .def-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) minmax(0, 1.2fr); }
@media (max-width: 760px) { .def-edit .def-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Апрув (AF-170): выгрузка за месяц и строка на карточке. Заявка — в 25-finance. ── */
table.appr-export td { vertical-align: top; font: var(--f-body); }
table.appr-export td.appr-day { color: var(--text); font-weight: 600; white-space: nowrap; }
table.appr-export td.appr-person a, table.appr-export td.appr-person b, table.appr-export td.appr-place { white-space: nowrap; }
table.appr-export .appr-sub { display: block; font: var(--f-meta); }
table.appr-export td.appr-by { color: var(--text-3); }
table.appr-export td.appr-by { white-space: nowrap; }
table.appr-export tr.appr-twice td { background: var(--accent-soft); }
.appr-note { margin: 12px 0 0; }
.card-approvals { margin: 0 0 14px; }
.card-approvals .appr-line { margin: 4px 0 0; }

/* ════════════════ Экраны ════════════════ */

/* ── Сводка (раунд 31): шесть плиток в ряд, три карточки одной высоты ─────────────────── */

.tiles.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.summary > .card { display: flex; flex-direction: column; }
.summary .card-head { margin-bottom: 0; }
.summary .card-head + .bars { margin-top: var(--s-4); }
.summary .hint { margin-top: var(--s-1); }

/* Полоски: подпись — полоса — число. Одна серия — один тон; проблемы — жёлтым. */
.bars { display: grid; grid-template-columns: minmax(0, max-content) minmax(48px, 1fr) minmax(20px, max-content); align-items: center; gap: 12px var(--s-3); font-variant-numeric: tabular-nums; }
.bar-key { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.bar-key.warn { color: var(--warn-text); }
.bar-track { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.bar-fill { display: block; height: 100%; min-width: 8px; border-radius: 999px; background: var(--accent); transform-origin: left center; animation: grow 420ms var(--ease); }
.bar-fill.warn { background: var(--warn-mark); }
.bar-fill.quiet { background: var(--text-3); }
.bar-val { color: var(--text-2); text-align: right; }
.bar-val.warn { color: var(--warn-text); }

/* Приёмы по месяцам: число над столбцом, месяц под ним; текущий месяц — жирнее. */
.months { display: grid; flex: 1; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 6px; min-height: 168px; margin-top: var(--s-4); font: var(--f-cap); font-variant-numeric: tabular-nums; text-align: center; }
.month { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; }
.month-val { color: var(--text-2); }
/* Высота столбца — в точках от самого высокого (132): число стоит прямо над столбцом. */
.month-bar { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: var(--accent); transform-origin: bottom center; animation: stretch 420ms var(--ease); }
.month.empty .month-val { color: var(--text-3); }
.month.empty .month-bar { height: 2px !important; background: var(--surface-3); }
.month-cap { color: var(--text-3); font-weight: 400; }
.month.now .month-val, .month.now .month-cap { color: var(--text); font-weight: 600; }

/* Заполненность: кольцо, «43 из 50», чего не хватает, и куда идти заполнять. */
.meter { position: relative; display: flex; align-items: center; gap: var(--s-4); margin: var(--s-4) 0; }
.meter .dial { flex: none; }
.meter .dial circle { fill: none; stroke-width: 8; }
.meter .dial-track { stroke: var(--surface-3); }
.meter .dial-fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray var(--slow) var(--ease); }
.dial-value { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 72px; height: 72px; font: 600 16px/1 var(--font); }
.meter-line { font: var(--f-body-m); }
.meter .hint { margin-top: 2px; }
.summary-go { margin-top: auto; padding-top: var(--s-4); }
.summary-go .hint { margin-top: 2px; }
.go-link { display: inline-flex; align-items: center; gap: 6px; font: var(--f-body-m); }

@media (max-width: 1279px) {
  .tiles.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary > .summary-fill { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .tiles.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary { grid-template-columns: minmax(0, 1fr); }
  .months { min-height: 150px; gap: 4px; }
  .month-bar { max-height: 108px; }
  .bars { gap: 10px var(--s-3); }
  /* На телефоне «заполнить» — кнопкой под палец. */
  .summary-go .go-link { justify-content: center; width: 100%; height: var(--h-lg); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--text); }
  .summary-go .go-link svg { display: none; }
  .summary-go .hint { display: none; }
}

/* ── Общая таблица (AF-119, раунд 31) ──────────────────────────────────────────────────
   Страница не листается: таблица занимает высоту окна и прокручивается внутри своей рамки,
   шапка закреплена сверху, имя — слева. Справа — затухание: видно, что колонки продолжаются. */

.main:has(> .page.fill) { height: 100vh; }
.page.fill { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: var(--s-4); }
.page.fill > .page-head { flex: none; }

/* Одна строка инструментов: кого показывать, поиск, плитки-отборы, группы колонок. */
.table-tools { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.table-search { flex: none; width: 200px; }
.table-search .tally { position: absolute; top: 50%; right: 10px; color: var(--text-3); font: var(--f-cap); transform: translateY(-50%); pointer-events: none; }
.table-search input { padding-right: 52px; }
.tools-sep { width: 1px; height: 24px; margin: 0 var(--s-1); background: var(--line); }
.tools-spacer { flex: 1; }
.page-actions .count, .cols-menu .count { color: var(--text-3); font-weight: 400; }
.page-actions .button .count { margin-left: 2px; }

.tool-tiles { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.tool-tile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-md);
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-2);
  font: var(--f-meta-m);
  white-space: nowrap;
}
.tool-tile b { color: var(--text); font: 600 16px/20px var(--font); font-variant-numeric: tabular-nums; }
.tool-tile.warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn-text); }
.tool-tile.warn b { color: inherit; }
.tool-tile.zero, .tool-tile.zero b { color: var(--text-3); }
button.tool-tile { cursor: pointer; }
button.tool-tile:hover { border-color: var(--warn-mark); background: var(--warn-soft); color: var(--warn-text); }
.tool-tile-check { display: none; }
button.tool-tile[aria-pressed="true"] { border-color: var(--warn-mark); box-shadow: inset 0 0 0 1px var(--warn-mark); }
button.tool-tile[aria-pressed="true"] .tool-tile-check { display: inline-grid; }
.tool-tile.split { gap: 0; padding: 0; overflow: hidden; }
.tool-tile-text { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--s-3); }
.tool-tile.split button { width: var(--h-md); height: 100%; padding: 0; border: 0; border-left: 1px solid var(--warn-line); border-radius: 0; background: transparent; color: inherit; }
.tool-tile.split button:hover { background: rgb(224 161 0 / 14%); }

/* Группы колонок — галочками. */
.cols-menu > summary.button { display: inline-flex; width: auto; height: var(--h-md); padding: 0 var(--s-3); color: var(--text); }
.cols-menu > summary.button svg { color: var(--text-2); }
.cols-menu .sheet { min-width: 260px; padding: var(--s-2); }
.cols-menu .check { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; padding: 0 var(--s-2); border-radius: var(--r-md); color: var(--text); font: var(--f-body); cursor: pointer; }
.cols-menu .check:hover { background: var(--surface-2); }
.cols-menu .check.fixed { color: var(--text-3); cursor: default; }
.cols-menu .check span:first-of-type { flex: 1; }
.cols-menu .check .n { color: var(--text-3); font: var(--f-meta); }
.cols-menu .sheet-foot { display: flex; gap: var(--s-4); margin-top: var(--s-1); padding: var(--s-2) var(--s-2) var(--s-1); border-top: 1px solid var(--line); }
.cols-menu .sheet-foot .link { color: var(--accent); font: var(--f-meta-m); text-decoration: none; }
.sheet-foot .link:hover { text-decoration: underline; }

/* Телефон: одна группа колонок за раз. */
.phone-cols { display: none; }

/* Плашки условий — строкой под инструментами. */
.view-line { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--s-2) 14px; margin: calc(var(--s-1) * -1) 0 var(--s-3); }

/* Форма над таблицей: найм раскрывается в своём блоке, а не окном поверх (раунд 31). */
.form-panel { flex: none; margin-bottom: var(--s-3); background: var(--surface-2); }
.form-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.form-panel-head h2 { font: var(--f-title); }
.form-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.form-grid .field { margin: 0; }
.form-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.form-panel-actions .hint { flex: 1 1 300px; margin-left: var(--s-2); }

/* Рамка таблицы: по высоте строк, но не выше окна — в виде «Уволены» пустой рамки до низа
   экрана больше нет. */
.grid-frame {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
/* Не ниже трёх строк: форма найма и сообщения сверху не сжимают таблицу в щель. */
.page.fill .grid-wrap { min-height: 128px; }
.grid-frame::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 35px;
  width: 28px;
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
}
.grid-frame.at-end::after { display: none; }
.grid-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }

.grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font: var(--f-body); font-variant-numeric: tabular-nums; }
.grid th, .grid td {
  box-sizing: border-box;
  height: var(--row);
  max-width: 280px;
  padding: 0 10px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.rows-roomy .grid tbody td { height: 40px; }
.grid thead th { position: sticky; z-index: 3; background: var(--surface-2); color: var(--text-2); font: 600 13px/18px var(--font); }
.grid tr.groups th { top: 0; height: 28px; padding: 0 var(--s-2); color: var(--text-3); font: var(--f-group); letter-spacing: 0.06em; text-transform: uppercase; }
.grid tr.labels th { top: 28px; height: 36px; padding: 0 2px 0 10px; border-bottom-color: var(--line-strong); }
.grid th .th-box { display: flex; align-items: center; gap: 2px; }
.grid th .th-box .label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grid th.req .label::after { content: "*"; margin-left: 2px; color: var(--text-3); }
.grid th .sorted { display: inline-grid; flex: none; place-items: center; color: var(--text-3); }
/* Воронка у каждой колонки: всегда на месте — включённая меняет только цвет (грабля 52). */
.grid th .funnel { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); color: var(--text-3); }
.grid th .funnel:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.grid th .funnel.on, .grid th .funnel[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.grid th .funnel.on svg path { fill: currentColor; }
.grid .fold-group { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px 0 2px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-3); font: var(--f-group); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.grid .fold-group:hover { border: 0; background: var(--surface-3); color: var(--text-2); }
.grid .fold-group svg { transition: transform var(--fast) var(--ease); }
.grid .fold-group[aria-expanded="false"] svg { transform: rotate(-90deg); }
.grid th.group .title { color: var(--text-3); }

/* Имя закреплено слева; тень у края — когда таблица сдвинута вбок. */
.grid .lead { position: sticky; left: 0; z-index: 1; max-width: none; border-right-color: var(--line-strong); background: var(--surface); }
.grid thead th.lead { z-index: 4; background: var(--surface-2); }
.grid-frame.scrolled .grid .lead { box-shadow: var(--sh-edge); }
.grid td.lead { min-width: 248px; padding: 0 6px 0 12px; font-weight: 500; }
.grid tr.labels th.lead { padding-left: 12px; }
.grid td.lead .lead-box { display: flex; align-items: center; gap: 6px; }
.grid td.lead .who-name { flex: 1 0 auto; min-width: 0; color: var(--text); }
.grid td.lead .who-name:hover { color: var(--accent); text-decoration: none; }
.grid td.lead .who-name .short, .grid td.lead .who-sub { display: none; }
.grid td.lead .gap-count.none { visibility: hidden; }
.grid td.lead .lock { display: inline-grid; flex: none; place-items: center; color: var(--text-3); }
.grid td.lead .revoke { flex: none; }
/* Лист открытого меню — над соседними строками: каждая закреплённая ячейка — свой слой
   (грабля 53). */
.grid td.lead:has(details[open]) { z-index: 6; }

/* Заполнитель в конце строки: лишняя ширина рамки уходит в него, а не в колонки (грабля 52). */
.grid .fill { width: 100%; max-width: none; padding: 0; border-right: 0; }
.grid thead th.fill { border-bottom-color: var(--line); }

.grid tbody tr:hover td:not(.need):not(.bad):not(.saved) { background-color: var(--surface-2); }
.grid td[data-edit] { cursor: cell; }
.grid td.lead[data-edit] { cursor: default; }
.grid .cell-link { display: block; min-height: 20px; overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; }
.grid .cell-link:hover { text-decoration: none; }
.grid td .inherited, .grid td .cell-link.inherited { color: var(--text-3); }
.grid tr.picked td { animation: flash 1.8s var(--ease); }

/* Пустая обязательная ячейка: заливка, метка слева и слово «заполнить» — видно в обеих темах
   и без различения цвета. */
.grid td.need { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn-mark); color: var(--warn-text); font: var(--f-meta-m); }
.grid td.need .fill-me { color: var(--warn-text); }

/* Фокус клавиатуры — рамка 2 px; правка — то же, поверх белого. */
.grid td:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.grid td.need:focus { box-shadow: inset 0 0 0 2px var(--accent), inset 5px 0 0 var(--warn-mark); }
.grid td.editing { position: relative; z-index: 2; overflow: visible; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); color: var(--text); }
.grid td.lead.editing { position: sticky; }
.grid td.editing:not(.combo-on) > .cell-link, .grid td.editing:not(.combo-on) > .lead-box, .grid td.editing:not(.combo-on) > .fill-me { visibility: hidden; }
/* Поле ложится ПОВЕРХ ячейки и может быть шире колонки: в раскладке оно раздвигало бы колонку,
   и всё правее прыгало бы на каждой правке (грабля 52). */
.grid td.editing > .ed { position: absolute; top: 0; left: 0; width: max(100%, 190px); }
.grid td.editing.combo-on > select.ed { opacity: 0; pointer-events: none; }
.grid .ed {
  box-sizing: border-box;
  width: 100%;
  min-width: 190px;
  height: 100%;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 0;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--surface);
  color: var(--text);
  font: var(--f-body);
  box-shadow: none;
}
.grid textarea.ed { height: auto; min-height: 72px; padding: 6px 9px; }
.grid .cell-form { display: flex; align-items: center; gap: 6px; padding: 2px 4px; }
.grid .cell-form .ed { position: static; min-width: 220px; height: 28px; outline-width: 1px; }
.grid .cell-form button { height: var(--h-sm); padding: 0 var(--s-3); font: var(--f-meta-m); }

/* Сохранение — в самой ячейке: «сохраняется», «сохранено» (гаснет за 2 с), «не сохранилось». */
.grid td.saving { color: var(--text-2); }
.grid td.saving:not(.lead) { position: relative; }
.grid td.saving::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid var(--text-3);
  border-right-color: transparent;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}
.grid td.saved { animation: saved 2.4s ease-in forwards; }
.grid td.saved:not(.lead) { position: relative; }
.grid td.saved::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: fade 0.2s var(--ease), toast-out 0.4s var(--ease) 2.2s forwards;
}
.grid td.bad { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); color: var(--danger); }
.note-retry { margin-left: var(--s-1); color: inherit; font: var(--f-body-m); }

/* Свёрнутая группа: её ячейки скрыты, вместо них одна узкая колонка. */
.grid .stub { display: none; width: 36px; min-width: 36px; padding: 0 4px; background: var(--surface-2); color: var(--text-3); text-align: center; cursor: pointer; }
.grid.fold-org [data-section="org"],
.grid.fold-employment [data-section="employment"],
.grid.fold-salary [data-section="salary"],
.grid.fold-contacts [data-section="contacts"],
.grid.fold-custom [data-section="custom"] { display: none; }
.grid.fold-org .stub[data-stub="org"],
.grid.fold-employment .stub[data-stub="employment"],
.grid.fold-salary .stub[data-stub="salary"],
.grid.fold-contacts .stub[data-stub="contacts"],
.grid.fold-custom .stub[data-stub="custom"] { display: table-cell; }

/* Меню строки. Лист открывается поверх рамки: внутри прокрутки его обрезало бы. */
.grid .row-menu > summary { width: 24px; height: 24px; }
.grid .row-menu .sheet { position: fixed; top: auto; right: auto; z-index: 30; min-width: 220px; }

/* Строка, скрытая поиском, свёрнута, но из раскладки не выброшена: `display: none` убрал бы
   её из расчёта ширины колонок, и таблица перестраивалась бы на каждой букве поиска. */
.grid tr[hidden] { display: table-row !important; visibility: collapse; }

/* Уволенный — строка только для чтения (R18.3): фон тише, текст приглушён. */
.grid tbody tr.gone td { background: var(--surface-2); color: var(--text-2); }
.grid tbody tr.gone td.lead .who-name { color: var(--text-2); }
.grid td.nobody { height: auto; padding: var(--s-6) var(--s-5); white-space: normal; }

/* Подвал: сколько показано, что значит звёздочка и какие клавиши работают. */
.grid-foot { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 34px; padding: 0 var(--s-3); border-top: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); font: 400 12px/16px var(--font); }
.grid-foot b { color: var(--text-2); }
.grid-foot-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px var(--s-3); }

/* Лист воронки: сортировка переключателем, поиск значения, галочки со счётом, «Применить». */
.sheet-pop { position: fixed; z-index: 35; width: 300px; max-width: calc(100vw - 16px); animation: rise var(--fast) var(--ease); }
.sheet-pop .filter-sheet { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-pop); }
.filter-panel { flex: none; max-width: 340px; margin-bottom: var(--s-3); padding: 0; overflow: hidden; }
.filter-sheet { display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 24px)); font: var(--f-body); }
.filter-sheet header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4); }
.filter-sheet header b { font: 600 14px/20px var(--font); }
.filter-sheet header .close { display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-sm); color: var(--text-2); }
.filter-sheet header .close:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.filter-sheet .sort { display: flex; gap: var(--s-1); padding: 0 var(--s-3); }
.filter-sheet .sort a { display: grid; flex: 1; place-items: center; height: var(--h-sm); padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text-2); font: var(--f-meta-m); white-space: nowrap; }
.filter-sheet .sort a:hover { border-color: var(--line-strong); color: var(--text); text-decoration: none; }
.filter-sheet .sort a.on { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.filter-sheet .sort a.off { flex: none; border-color: transparent; color: var(--text-3); }
.filter-sheet .rule { display: flex; flex-direction: column; gap: var(--s-2); min-height: 0; padding: var(--s-2) var(--s-3); overflow: auto; }
.filter-sheet .rule .hint { padding: 0 var(--s-1); }
.filter-sheet .find { height: 32px; }
.filter-sheet .values { display: flex; flex-direction: column; max-height: 220px; overflow: auto; }
.filter-sheet .value { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; padding: 0 var(--s-2); border-radius: var(--r-md); color: var(--text); font: var(--f-body); cursor: pointer; }
.filter-sheet .value:hover { background: var(--surface-2); }
.filter-sheet .value .text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-sheet .value .n { color: var(--text-3); font: var(--f-meta); }
.filter-sheet .value.zero .text, .filter-sheet .value.zero .n { color: var(--text-3); }
.filter-sheet .check { display: flex; align-items: center; gap: var(--s-2); margin: 2px 0 0; color: var(--text-2); font: var(--f-meta); cursor: pointer; }
.filter-sheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.filter-sheet .two label, .filter-sheet > .rule > label:not(.check):not(.days) { margin-bottom: 4px; }
.filter-sheet .days { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-2); font: var(--f-meta); }
.filter-sheet .days input { width: 64px; height: 32px; padding: 0 var(--s-2); text-align: right; }
.filter-sheet input[type="date"], .filter-sheet input[type="text"] { height: 34px; }
.filter-sheet footer { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.filter-sheet footer .spacer { flex: 1; }
.filter-sheet footer .all { display: flex; gap: var(--s-3); }
.filter-sheet footer .all .link { color: var(--accent); font: var(--f-meta-m); text-decoration: none; }

/* Список выбора с поиском — поверх ячейки и поля карточки (`combo.js`). */
.combo { position: fixed; z-index: 45; display: flex; flex-direction: column; max-height: min(420px, calc(100vh - 16px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-pop); animation: rise var(--fast) var(--ease); }
.combo-find { flex: none; padding: var(--s-2); }
.combo-find input { height: var(--h-md); padding-left: 34px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); background: var(--surface) var(--search-icon) no-repeat 10px center; }
.combo-list { flex: 1 1 auto; min-height: 0; padding: 0 var(--s-1) var(--s-1); overflow: auto; }
.combo-group { padding: 6px 10px 4px; color: var(--text-3); font: var(--f-group); letter-spacing: 0.06em; text-transform: uppercase; }
.combo-option { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: 6px 10px; border-radius: var(--r-md); color: var(--text); cursor: pointer; }
.combo-option[aria-selected="true"] { background: var(--accent-soft); }
.combo-option.chosen { font-weight: 500; }
.combo-meta { color: var(--text-3); font: var(--f-meta); white-space: nowrap; }
.combo-none { padding: var(--s-3); color: var(--text-3); font: var(--f-meta); }
.combo-foot { flex: none; padding: 6px var(--s-3); border-top: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); font: 400 12px/16px var(--font); }

/* Планшет и телефон: страница листается как обычно, таблица — вбок внутри себя. */
@media (max-width: 1023px) {
  .main:has(> .page.fill) { height: auto; }
  .page.fill { overflow: visible; }
  .grid-frame { flex: none; }
  .page.fill .grid-wrap { max-height: 75vh; }
  .grid-foot-keys { display: none; }
}
@media (max-width: 767px) {
  .table-tools { gap: var(--s-2); }
  .table-tools .segments { display: grid; flex: 1 1 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table-tools .segments .seg { justify-content: center; height: 40px; }
  .table-search { flex: 1 1 100%; width: auto; }
  .tools-sep, .tools-spacer, .cols-menu, #row-density { display: none; }
  .tool-tiles { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-tile { justify-content: center; height: 40px; }
  .tool-tile.split { justify-content: space-between; }
  .phone-cols { display: flex; flex: 1 1 100%; align-items: center; gap: var(--s-2); height: 40px; margin: 0; padding: 0 0 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); font: var(--f-meta); }
  .phone-cols select { flex: 1; height: 38px; border: 0; background-color: transparent; color: var(--text); font: var(--f-body-m); box-shadow: none; }
  .page.fill .page-head { flex-wrap: nowrap; align-items: center; }
  .page.fill .page-title { flex-basis: auto; }
  .page.fill .page-title > p, .page-actions .help-pop { display: none; }
  .page-more > summary { width: var(--h-lg); height: var(--h-lg); color: var(--text); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }

  .grid-frame { margin: 0 calc(var(--page-pad) * -1); border-inline: 0; border-radius: 0; }
  .grid-frame::after { bottom: 35px; width: 36px; }
  .grid tr.groups { display: none; }
  .grid tr.labels th { top: 0; height: 40px; }
  .grid td, .grid th { height: 52px; font: 400 14px/18px var(--font); }
  .grid .stub { display: none !important; }
  .grid [data-section]:not(.lead) { display: none !important; }
  .grid[data-phone-group="main"] [data-section="main"],
  .grid[data-phone-group="org"] [data-section="org"],
  .grid[data-phone-group="employment"] [data-section="employment"],
  .grid[data-phone-group="salary"] [data-section="salary"],
  .grid[data-phone-group="contacts"] [data-section="contacts"],
  .grid[data-phone-group="custom"] [data-section="custom"] { display: table-cell !important; }
  .grid td.lead { min-width: 144px; width: 144px; max-width: 144px; padding: 0 var(--s-2) 0 var(--page-pad); box-shadow: var(--sh-edge); }
  .grid tr.labels th.lead { padding-left: var(--page-pad); box-shadow: var(--sh-edge); }
  .grid td.lead .lead-box { flex-direction: column; align-items: flex-start; gap: 0; }
  .grid td.lead .who-name { flex: none; max-width: 100%; overflow: hidden; font: 500 14px/18px var(--font); text-overflow: ellipsis; }
  .grid td.lead .who-name .full { display: none; }
  .grid td.lead .who-name .short { display: inline; }
  .grid td.lead .who-sub { display: block; color: var(--text-3); font: 400 12px/16px var(--font); }
  .grid td.lead .gap-count, .grid td.lead .row-menu, .grid td.lead .revoke { display: none; }
}

/* ── Лента по дням — журнал, история на карточке, история по сотруднику (раунд 31) ────────
   Подпись дня — в своей колонке слева и прилипает только внутри своего дня: на записи не
   налезает. Время — своей колонкой, автор и источник — справа. */

.acts { display: flex; flex-direction: column; }
.acts-group { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.acts-day { position: sticky; top: calc(var(--band-h) + 12px); align-self: start; margin: 0; font: 600 14px/20px var(--font); }
.acts-rows { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
li.act { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-3); }
li.act.picked { margin: -4px -8px; padding: 4px 8px; border-radius: var(--r-md); background: var(--accent-soft); animation: picked-ring 1.8s var(--ease); }
/* Пришли к записям человека — рамка вспыхивает и гаснет, подсветка остаётся (раунд 32). */
@keyframes picked-ring { 0%, 40% { box-shadow: inset 0 0 0 1.5px var(--accent); } 100% { box-shadow: inset 0 0 0 1.5px transparent; } }
.act-time { color: var(--text-3); font: var(--f-meta); font-variant-numeric: tabular-nums; }
.act-body { min-width: 0; }
/* Длинная почта или название без пробелов переносится, а не распирает телефон (грабля 61). */
.act-what, .act-changes { overflow-wrap: anywhere; }
.act-what { color: var(--text); }
.act-what a { font-weight: 500; }
.act-what s, .act-changes s { color: var(--text-3); text-decoration-color: var(--line-strong); }
.act-what b, .act-changes b { color: var(--text); font-weight: 600; }
.act-changes { margin: 2px 0 0; padding: 0; color: var(--text-2); font: var(--f-meta); list-style: none; text-wrap: pretty; }
.act-changes.many { display: flex; flex-wrap: wrap; gap: 0 4px; }
.act-changes.many li:not(:last-child)::after { content: " ·"; color: var(--text-3); }
li.act .arrow { margin: 0 4px; color: var(--text-3); }
.act-by { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font: var(--f-meta); white-space: nowrap; }
.act-by .via { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-xs); background: var(--surface-3); color: var(--text-3); font: 500 11px/16px var(--font); }

/* ── Карточка сотрудника (AF-116, раунд 31) ─────────────────────────────────────────── */

/* Шапка: главное о человеке без прокрутки. */
.person-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.person-main { min-width: 0; }
.person-main h1 { font: var(--f-h1); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.person-role { margin-top: 2px; color: var(--text-2); }
.person-role a { color: inherit; }
.person-role a:hover { color: var(--accent); }
.person-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
a.tag:hover { text-decoration: none; filter: brightness(0.97); }
.person-facts { display: grid; grid-auto-flow: column; margin: 0; border-left: 1px solid var(--line); }
.person-facts > div { padding: 0 var(--s-5); border-right: 1px solid var(--line); }
.person-facts > div:last-child { padding-right: 0; border-right: 0; }
.person-facts dt { color: var(--text-3); font: var(--f-meta); white-space: nowrap; }
.person-facts dd { margin: 2px 0 0; font: var(--f-body-m); white-space: nowrap; }
.person-facts dd.warn { color: var(--warn-text); }

/* Оглавление слева, блоки справа. */
.person-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: var(--s-6); }
.toc { position: sticky; top: calc(var(--band-h) + 16px); display: flex; flex-direction: column; gap: 2px; }
.toc-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); height: 34px; padding: 0 var(--s-3); border-radius: var(--r-md); color: var(--text-2); font: var(--f-body-m); }
.toc-item span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.toc-item[aria-current] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-weight: 600; }
.toc-meta { flex: none; color: var(--text-3); font: var(--f-meta); }
.person-blocks { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
/* Блоки строкой — одной высоты, как в макете (раунд 32); на своей карточке их два, и они
   делят строку пополам, а не оставляют пустую треть. */
.person-row { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-items: stretch; gap: var(--s-4); }

/* Блок полей: сетка в четыре колонки — колонки больше не расходятся по высоте. */
.fields-card { padding: var(--s-4) var(--s-4) var(--s-3); }
.fields-title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2) var(--s-3); font: var(--f-title); }
.fields-title .tag { height: 20px; padding: 0 7px; }
.fields { --field-cols: 4; display: grid; grid-template-columns: repeat(var(--field-cols), minmax(0, 1fr)); gap: 2px var(--s-2); margin: 0; }
.fields-card.small .fields { --field-cols: 1; }
.fields .f { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); transition: background var(--fast) var(--ease); }
.fields .f:hover { background: var(--surface-2); }
.fields .f[data-edit]:hover { cursor: text; }
.fields dt { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--text-3); font: var(--f-meta); }
.fields dt .req { margin-left: 2px; }
.f-change { flex: none; color: var(--accent); font: var(--f-meta-m); }
.fields dd { min-width: 0; margin: 0; }
.fields .v { display: block; color: var(--text); overflow-wrap: anywhere; }
.fields a.v:hover { text-decoration: none; }
.fields .v.empty { color: var(--text-3); }
.from-above { display: block; margin-top: 2px; color: var(--text-3); font: 400 12px/16px var(--font); }
/* Пустое обязательное: заливка, рамка, «не заполнено» и «заполнить». */
.fields .f.need { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.fields .f.need dt, .fields .f.need .v { color: var(--warn-text); }
.fields .f.need .v { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); font-weight: 500; }
.fill-hint { flex: none; color: var(--warn-text); font: var(--f-meta-m); text-decoration: underline; text-underline-offset: 2px; }
/* Сохранено — подсвечено и подписано, гаснет само (card.js). */
.fields .f.saved { background: var(--success-soft); }
.fields .f.saved dt::after { content: "✓ сохранено"; color: var(--success); font-weight: 500; }
.fields .f.bad { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); }
.fields .f.saving { opacity: 0.6; }
.fields .f.picked { animation: flash 1.8s var(--ease); }
.fields .f.editing { background: var(--surface); box-shadow: none; }
.fields .f.editing .ed { width: 100%; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.fields .f.editing select.ed[tabindex="-1"] { pointer-events: none; }
.fields .f.editing textarea.ed { min-height: 72px; }
.cell-form-actions { display: flex; gap: 6px; margin-top: 6px; }
.fields .cell-form { display: flex; flex-direction: column; gap: 6px; }
.fields .cell-form .ed { width: 100%; }

/* Форма структуры — в блоке «Место», раскрывается по «изменить». */
.structure-panel { margin: var(--s-3) var(--s-1) var(--s-1); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); animation: rise var(--fast) var(--ease); }
.structure-form + .structure-form { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.structure-title { margin-bottom: var(--s-3); font: 600 15px/22px var(--font); }
.structure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.structure-grid .field { margin: 0; }
.structure-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.structure-actions .hint { flex: 1 1 240px; margin-left: var(--s-2); }

/* Подчинённые — обратная сторона руководителя. */
.reports { margin: var(--s-4) var(--s-3) 6px; font: 600 14px/20px var(--font); }
.reports-list { margin: 0 var(--s-3) var(--s-1); padding: 0; columns: 2; column-gap: var(--s-6); list-style: none; }
.reports-list li { padding: 4px 0; break-inside: avoid; }

/* Задачи и доступы: полоса «выдано 7 из 8», задачи таблицей, пробелы — словами. */
.access-card .card-head { margin-bottom: var(--s-3); }
.plan-progress { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.plan-progress .progress { flex: 1; }
.plan-count { color: var(--text-2); font: var(--f-meta-m); white-space: nowrap; }
.tasks { border-top: 1px solid var(--line); }
.task { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 190px; align-items: start; gap: var(--s-4); padding: 9px 4px; border-bottom: 1px solid var(--line); }
.task.two { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.task-head { padding: var(--s-2) 4px; color: var(--text-3); font: 600 12px/16px var(--font); }
.task .what b { font-weight: 500; }
.task-note { display: block; color: var(--text-3); font: var(--f-meta); }
.task .state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.task-key { color: var(--text-3); font: var(--f-meta); }
/* Отметка держателя (S32): кто отметил — подписью, «Выдал» / «Отозвал» — маленькой кнопкой
   рядом с состоянием; в «Задачах на вас» — справа в строке. */
.task-by { color: var(--text-3); font: var(--f-meta); }
.task-mark { display: inline-flex; margin: 0; }
.access-card .card-head .access-ask { margin-left: auto; }
.cab-tasks .task-mark { flex: none; }
.lack { color: var(--warn-text); font-weight: 500; }
.lack.small { display: block; margin-top: 4px; font: var(--f-meta); }
.access-card .note.small { margin: var(--s-3) 0 0; }
.access-card .note.small a { color: inherit; font-weight: 600; text-decoration: underline; }
.replan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.replan .hint { flex: 1 1 300px; color: var(--text-2); }
.plan.later { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-2); margin-bottom: var(--s-2); }

/* История на карточке: лента по дням и страницы. */
.history-card .card-head { margin-bottom: 0; }
.history-card .acts { margin-top: var(--s-3); }

/* Увольнение и корзина — последним блоком, кнопки опасного вида. */
.danger-zone h2 { margin: 0; }
.danger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.danger-row:last-child { padding-bottom: 0; border-bottom: 0; }
.danger-text b { font-weight: 600; }
.danger-text .hint { max-width: 620px; margin-top: 2px; color: var(--text-2); text-wrap: pretty; }
.danger-do { display: flex; align-items: flex-end; gap: var(--s-2); }
.danger-do .field { margin: 0; }
.danger-do label { color: var(--text-2); font: var(--f-meta); }
.danger-do input[type="date"] { width: 168px; }

/* Апрув о человеке — строкой над блоками. */
.card-approvals { margin: 0 0 var(--s-4); }
.card-approvals .appr-line { margin: 0; }

@media (min-width: 1680px) {
  .fields { --field-cols: 5; }
}
@media (max-width: 1279px) {
  .fields { --field-cols: 3; }
  .person-card { grid-template-columns: auto minmax(0, 1fr); }
  .person-facts { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; padding-top: var(--s-3); }
  .person-facts > div:first-child { padding-left: 0; }
}
@media (max-width: 1023px) {
  .acts-day { top: 64px; }
  .person-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  /* Оглавление — строкой над блоками, листается вбок. */
  .toc { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .toc::-webkit-scrollbar { display: none; }
  .toc-item { flex: none; }
  .fields { --field-cols: 2; }
  .person-row { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .acts-group { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .acts-day { top: 52px; z-index: 1; padding: 4px 0; background: var(--surface); }
  li.act { grid-template-columns: 44px minmax(0, 1fr); }
  .act-by { grid-column: 2; white-space: normal; }

  .person-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: 0; border: 0; background: none; }
  .person-card .face.big { width: 52px; height: 52px; font-size: 18px; }
  .person-facts { grid-auto-flow: row; margin-top: var(--s-1); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
  .person-facts > div, .person-facts > div:first-child { display: flex; justify-content: space-between; gap: var(--s-3); padding: 10px var(--s-4); border-right: 0; border-bottom: 1px solid var(--line); }
  .person-facts > div:last-child { padding-right: var(--s-4); border-bottom: 0; }
  .person-facts dd { margin: 0; text-align: right; white-space: normal; }
  .toc { display: none; }
  .fields { --field-cols: 1; gap: 0; }
  .fields .f { min-height: 56px; justify-content: center; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); border-radius: 0; border-bottom: 1px solid var(--line); }
  .fields .f:last-child { border-bottom: 0; }
  .fields .f.need { box-shadow: inset 3px 0 0 var(--warn-mark); }
  .fields .f:has(.f-change), .fields .f.need:has(.fill-hint) { padding-right: 112px; }
  .fields .f-change, .fields .f.need .fill-hint {
    position: absolute;
    top: 50%;
    right: var(--s-2);
    display: inline-flex;
    align-items: center;
    height: var(--h-lg);
    padding: 0 var(--s-3);
    border-radius: var(--r-md);
    transform: translateY(-50%);
    text-decoration: none;
  }
  .fields .f.need .fill-hint { border: 1px solid var(--warn-line); background: var(--surface); }
  .fields-card { padding: 0; overflow: hidden; }
  .fields-title { margin: 0; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .structure-grid { grid-template-columns: minmax(0, 1fr); }
  .danger-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .danger-do { flex-wrap: wrap; }
  .task, .task.two { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .task-head { display: none; }
  .reports-list { columns: 1; }

  /* Блоки свёрнуты, под названием — сводка в строку (card.js). */
  .foldable > h2, .foldable > .card-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); min-height: 56px; margin: 0; padding: var(--s-2) 44px var(--s-2) var(--s-4); cursor: pointer; }
  .foldable > h2::after, .foldable > .card-head::after { content: ""; position: absolute; top: 50%; right: 18px; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform var(--fast) var(--ease); }
  .foldable.folded > h2::after, .foldable.folded > .card-head::after { margin-top: -2px; transform: rotate(-135deg); }
  .foldable:not(.folded) > h2::after, .foldable:not(.folded) > .card-head::after { transform: rotate(-135deg); margin-top: -2px; }
  .foldable.folded > h2::after, .foldable.folded > .card-head::after { transform: rotate(45deg); margin-top: -6px; }
  .fold-summary { flex-basis: 100%; overflow: hidden; color: var(--text-3); font: var(--f-meta); text-overflow: ellipsis; white-space: nowrap; }
  .fold-summary.warn { color: var(--warn-text); }
  .foldable:not(.folded) .fold-summary { display: none; }
  .foldable.folded > :not(h2):not(.card-head) { display: none; }
  .access-card.foldable, .history-card.foldable, .danger-zone.foldable { padding: 0; }
  .access-card.foldable:not(.folded), .history-card.foldable:not(.folded), .danger-zone.foldable:not(.folded) { padding-bottom: var(--s-4); }
  .access-card.foldable:not(.folded) > :not(.card-head), .history-card.foldable:not(.folded) > :not(.card-head), .danger-zone.foldable:not(.folded) > :not(h2) { margin-left: var(--s-4); margin-right: var(--s-4); }
  .foldable > .card-head .meta { display: none; }
}

/* ── Оргструктура (AF-115, раунд 31) ───────────────────────────────────────────────────
   Дерево — одна поверхность: уровень — отступ и направляющая линия, а не вложенная карточка.
   Глава — звезда и полужирное имя, должность — сразу после ФИО своей колонкой. Люди узла — в
   две колонки (на мониторе — в три), команда внутри узла колонкой не разрывается. */

/* Панель поиска и счётчиков — прилипает над деревом. */
.tree-tools {
  position: sticky;
  top: var(--band-h);
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: calc(var(--s-2) * -1) calc(var(--page-pad) * -1) var(--s-2);
  padding: var(--s-2) var(--page-pad);
  background: var(--bg);
}
/* Поиск сжимается, а не переносит строку: на 1440 вся панель — одной строкой. */
.tree-search { flex: 1 1 200px; min-width: 180px; max-width: 300px; }
.tree-search .tally { position: absolute; top: 50%; right: 10px; color: var(--text-3); font: var(--f-cap); transform: translateY(-50%); pointer-events: none; }
/* Место под счётчик — только когда он показан: иначе подсказка в пустом поле обрезается. */
.tree-search:has(.tally:not([hidden])) input { padding-right: 64px; }
.tree-tools .tiles.compact { flex-wrap: nowrap; margin: 0; }
.tree-tools .tiles.compact .tile { background-color: var(--surface); }
.tree-tools .tiles.compact .tile.warn { background-color: var(--warn-soft); }

.chart { position: relative; }
.chart[aria-busy="true"] { opacity: 0.7; transition: opacity var(--fast) var(--ease); }
.chart > .note.warn { position: sticky; top: calc(var(--band-h) + 64px); z-index: 6; }
.chart > .hint { padding: var(--s-5); }

.tree { padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.branch { position: relative; }
.kids { margin: 0 0 var(--s-2) 17px; padding-left: var(--s-3); border-left: 1px solid var(--line); }
.kids > .branch { border-top: 1px solid var(--line); }
.kids > .branch:first-child { margin-top: var(--s-1); }
.branch.out { margin-top: var(--s-2); }

/* Узел — строкой заголовка, без своей рамки. */
.node { position: relative; border-radius: var(--r-lg); scroll-margin-top: 56px; transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.node > .head { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-2) 0 0; }
.node.company > .head { min-height: 48px; padding-left: 4px; }
.node.cell > .head { min-height: 40px; }
.node[data-draggable-unit] > .head { cursor: grab; }
.node .fold { display: grid; flex: none; place-items: center; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-sm); color: var(--text-2); }
.node .fold:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.node .fold svg { transition: transform var(--fast) var(--ease); }
.node.collapsed .fold svg { transform: rotate(-90deg); }
.node .title { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); min-width: 0; }
.node .title b { min-width: 0; overflow: hidden; font: 600 15px/22px var(--font); text-overflow: ellipsis; white-space: nowrap; }
.node.company .title b { font: 600 17px/24px var(--font); }
.node.cell .title b { font: 600 14px/20px var(--font); }
.node .title .tag { height: 20px; padding: 0 7px; }
.node .title .sub { color: var(--text-3); font: var(--f-meta); }
.node .title .kind-word { display: none; }
.node .count { flex: none; color: var(--text-2); font: var(--f-meta); white-space: nowrap; }
.node > .head .menu > summary { color: var(--text-3); }
/* Свёрнутое не рисуется, но и не выбрасывается: раскрытие обходится без сервера. */
.node.collapsed > .people, .node.collapsed + .kids { display: none; }

/* Люди узла — в две колонки, командами. */
.node > .people { padding: 0 0 var(--s-2) 32px; columns: var(--tree-cols, 2); column-gap: var(--s-4); animation: fade var(--slow) var(--ease); }
.team { break-inside: avoid; }
.member {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  margin-left: calc(var(--lvl, 0) * 18px);
  padding: 0 10px 0 6px;
  border-radius: var(--r-md);
  transition: background var(--fast) var(--ease), opacity var(--fast) var(--ease);
  -webkit-user-drag: none;
  user-select: none;
}
.member a { -webkit-user-drag: none; }
.member:hover { background: var(--surface-2); }
.member .grip { display: grid; flex: none; place-items: center; color: var(--text-3); cursor: grab; touch-action: none; }
.member .kid { flex: none; width: 9px; height: 9px; margin: -6px -4px 0 -2px; border-bottom: 1.5px solid var(--line-strong); border-left: 1.5px solid var(--line-strong); border-radius: 0 0 0 3px; }
.member .star, .member .star-slot { display: grid; flex: none; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--line-strong); opacity: 0; }
.member .star-slot { opacity: 0; }
.member .star.on { color: var(--warn-mark); opacity: 1; }
.member:hover .star, .member .star:focus-visible { opacity: 1; }
.member .star:hover { border: 0; background: none; color: var(--warn-mark); }
.member .who-name { flex: none; width: 232px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.member .who-name:hover { color: var(--accent); text-decoration: none; }
.member.lead .who-name { font-weight: 600; }
.member .pos { min-width: 0; overflow: hidden; color: var(--text-2); font: var(--f-meta); text-overflow: ellipsis; white-space: nowrap; }
.member .member-menu { display: none; margin-left: auto; }
.node .empty { padding: 6px 10px; color: var(--text-3); font: var(--f-meta); break-inside: avoid; }

/* Перенос мышью: исходное место — пунктиром, цель подсвечена и подписана, что произойдёт. */
.member.dragging { background: none; outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; }
.member.dragging .who-name, .member.dragging .pos, .member.dragging .grip { color: var(--text-3); }
.member.dragging::after { content: "переносится"; flex: none; margin-left: auto; color: var(--text-3); font: var(--f-meta); }
.member.drop { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.node.drop { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.node.drop > .head::after { content: attr(data-drop-text); flex: none; max-width: 50%; overflow: hidden; color: var(--accent); font: var(--f-meta-m); text-overflow: ellipsis; white-space: nowrap; }
.node.drop > .head:not([data-drop-text])::after { content: none; }
/* Подпись встаёт на место счёта и меню: в строке цели — только что произойдёт. */
.node.drop > .head[data-drop-text] > .count, .node.drop > .head[data-drop-text] > .menu { display: none; }
.node.drop .title .tag.kind { background: var(--surface); }
.member.moved { animation: flash 1.6s var(--ease); }
.member.dim { opacity: 0.35; }
.member.hit { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.member.hit.now { box-shadow: inset 0 0 0 2px var(--warn-mark); }
.node.match > .head { border-radius: var(--r-md); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.node.match.now > .head { box-shadow: inset 0 0 0 2px var(--warn-mark); }
/* Тот, к кому вернулись, мигает и остаётся отмеченным: глаз находит строку. */
.member.picked { animation: flash 1.8s var(--ease); box-shadow: inset 0 0 0 1px var(--accent); }
.node.picked > .head { border-radius: var(--r-md); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }

.drag-ghost {
  position: fixed;
  z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--s-2);
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-drag);
  color: var(--text);
  pointer-events: none;
  transform: translate(-50%, -140%) rotate(-1deg);
  animation: pop var(--fast) var(--ease);
}
.drag-ghost b { font: var(--f-body-m); white-space: nowrap; }
.drag-ghost .drag-role { overflow: hidden; color: var(--text-2); font: var(--f-meta); text-overflow: ellipsis; white-space: nowrap; }
/* Исход броска и что заденет заодно. Пусто, пока цели нет, — «никуда» словами не пишется. */
.drag-ghost .drag-act { grid-column: 1 / -1; color: var(--accent); font: var(--f-meta-m); }
.drag-ghost .drag-also { grid-column: 1 / -1; color: var(--warn-text); font: var(--f-meta); }
.drag-ghost .drag-act:empty, .drag-ghost .drag-also:empty, .drag-ghost .drag-role:empty { display: none; }

/* «Вне структуры» — жёлтый блок в конце дерева. */
.branch.out > .node { padding: var(--s-2) var(--s-3) var(--s-3); border: 1px solid var(--warn-line); border-radius: var(--r-md); background: var(--warn-soft); }
.branch.out > .node > .head { min-height: 32px; padding: 0; }
.branch.out .title b { color: var(--warn-text); font: 600 15px/22px var(--font); }
.branch.out .title .sub { color: var(--warn-text); }
.branch.out > .node > .people { padding-left: 0; columns: 1; }
.branch.out .member { max-width: 560px; background: var(--surface); }
.branch.out .member + .member { margin-top: 2px; }

/* Формы узла — внутри узла. */
.node-form { margin: 0 var(--s-2) var(--s-3) 32px; padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); animation: rise var(--fast) var(--ease); }
.node-form-title { margin-bottom: var(--s-3); font: 600 15px/22px var(--font); }
.node-form .form-grid.one { grid-template-columns: minmax(0, 420px); }
.node-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); }
.node-form-row + .node-form-row { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.node-form-row .field { flex: 1 1 260px; max-width: 420px; margin: 0; }
.node-form-row .hint { flex-basis: 100%; }

@media (min-width: 1680px) {
  .node > .people { --tree-cols: 3; }
}
/* Планшет: поиск и «Свернуть · Раскрыть» — первой строкой, плитки — второй. Панель выше —
   и отступ прокрутки к узлу больше. */
@media (max-width: 1279px) {
  .node > .people { --tree-cols: 1; }
  .tree-tools .tools-sep, .tree-tools .tools-spacer { display: none; }
  .tree-search { max-width: none; }
  .tree-tools .tiles.compact { flex-wrap: wrap; order: 3; flex-basis: 100%; }
  .node { scroll-margin-top: 104px; }
}
@media (max-width: 1023px) {
  .tree-tools { top: 52px; }
  .tree-search { flex: 1 1 100%; width: auto; max-width: none; }
}
/* Телефон: строки по 52, отступ 12 на уровень, перенос — через меню строки. */
@media (max-width: 767px) {
  .tree-tools { position: static; gap: 6px; margin: 0 0 var(--s-2); padding: 0; background: none; }
  .tree-tools .tiles.compact { flex-wrap: wrap; gap: 6px; }
  .tree-tools .tiles.compact .tile { height: 32px; padding: 0 10px; gap: 5px; }
  .tree-tools .tiles.compact .tile b { font: 600 15px/20px var(--font); }
  /* «Свернуть всё · Раскрыть всё» — своей строкой, справа. */
  .tree-tools .tools-spacer { display: block; flex: 1 0 100%; height: 0; }
  .tree-tools .tiles.compact { order: 0; }
  .tree-tools .tools-spacer + .button { margin-left: auto; }
  .tree-tools .button.quiet { height: var(--h-lg); font: var(--f-meta-m); }
  .tree { padding: 0; overflow: hidden; }
  .kids { margin: 0 0 0 20px; padding-left: 0; }
  .kids > .branch { border-top: 0; }
  .kids > .branch:first-child { margin-top: 0; }
  .node { border-radius: 0; }
  .node > .head { gap: 0; min-height: 52px; padding: 0 4px 0 0; border-bottom: 1px solid var(--line); }
  .node.company > .head, .node.cell > .head { min-height: 52px; padding-left: 0; }
  .node .fold { width: 40px; height: 44px; }
  .node .title { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
  .node .title b { max-width: 100%; font: 600 15px/20px var(--font); }
  .node.company .title b { font: 600 16px/22px var(--font); }
  .node.cell .title b { font: 600 15px/20px var(--font); }
  .node .title .sub { font: 400 12px/16px var(--font); }
  .node .title .tag.kind { display: none; }
  .node .title .kind-word { display: inline; }
  .node .count { padding-right: var(--s-2); }
  .node > .head .menu > summary { width: var(--h-lg); height: var(--h-lg); }
  .node > .people { padding: 0; columns: 1; }
  .member {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "star name menu" ". pos menu";
    align-items: center;
    gap: 0;
    height: auto;
    min-height: 52px;
    margin-left: calc(var(--lvl, 0) * 12px);
    padding: 6px 0 6px 40px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .member:hover { background: none; }
  .member .grip, .member .star:not(.on), .member .star-slot, .member .kid { display: none; }
  .member .star.on { grid-area: star; margin-right: 6px; }
  .member .who-name { grid-area: name; width: auto; font: 500 15px/20px var(--font); white-space: normal; }
  .member.lead .who-name { font-weight: 600; }
  .member .pos { grid-area: pos; white-space: normal; }
  .member .member-menu { display: block; grid-area: menu; }
  .member .member-menu > summary { width: var(--h-lg); height: var(--h-lg); }
  .member .member-menu .sheet { width: 240px; }
  .member .member-menu .sheet a { display: flex; align-items: center; gap: 10px; min-height: var(--h-lg); }
  .branch.out { margin: 0; }
  .branch.out > .node { padding: var(--s-3) var(--s-4); border: 0; border-radius: 0; }
  .branch.out > .node > .head { min-height: 0; border: 0; }
  .branch.out .member { margin-top: var(--s-2); padding-left: var(--s-3); border: 0; border-radius: var(--r-md); }
  .branch.out .member + .member { margin-top: var(--s-2); }
  .node-form { margin: var(--s-2); }
  .node.drop > .head::after { display: none; }
}
/* ── Встречи и «Моя работа» (AF-175, AF-126; раунд 31) ─────────────────────────────────
   Встреча — строкой, одной на «Мою работу» и разделы процессов: слева когда (время крупно,
   день словами), в середине кто и что за процесс, справа — дело кнопками. Группы по срокам —
   заголовком с чертой под ним. */

.bucket { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); margin: var(--s-4) 0 0; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); font: 600 14px/20px var(--font); }
.card-head + .bucket, .meetings-box > .bucket:first-child, .bucket-fold:first-of-type > .bucket { margin-top: 0; }
.bucket span { color: var(--text-3); font: var(--f-meta); }
.bucket.late { color: var(--danger); }
.bucket.warn { color: var(--warn-text); }
.bucket-fold > .bucket-sum { display: none; }

.meetings { margin: 0; padding: 0; list-style: none; }
.meeting {
  position: relative;
  display: grid;
  /* Колонка даты — по самой длинной подписи «просрочено на 13 дней» (143 точки), чтобы она не
     рвалась посередине (раунд 32). */
  grid-template-columns: 148px minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.meeting-when b { display: block; font: 600 14px/20px var(--font); font-variant-numeric: tabular-nums; }
.meeting-when b.meeting-none { color: var(--warn-text); font: var(--f-meta-m); }
.meeting-when .tag { margin-bottom: 2px; }
.meeting-day { display: block; color: var(--text-3); font: var(--f-meta); }
.meeting-day .late { color: var(--danger); font-weight: 500; }
.meeting-rel { display: block; }
.meeting-main { min-width: 0; }
.meeting-who { overflow-wrap: anywhere; }
.meeting-who a { font-weight: 500; }
.meeting-who b { font-weight: 500; }
.meeting-who .tag { margin-left: 4px; vertical-align: 1px; }
.meeting-pos { color: var(--text-3); font: var(--f-meta); }
.meeting-what { margin-top: 2px; color: var(--text); font: var(--f-meta); }
.meeting-due { color: var(--text-3); }
.meeting-line { color: var(--text-3); font: var(--f-meta); }
.meeting-do { display: flex; justify-content: flex-end; }
.meeting-do .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.meeting-more { display: none; }
.meeting.picked { margin: 0 calc(var(--s-2) * -1); padding-right: var(--s-2); padding-left: var(--s-2); border-radius: var(--r-md); background: var(--accent-soft); animation: flash 1.8s var(--ease); }
.meeting.closed .meeting-who a, .meeting.closed .meeting-what { color: var(--text-2); }
/* Форма встречи — продолжение строки, а не отдельный блок через просвет. */
.meeting.editing { border-bottom-color: transparent; }
.meetings > .row-form { padding: 0 0 var(--s-3); border-bottom: 1px solid var(--line); list-style: none; }
.meetings > .row-form form { padding: var(--s-4); border: 0; border-radius: var(--r-md); background: var(--surface-2); }

/* Встреча в узкой колонке («Моя работа» на 1440 — около 680 точек): дела — под текстом, а не
   справа. Справа они отнимали 330 точек, и средняя колонка сжималась до слова в строке
   (раунд 32). Решает ширина самого списка, а не окна: в разделе процесса та же строка широкая. */
.meetings { container-type: inline-size; }
@container (max-width: 820px) {
  .meeting { grid-template-columns: 148px minmax(0, 1fr); gap: var(--s-1) var(--s-4); }
  .meeting-do { grid-column: 2; justify-content: flex-start; }
  .meeting-do .row-actions { justify-content: flex-start; margin-top: var(--s-1); }
}

/* ── «Моя работа» ── */

/* Две колонки близкой длины: слева то, что требует действия, справа — задачи, люди, что
   сделано. Колонки — `minmax(0, …)`: иначе широкое содержимое раздвинуло бы страницу
   телефона (грабля 61). */
.work-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.work-main, .work-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.work .card { padding: var(--s-5); }
.work #tiles .tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.work #tiles .tile { min-height: 84px; }

.cab-tasks { margin: 0; padding: 0; list-style: none; }
.cab-tasks li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.cab-tasks li:first-child { padding-top: 2px; }
.cab-task-what { display: flex; flex-direction: column; min-width: 0; }
.cab-task-what b { font-weight: 500; }
.cab-task-what a { font: var(--f-meta); }
.cab-tasks .tag { flex: none; margin-top: 1px; }
#todo .help-line { margin-top: var(--s-3); color: var(--text-3); font: var(--f-meta); }

.cab-led { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.card-head + .cab-led { margin-top: 0; }
.cab-led > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font: 600 14px/20px var(--font); cursor: pointer; list-style: none; }
.cab-led > summary::-webkit-details-marker { display: none; }
.cab-led-title a { color: var(--text); }
.cab-led-title a:hover { color: var(--accent); }
.cab-led-count { color: var(--text-3); font: var(--f-meta); }
.cab-led-stage { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-2); margin-top: 6px; }
.cab-led-label { color: var(--text-3); font: var(--f-meta); }
.cab-led-stage ul { margin: 0; padding: 0; list-style: none; }
.cab-led-stage .subtle { display: inline; color: var(--text-3); font: var(--f-meta); }
/* «Без процесса» — свёрнутой строкой со стрелкой: людей много, а дел с ними нет. */
.cab-led.free > summary { justify-content: flex-start; gap: 4px; font: var(--f-body-m); }
.cab-led.free > summary::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin: 0 6px 0 2px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(-45deg); transition: transform var(--fast) var(--ease); }
.cab-led.free[open] > summary::before { transform: rotate(45deg); }
.cab-led.free .cab-led-count { color: var(--text-3); font: var(--f-body); }
.cab-led.free .cab-led-count::before { content: "— "; }
.cab-led.free ul { margin: var(--s-2) 0 0; padding-left: 21px; }

.cab-done-day { margin: var(--s-3) 0 0; padding: 2px 0 6px; color: var(--text-2); font: 600 13px/18px var(--font); }
.cab-done-day:first-child { margin-top: 0; }
.cab-done ul { margin: 0; padding: 0; list-style: none; }
.cab-done-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-2); padding: 4px 0; font: var(--f-meta); }
.cab-done-time { color: var(--text-3); }
#done-work .more { margin-top: var(--s-3); font: var(--f-meta-m); }

/* Три колонки на мониторе (раунд 31) убраны (раунд 32): встречам в трети ширины не хватало
   места, и текст строки вытягивался столбиком. Колонок две при любой ширине. */
@media (max-width: 1279px) {
  .work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .meeting { grid-template-columns: 148px minmax(0, 1fr); }
  .meeting-do { grid-column: 2; justify-content: flex-start; }
  .meeting-do .row-actions { justify-content: flex-start; }
}
@media (max-width: 1023px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Телефон: строка встречи — столбиком; дела — кнопками по 44, у не сегодняшних — за стрелкой.
   Сегодняшняя — карточкой с крупными кнопками: главное дня — на первом экране. */
@media (max-width: 767px) {
  .work .card { padding: var(--s-4); }
  .work #tiles .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work #tiles .tile { min-height: 0; }
  .bucket { margin-top: var(--s-4); padding-bottom: 6px; color: var(--text-2); font: 600 13px/18px var(--font); }
  .meeting { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 44px 10px 0; }
  .meeting-do, .meeting-main, .meeting-when { grid-column: 1; }
  .meeting-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
  .meeting-when b { font: var(--f-meta-m); color: var(--text-2); }
  .meeting-day { display: inline; }
  .meeting-rel { display: inline; }
  .meeting-rel::before { content: " · "; color: var(--text-3); font-weight: 400; }
  .meeting-who { font: 500 15px/20px var(--font); }
  .meeting-do { display: block; }
  .meetings.today .meeting, .meeting:has(> div.meeting-do) { padding-right: 0; }
  .meeting-more { position: absolute; top: 50%; right: 0; display: grid; place-items: center; width: var(--h-lg); height: var(--h-lg); margin-top: calc(var(--h-lg) / -2); color: var(--text-3); cursor: pointer; list-style: none; }
  .meeting-more::-webkit-details-marker { display: none; }
  .meeting-more svg { transition: transform var(--fast) var(--ease); }
  .meeting-do[open] > .meeting-more { top: 10px; margin-top: 0; }
  .meeting-do[open] > .meeting-more svg { transform: rotate(90deg); }
  .meeting-do .row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-2); white-space: normal; }
  .meeting-do .row-actions .button { justify-content: center; height: var(--h-lg); font: var(--f-body-m); }
  .meeting-do .row-actions .button:first-child { grid-column: 1 / -1; }
  .meeting-do .row-actions .button.quiet { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
  /* Сегодня: карточкой, первое дело — главной кнопкой. */
  .meetings.today .meeting { margin-top: var(--s-2); padding: var(--s-3); border: 1px solid var(--accent-line); border-radius: var(--r-md); }
  .meetings.today .meeting-when b { color: var(--text); font: 600 15px/22px var(--font); }
  .meetings.today .meeting-do .row-actions .button:first-child { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); }
  /* «Позже» — строкой «Позже — 4 встречи», раскрывается нажатием. */
  .bucket-fold > .bucket-sum { display: flex; align-items: center; justify-content: space-between; height: var(--h-lg); margin-top: var(--s-2); font: var(--f-body-m); cursor: pointer; list-style: none; }
  .bucket-fold > .bucket-sum::-webkit-details-marker { display: none; }
  .bucket-fold > .bucket-sum::after { content: ""; width: 8px; height: 8px; margin-right: 6px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform var(--fast) var(--ease); }
  .bucket-fold[open] > .bucket-sum::after { transform: rotate(-135deg); }
  .bucket-fold > .bucket { display: none; }
  /* «Кого вы ведёте» — группами-строками со счётом. */
  #led { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  #led .card-head { margin: 0; padding: var(--s-2) 0; }
  .cab-led { margin: 0; padding: 0; }
  .cab-led > summary { min-height: 48px; align-items: center; font: var(--f-body); }
  .cab-led:not(.free) > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 6px 0 -4px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg); transition: transform var(--fast) var(--ease); }
  .cab-led:not(.free)[open] > summary::after { transform: rotate(45deg); }
  .cab-led-count { margin-left: auto; }
  .cab-led[open] { padding-bottom: var(--s-3); }
  .cab-led.free > summary { font: var(--f-body); }
  .cab-tasks li { min-height: 52px; align-items: center; }
  .cab-task-what b { font: 500 15px/20px var(--font); }
  /* Мои доступы: тег — справа от названия, «Открыть» — под ним, пальцем по 44. */
  .cab-acc li { grid-template-columns: minmax(0, 1fr) auto; min-height: 52px; }
  .cab-acc-what b { font: 500 15px/20px var(--font); }
  .cab-acc-open { grid-column: 1 / -1; justify-self: start; height: var(--h-lg); }
}
/* ── Апрув: очередь и заявки в «Моей работе» (AF-170, раунд 31) ─────────────
   Свои имена — с приставкой `appr-`, чтобы не занять чужое (грабля 42). Очередь: заявка —
   строкой из трёх зон, кнопки решения всегда справа на одном месте. «Моя работа»: вернувшаяся
   раскрыта с комментарием, ожидающие — строками. */

.appr-days { display: flex; flex-direction: column; }
.day-label { padding: var(--s-4) 0 var(--s-2); color: var(--text-2); font: 600 14px/20px var(--font); }
.appr-day:first-child .day-label { padding-top: var(--s-1); }
.appr-list { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.appr { position: relative; }
.appr.appr-at { box-shadow: 0 0 0 3px var(--focus); }

.appr-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.appr-event { font: 600 15px/22px var(--font); }
.appr-person { overflow-wrap: anywhere; }
.appr-person a { font-weight: 500; }
.appr-person .tag { vertical-align: 1px; }
.appr-meta { color: var(--text-2); font: var(--f-meta); }
.appr-by { color: var(--text-3); font: var(--f-meta); }

.appr-changes { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px var(--s-3); margin: 0; font-variant-numeric: tabular-nums; }
.appr-changes dt { color: var(--text-2); }
.appr-changes dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.appr-changes s { color: var(--text-3); text-decoration-color: var(--line-strong); }
.appr-changes b { font-weight: 600; }
.appr-arrow { margin: 0 6px; color: var(--text-3); }
.appr-after { margin-top: var(--s-3); color: var(--text-2); font: var(--f-meta); text-wrap: pretty; }
.appr-after b { color: var(--text); font-weight: 600; }
.appr-what > .note { margin-top: var(--s-3); }

/* Комментарий того, кто вернул или отклонил, — блоком с автором и датой. */
.appr-comment { display: flex; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-2); }
.appr-comment .face { background: var(--surface-3); color: var(--text); }
.appr-comment-by { color: var(--text-2); font: var(--f-meta-m); }
.appr-comment p + p { margin-top: 2px; }

/* «Что было с апрувом» — раскрывающаяся строка. */
.appr-trail { margin-top: var(--s-2); color: var(--text-2); font: var(--f-meta); }
.appr-trail > summary { display: inline-flex; align-items: center; gap: 4px; height: var(--h-sm); color: var(--text-2); font: var(--f-meta-m); cursor: pointer; list-style: none; }
.appr-trail > summary::-webkit-details-marker { display: none; }
.appr-trail > summary:hover { color: var(--text); }
.appr-trail > summary svg { transform: rotate(-90deg); transition: transform var(--fast) var(--ease); }
.appr-trail[open] > summary svg { transform: none; }
.appr-trail ul { margin: 4px 0 0; padding-left: 18px; }
.appr-trail li + li { margin-top: 2px; }

/* Формы решения — полосой под заявкой. */
.appr-form { margin: 0; padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2); }
.appr-form label { display: block; margin-bottom: 6px; color: var(--text-2); font: var(--f-meta-m); }
.appr-form textarea { display: block; width: 100%; min-height: 68px; }
.appr-form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.appr-form .actions .hint { margin-left: var(--s-2); color: var(--text-3); font: var(--f-meta); }
.appr-form .hint { color: var(--text-3); font: var(--f-meta); }
.appr-fields { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.appr-field { flex: 1 1 220px; min-width: 200px; max-width: 360px; }

/* Очередь: три зоны. */
.appr-queue { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.appr-queue > .appr-form:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.appr-zones { display: grid; grid-template-columns: 300px minmax(0, 1fr) 200px; gap: var(--s-6); padding: var(--s-5); }
.appr-who { min-width: 0; }
.appr-who .appr-person { margin-top: var(--s-2); }
.appr-who .appr-by { margin-top: var(--s-2); }
.appr-what { min-width: 0; }
.appr-act { display: flex; flex-direction: column; gap: var(--s-2); }
.appr-act form { margin: 0; }
.appr-act .hint { color: var(--text-3); font: var(--f-meta); }
/* Форма внизу открыта — справа вместо кнопок подсказка, что сейчас происходит. */
.appr-act-hint { display: none; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); font: var(--f-meta); }
.appr-queue:has(> .appr-form.ret:not([hidden])) .appr-act > :not(.appr-act-hint.ret),
.appr-queue:has(> .appr-form.rej:not([hidden])) .appr-act > :not(.appr-act-hint.rej) { display: none; }
.appr-queue:has(> .appr-form.ret:not([hidden])) .appr-act-hint.ret,
.appr-queue:has(> .appr-form.rej:not([hidden])) .appr-act-hint.rej { display: block; }

/* «Моя работа»: вернули на доработку — раскрыта. */
#approvals .appr-list { gap: 0; }
.appr-open { margin-bottom: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.appr-open.warn { border-color: var(--warn-line); }
.appr-open .appr-person { margin-top: 2px; }
.appr-open .appr-changes { grid-template-columns: 150px minmax(0, 1fr); margin-top: var(--s-3); }
.appr-open .appr-decide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding-right: 190px; }
.appr-open .appr-decide form { margin: 0; }
/* «Что было с апрувом» — в строке кнопок, справа; раскрытое — под ней. */
.appr-open .appr-decide + .appr-trail { margin-top: calc(var(--h-md) * -1); }
.appr-open .appr-decide + .appr-trail > summary { display: flex; width: fit-content; height: var(--h-md); margin-left: auto; }
.appr-open > .appr-form { margin: var(--s-3) calc(var(--s-4) * -1) calc(var(--s-4) * -1); padding: var(--s-4); border-radius: 0 0 var(--r-md) var(--r-md); }
/* «Моя работа» того, кто апрувит (R33.1): заявка раскрыта, решение — под ней. Пока открыта
   форма «На доработку» или «Отклонить», кнопок решения нет — как в очереди. */
.appr-decide-item:has(> .appr-form:not([hidden])) > .appr-decide { display: none; }
.appr-decide-item:has(> .appr-form:not([hidden])) > .appr-trail { margin-top: var(--s-3); }
.appr-decide-item:has(> .appr-form:not([hidden])) > .appr-trail > summary { margin-left: 0; }

/* Ждёт решения — строкой. */
.appr-wait { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.appr-wait .appr-title { gap: 6px var(--s-2); }
.appr-wait .appr-title b { font-weight: 600; }
.appr-wait .appr-person { margin-top: 2px; overflow-wrap: anywhere; }
.appr-wait-act { display: flex; align-items: center; gap: var(--s-1); }
.appr-wait-act form { margin: 0; }
.appr-wait > .appr-form { grid-column: 1 / -1; padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-md); }
.appr-wait .note { margin-top: var(--s-2); }

/* Чем кончилось решение — на месте заявки. */
.appr-result { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); animation: rise var(--fast) var(--ease); }
.appr-result.ok { border-color: var(--success-line); background: var(--success-soft); }
.appr-result.warn { border-color: var(--warn-line); background: var(--warn-soft); }
.appr-result.late { border-color: var(--danger-line); background: var(--danger-soft); }
.appr-result > div { flex: 1; min-width: 0; }
.appr-result b { font-weight: 600; }
.appr-result-icon { display: grid; flex: none; place-items: center; color: var(--text-2); }
.appr-result.ok .appr-result-icon { color: var(--success); }
.appr-result.warn .appr-result-icon { color: var(--warn-text); }
.appr-result.late .appr-result-icon { color: var(--danger); }
.appr-result-text { color: var(--text-2); font: var(--f-meta); }
.appr-result-when { flex: none; color: var(--text-2); font: var(--f-meta); }
#approvals .appr-result { margin-bottom: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); }

@media (max-width: 1279px) {
  .appr-zones { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .appr-act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .appr-act .button, .appr-act button { width: auto; }
}
@media (max-width: 767px) {
  .appr-zones { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); }
  .appr-changes, .appr-open .appr-changes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .appr-changes dt { color: var(--text-3); font: var(--f-meta); }
  .appr-changes dd { margin-bottom: 6px; }
  /* Кнопки решения — по 44, внизу карточки. */
  .appr-act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appr-act .button, .appr-act button { width: 100%; height: var(--h-lg); justify-content: center; }
  .appr-act > form:first-child { grid-column: 1 / -1; }
  .appr-form { padding: var(--s-4); }
  .appr-form .actions .button, .appr-form .actions button { height: var(--h-lg); }
  .appr-open .appr-decide { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-right: 0; }
  .appr-open .appr-decide .button, .appr-open .appr-decide button { height: var(--h-lg); justify-content: center; }
  .appr-open .appr-decide button.quiet { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
  /* Решение апрувящего — «Апрув» во всю ширину, ниже две кнопки рядом, как в очереди. */
  .appr-decide-item .appr-decide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appr-decide-item .appr-decide > form:first-child { grid-column: 1 / -1; }
  .appr-decide-item .appr-decide button { width: 100%; }
  .appr-open .appr-decide + .appr-trail { margin-top: var(--s-2); }
  .appr-open .appr-decide + .appr-trail > summary { margin-left: 0; }
  /* Ждёт решения — строкой со стрелкой в «Финансы»: там вся заявка и её дела. */
  .appr-wait { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; padding: var(--s-2) 0; }
  .appr-wait-act { display: none; }
  .appr-wait-go { display: grid !important; place-items: center; width: var(--h-lg); height: var(--h-lg); margin-right: -10px; color: var(--text-3); }
  .appr-wait > .appr-form:not([hidden]) { display: block; }
  .appr-result { padding: var(--s-3) var(--s-4); }
}

/* ── Заявки бота (R27.9, раунд 31): тот же вид, что у заявки на апрув ───────────────────
   Три зоны — кто и что, что внесли, итог; итог — сообщением цвета тега. «Что изменилось в
   карточке» — полосой под заявкой. */
.request .appr-zones { grid-template-columns: 300px minmax(0, 1fr) 260px; }
.req-outcome .alert { margin: 0; }
.request-changes { border-top: 1px solid var(--line); }
.request-changes > summary { display: flex; align-items: center; gap: 4px; padding: var(--s-3) var(--s-5); color: var(--text-2); font: var(--f-meta-m); cursor: pointer; list-style: none; }
.request-changes > summary::-webkit-details-marker { display: none; }
.request-changes > summary:hover { color: var(--text); }
.request-changes > summary svg { transform: rotate(-90deg); transition: transform var(--fast) var(--ease); }
.request-changes[open] > summary svg { transform: none; }
.request-changes .acts { margin: 0; padding: 0 var(--s-5) var(--s-3); list-style: none; }
#requests .pager { margin-top: var(--s-4); }
@media (max-width: 1279px) {
  .request .appr-zones { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .req-outcome { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .request .appr-zones { grid-template-columns: minmax(0, 1fr); }
  .request-changes > summary { padding: var(--s-3) var(--s-4); min-height: var(--h-lg); }
  .request-changes .acts { padding: 0 var(--s-4) var(--s-3); }
}

/* ── История по сотруднику (раунд 31): выбор человека — полем с поиском в шапке ─────────── */
.who-pick { display: flex; margin: 0; }
.who-pick .pick select { min-width: 240px; max-width: 360px; }
@media (max-width: 767px) {
  /* Поле выбора в шапке (человек, месяц) — своей строкой под пояснением, во всю ширину. */
  .page-head:has(.page-actions .pick) { grid-template-columns: minmax(0, 1fr); }
  .page-head:has(.page-actions .pick) .page-actions { grid-column: 1; grid-row: 3; flex-wrap: wrap; justify-content: stretch; margin-top: var(--s-2); }
  .page-head:has(.page-actions .pick) .page-actions > .button { flex: 1 1 auto; justify-content: center; height: var(--h-lg); }
  .who-pick, .who-pick .pick { flex: 1 1 100%; }
  .who-pick .pick { height: var(--h-lg); }
  .who-pick .pick select { flex: 1; min-width: 0; max-width: none; }
}

/* ── «Доступы и ПО» (раунды 19–21, редизайн 31) ─────────────────────────────────────────
   Место — полем в шапке части; до выбора — пустое состояние. Шапка сетки с должностями и
   колонка инструментов закреплены: сетка листается в своей рамке. Несохранённые галочки
   подсвечены, «Сохранить галочки» прилипает к низу, пока они есть. */
.part-head { align-items: center; }
.part-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.part-actions .unit-pick { display: flex; margin: 0; }
.part-actions .pick select { min-width: 220px; max-width: 360px; }
.part-empty { padding: var(--s-4) 0 var(--s-2); }
#grid .matrix-wrap { max-height: calc(100vh - var(--band-h) - 140px); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
#grid table.matrix { border: 0; border-radius: 0; }
#grid table.matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line); }
#grid table.matrix .tool-col { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
#grid table.matrix thead th.tool-col { z-index: 3; background: var(--surface-2); }
#grid table.matrix td.changed { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
#grid .grid-actions { align-items: center; margin-top: var(--s-3); }
#grid .grid-form.dirty .grid-actions { position: sticky; bottom: 0; z-index: 4; margin: var(--s-3) calc(var(--s-5) * -1) 0; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--surface); }
#grid .grid-dirty { color: var(--accent); font: var(--f-meta-m); }
/* Инструменты: «Изменить» и «Удалить» — в строке при наведении и с клавиатуры. */
table.tools .row-actions { opacity: 0; transition: opacity var(--fast) var(--ease); }
table.tools tr:hover .row-actions, table.tools tr:focus-within .row-actions, table.tools tr.editing .row-actions, table.tools tr.adding .row-actions { opacity: 1; }
table.tools tr.adding td { background: var(--surface-2); }
table.tools tr.adding input, table.tools tr.adding select, table.tools tr.adding textarea { height: var(--h-md); }
table.tools tr.adding textarea { min-height: var(--h-md); padding-top: 7px; resize: vertical; }
@media (hover: none) {
  table.tools .row-actions { opacity: 1; }
}
@media (max-width: 767px) {
  .part-head { flex-direction: column; align-items: stretch; }
  .part-actions .unit-pick, .part-actions .pick { flex: 1 1 100%; }
  .part-actions .pick { height: var(--h-lg); }
  .part-actions .pick select { flex: 1; min-width: 0; max-width: none; }
  #grid .matrix-wrap { max-height: none; }
  #grid .grid-form.dirty .grid-actions { margin: var(--s-3) calc(var(--s-4) * -1) 0; padding: var(--s-3) var(--s-4); }
  /* Закреплённая колонка инструментов занимала больше половины экрана — галочек было не
     видно (раунд 32): уже, название — в две строки. */
  #grid table.matrix .tool-col { min-width: 120px; width: 120px; white-space: normal; overflow-wrap: break-word; }
}

/* ── «Справочники» (R20.9, раунд 31): слева справочники, справа значения выбранного ──────── */
.dict-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.dict-nav { position: sticky; top: calc(var(--band-h) + var(--s-4)); padding: var(--s-2); }
.dict-nav ul { margin: 0; padding: 0; list-style: none; }
.dict-nav li > a { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-md); padding: 6px 10px; border-radius: var(--r-md); color: var(--text); font: var(--f-body); }
.dict-nav li > a:hover { background: var(--surface-2); text-decoration: none; }
.dict-nav li > a[aria-current] { background: var(--accent-soft); color: var(--accent); font: var(--f-body-m); }
.dict-nav-name { flex: 1; min-width: 0; }
.dict-nav-name small { display: block; color: var(--text-3); font: var(--f-cap); }
.dict-nav-count { color: var(--text-3); font: var(--f-meta); }
.dict-nav li > a[aria-current] .dict-nav-count { color: var(--accent); }
.dict-nav .hint { margin: var(--s-2) 10px var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--line); color: var(--text-3); font: var(--f-meta); }
.dict-layout .dict { margin: 0; }
/* «Переименовать» и «Скрыть» — в строке при наведении и с клавиатуры. */
table.dict-values .row-actions { opacity: 0; transition: opacity var(--fast) var(--ease); }
table.dict-values tr:hover .row-actions, table.dict-values tr:focus-within .row-actions, table.dict-values tr.adding .row-actions, table.dict-values tr.off .row-actions { opacity: 1; }
@media (hover: none) { table.dict-values .row-actions { opacity: 1; } }
@media (max-width: 1023px) {
  .dict-layout { grid-template-columns: minmax(0, 1fr); }
  .dict-nav { position: static; padding: var(--s-1); }
  .dict-nav ul { display: flex; gap: var(--s-1); overflow-x: auto; }
  .dict-nav li { flex: none; }
  .dict-nav .hint { display: none; }
  .dict-nav ul { scrollbar-width: none; }
  .dict-nav ul::-webkit-scrollbar { display: none; }
}
/* Телефон: значение — карточкой, а не строкой таблицы шире экрана (раунд 32): название,
   под ним «Людей: 1 · Доступы: в 2 местах», под ними кнопки по 40. Добавление — полем во
   всю ширину с кнопкой рядом. */
@media (max-width: 767px) {
  table.dict-values thead { display: none; }
  table.dict-values, table.dict-values tbody { display: block; }
  table.dict-values tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  table.dict-values td, table.dict-values td:first-child, table.dict-values .actions-cell { display: block; width: auto; padding: 0; border: 0; white-space: normal; }
  table.dict-values td:first-child { flex: 1 1 100%; }
  table.dict-values td.num { width: auto; color: var(--text-2); font: var(--f-meta); text-align: left; }
  table.dict-values td.num[data-label]::before { content: attr(data-label) ": "; color: var(--text-3); }
  table.dict-values .actions-cell { flex: 1 1 100%; }
  table.dict-values .row-actions { flex-wrap: wrap; justify-content: flex-start; gap: var(--s-2); }
  table.dict-values .row-actions .button, table.dict-values .row-actions button { height: 40px; }
  table.dict-values .row-actions button.step { width: 40px; }
  table.dict-values tr.adding, table.dict-values tr.renaming { margin-top: var(--s-2); padding: var(--s-3); border: 0; border-radius: var(--r-md); background: var(--surface-2); }
  table.dict-values tr.adding td, table.dict-values tr.renaming td { background: none; }
  table.dict-values tr.adding td:first-child { flex: 1 1 0; min-width: 0; }
  table.dict-values tr.adding td:not(:first-child):not(.actions-cell) { display: none; }
  table.dict-values tr.adding .actions-cell { flex: none; }
  table.dict-values input[type="text"] { max-width: none; }
  table.dict-values .rename { flex-wrap: wrap; }
  table.dict-values .rename input[type="text"] { flex: 1 1 100%; min-width: 0; }
  table.dict-values tr.renaming td.num, table.dict-values tr.renaming .actions-cell { display: none; }
}

/* ── «Поля карточки» (AF-120, раунд 31): группы оглавлением слева, поля группы — справа ──── */
.fields-tools { margin-bottom: var(--s-3); }
.fields-tools .tiles.compact { margin: 0; }
#field-add { margin-bottom: var(--s-3); }
#field-add .def-add > summary { width: fit-content; }
#field-add .def-add[open] { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); }
#field-add .def-add[open] > summary { margin-bottom: var(--s-3); }

/* ── Выгрузка за месяц (AF-170, раунд 31): месяц и Excel — в шапке, шапка таблицы прилипает ── */
.month-pick { display: flex; margin: 0; }
.month-pick .pick select { min-width: 160px; }
.export-card { padding: 0; overflow: hidden; }
.export-scroll { max-height: calc(100vh - var(--band-h) - 160px); overflow: auto; }
table.appr-export thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line); }
table.appr-export th:first-child, table.appr-export td:first-child { padding-left: var(--s-5); }
table.appr-export th:last-child, table.appr-export td:last-child { padding-right: var(--s-5); }
table.appr-export td.appr-change s { color: var(--text-3); text-decoration-color: var(--line-strong); }
table.appr-export td.appr-change b { font-weight: 600; }
.export-card .empty-state { padding: var(--s-5); }
.export-card + .appr-note, .export-card .appr-note { padding: 0 var(--s-5) var(--s-4); }
@media (max-width: 767px) {
  .month-pick, .month-pick .pick { flex: 1 1 100%; }
  .month-pick .pick select { flex: 1; }
  .export-scroll { max-height: none; }
}

/* ── «Обо мне» (AF-175, раунд 31): что уже работает — наверху, «скоро» — строкой внизу ────── */
.cab-me { display: flex; align-items: center; gap: var(--s-4); }
.cab-me h2 { margin: 0; font: var(--f-h2); }
.cab-me .person-role { margin-top: 2px; color: var(--text-2); }
.cab-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 var(--s-3); font: var(--f-title); }
.cab-now-label { color: var(--text-3); font-weight: 400; }
#now .progress { margin-bottom: var(--s-3); }
#now .late { color: var(--danger); }
/* Мои доступы (R33.2) — строками, как «Задачи на вас»: что, с какого дня и к кому идти,
   справа — состояние и «Открыть». На широком экране — в две колонки. */
#accesses > .alert { margin: 0 0 var(--s-3); }
.cab-acc { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.cab-acc li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2) var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.cab-acc-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cab-acc-what b { font-weight: 500; overflow-wrap: break-word; }
.cab-acc-what span { color: var(--text-2); font: var(--f-meta); }
.cab-acc-what .cab-acc-how { color: var(--text-3); }
@media (min-width: 1024px) {
  .cab-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Путь — лентой: день слева, что было — справа, как в журнале. */
.cab-path { padding: 0; }
.cab-path::before, .cab-path > li::before { content: none; }
.cab-path > li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.cab-path > li:first-child { padding-top: 0; border-top: 0; }
.cab-path-day { color: var(--text); font: 600 14px/20px var(--font); }
.cab-path .cab-path-steps { margin: 0; font: var(--f-body); line-height: 20px; }
.cab-path-steps li + li { margin-top: 2px; }
.cab-path > li.start .cab-path-steps li:first-child b { color: var(--accent); }
#soon { margin: 0 0 var(--s-3); }
@media (max-width: 767px) {
  .cab-path > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cab-path-day { color: var(--text-2); font: 600 13px/18px var(--font); }
}

/* ── Пустые состояния экранов: отказ, «нет страницы», заглушка блока (раунд 31) ─────────── */
.empty-state.denied .soon-icon { background: var(--warn-soft); color: var(--warn-text); }
.enter .empty-state { width: min(440px, 100%); padding: var(--s-6); }
.stub-ticket { margin-top: var(--s-2); color: var(--text-3); font: var(--f-cap); }

/* ── Карточка только для чтения (раунд 31): замок у полей, строка «только просмотр» ─────── */
.f-lock { display: inline-grid; place-items: center; margin: 0 auto 0 4px; color: var(--text-3); vertical-align: -1px; }
.readonly-note { margin: 0 0 var(--s-3); }
.readonly-note::before { --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

/* Полоса шире экрана — у края, за которым есть ещё, затухание (`app.js`): вкладки блока,
   части экрана, оглавление карточки строкой, таблица в своей рамке. У таблицы — только
   справа: слева у неё бывает закреплённая колонка (имя, инструмент) (раунд 32). */
:is(.band-tabs, .page-tabs, .toc, .table-scroll, .matrix-wrap, .dict-nav ul).more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
:is(.band-tabs, .page-tabs, .toc, .dict-nav ul).more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
:is(.band-tabs, .page-tabs, .toc, .dict-nav ul).more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* ── Разделы процессов (AF-126, раунд 31): «Начать …» — главной кнопкой в шапке ───────────
   Панель открывает кнопка шапки; закрытая не занимает места. Без скрипта кнопка — адрес
   `?start=1`, и панель приходит открытой. */
.start-panel:not([open]) { display: none; }
.start-panel > summary.start-sum { margin-bottom: var(--s-3); color: var(--text); font: 600 15px/22px var(--font); cursor: default; pointer-events: none; }
.start-panel[open] { margin-bottom: var(--s-4); padding: var(--s-4); border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--surface); }
.start-panel .start-form { padding: 0; border: 0; background: none; }

/* Части экрана вкладками внутри страницы («Доступы и ПО»): переключатель, как «Работают ·
   Уволены · Все». Вкладки блока — в полосе над экраном, не здесь. */
.page-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 2px; border-radius: var(--r-md); background: var(--surface-3); }
.page-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font: var(--f-body-m);
  white-space: nowrap;
}
.page-tabs a:hover { color: var(--text); text-decoration: none; }
.page-tabs a[aria-current] { border-color: var(--line); background: var(--surface); color: var(--text); }
.page-tabs .count { color: var(--text-3); font-weight: 400; }
/* На телефоне три части в строку не помещаются — полоса листается вбок, как вкладки блока,
   а не переносится в три строки (раунд 32). */
@media (max-width: 767px) {
  .page-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .page-tabs::-webkit-scrollbar { display: none; }
  .page-tabs a { flex: none; height: 40px; }
}

/* ════════════════ Адаптив: колонки растут с экраном, меню меняет форму ════════════════ */

/* Монитор ≥ 1680: больше колонок, а не шире поля. */
@media (min-width: 1680px) {
  :root { --side-w: 256px; --page-pad: 32px; --gap: 24px; }
}

/* Планшет горизонтально 1024–1279: меню — полоса значков, подпись — во всплывающей подсказке. */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --side-w: 64px; --page-pad: 20px; }
  .side-top { justify-content: center; padding: 0; }
  .side-logo { flex: none; }
  .side-name, .side-item span, .side-soon-title, .side-soon-count, .side-soon-hint, .side-soon-item span,
  .side-me-text, .side-exit span { display: none; }
  .side-nav { padding: var(--s-1) var(--s-2) var(--s-3); }
  .side-item, .side-soon-toggle, .side-soon-item { justify-content: center; padding: 0; }
  .side-soon-toggle { min-height: 36px; }
  .side-sep { margin: var(--s-2) 0; }
  .side-me { position: relative; justify-content: center; padding: 6px 0; }
  .side-badge { position: absolute; top: 0; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--surface); font: 600 11px/14px var(--font); }
  .side-tools { flex-direction: column; gap: 6px; padding: 0; }
  .themes { flex-direction: column; }
  .side-exit { width: 34px; justify-content: center; padding: 0; }
}

/* Вертикальный планшет и телефон < 1024: строка сверху, меню — выезжающая панель. */
@media (max-width: 1023px) {
  :root { --page-pad: 20px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(320px, 86vw);
    height: 100%;
    border-right: 0;
    box-shadow: var(--sh-pop);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--slow) var(--ease), visibility 0s linear var(--slow);
  }
  .menu-open .side, .side:target { transform: none; visibility: visible; transition: transform var(--slow) var(--ease), visibility 0s; }
  .side-top { padding: 0 var(--s-1) 0 var(--s-4); border-bottom: 1px solid var(--line); }
  .side-close { display: grid; }
  .side-nav { padding: 6px var(--s-2); }
  .side-item { height: var(--h-lg); font: 500 15px/20px var(--font); }
  .side-item[aria-current] { font-weight: 600; }
  .side-soon-toggle { min-height: var(--h-lg); }
  .side-soon-item { height: 40px; }
  .side-foot { padding: 10px var(--s-3); }
  .scrim { position: fixed; inset: 0; z-index: 55; background: var(--overlay); }
  .menu-open .scrim, .side:target ~ .scrim { display: block; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 52px;
    padding: 0 var(--s-1);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .topbar-menu, .topbar-me { position: relative; display: grid; place-items: center; flex: none; width: var(--h-lg); height: var(--h-lg); border-radius: var(--r-md); color: var(--text); }
  .topbar-menu:hover, .topbar-me:hover { background: var(--surface-3); text-decoration: none; }
  .topbar-title { flex: 1; min-width: 0; overflow: hidden; font: 600 16px/22px var(--font); text-overflow: ellipsis; white-space: nowrap; }
  .topbar-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--surface); border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font: 600 11px/14px var(--font); text-align: center; }

  /* Полоса блока под строкой: только вкладки, название — в строке сверху. */
  .band { position: static; height: var(--h-lg); padding: 0 var(--s-4); }
  .band-name { display: none; }
  .band:not(:has(.band-tabs)) { display: none; }
  .band-tabs { gap: var(--s-5); }
  .band-tabs a { padding: 0; font: 500 15px/20px var(--font); }
  .band-tabs a[aria-current] { font-weight: 600; }

  .note.ok { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); width: auto; max-width: none; }
}

/* ───────────── Раунд 34: запросы доступа и карточка роли ─────────────
   Запросы доступа — тем же видом, что апрув (`appr-*`): заявка карточкой из трёх зон, решение
   справа. Свои имена — с приставкой `areq-` и `role-`, чтобы не занять чужое (грабля 42). */

.areq-ask > details > summary { list-style: none; }
.areq-ask > details > summary::-webkit-details-marker { display: none; }
.areq-ask > details[open] > summary { margin-bottom: var(--s-4); }
.areq-term { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.areq-term legend { margin-bottom: 6px; padding: 0; color: var(--text-2); font: var(--f-meta-m); }
.areq-check { display: flex; align-items: center; gap: 8px; color: var(--text); font: var(--f-body); cursor: pointer; }
.areq-check input[type="date"] { width: auto; }
.areq-section { margin-top: var(--s-5); }
.areq-section > .day-label { padding-top: 0; }
.areq-section > .tiles { margin-bottom: var(--s-3); }
.cab-requests { margin: 0 0 var(--s-4); }

/* Роли: список по местам, карточка роли — тексты слева, факты справа. */
.roles-admin-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.roles-admin-line form { margin: 0; }
.roles-admin-line .hint { flex: 1 1 320px; color: var(--text-2); }
.roles-admin-line > .button:last-child { margin-left: auto; }
.roles-add { margin-top: var(--s-4); }
.roles-group { margin-top: var(--s-4); }
table.roles-list td.num.none { color: var(--text-3); }
.role-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--s-4); align-items: start; }
.role-main, .role-side { display: grid; gap: var(--s-4); min-width: 0; }
.role-text h2, .role-side h2 { margin-bottom: var(--s-2); font: var(--f-title); }
.role-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.role-people, .role-tools { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.role-facts { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.role-facts dt { color: var(--text-3); }
.role-facts dd { margin: 0; overflow-wrap: anywhere; }
.role-money { font: var(--f-num); }
.role-range { display: flex; gap: var(--s-2); }
.role-range input { min-width: 0; }
.role-track { margin: var(--s-3) 0 0; padding: 0; border: 0; }
.role-track legend { margin-bottom: 6px; padding: 0; color: var(--text-2); font: var(--f-meta-m); }
.role-track-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px var(--s-4); max-height: 240px; overflow: auto; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.role-check { display: flex; align-items: baseline; gap: 8px; font: var(--f-body); cursor: pointer; }
.role-check input { flex: none; }
.field-label { display: block; margin-bottom: 6px; color: var(--text-2); font: var(--f-meta-m); }
.role-line { margin-top: var(--s-3); color: var(--text-2); }
.role-line a { font-weight: 500; }
.cab-role { margin-top: 4px; font: var(--f-meta-m); }
/* Приём без саба (пункт 8): саб и почта — столбиком в зоне решения. */
.appr-fill { display: grid; gap: 6px; margin: 0 0 var(--s-2); }
.appr-fill label { color: var(--text-2); font: var(--f-meta-m); }
/* Сервисы (пункт 19): справа — кому подключён выбранный; файл — в шапке справа. */
.services-card .card-head .services-file { margin-left: auto; }
table.services-list td:first-child { font-weight: 500; }
/* Оклад вслепую (пункт 9): поле только на ввод — подпись, поле и кнопка строкой. */
.blind-card .hint { margin: 0 var(--s-3) var(--s-3); color: var(--text-2); }
.blind-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 var(--s-3) var(--s-2); }
.blind-form label { min-width: 120px; color: var(--text-2); }
.blind-form input { flex: 0 1 220px; min-width: 0; }

/* Телефон < 768: одна колонка, поля 16, кнопки и поля 44 — под палец. */
@media (max-width: 767px) {
  :root {
    --f-body: 400 15px/22px var(--font);
    --f-body-m: 500 15px/22px var(--font);
    --f-h1: 600 22px/28px var(--font);
    --f-num: 600 24px/28px var(--font);
    --page-pad: 16px;
    --gap: 12px;
    --h-md: 44px;
    --row: 52px;
  }
  .cab-cols { grid-template-columns: minmax(0, 1fr); }
  .role-layout { grid-template-columns: minmax(0, 1fr); }
  .role-track-list { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────── Раунд 35: тестовый стенд и «Обновления» (S78, R35.1) ─────────────
   Плашка — на каждой странице стенда, над полосой блока: прокручивается со страницей, полоса
   блока по-прежнему прилипает. Цвет — «внимание»: данные вымышленные, настоящих не вносить. */
.stand-bar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px var(--s-3);
  margin: 0;
  padding: 6px var(--page-pad);
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
  color: var(--warn-text);
  font: var(--f-meta);
  text-align: center;
}
.stand-bar a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* «Обновления»: слева — что делаем и что дальше, справа — записи по выкаткам, новые сверху. */
.upd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-5); align-items: start; }
.upd-plan > h2 + .upd-list { margin-bottom: var(--s-5); }
.upd-plan > .upd-list:last-child { margin-bottom: 0; }
.upd-list { display: grid; gap: var(--s-2); margin: 0; padding-left: var(--s-5); color: var(--text-2); }
.upd-feed { display: grid; gap: var(--s-5); min-width: 0; }
.upd-text { margin: 0 0 var(--s-3); color: var(--text-2); }
.upd-items { display: grid; margin: 0; padding: 0; list-style: none; }
/* Текст и ссылка — две колонки: «Посмотреть →» всегда справа, сколько бы строк ни занял текст. */
.upd-items li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--s-4);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
}
.upd-items li:first-child { border-top: 0; padding-top: 0; }
.upd-items li:last-child { padding-bottom: 0; }
.upd-items a { flex: none; font: var(--f-meta); white-space: nowrap; }
@media (max-width: 1024px) {
  .upd-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .upd-items li { grid-template-columns: minmax(0, 1fr); }
}