/* ===========================================================================
   EVA · пульт — экран «Доступ» (реф 10: Staff and roles · Analytics Team ·
   Add team members), 12.09.2026.

   Отдельный файл, а не строки в app.css, по той же причине, что у
   `orders.css` и `inbox.css`: app.css лежит в CRLF, правка из LF-инструмента
   даёт дифф на весь файл вместо одной строки, а экраны сейчас делаются
   параллельно.

   Цвет здесь литералом пишется ровно в одном месте — в блоке токенов
   аватаров. Восемь цветов объявлены ТРИЖДЫ, по набору на тему: «плотный под
   белые инициалы» и «светлый под тёмные» — разные наборы, а не один с
   прозрачностью. Всё остальное — токены `app.css`.
   ======================================================================== */

/* ------------------------------------------------------- ТОКЕНЫ АВАТАРОВ
   🔴 Восемь, а не «сколько угодно»: цвет выбирается хэшем логина, и набор
   обязан быть закрытым — иначе девятый человек получит цвет, который никто
   не проверял на контраст. Кольцо роли: золото владельцу, бирюза менеджеру —
   те же два цвета, которыми на карте знаний размечены «главное» и «связь». */
:root {
  --av-1: #ffa0bd;
  --av-2: #c3aaff;
  --av-3: #9db9ff;
  --av-4: #f0c98a;
  --av-5: #f0a8d8;
  --av-6: #7fd6ae;
  --av-7: #8fc9e8;
  --av-8: #ff9e8f;
  --av-ink: #160a12;
  --ring-owner: #dcc38e;
  --ring-manager: #5fe0c0;
  /* Блик на шаре узла: свет падает сверху слева — тот же приём, что у
     `.gcard::before` на градиентных карточках. Литерал здесь по той же
     причине, что и цвета аватаров: он лежит НА цвете аватара, а не на фоне
     панели, и токеном темы его не выразить. */
  --cn-sheen: rgba(255, 255, 255, 0.34);
}

[data-theme="light"] {
  --av-1: #8e2b47;
  --av-2: #5b3f9e;
  --av-3: #2f4bb5;
  --av-4: #8a5a1c;
  --av-5: #7a3468;
  --av-6: #16694f;
  --av-7: #2a5e86;
  --av-8: #a3402f;
  --av-ink: #ffffff;
  --ring-owner: #97701f;
  --ring-manager: #1f8f84;
  --cn-sheen: rgba(255, 255, 255, 0.42);
}

[data-theme="neutral"] {
  --av-1: #8a3450;
  --av-2: #584099;
  --av-3: #2f4bb5;
  --av-4: #7d5320;
  --av-5: #6f3560;
  --av-6: #15654c;
  --av-7: #2a5a7e;
  --av-8: #9a3c2e;
  --av-ink: #ffffff;
  --ring-owner: #7d5a11;
  --ring-manager: #1c7350;
  /* «Спокойная» — без свечений: блик здесь тише, чем в двух других темах. */
  --cn-sheen: rgba(255, 255, 255, 0.26);
}

.av-1 { --av: var(--av-1); }
.av-2 { --av: var(--av-2); }
.av-3 { --av: var(--av-3); }
.av-4 { --av: var(--av-4); }
.av-5 { --av: var(--av-5); }
.av-6 { --av: var(--av-6); }
.av-7 { --av: var(--av-7); }
.av-8 { --av: var(--av-8); }

/* ------------------------------------------------- аватар-инициалы (HTML)
   Вместо фото из референса: фотографий у пульта нет и не будет. Цвет
   детерминирован логином, кольцо — ролью, отключённый приглушён и без
   кольца: «не работает у нас» читается издалека, без чтения пилюли. */
.ac-av {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--sz, 30px);
  height: var(--sz, 30px);
  border-radius: 50%;
  background: var(--av, var(--av-1));
  color: var(--av-ink);
  font-size: calc(var(--sz, 30px) * 0.38);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px var(--ink-780), 0 0 0 3.5px var(--ring-manager);
}

.ac-av.is-owner {
  box-shadow: 0 0 0 2px var(--ink-780), 0 0 0 3.5px var(--ring-owner);
}

.ac-av.is-off {
  opacity: 0.42;
  box-shadow: 0 0 0 2px var(--ink-780), 0 0 0 3.5px var(--line-3);
}

/* =========================================================== ХЕРО «КОМАНДА»
   Левая половина — созвездие (реф 10б), правая — доля действий по людям и
   четыре двери с экрана. Большая цифра и факты живут в СОСЕДНЕЙ брендовой
   карточке `.ac-num` (полировка 12.09): на стекле экран читался как таблица с
   заголовком, а не как сводка. */
#tab-access .ac-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: var(--s4);
  align-items: stretch;
  margin-bottom: var(--s4);
}

/* Левая колонка херо растёт вместе с контейнером до 24rem и там
   останавливается: созвездие из двух-пяти человек, раздутое до половины
   ультравайда, читается не «командой», а пятном. Раньше здесь стояло жёсткое
   20rem, и вся прибавка ширины уходила в правую колонку. */
#tab-access .ac-hero {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
  gap: var(--s5);
  isolation: isolate;
}

/* --------------------------- брендовая карточка «Команда» (полировка 12.09) */
#tab-access .ac-num {
  isolation: isolate;
}

#tab-access .ac-num .dotnum {
  margin-top: var(--s4);
}

/* Волна действий по суткам. Спарклайн общий с «Обзором» (`.ovspark` в
   app.css) — здесь только высота: на карточке в 21rem он обязан читаться
   рядом с цифрой, а не проходить под ней ниткой. */
#tab-access .ac-wave {
  margin-top: var(--s4);
}

#tab-access .ac-wave .ovspark {
  height: 3.4rem;
}

#tab-access .ac-wave-none {
  color: var(--on-grad-2);
  font-size: var(--t-xs);
  line-height: 1.45;
}

#tab-access .ac-num .axis-x {
  padding-right: 0;
}

/* -------------------------------------------------- три малые плитки (10б) */
#tab-access .ac-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}

#tab-access .ac-trio .gcard {
  min-height: 10.5rem;
  isolation: isolate;
}

#tab-access .ac-trio .dotnum {
  margin-top: auto;
  margin-bottom: var(--s2);
}

#tab-access .ac-trio .ovspark {
  margin-top: auto;
}

/* 🔴 У матрицы точек и у декоративной сетки обе `margin-top: auto` — свободная
   высота делилась между ними пополам, и цифра прилипала к подписи сверху
   вместо того, чтобы стоять над своей строкой. Сетке хватает обычного
   отступа: тянуть карточку — работа цифры. */
#tab-access .ac-trio .dotgrid {
  margin-top: var(--s3);
}

#tab-access .ac-trio .g-sub {
  margin-top: var(--s2);
}

/* «Последний вход» цифрой не набирается: это логин и время. Логин набран
   дисплейным шрифтом, как имя команды на соседней панели. */
.ac-last {
  margin-top: auto;
  min-width: 0;
}

.ac-last b {
  display: block;
  overflow: hidden;
  font-family: var(--f-disp);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--on-grad);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac-last span {
  display: block;
  margin-top: 0.15rem;
  color: var(--on-grad-2);
  font-size: var(--t-xs);
}

/* Созвездие встаёт по центру свободной высоты: панель тянется по соседней
   брендовой карточке, и при `align-content: start` под именем команды
   открывалась пустая полоса в треть панели. */
#tab-access .ac-team {
  display: grid;
  align-content: center;
  justify-items: center;
}

#tab-access .cn {
  width: 100%;
  max-width: 23rem;
  height: auto;
}

.cn-link {
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.cn-glow {
  fill: var(--av);
  opacity: 0.16;
}

/* «Спокойная» — светлая без зарева: свечений под аватарами в ней нет. */
[data-theme="neutral"] .cn-glow {
  display: none;
}

.cn-body { fill: var(--av); }

/* Блик шара: узел перестаёт быть плоским кружком и читается объёмом — тем же
   светом сверху слева, что лепит градиентные карточки «Обзора». */
.cn-sheen {
  fill: var(--cn-sheen);
  pointer-events: none;
}

.cn-node.is-off .cn-sheen { opacity: 0.35; }
.cn-ring { fill: none; stroke-width: 2; }
.rg-owner { stroke: var(--ring-owner); }
.rg-manager { stroke: var(--ring-manager); }

.cn-ini {
  fill: var(--av-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cn-live {
  fill: var(--ok);
  stroke: var(--ink-780);
  stroke-width: 2;
}

.cn-node.is-off { opacity: 0.4; }
.cn-node.is-off .cn-ring { stroke: var(--line-3); }

#tab-access .ac-team-h {
  margin-top: var(--s1);
  text-align: center;
}

#tab-access .ac-team-h h3 {
  font-family: var(--f-disp);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--milk);
}

#tab-access .ac-team-h p {
  margin-top: 0.2rem;
  color: var(--mute);
  font-size: var(--t-xs);
}

/* --------------------------------------- правая половина: показатели */
/* Шкала долей сверху, двери — внизу панели: между ними тянется свободная
   высота, а не собирается пустота под последней строкой. */
#tab-access .ac-score {
  display: grid;
  align-content: space-between;
  gap: var(--s4);
  /* Потолок ширины с ультравайда (полировка раскладки 12.09): панель
     показателей не растягивается на всю прибавку контейнера. */
  width: 100%;
  max-width: 54rem;
}

/* Подпись под большой цифрой. Карточка градиентная — цвета берутся из
   `--on-grad*`, как на всех градиентных карточках пульта. */
#tab-access .ac-big-cap {
  display: block;
  margin-top: var(--s2);
  color: var(--on-grad-2);
  font-size: var(--t-xs);
  line-height: 1.45;
}

#tab-access .ac-big-cap b {
  display: block;
  color: var(--on-grad);
  font-size: var(--t-sm);
  font-weight: 600;
}

/* Четыре факта — строками легенды, а не пилюлями в ряд: на карточке в 21rem
   пилюли переносились в три строки разной длины и читались как облако тегов.
   Разметка та же, что у легенды «Обзора дня»: подпись слева, значение справа,
   волосок-разделитель между строками. */
#tab-access .ac-facts {
  margin-top: var(--s4);
}

.ac-fact {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 1.7rem;
  border-top: 1px solid var(--grad-line);
  color: var(--on-grad-2);
  font-size: var(--t-xs);
}

.ac-fact:first-child {
  border-top: 0;
}

.ac-fact b {
  margin-left: auto;
  color: var(--on-grad);
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* «Не знаем» и «ноль» — разные ответы: сессии не считаются, когда админка
   поднята без базы EVA, и рисовать в этом случае «на смене 0» значит соврать
   ровно там, где никто не проверит. */
.ac-fact.is-empty b {
  font-weight: 500;
  font-size: var(--t-xs);
}

/* 🔴 `min-width: 0` — не украшение (ревизия 13.09, дефект 5). Обёртка лежит
   элементом грида `.ac-score`, а дорожка грида меряется по min-content
   содержимого: одно длинное имя в легенде раздувало её до 833 px, и весь
   документ на 390 уезжал вбок (`scrollWidth` 814 при окне 390), а
   `body { overflow-x: hidden }` прятал это без полосы прокрутки. Ноль
   разрешает дорожке сжаться; обрезкой занимается сам чип легенды. */
#tab-access .ac-gauge-wrap {
  display: grid;
  gap: var(--s2);
  min-width: 0;
}

#tab-access .ac-gauge-wrap .eyebrow {
  color: var(--mute);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Полоса «доля действий по людям» растёт вместе с колонкой: жёсткие 26rem
   оставляли правую половину героя на ультравайде пустой, а сама полоса при
   этом делила три доли на 416 px. Потолок в 52rem — чтобы на 3440 она не
   превратилась в волосок во всю панель. */
.gg {
  width: 100%;
  max-width: 52rem;
  height: auto;
}

.gg-bar { fill: var(--av, var(--line-3)); }
.gg-bar.is-empty { fill: var(--line-2); }

#tab-access .ac-gauge-leg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  min-width: 0;
}

.ac-gleg {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  /* Чип не шире строки легенды и умеет сжиматься: без `min-width: 0` элемент
     флекса не уменьшается ниже своего min-content, и один длинный логин
     распирает всю панель (дефект 5). */
  min-width: 0;
  max-width: 100%;
  color: var(--silver);
  font-size: var(--t-xs);
}

/* Имя человека в чипе. Обрезается многоточием, а не переносится по буквам:
   `tg:@manager`, рассыпанный столбиком, читается хуже обрезанного — тем же
   разбирался дефект 3 в таблице людей. Полное имя висит в `title` и целиком
   стоит в таблице ниже. Потолок в 12rem — чтобы один человек с длинным
   логином не съел строку под остальных семерых. */
.ac-gleg-who {
  min-width: 0;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac-gleg i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--av);
}

.ac-gleg b {
  /* Число и процент не жмутся и не рвутся: сжимается имя, а не доля — ради
     неё легенду и читают. */
  flex: none;
  color: var(--mute);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Четыре квадратные ссылки — вместо тулбара из четырёх круглых иконок (10б). */
#tab-access .ac-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.ac-sq {
  display: grid;
  place-items: center;
  gap: var(--s1);
  width: 4.9rem;
  height: 3.9rem;
  border-radius: var(--r-md);
  background: var(--glass-3);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-btn);
  color: var(--silver);
  font-size: var(--t-micro);
  font-weight: 600;
  text-decoration: none;
}

.ac-sq:hover {
  border-color: var(--line-3);
  color: var(--milk);
}

/* ------------------------------------------------ строка над таблицей */
#tab-access .ac-toolrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s5) 0 var(--s3);
}

.ac-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 15rem;
  height: 2.25rem;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  background: var(--glass-3);
  border: 1px solid var(--line-2);
  color: var(--mute);
}

.ac-search svg { flex: none; }

.ac-search input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--milk);
  font-size: var(--t-sm);
}

.ac-search input:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

.ac-search:focus-within {
  border-color: var(--accent-line);
  box-shadow: var(--sh-focus);
}

/* Пилюля «активных N из M» и подпись про клиентский поиск. */
.ac-tool-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.25rem var(--s3);
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--line);
  color: var(--silver);
  font-size: var(--t-xs);
}

.ac-tool-chip i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.ac-tool-chip.is-mute { color: var(--mute); }
.ac-tool-chip.is-mute i { background: var(--line-3); }

/* ==================================================== ТАБЛИЦА ЛЮДЕЙ (10а) */
#tab-access .ac-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: var(--s4);
  align-items: start;
}

/* 🔴 `min-width: 0` у детей сетки — не косметика. Элемент грид-сетки по
   умолчанию не уже своего min-content, а внутри лежит таблица людей с
   `min-width: 39rem`: на экране 390 px колонка растягивалась до 669 px, и
   вбок уезжал ВЕСЬ документ (`documentElement.scrollWidth` = 669). Прятал это
   `body { overflow-x: hidden }` — то есть правая треть таблицы вместе с
   колонкой действий просто пропадала за краем, без полосы прокрутки.
   Прокручиваться должна `.ac-table-wrap`, а не страница. */
#tab-access .ac-body > * {
  min-width: 0;
}

/* 🔴 Пока шторка закрыта, второй колонки нет вовсе. Иначе таблица всё время
   сжата до двух третей экрана ради пустоты справа — а закрыта шторка почти
   всегда: карточку человека открывают раз в месяц. */
#tab-access .ac-body:has(> .ac-drawer[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

/* 🔴 `position: relative` здесь — не декорация, а вторая половина починки 390.
   В шапке таблицы стоит `<span class="sr-only">Действия</span>`, а `.sr-only` —
   это `position: absolute`. Без позиционированной обёртки его блоком-контейнером
   становится `.glass` (она `relative`), то есть элемент оказывается ВНЕ цепочки
   прокрутки и обрезкой `overflow-x` не задевается вовсе: подпись уезжала на
   x≈726 (ширина таблицы), и вместе с ней вбок уезжал весь документ. Сделав
   обёртку блоком-контейнером, мы возвращаем подпись под её же обрезку. */
#tab-access .ac-table-wrap {
  position: relative;
  overflow-x: auto;
}

table.ac-table {
  width: 100%;
  min-width: 39rem;
  border-collapse: collapse;
}

.ac-table th {
  padding: 0 var(--s3) 0.55rem;
  border-bottom: 1px solid var(--line);
  color: var(--mute);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  /* 🔴 Перебивает общее `.tab th { overflow-wrap: anywhere }` из `layout.css`
     (селектор `.tab` — это КАЖДЫЙ экран пульта, а не таблица с таким классом).
     С «anywhere» мера колонки по шапке падает до одной буквы, и «ПОСЛЕДНИЙ
     ВХОД» при `nowrap` вылезал за свою колонку и обрезался соседней
     (ревизия 13.09, дефект 3). */
  overflow-wrap: normal;
}

.ac-table td {
  padding: 0.7rem var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: var(--t-sm);
}

.ac-table tr:last-child td { border-bottom: 0; }
.ac-table tr.is-off td { opacity: 0.62; }
.ac-table tbody tr.is-open td { background: var(--glass); }

.ac-who {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

/* 🔴 Гнездо логина и подписи под ним. `min-width: 0` — вся его суть (ревизия
   13.09, вторая волна дефекта 5): логин стоит `nowrap`, а элемент флекса по
   умолчанию не сжимается ниже своего min-content. На 360 карточка человека с
   самым длинным допустимым логином (31 символ — потолок `LOGIN_RULES`)
   вылезала за `.ac-table-wrap` на 1–11 px, и обёртка возвращала
   горизонтальную прокрутку, которой на карточках быть не должно. Вылет плавал
   по ширине букв конкретного логина — потому смоук ловил его через раз. */
.ac-whobox {
  min-width: 0;
}

/* 🔴 Логин НИКОГДА не переносится по буквам. Общее правило `layout.css`
   (`.tab td { overflow-wrap: anywhere }`) заведено ради городов с отделением и
   деталей журнала, но `.tab` — это класс каждого экрана, и под него попала
   таблица людей: на 390 «manager» стоял столбиком «man/age/r», «owner» —
   «own/er» (ревизия 13.09, дефект 3). Логин — это имя, а имя, разорванное по
   слогам, перестаёт узнаваться.
   Не помещается — обрезается многоточием, а полное имя висит в `title`:
   `inline-block`, чтобы чип «вы» остался на той же строке. */
.ac-who b {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--milk);
  font-size: var(--t-base);
  font-weight: 600;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.ac-who small {
  display: block;
  color: var(--mute);
  font-size: var(--t-micro);
  font-weight: 500;
}

.ac-me {
  display: inline-block;
  margin-left: var(--s2);
  padding: 0.05rem 0.35rem;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* Чип роли с иконкой: ключ владельцу, наушники менеджеру (деталь 6). */
.ac-role {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.15rem 0.55rem 0.15rem 0.25rem;
  border: 1px solid;
  border-radius: var(--r-chip);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Иконка роли в квадратике — тот же компонент, что в чипах «Обзора».
   Квадратик берёт цвет чипа (`currentColor`), а не свой: у роли он и есть
   носитель смысла, и второй цвет внутри чипа спорил бы с первым. */
.ac-role .ibox {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--r-sm);
  background: var(--glass-3);
  border: 1px solid currentColor;
}

.ac-role--owner {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: var(--warn-line);
}

.ac-role--manager {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok-line);
}

.ac-when {
  color: var(--silver);
  font-variant-numeric: tabular-nums;
  /* Даты не рвутся по цифрам — то же общее `anywhere` из `layout.css`, что
     ломало логины, делало из «13.09 11:05» две строки «13» и «.09 11:05». */
  overflow-wrap: normal;
}

.ac-when small {
  display: block;
  color: var(--mute);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.ac-when.is-never { color: var(--mute); }

/* Пилюля состояния: уплотнённые зелёный и красный — пастель референса даёт
   3,5:1 и на контроль не проходит. */
.ac-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.15rem 0.6rem;
  border: 1px solid;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}

.ac-pill--on {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok-line);
}

.ac-pill--off {
  color: var(--bad);
  background: var(--bad-soft);
  border-color: var(--bad-line);
}

.ac-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: var(--s2);
  color: var(--ok);
  font-size: var(--t-micro);
  font-weight: 600;
  white-space: nowrap;
}

.ac-live i {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.ac-acts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s1);
}

button.ac-act {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border-radius: var(--r-sm);
  background: var(--glass-3);
  border: 1px solid var(--line-2);
  box-shadow: none;
  color: var(--mute);
}

button.ac-act:hover:not(:disabled) {
  background: var(--glass-3);
  border-color: var(--line-3);
  color: var(--milk);
}

button.ac-act:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button.ac-act.is-lock {
  background: var(--bad-soft);
  border-color: var(--bad-line);
  color: var(--bad);
}

button.ac-act.is-lock:hover:not(:disabled) {
  background: var(--bad-soft);
  border-color: var(--bad);
  color: var(--bad);
}

/* ============================================ ШТОРКА «ПОСМОТРЕТЬ» (10а) */
#tab-access .ac-drawer {
  position: relative;
  isolation: isolate;
}

/* Затемнение под шторкой — только на телефоне (блок 54rem ниже). */
#tab-access .ac-scrim {
  display: none;
}

#tab-access .ac-drawer-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

#tab-access .ac-drawer-head b {
  color: var(--milk);
  font-size: var(--t-base);
  font-weight: 600;
}

#tab-access .ac-drawer-head small {
  display: block;
  color: var(--mute);
  font-size: var(--t-micro);
}

#tab-access .ac-drawer-x {
  margin-left: auto;
  color: var(--mute);
}

.ac-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem var(--s4);
  margin-bottom: var(--s3);
}

.ac-kv dt {
  color: var(--mute);
  font-size: var(--t-xs);
}

.ac-kv dd {
  margin: 0;
  color: var(--milk);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ac-kv dd.is-empty { color: var(--mute); }

.ac-drawer-cap {
  margin: var(--s4) 0 var(--s2);
  color: var(--mute);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ac-mini {
  display: grid;
  gap: var(--s2);
}

.ac-mini-row {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--t-xs);
}

.ac-mini-row .t {
  flex: none;
  width: 4.2rem;
  color: var(--mute);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.ac-mini-row .n { color: var(--silver); }

/* Тон действия — из словаря `ACTION_TONE` «Журнала» (`window.evaActionTone`).
   Жёлтое — «кто-то получил или унёс доступ к данным», красное — «сброс пароля
   со скрипта» и «ответ до покупателя не дошёл». */
.ac-mini-row .n.is-warn { color: var(--warn); }
.ac-mini-row .n.is-bad { color: var(--bad); }

/* Пустое состояние: рамка пунктиром и объяснение словами, а не ноль. */
.ac-empty {
  display: block;
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--line-3);
  border-radius: var(--r-md);
  background: var(--glass);
  color: var(--mute);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.ac-empty b { color: var(--silver); }

/* =============================================== МОДАЛКА «ЗАВЕСТИ» (10в) */
.ac-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
  overflow-y: auto;
  background: var(--backdrop);
  backdrop-filter: blur(4px);
}

/* Рамка как на входе: плотная светлая кромка и розовая нить по верху. */
.ac-modal-card {
  position: relative;
  width: 100%;
  max-width: 27rem;
  padding: var(--s6) var(--s5) var(--s5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--glass-3), var(--glass-2));
  box-shadow: var(--sh-3), inset 0 1px 0 var(--hairline-hi);
  backdrop-filter: blur(14px);
}

.ac-modal-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 16px 0 var(--accent-glow);
}

button.ac-modal-x {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--seg-bg);
  box-shadow: none;
  color: var(--mute);
}

button.ac-modal-x:hover:not(:disabled) {
  background: var(--seg-bg);
  color: var(--milk);
}

.ac-modal-card h3 {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
}

.ac-modal-lede {
  margin: var(--s1) 0 var(--s5);
  color: var(--mute);
  font-size: var(--t-xs);
  text-align: center;
}

.ac-modal-card .field + .field { margin-top: var(--s4); }

.ac-modal-card label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
  color: var(--silver);
  font-size: var(--t-sm);
}

.ac-modal-card label i {
  color: var(--mute);
  font-size: var(--t-micro);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* Поле пароля: «показать» лежит внутри рамки, как на экране входа. */
.ac-pw {
  position: relative;
  display: flex;
  align-items: center;
}

.ac-pw input { padding-right: 2.4rem; }

button.ac-pw-eye {
  position: absolute;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mute);
}

button.ac-pw-eye:hover:not(:disabled) {
  background: transparent;
  color: var(--milk);
}

button.ac-gen {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 1.75rem;
  min-height: 0;
  padding: 0 var(--s3);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: none;
  color: var(--accent-2);
  font-size: var(--t-xs);
  font-weight: 600;
}

button.ac-gen:hover:not(:disabled) {
  background: var(--accent-soft-2);
  border-color: var(--accent-line);
  color: var(--accent-2);
}

.ac-genrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}

.ac-genrow .note { margin: 0; }

/* Свой шеврон у выпадающего списка роли: он поворачивается при открытии. */
.ac-select {
  position: relative;
  display: block;
}

/* Штатный треугольник селекта гасится: их было бы два. Свой шеврон нужен
   ради поворота при открытии списка — треугольник из двух градиентов
   повернуть нечем. */
.ac-select select {
  width: 100%;
  background-image: none;
}

.ac-select .chev {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  margin-top: -0.4rem;
  color: var(--mute);
  pointer-events: none;
}

.ac-modal-card button.ac-submit {
  width: 100%;
  margin-top: var(--s5);
}

/* 🔴 `--mute`, а не `--faint`: на стекле модалки в «Ночи» тусклый серый даёт
   4,42:1 — ниже порога. Это не «мелкая сноска», а единственное место, где
   сказано, что пароль повторно не покажут. */
.ac-modal-note {
  margin-top: var(--s3);
  color: var(--mute);
  font-size: var(--t-micro);
  line-height: 1.5;
}

/* Ошибка сервера — словами и у поля, а не тостом в углу: её читает человек,
   у которого только что не получилось. */
.ac-err {
  display: block;
  margin-top: var(--s2);
  color: var(--bad);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.45;
}

.field.is-bad input,
.field.is-bad select {
  border-color: var(--bad);
}

/* --------------------------------------------------------- телефон */
@media (max-width: 1180px) {
  #tab-access .ac-body { grid-template-columns: minmax(0, 1fr); }

  /* Брендовая карточка уходит под созвездие: в 21rem рядом с гейджем на
     1180 она сжимала полосатую шкалу до нечитаемых штрихов. */
  #tab-access .ac-top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  #tab-access .ac-hero { grid-template-columns: minmax(0, 1fr); }

  /* Три цифры по сорок пикселей в ряд — это узор, а не числа. */
  #tab-access .ac-trio { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  #tab-access .ac-toolrow .ac-tool-chip {
    height: auto;
    padding: 0.25rem var(--s3);
    line-height: 1.35;
    white-space: normal;
  }

  .ac-sq { width: 4.3rem; }
}

/* ================================ УЗКИЙ ЭКРАН: ТАБЛИЦА → КАРТОЧКИ (деф. 3)

   До 13.09 таблица на телефоне просто уезжала в горизонтальную прокрутку
   внутри `.ac-table-wrap`: шесть колонок на 678 px при 324 px полезной ширины.
   Прокрутка сама по себе честная, но читать по ней нечего — колонка действий
   всегда за краем, а ужатые колонки роняли логины по буквам.

   Порог — 54rem (864 px): это ширина, ниже которой шесть колонок перестают
   помещаться без сжатия. Ниже неё таблицы нет вовсе: строка становится
   карточкой человека, где логин стоит одной строкой, справа сверху — пилюля
   доступа, справа снизу — те же три кнопки. Подписи колонок едут с ячейками
   (`data-label` ставит `access.js`, и берёт он их из этой же шапки). */
@media (max-width: 54rem) {
  /* Прокручивать больше нечего: карточки шире окна не бывают. */
  #tab-access .ac-table-wrap { overflow-x: visible; }

  #tab-access table.ac-table {
    display: block;
    min-width: 0;
    border-collapse: separate;
  }

  /* Шапка не `display: none`, а вынесена за экран: `access.js` читает её
     подписи (`columnLabels()`), и убранная из раскладки она читается так же. */
  #tab-access .ac-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #tab-access .ac-table tbody { display: block; }

  #tab-access .ac-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.3rem var(--s3);
    margin-bottom: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
  }

  #tab-access .ac-table tbody tr:last-child { margin-bottom: 0; }
  /* Подсветка открытой карточки — на самой карточке: ячеек-полос больше нет. */
  #tab-access .ac-table tbody tr.is-open { background: var(--glass); }
  #tab-access .ac-table tbody tr.is-open td { background: none; }

  #tab-access .ac-table td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  /* Логин и пилюля доступа — одной строкой сверху: это два ответа, за
     которыми на экран и заходят. Кнопки стоят справа во всю высоту карточки. */
  #tab-access .ac-table td.ac-c-who { grid-area: 1 / 1 / 2 / 2; }
  #tab-access .ac-table td.ac-c-state {
    grid-area: 1 / 2 / 2 / 3;
    justify-self: end;
    text-align: right;
  }
  #tab-access .ac-table td.ac-c-role { grid-area: 2 / 1 / 3 / 2; }
  #tab-access .ac-table td.ac-c-seen { grid-area: 3 / 1 / 4 / 2; }
  #tab-access .ac-table td.ac-c-born { grid-area: 4 / 1 / 5 / 2; }
  #tab-access .ac-table td.ac-c-acts {
    grid-area: 2 / 2 / 5 / 3;
    align-self: center;
  }

  /* Подпись колонки перед значением: без шапки «13.09 10:58» и «11.09.2026» —
     две одинаковые серые даты подряд, и какая из них «заведён», не угадать. */
  #tab-access .ac-table td.ac-c-seen::before,
  #tab-access .ac-table td.ac-c-born::before {
    content: attr(data-label);
    /* Строчная, а не блочная: подпись над значением давала бы четыре строки
       там, где хватает двух, а карточек на экране пять. */
    display: inline;
    margin-right: var(--s2);
    color: var(--mute);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Сама подпись не ломается: «ПОСЛЕДНИЙ / ВХОД» в две строки — это ровно то
       обрезание шапки, ради которого карточки и заведены. */
    white-space: nowrap;
  }

  /* Короткая метка встаёт рядом с относительной, а не под ней: в карточке
     вертикаль дороже. */
  #tab-access .ac-table .ac-when small {
    display: inline;
    margin-left: var(--s2);
  }

  #tab-access .ac-table .ac-live {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.15rem;
    margin-left: 0;
  }

  /* M-17 (мобильный аудит 24.09): три кнопки строки были 28×44 — по ширине
     под порогом касания, а соседние «изменить» и «отключить» стоят вплотную.
     На телефоне это квадраты 44×44, и встают они отдельной строкой карточки
     под датами: справа от дат три кнопки по 44 px отнимали у «Последнего
     входа» ширину, и на 320 даты переносились. */
  #tab-access .ac-table td.ac-c-role,
  #tab-access .ac-table td.ac-c-seen,
  #tab-access .ac-table td.ac-c-born {
    grid-column: 1 / -1;
  }

  #tab-access .ac-table td.ac-c-acts {
    grid-area: 5 / 1 / 6 / -1;
    padding-top: var(--s2);
    border-top: 1px solid var(--line);
  }

  #tab-access .ac-acts {
    gap: var(--s2);
  }

  #tab-access button.ac-act {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* Кнопка «Обновить» в шапке экрана (34×34) и крестик окна (26 px). */
  #ac-refresh {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  button.ac-modal-x {
    width: 2.75rem;
    height: 2.75rem;
    top: var(--s2);
    right: var(--s2);
  }

  /* Стрелка «↗» на брендовой карточке — невидимая зона касания вокруг. */
  #tab-access .g-arrow::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
  }

  /* ------------------------------- шторка «посмотреть» — снизу экрана
     На телефоне шторка стояла в потоке ПОД таблицей людей: нажатие на глаз
     в карточке открывало её за нижним краем окна (замерено на 375: верх
     шторки на 762 из 812), и казалось, что кнопка не работает. Теперь это
     шторка снизу поверх экрана с затемнением; закрывается крестиком 44 px,
     нажатием по затемнению и Esc. */
  #tab-access .ac-drawer:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    max-height: 85vh;
    max-height: 85dvh;
    margin: 0;
    padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--surface-flat);
    animation: acSheetUp var(--dur-2) var(--ease-out) both;
  }

  #tab-access .ac-drawer:not([hidden]) + .ac-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 149;
    background: var(--backdrop);
  }

  #tab-access .ac-drawer-x {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@keyframes acSheetUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* ===========================================================================
   ДВИЖЕНИЕ

   Границы те же, что на «Обзоре» и в «Заказах»: в кадре только transform /
   opacity / stroke-dashoffset, микроанимации ≤ 300 мс, декоративные циклы
   ≥ 6 с. Общие кадры (`gDot`, `gDraw`, `gRow`, `gFlash`, `gShake`, `gSheen`)
   живут в `overview.css` — второй копии здесь нет.
   ======================================================================== */

/* Аватар плывёт ±4 px; период и фаза у каждого свои (`--t`, `--d` ставит
   рисовалка созвездия) — иначе пять кругов качаются строем, как метроном. */
@keyframes acFloat {
  0%,
  100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}

/* Свечение под аватаром «дышит»: 9 с — длиннее шести, значит не мигает. */
@keyframes acBreathe {
  from { scale: 1; }
  to { scale: 1.06; }
}

/* Штрих гейджа вырастает снизу. */
@keyframes acBar {
  from {
    opacity: 0;
    transform: scaleY(0.1);
  }
}

/* Точка «в пульте сейчас» — мягкий пульс, как бейдж непрочитанных. */
@keyframes acPing {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

/* Модалка: 0,96 → 1 и проявление за 200 мс. */
@keyframes acModalIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

#tab-access .cn-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: acFloat var(--t, 8s) var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

#tab-access .cn-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: acBreathe 9s var(--ease) infinite alternate;
  animation-delay: var(--d, 0s);
}

/* Нити от центра к спутникам прочерчиваются — команда, а не пять кругов.
   Пунктир при этом сохраняется: рисунок «нить из точек» и есть связь, а
   сплошная линия читалась бы как провод. */
#tab-access .cn-link {
  --g-dash: 110;
  animation: gDraw 700ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

#tab-access .cn-live {
  transform-box: fill-box;
  transform-origin: center;
  animation: acBreathe 6s var(--ease) infinite alternate;
}

/* Цифра из точек и спарклайн «взято на себя» — общие правила в `overview.css`
   (`.dotnum.is-lit svg circle`, `.is-drawn .ovspark-*`). Классы и `--i` ставит
   `access.js`, и только на приезд данных: css не знает, изменилось ли показание. */

/* Полосатый гейдж заполняется штрих за штрихом, шаг 8 мс. */
#tab-access .gg-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: acBar 260ms var(--ease-out) backwards;
  animation-delay: calc(180ms + var(--i, 0) * 8ms);
}

#tab-access .ac-live i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: acPing 3.6s var(--ease-out) infinite;
}

/* Новая строка после «Завести» — вспышка, которая гаснет, а не подсветка,
   которая остаётся: «вот она» и «с ней что-то не так» — разные сообщения. */
#tab-access .ac-table tbody tr.is-fresh td {
  position: relative;
}

#tab-access .ac-table tbody tr.is-fresh td::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ok-soft);
  pointer-events: none;
  animation: gFlash 1.6s var(--ease-out) both;
}

/* Шеврон роли поворачивается, когда список открыт или под курсором. */
.ac-select .chev {
  transition: transform var(--dur-2) var(--ease);
}

.ac-select:hover .chev,
.ac-select select:focus + .chev {
  transform: rotate(180deg);
}

.ac-modal { animation: fadeIn 0.16s var(--ease) both; }
.ac-modal-card { animation: acModalIn 200ms var(--ease-out) both; }

/* Тряска поля при отказе сервера — один раз. Повторяющаяся анимация ошибки
   читается как поломка интерфейса, а не как отказ. */
.field.is-bad.is-shake { animation: gShake 320ms var(--ease) both; }

.ac-sq,
button.ac-act,
button.ac-gen {
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    translate var(--dur-1) var(--ease);
}

.ac-sq:active,
button.ac-act:active:not(:disabled) { translate: 0 1px; }

/* Блик под курсором — общее правило `.glass:hover > .g-gloss::after` в
   `overview.css`; здесь только контекст наложения, без которого слой ушёл бы
   под фон панели. */
#tab-access .glass { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
  #tab-access .cn-node,
  #tab-access .cn-glow,
  #tab-access .cn-link,
  #tab-access .cn-live,
  #tab-access .gg-bar,
  #tab-access .ac-live i::after,
  #tab-access .ac-table tbody tr.is-fresh td::after,
  #tab-access .ac-drawer:not([hidden]),
  .ac-modal,
  .ac-modal-card,
  .field.is-bad.is-shake,
  .ac-select .chev {
    /* 🔴 `opacity: 1` здесь НЕ ставится, хотя в таких блоках её пишут по
       привычке. Селектор с `#tab-access` весит больше базового правила, и
       свечение под аватаром (`opacity: 0.16`) стало бы сплошным цветным
       кругом. Анимации с `backwards` и так возвращают свойству его
       собственное значение, стоит их выключить. */
    animation: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
    scale: none !important;
    translate: none !important;
  }

  #tab-access .ac-table tbody tr.is-fresh td::after { display: none; }
}