/* Два экрана портала: вход и админка.

   Здесь только то, чего нет в системе оформления и чему там не место: форма
   входа и матрица доступов существуют в приложении по одному разу. Общие
   приёмы (панель, таблица, пилюля, сообщение, кнопка) взяты из app.css и
   здесь не переопределяются: правило, дублирующее систему, однажды
   разойдётся с ней и разъедет два экрана из десяти. */

/* Вход — одна узкая колонка на весь экран. Узкая нарочно: поле почты во всю
   ширину монитора читается как ошибка вёрстки, а не как приглашение, а
   сообщение об ошибке шириной в монитор над формой в 26 rem выглядит
   аварией системы. Колонка держит и заголовок, и сообщение, и форму — по
   одной левой границе. */
.vhod{max-width:26rem; display:flex; flex-direction:column; gap:16px}

/* Галочка и подпись к ней стоят в строку: подпись поля в системе
   оформления — надпись НАД полем, а «Запомнить это устройство» над
   квадратиком читается как заголовок раздела, а не как выбор. Красится
   смысловым цветом «сделано»: синего по умолчанию в системе нет вовсе. */
.check{display:flex; flex-direction:row; align-items:center; gap:8px;
  margin:0 0 16px; font-size:14px; color:var(--ink)}
.check input[type=checkbox]{width:17px; height:17px; accent-color:var(--done)}

/* Поле кода — шесть цифр, и человек сверяет их с письмом по одной.
   Разрядка и крупный кегль превращают его из «строки ввода» в шесть
   отдельных знаков; ширина по содержимому, чтобы поле не обещало больше
   цифр, чем принимает. */
.code{font-family:var(--font-mono); font-size:26px; letter-spacing:.42em;
  padding:10px 12px; width:9.5em; max-width:100%}

/* Кто вошёл — к правому краю шапки, подальше от пунктов меню: «Выйти» рядом
   с «Админкой» нажимают промахом. */
.topbar .who{margin-left:auto; font-size:12.5px; color:var(--ink-3); white-space:nowrap}

/* Матрица «люди × разделы».

   Галочки в таблице читаются плохо: сорок одинаковых квадратов, и «у кого
   чего нет» приходится высматривать. Поэтому у матрицы три опоры, и ни
   одна не полагается на внимательность:
   1) выданная ячейка залита цветом «сделано» — взглядом видно пробелы, а не
      галочки (:has поддерживают все нынешние браузеры; там, где нет,
      матрица остаётся обычной таблицей и ничего не теряет);
   2) в каждой строке счёт «выдано N из M» пилюлей сразу за именем — строка
      без единого раздела красная, потому что этот человек войти может, а
      работать нет;
   3) под таблицей — счёт по каждому разделу: раздел, не выданный никому,
      виден столбцом, а не вычитанием. */
.matrix th.grant{text-align:center}
.matrix td.grant{text-align:center; width:1%; white-space:nowrap}
.matrix td.grant:has(input:checked){background:var(--done-soft)}
.matrix input[type=checkbox]{width:17px; height:17px; margin:0; accent-color:var(--done)}

/* Пилюля счёта не переносится по словам: «ни одного» в две строки распирает
   строку матрицы вдвое и читается как две разные пометки. */
.matrix td .pill{white-space:nowrap}

.matrix tfoot td{border-top:1px solid var(--edge); color:var(--ink-3);
  font-size:12px; height:auto; padding:8px 10px}

/* Закреплённая колонка системы рассчитана на артикул: моноширинный, жирный,
   в одну строку. Здесь в ней имя человека и адрес почты второй строкой —
   поэтому шрифт обычный, а перенос разрешён. Прилипание, фон и граница
   остаются системными. */
table.data.matrix .sticky-col{font-family:var(--font-sans); font-weight:400;
  white-space:normal; min-width:11rem; padding-top:6px; padding-bottom:6px}
.matrix .mail{display:block; color:var(--ink-3); font-size:12px}
.matrix td.person{height:auto}

/* Метка времени и адрес сети — моноширинные, но по левому краю. Класс .num
   в системе означает «количество» и выравнивает вправо; дата, прижатая
   вправо в первом столбце, отрывается от строки, к которой относится. */
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:12.5px}

/* Промах входа — цветом отказа: журнал держат ради них, а не ради удачных
   входов, и в списке из сорока строк неудачную надо видеть, а не вычитывать
   слово login_fail. Правило узкое, по классу таблицы: строку .failed рисуют
   и другие экраны, и красить их отсюда значит красить чужое. */
.logins tr.failed td{background:var(--risk-soft)}