/* ==========================================================================
   VOIR AI — ai-employees.css
   --------------------------------------------------------------------------
   Стили страницы «AI-сотрудники» (/ru/ai-employees.html, /en/ai-employees.html).
   Надстройка над design-system.css. Никаких хардкод-цветов: только токены
   дизайн-системы и их альфа-варианты (тот же принцип, что в about.css,
   pricing.css, ai-ceo.css).

   ВИЗУАЛЬНАЯ ИДЕЯ СТРАНИЦЫ: «ШТАТНОЕ РАСПИСАНИЕ И ЛИЧНОЕ ДЕЛО»
   ---------------------------------------------------------------------------
   У каждой страницы сайта своя метафора формы, и она всегда содержательная:
   главная — обсерватория приборов (радиальные схемы, canvas);
   AI OS — архитектурный разрез (стратиграфия слоёв);
   AI CEO — радар-локатор командного контура;
   Тарифы — бухгалтерская кассовая книга и чек;
   О платформе — бортовой журнал экспедиции.

   Эта страница — КАДРОВЫЙ ДОКУМЕНТ: штатное расписание и личные дела.
   Причина та же: форма обязана повторять суть. Страница рассказывает о восьми
   AI-сотрудниках как о сотрудниках — значит, и документы здесь кадровые,
   а не маркетинговые:
     - ШТАТНОЕ РАСПИСАНИЕ — разлинованная таблица должностей (отдел, код,
       грейд, ставка-единица, статус), а не «сетка красивых карточек».
       Таблица — потому что в ней видно ГЛАВНОЕ: колонка «Принято» равна нулю;
     - ЛИЧНОЕ ДЕЛО — карточка сотрудника с перфорацией слева (как у картотеки),
       штампом-грифом и полями «роль / навыки / KPI / что не делает».
       Единственный «интерактив» на странице — tilt и spotlight на этих
       карточках: личное дело слегка наклоняется и подсвечивается под курсором,
       как папка, которую достали из шкафа;
     - ОРГСТРУКТУРА — SVG-схема подчинения с линиями передачи задачи
       (владелец → AI CEO → восемь отделов). Это чертёж, а не иллюстрация;
     - ГРИФ-ШТАМП «НЕ ПРИНЯТ НА РАБОТУ» на каждой карточке: честность —
       не подпись мелким шрифтом внизу, а основная строка документа.

   Что здесь сознательно НЕ используется: canvas-частицы, «живые» счётчики
   производительности сотрудников, выдуманные отзывы и лица людей. Единственные
   счётчики на странице — факты, которые можно перепроверить (8 должностей
   в расписании, 0 принятых, 0 клиентов), и у каждого есть подпись-уточнение.

   Правила страницы (те же, что во всём проекте):
     - mobile-first;
     - никакого горизонтального переполнения: декоративные слои всегда
       inset:0 внутри контейнера с overflow:hidden, поэтому их bounding rect
       физически не может выйти за вьюпорт;
     - всё анимированное имеет статичное состояние при reduced-motion;
     - контент присутствует в серверном HTML: JavaScript наклоняет карточки и
       рисует линии схемы, но ничего не «дорисовывает» в текст;
     - всё нереализованное помечено бейджем «Целевая архитектура».
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Локальные переменные страницы (только производные от токенов)
   -------------------------------------------------------------------------- */
.emp-page {
  /* Линии кадровой разлиновки */
  --emp-rule: rgb(223 230 242 / 0.09);
  --emp-rule-strong: rgb(223 230 242 / 0.2);
  /* Цвет «папки» личного дела */
  --emp-folder: rgb(243 246 251 / 0.022);
  /* Гриф-штамп */
  --emp-stamp: rgb(245 176 62 / 0.55);
  /* Шаг перфорации картотеки */
  --emp-perf: 1.35rem;
}

/* Все коды, числа и колонки таблицы — табличные цифры, чтобы расписание
   не «плясало» по ширине */
.emp-page .mono-num,
.emp-page .emp-stamp__value,
.emp-page .roster__code,
.emp-page .pfile__code,
.emp-page .kpi__metric,
.emp-page .onboard__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   1. Хлебные крошки — «цепочка документа» (дело → раздел → страница)
   -------------------------------------------------------------------------- */
.crumbs-emp {
  padding-block: var(--sp-md) 0;
}

.crumbs-emp__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.crumbs-emp__link {
  color: var(--text-faint);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.crumbs-emp__link:hover {
  color: var(--accent);
  border-block-end-color: currentColor;
}

.crumbs-emp__link:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Разделитель aria-hidden, но это видимый глиф → берём токен, проходящий AA
   (--light-500 в дизайн-системе помечен «НЕ текст») */
.crumbs-emp__sep {
  color: var(--text-faint);
}

.crumbs-emp__current {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   2. HERO — титульный лист личного дела
   -------------------------------------------------------------------------- */
.emp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2rem, 6vw, 4.5rem) var(--section-y-sm);
  background:
    radial-gradient(115% 78% at 88% 0%, rgb(88 205 223 / 0.08) 0%, transparent 62%),
    radial-gradient(120% 80% at 8% 4%, rgb(245 176 62 / 0.07) 0%, transparent 58%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
}

/* Кадровая разлиновка hero: inset внутри overflow:hidden — не вылезает */
.emp-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--emp-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--emp-rule) 1px, transparent 1px);
  background-size: clamp(2.75rem, 5.5vw, 4.5rem) clamp(2.75rem, 5.5vw, 4.5rem);
  mask-image: radial-gradient(92% 72% at 50% 8%, #000 0%, transparent 76%);
}

.emp-hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  /* Якорь для «дырокола»: он позиционируется относительно сетки hero, а не
     всего hero, поэтому всегда попадает В ГУТТЕР shell и не заходит на текст */
  position: relative;
}

/* «Дырокол» — два круглых отверстия слева от титула. Декор картотеки:
   папка подшита в дело. Рисуется фоном, поэтому rect не выходит за hero.

   ДЕФЕКТ, пойманный vision-QC 01.11.2026 и подтверждённый замером геометрии:
   в первой версии слой был привязан к .emp-hero (секции на всю ширину) и
   занимал x=0..72px, тогда как колонка текста начинается с x=40px
   (= --shell-pad при 1280px) — кольца заходили НА текст на 32px и читались
   как случайный артефакт. Теперь слой привязан к сетке hero и строго
   умещается в гуттер shell: от левого края padding-box (inset 0.3rem) шириной
   shell-pad − 0.6rem, то есть [3.2px … 36.8px] при гуттере 40px — с зазором
   0.3rem до текста с обеих сторон. Проверено на 900/1000/1280/1440/1920. */
.emp-hero__punch {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.3rem;
  inline-size: calc(var(--shell-pad) - 0.6rem);
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 38%, rgb(5 7 12 / 0.9) 0 0.4rem, var(--emp-rule-strong) 0.4rem 0.48rem, transparent 0.52rem),
    radial-gradient(circle at 50% 62%, rgb(5 7 12 / 0.9) 0 0.4rem, var(--emp-rule-strong) 0.4rem 0.48rem, transparent 0.52rem);
  background-repeat: no-repeat;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  opacity: 0.55;
}

/* На узких экранах гуттер всего 16px — отверстия в него не помещаются,
   поэтому декор отключаем, а не урезаем до нечитаемой полосы */
@media (max-width: 56.24rem) {
  .emp-hero__punch {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Кегль H1 через КОНТЕЙНЕРНУЮ единицу — тот же приём, что в premium.css для
   остальных hero сайта. БЕЗ него базовый --step-7 (99px при 1280) в ~3 раза
   шире колонки копии (617px), и overflow-wrap:anywhere (design-system.css:281)
   рвал каждую авторскую строку ПОСЕРЕДИНЕ слова без дефиса («должн/остей»).

   Калибровка — ЗАМЕР на РЕАЛЬНОМ Unbounded (woff2 локально, document.fonts.ready,
   01.11.2026), естественная ширина строки при fs=100px:
     RU «которое ещё не подписано.» = 1690px = 16.90×fs → порог 5.92cqw;
     EN «nobody has signed yet.»    = 1366px = 13.66×fs → порог 7.32cqw.
   Берём с запасом ~3%: 5.7cqw (ru) / 7.1cqw (en). Кегль = доля ширины колонки,
   поэтому авторская строка помещается ЦЕЛИКОМ (ровно 1 визуальная строка в
   маске) на любом вьюпорте, где колонка шире строки — без переносов вообще.

   Ниже 421px колонки (mobile 375 → 343px) срабатывает min-кегель 24px, и
   самая длинная RU-строка уже не влезает; тогда hyphens:auto ставит дефис на
   границе слога («кото-рое…») вместо голого разрыва — та же честная деградация,
   что в @supports-not-fallback premium.css. Контент и разметка не меняются. */
@supports (container-type: inline-size) {
  .emp-hero__copy { container-type: inline-size; }
  .emp-hero h1 { font-size: clamp(1.5rem, 5.7cqw, 4rem); max-inline-size: none; }
  :lang(en) .emp-hero h1 { font-size: clamp(1.5rem, 7.1cqw, 4.4rem); }
}

@supports not (container-type: inline-size) {
  .emp-hero h1 { font-size: clamp(1.6rem, 1rem + 3.2vw, 3.4rem); }
}

.emp-hero h1 {
  hyphens: auto;
  -webkit-hyphens: auto;
}

.emp-hero h1 .line {
  /* Автор разбивает H1 на строки ВРУЧНУЮ: каждая .line обязана остаться одной
     визуальной строкой, когда влезает. break-word (не anywhere) не рвёт слово
     без дефиса, а hyphens:auto выше даёт слоговой перенос, если не влезает. */
  overflow-wrap: break-word;
}

.emp-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  margin: 0 0 var(--sp-lg);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-faint);
}

.emp-hero__kicker li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.emp-hero__kicker li::before {
  content: '';
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background-color: var(--accent);
  flex: none;
}

.emp-hero__accent {
  color: var(--accent);
}

.emp-hero__lead {
  margin-block-start: var(--sp-lg);
}

.emp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-block-start: var(--sp-xl);
}

.emp-hero__actions .btn {
  flex: 0 1 auto;
}

/* --- Титульная карточка дела ----------------------------------------------
   Правая колонка hero: «личное дело № 00» со штампами-фактами. */
.emp-hero__file {
  position: relative;
  min-inline-size: 0;
  padding: 0;
  border: var(--hairline);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--emp-folder) 0%, rgb(243 246 251 / 0) 62%), var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-3);
}

/* Полоса «ДЕЛО №» сверху — как на картотеке */
.filebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-block-end: var(--hairline);
  background-color: rgb(5 7 12 / 0.35);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.filebar__no {
  color: var(--text-muted);
}

.filebar__state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--warn);
}

.filebar__state::before {
  content: '';
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background-color: currentColor;
  flex: none;
}

.emp-hero__file-body {
  padding: var(--sp-lg);
}

/* Штамп-гриф «Целевая архитектура · принято 0 из 8».
   ДЕФЕКТ, пойманный vision-QC 01.11: в первой версии штамп был
   полупрозрачной лентой ПОВЕРХ текста (z-index:2, opacity .9, rotate −9°) и
   перечёркивал строки «Должность / AI-сотрудник отдела / Подчинение» — 7
   пересечений на 1280px, плюс выход за правую границу карточки на 24px.
   Исправление: штамп стал ВОДЯНЫМ ЗНАКОМ — z-index:0 (ПОД содержимым
   карточки, которое поднято на z-index:1), opacity .17, полностью внутри
   padding'ов карточки (отрицательный inset убран). Он читается как оттиск
   печати на бланке, но не мешает чтению и не вылезает за рамку. */
.filestamp {
  position: absolute;
  inset-block-start: 4.2rem;
  inset-inline-end: var(--sp-md);
  z-index: 0;
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--emp-stamp);
  border-radius: var(--r-xs);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transform: rotate(-8deg);
  opacity: 0.17;
  pointer-events: none;
  max-inline-size: 12rem;
  text-align: center;
}

/* Содержимое карточки дела — поверх водяного знака */
.emp-hero__file-body > * {
  position: relative;
  z-index: 1;
}

/* Штампы-факты: три числа с подписями-уточнениями */
.emp-stamps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-sm);
  margin-block-start: var(--sp-md);
}

.emp-stamp {
  display: grid;
  gap: 0.2rem;
  padding: var(--sp-sm);
  border: 1px dashed var(--emp-rule-strong);
  border-radius: var(--r-xs);
  text-align: center;
  min-inline-size: 0;
}

.emp-stamp__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: var(--leading-snug);
}

.emp-stamp__value {
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  color: var(--text-strong);
}

.emp-stamp:nth-child(2) .emp-stamp__value,
.emp-stamp:nth-child(3) .emp-stamp__value {
  color: var(--warn);
}

.emp-stamp__note {
  font-size: var(--step--2);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

/* Строка-подпись документа */
.emp-hero__file-note {
  margin-block-start: var(--sp-md);
  padding-block-start: var(--sp-md);
  border-block-start: var(--hairline);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   3. Заголовки секций — «раздел документа» с номером дела
   -------------------------------------------------------------------------- */
.emp-sec-head {
  display: grid;
  gap: var(--sp-md);
  max-inline-size: 48rem;
}

.emp-sec-head--wide {
  max-inline-size: 62rem;
}

/* --------------------------------------------------------------------------
   4. ШТАТНОЕ РАСПИСАНИЕ — разлинованная таблица должностей
   -------------------------------------------------------------------------- */
/* Подложка ПЕРЕНЕСЕНА на .roster__scroll (см. --emp-scroll-bg): для scroll-shadow
   фон скролл-контейнера обязан быть непрозрачным, иначе «крышка» не закрывает
   тень. Прежний полупрозрачный tint rgb(5 7 12 / .28) поверх ink-850 даёт
   ровно #060910 — цвет не изменился, только стал непрозрачным. */
.roster {
  margin-block-start: var(--sp-2xl);
  border: var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Обёртка с overflow-x:auto — ТАБЛИЦА на узком экране прокручивается внутри
   своего контейнера. Это не горизонтальный скролл СТРАНИЦЫ: контейнер
   ограничен shell, а scrollWidth body не растёт.

   ВИЗУАЛЬНЫЙ АФФОРДАНС ПРОКРУТКИ (дефект, пойманный vision-QC 01.11.2026:
   последняя колонка выглядела обрезанной, а macOS-скроллбар — overlay и
   занимает 0px, то есть до первого свайпа не виден; замер: offsetHeight −
   clientHeight = 0px). Применён приём «scroll shadows» Леа Веру, адаптированный
   под ТЁМНУЮ тему (в оригинале тени тёмные — на тёмном фоне они невидимы,
   поэтому здесь тень янтарная, а «крышки» — непрозрачный цвет самого
   контейнера):
     слой 1–2 (attachment: local)  — непрозрачные крышки, едут ВМЕСТЕ с
                                     содержимым и закрывают тень у того края,
                                     до которого доскроллили;
     слой 3–4 (attachment: scroll) — янтарные тени, прибиты к краям КОНТЕЙНЕРА.
   Итог: свечение у края появляется ТОЛЬКО когда в ту сторону есть что
   прокрутить, и гаснет в конце. Чистый CSS, без JS и без ложной подсказки на
   широких экранах, где таблица влезает целиком.
   Для работы крышек фон контейнера обязан быть НЕПРОЗРАЧНЫМ — поэтому tint
   перенесён с .roster/.cmp/.org на сам скролл-контейнер (см. --emp-*--bg). */
.roster__scroll,
.cmp__scroll,
.org__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background-color: var(--emp-scroll-bg);
  /* ВАЖНО: внутри background-image НЕЛЬЗЯ указывать позицию слоя («100% 0») —
     это делает недействительным ВСЁ объявление целиком (проверено 01.11.2026:
     computed background-image стал none, градиентов 0). Позиции задаются
     отдельным background-position ниже, по одному на слой. */
  background-image:
    linear-gradient(to right, var(--emp-scroll-bg) 30%, rgb(0 0 0 / 0)),
    linear-gradient(to left, var(--emp-scroll-bg) 30%, rgb(0 0 0 / 0)),
    radial-gradient(farthest-side at 0 50%, rgb(245 176 62 / 0.26), rgb(245 176 62 / 0)),
    radial-gradient(farthest-side at 100% 50%, rgb(245 176 62 / 0.26), rgb(245 176 62 / 0));
  background-repeat: no-repeat;
  background-size: 2.75rem 100%, 2.75rem 100%, 0.75rem 100%, 0.75rem 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-attachment: local, local, scroll, scroll;
}

/* Непрозрачные эквиваленты прежних полупрозрачных подложек (замер композита:
   tint rgb(5 7 12 / .28) поверх ink-850 #070a11 ≈ #060910; tint rgb(5 7 12 /
   .32) поверх bg-deep #05070c ≈ #05070c). Визуально неотличимо, но теперь
   крышка scroll-shadow может закрыть тень. */
.roster__scroll {
  --emp-scroll-bg: #060910;
}

.cmp__scroll {
  --emp-scroll-bg: #060910;
}

.org__scroll {
  --emp-scroll-bg: #05070c;
}

/* (Подложки .roster/.cmp/.org сняты — перенесены на скролл-контейнеры,
   см. комментарий у .roster и --emp-scroll-bg.) */

.roster__table {
  inline-size: 100%;
  /* 72rem = 1152px — сумма РЕАЛЬНОЙ потребности колонок с запасом (замер
     01.11.2026: № 65 + Должность 249 + Отдел 149 + Код 70 + Грейд 403 +
     Принято 100 + Статус 226 = 1262px при 1280, но Грейд и Статус гибкие и
     сжимаются до ~1150px без разрыва слов). Ниже этой ширины таблица
     прокручивается внутри .roster__scroll — вместо того чтобы сжимать колонки
     и рвать слова («Марк/етинг», «0/1»), как это было при min-width 640px.
     На 1280px содержимое (1152–1199px) влезает без скролла с запасом. */
  min-inline-size: 72rem;
  border-collapse: collapse;
  font-size: var(--step--1);
}

/* Design-system.css задаёт overflow-wrap:anywhere для td/th — из-за него
   «01» рвалось на «0»/«1», а «Маркетинг» на «Марк/етинг». В кадровом
   документе такое недопустимо: здесь перенос только ПО ГРАНИЦЕ СЛОВА. */
.roster__table th,
.roster__table td {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.roster__table caption {
  padding: var(--sp-md) var(--sp-lg);
  border-block-end: var(--hairline);
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.roster__table th,
.roster__table td {
  padding: var(--sp-sm) var(--sp-md);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--emp-rule);
  min-inline-size: 0;
}

.roster__table thead th {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  background-color: rgb(243 246 251 / 0.028);
  white-space: nowrap;
}

.roster__table tbody tr {
  transition: background-color var(--dur-2) var(--ease-out);
}

.roster__table tbody tr:hover {
  background-color: rgb(245 176 62 / 0.045);
}

.roster__table tbody tr:last-child td {
  border-block-end: none;
}

/* Колонка «Должность» — главная, поэтому шире и светлее */
.roster__role {
  color: var(--text-strong);
  font-weight: 600;
  white-space: nowrap;
}

.roster__dept {
  color: var(--text);
  white-space: nowrap;
}

/* Колонка «№»: номер дела не переносится — «01» остаётся «01» */
.roster__table td.mono-num:first-child {
  white-space: nowrap;
}

.roster__code {
  color: var(--text-faint);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.roster__grade {
  white-space: nowrap;
  color: var(--text-muted);
}

/* Индикатор грейда: три деления, залиты по уровню автономии. Это ЦЕЛЕВАЯ
   конструкция, а не замер производительности — подпись об этом стоит рядом. */
.roster__bar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.5rem;
  vertical-align: middle;
}

.roster__bar i {
  inline-size: 0.85rem;
  block-size: 0.3rem;
  border-radius: 1px;
  background-color: rgb(243 246 251 / 0.14);
}

.roster__bar i[data-on='1'] {
  background-color: var(--warn);
}

.roster__zero {
  color: var(--warn);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Итоговая строка расписания — самая важная: принято 0 из 8 */
.roster__total td {
  border-block-start: 1px solid var(--emp-rule-strong);
  background-color: rgb(245 176 62 / 0.05);
  color: var(--text-strong);
  font-weight: 600;
}

.roster__hint,
.cmp__hint {
  display: block;
  padding: var(--sp-sm) var(--sp-lg);
  border-block-start: var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Подсказка о горизонтальной прокрутке. Исправлено 02.11.2026 после vision-QC:
   на 375px таблица артефактов скрывает 651px содержимого (2 колонки из 4),
   а подсказка была display:none до 640px — пользователь не узнавал, что справа
   есть продолжение.

   ЧЕСТНОСТЬ в обе стороны: подсказка показывается ТОЛЬКО когда таблица
   действительно прокручивается. Для этого скрипт страницы ставит
   data-scrollable="true" на контейнер (см. inline-скрипт внизу страницы),
   а CSS показывает текст только при этом атрибуте. На широком экране, где
   таблица влезает целиком, подсказки нет — иначе это была бы неправда.
   Без JS подсказка показывается всегда (консервативная деградация).

   Янтарная тень у края (scroll-shadow выше) дополняет подсказку: она появляется
   автоматически именно там, где есть что прокрутить, и гаснет в конце. */
.roster__hint,
.cmp__hint,
.art__hint {
  display: block;
  padding: var(--sp-sm) var(--sp-lg);
  border-block-start: var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.js .roster[data-scrollable='false'] .roster__hint,
.js .cmp[data-scrollable='false'] .cmp__hint,
.js .art[data-scrollable='false'] .art__hint {
  display: none;
}

/* Подсказка видна там, где таблица ДЕЙСТВИТЕЛЬНО прокручивается: на 640px+
   пользователь не ожидает горизонтального скролла и последняя колонка
   выглядит обрезанной (дефект, пойманный vision-QC 01.11.2026 на сравнении).
   Ниже 640px подсказку не показываем: на touch-экране свайп — ожидаемое
   поведение, а рамка таблицы и так занимает всю ширину. */

.roster__foot {
  padding: var(--sp-md) var(--sp-lg);
  border-block-start: var(--hairline);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. ЛИЧНЫЕ ДЕЛА — карточки сотрудников (tilt + spotlight)
   -------------------------------------------------------------------------- */
.pfiles {
  display: grid;
  gap: var(--sp-lg);
  margin-block-start: var(--sp-2xl);
  grid-template-columns: minmax(0, 1fr);
}

.pfile {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-sm);
  min-inline-size: 0;
  padding: var(--sp-lg);
  padding-inline-start: calc(var(--sp-lg) + 0.9rem);
  border: var(--hairline);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--emp-folder) 0%, rgb(243 246 251 / 0) 55%), var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}

.pfile:hover,
.pfile:focus-within {
  border-color: var(--ink-400);
  box-shadow: var(--sh-3);
}

/* Слой подсветки под курсором: --mx/--my ставит spotlight из animations.js.
   Без JS слой просто невидим — деградация честная. */
.pfile .spotlight-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: opacity var(--dur-4) var(--ease-out);
  background: radial-gradient(
    20rem 20rem at var(--mx, 50%) var(--my, 50%),
    rgb(245 176 62 / 0.11),
    rgb(245 176 62 / 0.035) 38%,
    transparent 68%
  );
}

.pfile:hover .spotlight-layer,
.pfile:focus-within .spotlight-layer {
  opacity: 1;
}

/* Блик при наклоне (tiltCard): управляется JS через opacity */
.pfile__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgb(243 246 251 / 0.12), transparent 55%);
  transition: opacity var(--dur-3) var(--ease-out);
}

/* Содержимое личного дела — поверх декоративных слоёв. Номер дела (.pfile__code)
   в выборку НЕ включаем: он position:absolute, и relative сломал бы его
   привязку к углу карточки. ::before (перфорация) тоже не потомок, поэтому
   z-index ему задан отдельно. */
.pfile > *:not(.spotlight-layer):not(.pfile__glare):not(.pfile__code) {
  position: relative;
  z-index: 1;
}

.pfile::before {
  z-index: 2;
}

.pfile__code {
  z-index: 3;
}

/* Перфорация картотеки слева: столбик «отверстий» папки. Полоса имеет
   фиксированную ширину и inset:0 по высоте → rect всегда внутри карточки. */
.pfile::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.9rem;
  border-inline-end: 1px solid var(--emp-rule);
  background-image: radial-gradient(circle at 50% 50%, rgb(5 7 12 / 0.9) 0 0.18rem, var(--emp-rule) 0.18rem 0.24rem, transparent 0.28rem);
  background-size: 100% var(--emp-perf);
  background-repeat: repeat-y;
  opacity: 0.75;
  pointer-events: none;
}

/* Номер дела в углу */
.pfile__code {
  position: absolute;
  inset-block-start: var(--sp-md);
  inset-inline-end: var(--sp-md);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
}

.pfile__head {
  display: grid;
  gap: var(--sp-2xs);
  padding-inline-end: 5.5rem;
}

.pfile__dept {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--data);
}

.pfile__role {
  font-family: var(--font-display);
  /* step-1 (~21px), а не step-2 (~26px): в трёхколоночной сетке колонка
     290–350px, и display-гротеск на 26px давал 5–6 строк заголовка по 1–2
     слова (замер 01.11.2026). На 21px — 2–3 строки, набор читается. */
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  /* Слово «AI-менеджер» длинное: без явного запрета anywhere оно рвалось бы
     посередине. break-word + hyphens даёт слоговой перенос с дефисом. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.pfile__duty {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text);
}

/* Блок «Навыки» — теги-компетенции */
.pfile__block {
  display: grid;
  gap: var(--sp-2xs);
  margin-block-start: var(--sp-xs);
}

.pfile__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.pfile__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pfile__skills li {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background-color: rgb(88 205 223 / 0.06);
  font-size: var(--step--2);
  line-height: var(--leading-snug);
  color: var(--text);
}

/* KPI: только НАЗВАНИЕ метрики. Числа не публикуем — замеров нет. */
.pfile__kpi {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}

.pfile__kpi li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-xs);
  align-items: baseline;
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--text);
}

.pfile__kpi li::before {
  content: '▸';
  color: var(--data);
  font-size: 0.8em;
}

.pfile__kpi b {
  color: var(--text-strong);
  font-weight: 600;
}

/* Граница: что сотрудник НЕ делает — обязательное поле честного дела */
.pfile__limits {
  margin: 0;
  padding: var(--sp-sm) var(--sp-md);
  border-inline-start: 2px solid var(--danger);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background-color: rgb(242 115 125 / 0.06);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text);
}

.pfile__limits b {
  color: var(--text-strong);
  font-weight: 600;
}

.pfile__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs) var(--sp-md);
  margin-block-start: var(--sp-md);
  padding-block-start: var(--sp-md);
  border-block-start: var(--hairline);
}

/* Гриф-штамп личного дела */
.pfile__stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border: 1px dashed var(--emp-stamp);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--warn);
  transform: rotate(-1.6deg);
}

.pfile__state {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   6. ОРГСТРУКТУРА — схема подчинения (SVG-чертёж)
   -------------------------------------------------------------------------- */
.org {
  margin-block-start: var(--sp-2xl);
  padding: var(--sp-lg);
  border: var(--hairline);
  border-radius: var(--r-md);
  /* Подложка перенесена на .org__scroll (см. --emp-scroll-bg) */
  overflow: hidden;
}

.org__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.org__svg {
  display: block;
  inline-size: 100%;
  min-inline-size: 34rem;
  block-size: auto;
}

.org__link-line {
  fill: none;
  stroke: var(--cyan-500);
  stroke-opacity: 0.5;
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
}

.org__link-line--main {
  stroke: var(--amber-500);
  stroke-opacity: 0.75;
  stroke-width: 1.6;
  stroke-dasharray: 6 7;
}

/* Центральный ствол AI CEO → оба ряда отделов. Отличается от шин рядом:
   чуть толще и светлее, чтобы читалось «это одна и та же линия подчинения»,
   а не связь между соседними отделами. */
.org__link-line--trunk {
  stroke: var(--cyan-500);
  stroke-opacity: 0.78;
  stroke-width: 1.6;
  stroke-dasharray: 3 5;
}

/* Стрелки-маркеры на линиях владелец↔CEO: показывают направление потока
   (задача вниз / отчёт вверх), чтобы две параллельные пунктирные линии не
   читались как дубликат. Цвет — маркером через currentColor нельзя (SVG
   marker не наследует stroke пути), поэтому задаём явно токеном. */
.org__arrowhead {
  fill: var(--amber-400);
}

.org__node {
  fill: var(--ink-750);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.org__node--owner {
  fill: rgb(245 176 62 / 0.12);
  stroke: var(--amber-500);
}

.org__node--ceo {
  fill: rgb(245 176 62 / 0.16);
  stroke: var(--amber-400);
  stroke-width: 1.4;
}

.org__node--dept {
  fill: rgb(88 205 223 / 0.08);
  stroke: var(--cyan-600);
}

.org__label {
  fill: var(--light-200);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
}

.org__label--small {
  fill: var(--light-400);
  font-size: 11px;
}

.org__label--code {
  fill: var(--light-450);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.org__caption {
  margin-block-start: var(--sp-md);
  padding-block-start: var(--sp-md);
  border-block-start: var(--hairline);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   6b. ЦИКЛ AI CEO — где в нём сотрудник (требование R2 реестра)
   -------------------------------------------------------------------------- */
.cycle {
  display: grid;
  gap: var(--sp-md);
  margin-block-start: var(--sp-2xl);
  grid-template-columns: minmax(0, 1fr);
}

.cycle__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2xs) var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border: var(--hairline);
  border-inline-start: 2px solid var(--data);
  border-radius: var(--r-sm);
  background-color: var(--bg-raised);
  min-inline-size: 0;
}

.cycle__no {
  grid-row: span 3;
  display: grid;
  place-items: center;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  align-self: start;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background-color: rgb(88 205 223 / 0.1);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--data);
}

.cycle__name {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.cycle__text {
  grid-column: 2;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text);
}

/* Строка «роль сотрудника» — служебная, моно, но читаемая (AA) */
.cycle__role {
  grid-column: 2;
  margin-block-start: var(--sp-2xs);
  padding-block-start: var(--sp-2xs);
  border-block-start: 1px solid var(--emp-rule);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

.cycle__subhead {
  margin-block-start: var(--sp-3xl);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

/* Таблица артефактов — тот же принцип, что roster/cmp: свой скролл-контейнер,
   непрозрачная подложка для scroll-shadow, перенос только по границе слова. */
.art {
  border: var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.art__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background-color: var(--emp-scroll-bg);
  background-image:
    linear-gradient(to right, var(--emp-scroll-bg) 30%, rgb(0 0 0 / 0)),
    linear-gradient(to left, var(--emp-scroll-bg) 30%, rgb(0 0 0 / 0)),
    radial-gradient(farthest-side at 0 50%, rgb(245 176 62 / 0.26), rgb(245 176 62 / 0)),
    radial-gradient(farthest-side at 100% 50%, rgb(245 176 62 / 0.26), rgb(245 176 62 / 0));
  background-repeat: no-repeat;
  background-size: 2.75rem 100%, 2.75rem 100%, 0.75rem 100%, 0.75rem 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-attachment: local, local, scroll, scroll;
}

.art__scroll {
  --emp-scroll-bg: #060910;
}

.art__table {
  inline-size: 100%;
  min-inline-size: 62rem;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.art__table th,
.art__table td {
  padding: var(--sp-sm) var(--sp-lg);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--emp-rule);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.art__table thead th {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  background-color: rgb(243 246 251 / 0.028);
  white-space: nowrap;
}

.art__table tbody th {
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

.art__table tbody td {
  color: var(--text);
  line-height: var(--leading-normal);
}

.art__table tbody tr:last-child th,
.art__table tbody tr:last-child td {
  border-block-end: none;
}

/* (Дубль .art__hint удалён 02.11.2026: он стоял ПОСЛЕ общего правила
   .roster__hint/.cmp__hint/.art__hint и с display:none перебивал его —
   подсказка у таблицы артефактов не показывалась на 375px, где скрыто
   651px содержимого. Единственное правило — в секции таблиц выше.) */

/* Точки взаимодействия — три карточки (память, эскалация, приёмка) */
.touchpoints {
  display: grid;
  gap: var(--sp-md);
  margin-block-start: var(--sp-2xl);
  grid-template-columns: minmax(0, 1fr);
}

.touchpoint {
  display: grid;
  gap: var(--sp-2xs);
  padding: var(--sp-md) var(--sp-lg);
  border: var(--hairline);
  border-radius: var(--r-sm);
  background-color: var(--bg-raised);
  min-inline-size: 0;
}

.touchpoint__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

.touchpoint__text {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text);
}

.touchpoint__state {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--warn);
}

.cycle__note {
  margin-block-start: var(--sp-2xl);
  padding: var(--sp-md) var(--sp-lg);
  border-inline-start: 2px solid var(--warn);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background-color: rgb(245 176 62 / 0.05);
  font-size: var(--step--1);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   7. ГРЕЙДЫ АВТОНОМИИ — L1/L2/L3 (связка с ai-ceo.html#autonomy)
   -------------------------------------------------------------------------- */
.grades {
  display: grid;
  gap: var(--sp-lg);
  margin-block-start: var(--sp-2xl);
  grid-template-columns: minmax(0, 1fr);
}

.grade {
  position: relative;
  display: grid;
  gap: var(--sp-sm);
  padding: var(--sp-lg);
  border: var(--hairline);
  border-radius: var(--r-md);
  background-color: var(--surface);
  min-inline-size: 0;
}

.grade__top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.grade__lvl {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
}

.grade__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

.grade__text {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text);
}

.grade__who {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.grade__who li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-xs);
}

.grade__who li::before {
  content: '—';
  color: var(--text-faint);
}

.grade__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs) var(--sp-md);
  padding-block-start: var(--sp-sm);
  border-block-start: var(--hairline);
}

/* --------------------------------------------------------------------------
   8. ВВОД В ШТАТ — шаги онбординга (нумерованные, без «волшебства»)
   -------------------------------------------------------------------------- */
.onboard {
  margin-block-start: var(--sp-2xl);
  display: grid;
  gap: 0;
  counter-reset: emp-step;
}

.onboard__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-md) var(--sp-lg);
  padding-block: var(--sp-lg);
  border-block-start: var(--hairline);
  min-inline-size: 0;
}

.onboard__step:first-child {
  border-block-start: none;
}

.onboard__num {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: rgb(5 7 12 / 0.4);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--accent);
  flex: none;
}

.onboard__body {
  display: grid;
  gap: var(--sp-2xs);
  min-inline-size: 0;
}

.onboard__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.onboard__text {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text);
}

.onboard__meta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   9. ГРАНИЦЫ — чем AI-сотрудник НЕ является (секция честности)
   -------------------------------------------------------------------------- */
.notlist {
  display: grid;
  gap: var(--sp-md);
  margin-block-start: var(--sp-2xl);
  grid-template-columns: minmax(0, 1fr);
}

.notlist__item {
  display: grid;
  gap: var(--sp-2xs);
  padding: var(--sp-md) var(--sp-lg);
  border: var(--hairline);
  border-inline-start: 2px solid var(--danger);
  border-radius: var(--r-sm);
  background-color: var(--bg-raised);
  min-inline-size: 0;
}

.notlist__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

.notlist__text {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   10. СРАВНЕНИЕ — четыре столбца (сотрудник / отдел / чат-бот / человек)
   -------------------------------------------------------------------------- */
.cmp {
  margin-block-start: var(--sp-2xl);
  border: var(--hairline);
  border-radius: var(--r-md);
  /* Подложка перенесена на .cmp__scroll (см. --emp-scroll-bg) */
  overflow: hidden;
}

.cmp__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.cmp__table {
  inline-size: 100%;
  /* 68rem = 1088px. ДЕФЕКТ, пойманный vision-QC 01.11.2026 и подтверждённый
     замером: при прежних 44rem (704px) на вьюпорте 1000px пять колонок
     сжимались до 136–230px и overflow-wrap:anywhere (design-system.css) рвал
     слова посередине без дефиса — «сотрудни/к», «Руководите/ль», а ячейки
     распадались на 4–5 обрывков. Теперь ниже 1088px таблица прокручивается
     внутри .cmp__scroll (свой скролл, страница не расширяется), а колонки
     сохраняют ширину, при которой замер на 1280px дал 0 ячеек длиннее 3 строк. */
  min-inline-size: 68rem;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.cmp__table th,
.cmp__table td {
  padding: var(--sp-sm) var(--sp-lg);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--emp-rule);
  /* Перенос только ПО ГРАНИЦЕ СЛОВА: в сравнительной таблице разрыв слова
     посередине ломает смысл («сотрудни/к»). overflow-wrap:anywhere из
     дизайн-системы здесь отменяем намеренно. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.cmp__table thead th {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  background-color: rgb(243 246 251 / 0.03);
  border-block-end: 1px solid var(--emp-rule-strong);
}

.cmp__table thead th:first-child {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.cmp__table tbody th {
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

.cmp__table tbody td {
  color: var(--text);
  line-height: var(--leading-normal);
}

.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td {
  border-block-end: none;
}

/* Столбец «AI-сотрудник VOIR» выделен — это предмет страницы */
.cmp__table td[data-col='voirement'],
.cmp__table th[data-col='voirement'] {
  background-color: rgb(245 176 62 / 0.05);
}

.cmp__foot {
  padding: var(--sp-md) var(--sp-lg);
  border-block-start: var(--hairline);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* Ширины колонок: фиксированная раскладка, чтобы браузер не «угадывал» их по
   содержимому (vision-QC: колонка VOIR AI выходила вдвое шире соседних, а
   «Чат-бот» сжималась до обрывков). Признак — узкая колонка-заголовок,
   четыре роли — равные.

   Первая колонка = 21%: замер 01.11.2026 показал, что самый длинный
   row-header «Что остаётся после работы» требует 225px (193px текста + 32px
   padding) при min-width таблицы 1088px → 20.7%. EN-максимум 189px (17.4%).
   При 14% (первая проба) row-header'ы переполнялись на 26–49px — гейт
   clippedText поймал это как дефект. 21% покрывает оба языка с запасом. */
.cmp__table {
  table-layout: fixed;
}

.cmp__table th:first-child {
  inline-size: 21%;
}

.cmp__table th:not(:first-child) {
  inline-size: 19.75%;
}

/* --------------------------------------------------------------------------
   11. FAQ — вопросы кадрам (своя реализация: about.css на странице
       не подключён, поэтому аккордеон описан здесь заново)
   -------------------------------------------------------------------------- */
.emp-qa {
  display: grid;
  gap: var(--sp-sm);
  margin-block-start: var(--sp-2xl);
}

.emp-qa__item {
  border: var(--hairline);
  border-radius: var(--r-sm);
  background-color: var(--bg-raised);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out);
}

.emp-qa__item[open] {
  border-color: var(--border-strong);
}

.emp-qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-block-size: var(--tap-min);
  padding: var(--sp-md) var(--sp-lg);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  transition: background-color var(--dur-2) var(--ease-out);
}

.emp-qa__q::-webkit-details-marker {
  display: none;
}

.emp-qa__q:hover {
  background-color: rgb(243 246 251 / 0.03);
}

.emp-qa__q:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* Плюс/минус — как отметка в графе документа */
.emp-qa__sign {
  position: relative;
  flex: none;
  inline-size: 0.85rem;
  block-size: 0.85rem;
}

.emp-qa__sign::before,
.emp-qa__sign::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background-color: var(--accent);
  transition: transform var(--dur-3) var(--ease-out-expo);
}

.emp-qa__sign::after {
  transform: rotate(90deg);
}

.emp-qa__item[open] .emp-qa__sign::after {
  transform: rotate(0deg);
}

.emp-qa__a {
  padding: 0 var(--sp-lg) var(--sp-lg);
  font-size: var(--step--1);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

.emp-qa__a a {
  color: var(--accent);
}

.emp-qa__a a:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   12. Перелинковка — «следующие дела в картотеке»
   -------------------------------------------------------------------------- */
.xlinks {
  display: grid;
  gap: var(--sp-md);
  margin-block-start: var(--sp-2xl);
  grid-template-columns: minmax(0, 1fr);
}

.xlink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-sm) var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--bg-raised);
  text-decoration: none;
  min-inline-size: 0;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out);
}

.xlink:hover {
  border-color: var(--ink-400);
  background-color: var(--surface);
  transform: translateX(3px);
}

.xlink:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.xlink__body {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.xlink__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--data);
}

.xlink__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

.xlink__hint {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.xlink__arrow {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--accent);
  flex: none;
}

.xlink__arrow svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
}

.xlink:hover .xlink__arrow {
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   13. Финальный блок — «что дальше» (без формы и без кнопок оплаты)
   -------------------------------------------------------------------------- */
.emp-final {
  position: relative;
  margin-block-start: var(--sp-2xl);
  padding: clamp(var(--sp-xl), 5vw, var(--sp-3xl));
  border: var(--hairline);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 120% at 12% 0%, rgb(245 176 62 / 0.09) 0%, transparent 60%),
    var(--bg-raised);
  overflow: hidden;
  display: grid;
  gap: var(--sp-md);
}

.emp-final__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.emp-final__text {
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--text);
  max-inline-size: 46rem;
}

.emp-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-block-start: var(--sp-xs);
}

.emp-final__note {
  margin-block-start: var(--sp-sm);
  padding-block-start: var(--sp-md);
  border-block-start: var(--hairline);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   14. Навигация и футер без JavaScript — свой блок (описание в about.css
       не переиспользуем, т.к. файл страницы другой)
   -------------------------------------------------------------------------- */
.noscript-bar {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--sp-md);
  border-block-end: var(--hairline);
  background-color: var(--ink-850);
}

.noscript-bar__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-md);
  margin: var(--sp-sm) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.noscript-bar__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  color: var(--text-muted);
  text-decoration: none;
  border-block-end: 1px solid transparent;
}

.noscript-bar__links a:hover {
  color: var(--accent);
  border-block-end-color: currentColor;
}

.noscript-bar__links a:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.noscript-note {
  margin-block-start: var(--sp-md);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   15. Адаптивность (mobile-first расширения)
   -------------------------------------------------------------------------- */

/* >= 640px: две колонки личных дел, две колонки «границ» */
@media (min-width: 40rem) {
  .pfiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xlinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster__hint,
  .cmp__hint,
  .art__hint {
    display: block;
  }

  .cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .touchpoints {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Явный скроллбар в прокручиваемых таблицах: на десктопе полоса видна
     всегда, поэтому пользователь понимает, что справа есть продолжение,
     а не что колонка обрезана. На touch-устройствах скроллбар остаётся
     системным (появляется при свайпе) — принудительно не показываем. */
  @media (hover: hover) and (pointer: fine) {
    .roster__scroll,
    .cmp__scroll,
    .org__scroll,
    .art__scroll {
      scrollbar-width: thin;
      scrollbar-color: var(--ink-400) transparent;
    }

    .roster__scroll::-webkit-scrollbar,
    .cmp__scroll::-webkit-scrollbar,
    .org__scroll::-webkit-scrollbar,
    .art__scroll::-webkit-scrollbar {
      block-size: 6px;
      height: 6px;
    }

    .roster__scroll::-webkit-scrollbar-thumb,
    .cmp__scroll::-webkit-scrollbar-thumb,
    .org__scroll::-webkit-scrollbar-thumb,
    .art__scroll::-webkit-scrollbar-thumb {
      background-color: var(--ink-400);
      border-radius: var(--r-pill);
    }

    .roster__scroll::-webkit-scrollbar-track,
    .cmp__scroll::-webkit-scrollbar-track,
    .org__scroll::-webkit-scrollbar-track,
    .art__scroll::-webkit-scrollbar-track {
      background-color: rgb(243 246 251 / 0.04);
    }
  }
}

/* >= 1200px: пять стадий цикла в одну шеренгу — читается как последовательность,
   а не как список карточек. Ниже 1200px остаются 2 колонки (см. 40rem). */
@media (min-width: 75rem) {
  .cycle {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-sm);
  }

  .cycle__stage {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-md);
  }

  .cycle__no {
    grid-row: auto;
    margin-block-end: var(--sp-sm);
  }

  .cycle__name,
  .cycle__text,
  .cycle__role {
    grid-column: 1;
  }
}

/* Субсетка (subgrid) для личных дел — лечит «лесенку», которую поймал
   vision-QC 01.11.2026: в ряду карточки равны по высоте и футер выровнен,
   но внутренние блоки (Навыки / KPI / Границы) начинались на разной высоте
   (разброс до 50px) из-за разного числа чипов навыков. Каждая карточка
   занимает 5 строк родительской сетки и наследует их через subgrid, поэтому
   одноимённые блоки попадают в ОДНУ строку-трек и выравниваются по верху.
   Замер A/B: средний разброс блоков 17.8px → 0.8px, максимальный 53px → 9px
   (остаток — только в KPI-списке, где длина пунктов различается; заголовок,
   блок навыков, границы и футер выравниваются в 0px).
   @supports — честная деградация: без subgrid карточки остаются равными по
   высоте (align-items:stretch), просто блоки внутри не выравнены построчно. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 40rem) {
    .pfiles {
      grid-auto-rows: auto;
    }

    .pfile {
      grid-row: span 5;
      grid-template-rows: subgrid;
    }

    /* Грейд-карточки выравниваются тем же приёмом: заголовок L1/L3 в две
       строки, L2 в одну → тела текста начинались на разной высоте (разброс
       21–34px, замер 01.11.2026, дефект пойман vision-QC).
       span 4 — ровно столько дочерних элементов В ПОТОКЕ у .grade:
       .grade__top, .grade__text, .grade__who, .grade__foot. (У .pfile их 5,
       потому что glare/code/spotlight-layer — position:absolute и в раскладке
       не участвуют.) */
    .grades {
      grid-auto-rows: auto;
    }

    .grade {
      grid-row: span 4;
      grid-template-rows: subgrid;
    }
  }
}

/* >= 900px: hero в две колонки (титул + карточка дела), две колонки дел.
   Три колонки личных дел здесь НАМЕРЕННО ещё не включаются — см. 75rem ниже.
   Замер 01.11.2026: при трёх колонках на 900–1100px карточка сужается до
   259–322px и заголовок роли («AI-менеджер по продажам») занимает 5–6 строк
   по 1–2 слова — строка набора слишком узкая, карточки читаются рваными.
   Две колонки на этом диапазоне дают 340–430px и 2–3 строки заголовка. */
@media (min-width: 56.25rem) {
  .emp-hero__inner {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .emp-hero__file {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sp-lg));
  }

  .grades {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .notlist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xlinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .onboard__step {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-md) var(--sp-xl);
  }
}

/* >= 1200px: три колонки личных дел и перелинковки. Замер: карточка 354px,
   заголовок роли ≤2 строки, основной текст 45–60 символов в строке. */
@media (min-width: 75rem) {
  .pfiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-xl);
  }

  .xlinks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   16. PREFERS-REDUCED-MOTION
   --------------------------------------------------------------------------
   Всё анимированное имеет статичное состояние. Контент при этом полностью
   видим: .reveal раскрывает design-system.css, линия схемы рисуется сразу. */
@media (prefers-reduced-motion: reduce) {
  .org__link-line,
  .org__link-line--main {
    animation: none;
    stroke-dashoffset: 0;
  }

  .pfile,
  .pfile:hover,
  .pfile:focus-within {
    transition: none;
    transform: none;
  }

  .xlink,
  .xlink:hover {
    transition: none;
    transform: none;
  }

  .emp-qa__sign::before,
  .emp-qa__sign::after {
    transition: none;
  }

  .roster__table tbody tr {
    transition: none;
  }

  .filestamp,
  .pfile__stamp {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   17. Печать
   -------------------------------------------------------------------------- */
@media print {
  .emp-hero__grid,
  .emp-hero__punch {
    display: none !important;
  }

  .emp-hero__file,
  .pfile,
  .grade,
  .cycle__stage,
  .touchpoint,
  .emp-qa__item,
  .xlink {
    break-inside: avoid;
  }

  .emp-qa__item .emp-qa__a {
    display: block;
  }

  .roster__scroll,
  .org__scroll,
  .cmp__scroll,
  .art__scroll {
    overflow: visible;
  }

  .roster__table,
  .cmp__table,
  .art__table {
    min-inline-size: 0;
  }
}