/* Оформление кабинетов.

   Одна тёмная система на все кабинеты: сотрудник, HR, руководитель,
   наставник, методист, управление и админка выглядят частями одного
   продукта — и того же продукта, что показывает сайт: палитра, скругления
   и шрифт взяты из макета «Adaptation Landing v4» (site/index.html).
   Акцент оранжевый, второй цвет — синий, тревога красная, и больше цветов
   со значением нет.

   Кабинет — рабочий инструмент, а не страница для чтения. Поэтому
   навигация стоит слева и не прыгает, сводка с динамикой идёт перед
   подробностями, состояние закодировано формой (полоса, пилл, маркер),
   а не только словом.

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

:root{
  /* Палитра макета v4. Фон один, плитки лежат поверх него. */
  --paper:#0C0D10;
  --surface:#0C0D10;
  --surface-1:#17191F;
  --surface-2:#22252D;
  --surface-3:#2A2E38;
  --surface-head:#1F222A;
  --row-selected:#2A1F16;

  --rule:#2E323C;
  --rule-row:#282C35;
  --rule-strong:#3A3F4A;

  --ink:#F2F3F5;
  --ink-2:#9AA0AB;
  --ink-3:#767D89;
  --ink-soft:#D9DCE2;

  --accent:#FF9A52;
  --accent-ink:#2A1508;
  --accent-soft:rgba(255,154,82,0.16);
  --accent-tint:#2A1F16;
  --accent-hover:#FFC08A;

  /* Синий — второй цвет данных: им показано «сколько всего», «сколько
     пришло», «сколько в работе», оранжевым — «сколько сделано». */
  --blue:#4F5BFF;
  --blue-deep:#3E4AF0;
  --blue-bar:#6B75FF;
  --blue-soft:rgba(79,91,255,0.18);
  --blue-ink:#D5D9FF;

  --alarm:#FF6B5A;
  --alarm-soft:rgba(255,107,90,0.16);
  --alarm-ink:#FFC2B7;
  --alarm-bg:#2A1A18;
  --alarm-rule:#5A2C26;

  /* Старые имена, на которые ещё опираются редакторы материалов. */
  --ok:var(--accent);
  --focus:var(--accent);

  /* Скругления макета: плитка крупная, элемент внутри — мельче. */
  --r-lg:24px;
  --r-md:16px;
  --r-sm:12px;
  --r-xs:10px;

  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --sans:"Onest","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:.16s cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:inherit}
img{max-width:100%}

/* Скрытое должно быть скрыто везде.

   Браузерное правило [hidden]{display:none} — самое слабое из всех, и
   любое наше .field{display:grid} его перебивает: поле с hidden=true
   остаётся на экране, а скрипт при этом уверен, что убрал его. Так
   форма заведения показывала «Подопечные наставника» при роли
   «Сотрудник» — ровно то, чего скрипт и пытался не допустить.

   Точечно это уже чинили один раз, в вариантах ответа теста. Чинить
   так каждый следующий случай — значит ждать, пока его заметят. */
[hidden]{display:none !important}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.accent{color:var(--accent)}
.alarm{color:var(--alarm)}
.eyebrow,.eyebrow-line{
  font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0;
}
.note{font-size:12px;line-height:1.5;color:var(--ink-3);margin:0}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Каркас: боковая навигация + рабочая область
   ========================================================================== */

.shell{display:flex;min-height:100vh}

.sidebar{
  flex:0 0 244px;width:244px;background:var(--surface-1);
  border-right:1px solid var(--rule-row);padding:20px 14px;
  display:flex;flex-direction:column;gap:22px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.logo{
  display:flex;align-items:center;gap:10px;padding:0 8px;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink);
}
.logo i{flex:0 0 28px;width:28px;height:28px;border-radius:var(--r-sm);background:var(--accent)}
.logo span{color:var(--ink-3)}

.side-card{
  padding:11px 12px;border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--rule);display:flex;flex-direction:column;gap:3px;
}
.side-card strong{font-size:14px;font-weight:600;line-height:1.35}
.side-card small{font-size:12px;line-height:1.45;color:var(--ink-2)}

.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 12px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-2);
  text-decoration:none;transition:background-color var(--ease),color var(--ease);
}
.side-nav a:hover{background:var(--surface-2);color:var(--ink)}
.side-nav a[aria-current="page"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.side-nav .count{font-family:var(--mono);font-size:11px;font-weight:400;opacity:.6}
.side-nav .group{padding:14px 12px 4px}

.side-foot{
  margin-top:auto;padding:14px;border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--rule);display:flex;flex-direction:column;gap:10px;
}
.side-foot .big{font-family:var(--sans);font-size:24px;font-weight:800;letter-spacing:-.045em;line-height:1.1}
.side-foot small{font-size:12px;line-height:1.45;color:var(--ink-2)}

/* Кнопка «Обратиться в поддержку» — последней строкой боковой панели.
   Прижата к низу так же, как side-foot; если side-foot есть, встаёт
   сразу под ним, а не делит с ним свободное место пополам. */
.side-help{
  margin-top:auto;display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:none;
  font:500 13px var(--sans);color:var(--ink-2);text-align:left;cursor:pointer;
  transition:background-color var(--ease),color var(--ease),border-color var(--ease);
}
.side-help:hover{background:var(--surface-2);color:var(--ink);border-color:var(--rule-strong)}
.side-foot + .side-help{margin-top:-10px}
.side-help-icon{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-3);color:var(--accent);font-size:12px;font-weight:700;
}

.workspace{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface)}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:64px;padding:12px 24px;background:var(--surface-1);border-bottom:1px solid var(--rule-row);
}
.search{
  flex:1;max-width:520px;height:44px;display:flex;align-items:center;gap:10px;
  padding:0 12px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--rule);
  transition:border-color var(--ease);
}
.search:focus-within{border-color:var(--rule-strong)}
.search kbd{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.search input{
  flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;
  color:var(--ink);font:13px var(--sans);
}
.search input::placeholder{color:var(--ink-3)}

.profile{display:flex;align-items:center;gap:10px;margin-left:auto}
.profile .logout-form{display:contents}
.profile .who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.profile .who b{font-size:13px;font-weight:600;white-space:nowrap}
.profile .who span{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

.avatar{
  flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-md);
  display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);
  font-size:13px;font-weight:700;letter-spacing:.01em;
}
.avatar--soft{background:var(--accent-soft);color:var(--accent);font-weight:600}
.avatar--alarm{background:var(--alarm-soft);color:var(--alarm);font-weight:600}
.avatar--sm{width:32px;height:32px;font-size:12px}
.avatar--lg{width:54px;height:54px;border-radius:var(--r-lg);font-size:19px}

main{padding:26px 24px 48px;width:100%;max-width:1320px}

/* ==========================================================================
   Заголовки и сетки
   ========================================================================== */

.page-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  margin-bottom:20px;flex-wrap:wrap;
}
.page-head .eyebrow{margin-bottom:5px}
.page-head .actions,.form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-head form{margin:0}

h1{font-family:var(--sans);font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1.1;margin:0}
h1.xl{font-size:34px}
h2{font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.3;margin:0 0 12px}
h3{font-size:15px;font-weight:600;margin:0}
.subtitle{color:var(--ink-2);margin:6px 0 0;font-size:14px;line-height:1.5;max-width:72ch}
.subtitle--lg{font-size:15px}

.stack{display:flex;flex-direction:column;gap:20px}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
.split--course{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
.split--card{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.split--even{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.section-gap{margin-bottom:20px}

.card{background:var(--surface-1);border:1px solid var(--rule-row);border-radius:var(--r-lg);min-width:0}
.card--pad{padding:18px}
.card--roomy{padding:22px}
.card-head{
  padding:14px 18px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.card-head h2{margin:0;font-size:16px}
.card-head .meta{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.card-body{padding:16px 18px}
.card-foot{padding:12px 18px;border-top:1px solid var(--rule);font-size:12px;line-height:1.5;color:var(--ink-3)}
.card .scroller{border:0;border-radius:0;background:transparent}
/* В карточке рядом с другой колонкой таблица сжимается, а не уезжает под соседа. */
.split .card table{min-width:0}
.split .card td,.split .card th{padding-left:14px;padding-right:14px}
.split .card td:first-child,.split .card th:first-child{padding-left:18px}

/* ==========================================================================
   KPI
   ========================================================================== */

.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;margin-bottom:20px;
}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{
  padding:18px;border-radius:var(--r-lg);background:var(--surface-1);border:1px solid var(--rule-row);
  display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;
}
.stat .k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{
  font-family:var(--sans);font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1.05;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.stat .v small{font-size:14px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.stat .v--sm{font-size:17px;letter-spacing:-.02em}
.stat .n{font-size:13px;line-height:1.45;color:var(--ink-2)}
.stat--alarm .v{color:var(--alarm)}
.stat p{margin:0}
.stat--action .btn{margin-top:auto}

.spark{display:flex;align-items:flex-end;gap:3px;height:28px}
.spark i{flex:1;min-height:3px;border-radius:3px;background:var(--rule)}
.spark i:last-child{background:var(--accent)}
.stat--alarm .spark i:last-child{background:var(--alarm)}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 18px;border-radius:var(--r-sm);
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  font-family:var(--sans);font-size:14px;font-weight:600;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--ease),border-color var(--ease),color var(--ease);
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--ghost{background:var(--surface-2);border-color:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--surface-3);border-color:transparent;color:var(--ink)}
.btn--danger{background:transparent;border-color:var(--alarm);color:var(--alarm)}
.btn--danger:hover{background:var(--alarm-soft);border-color:var(--alarm)}
.btn--fill{background:var(--rule);border-color:var(--rule);color:var(--ink)}
.btn--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-bar);border-color:var(--blue-bar)}
.btn--row,.btn--sm{height:36px;padding:0 14px;font-size:13px;border-radius:var(--r-xs)}
.btn--lg{height:50px;padding:0 24px;font-size:15px;border-radius:var(--r-md)}
.btn--block{width:100%}
button.btn{appearance:none}

/* Окно подтверждения опасного действия.

   Своё, а не системное window.confirm. Системное подтверждение —
   ненадёжный сторож: встроенные браузеры его глушат, а Chrome даёт
   пользователю навсегда отключить диалоги на странице. И в том и в
   другом случае confirm() молча возвращает false, отправка формы
   отменяется, и кнопка «Уволен» просто перестаёт работать — без
   единого признака, что что-то не так. */
.confirm-dialog{
  width:min(440px,calc(100vw - 32px));padding:0;border:1px solid var(--rule-strong);
  border-radius:var(--r-lg);background:var(--surface-1);color:var(--ink);
}
.confirm-dialog::backdrop{background:rgba(6,7,9,.66)}
.confirm-dialog-body{padding:22px 22px 0}
.confirm-dialog h2{margin:0 0 8px;font-size:17px;line-height:1.3}
.confirm-dialog p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.confirm-dialog .form-actions{display:flex;gap:10px;padding:18px 22px 22px;margin:0}
.confirm-dialog .btn--row{height:38px}

/* Окно обращения в поддержку — то же окно, что и подтверждение, с полями. */
.support-dialog{width:min(480px,calc(100vw - 32px))}
.support-dialog .form{max-width:none;gap:0}
.support-fields{display:grid;gap:14px;padding:18px 22px 0}
.support-done{padding:18px 22px 0}
.support-done strong{display:block;font-size:15px;color:var(--ok)}
.support-done p{margin:6px 0 0}
.support-error{font-size:13px}
.support-message{max-width:420px;white-space:normal;line-height:1.5}

.link-action{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans)}
.link-action:hover{text-decoration:underline}
.row-link{font-weight:600;text-decoration:none;color:var(--ink)}
.row-link:hover{color:var(--accent)}

/* ==========================================================================
   Таблицы
   ========================================================================== */

.scroller{overflow-x:auto;border:1px solid var(--rule-row);border-radius:var(--r-lg);background:var(--surface-1)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
th,td{padding:12px 18px;text-align:left;vertical-align:middle}
thead th{
  background:var(--surface-head);padding:11px 18px;border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}
tbody td{border-top:1px solid var(--rule-row)}
tbody tr:first-child td{border-top:0}
tbody tr{transition:background-color var(--ease)}
tbody tr:hover{background:var(--surface-2)}
tbody tr[data-href]{cursor:pointer}
td.mono{font-family:var(--mono);font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
td .muted{color:var(--ink-3)}
td strong{font-weight:600}
td.row-actions{text-align:right;white-space:nowrap}
.row-actions form{margin:0;display:inline-block}
.row-actions form + form{margin-left:6px}
/* Срок хранения уволенного под пиллом в архиве. */
td .note{display:block;margin-top:4px}
tr.row--alarm td:first-child{box-shadow:inset 2px 0 0 var(--alarm)}

.person{display:flex;align-items:center;gap:12px;min-width:0}
.cell-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.cell-main b{font-size:14px;font-weight:600}
.cell-main span{font-size:12px;color:var(--ink-3)}
a.cell-main,.person a{text-decoration:none}

/* ==========================================================================
   Пиллы, прогресс, маркеры
   ========================================================================== */

.pill{
  display:inline-flex;align-items:center;justify-self:start;width:fit-content;
  padding:5px 12px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);
  font-family:var(--sans);font-size:12px;font-weight:500;line-height:1.1;white-space:nowrap;
  vertical-align:middle;
}
.pill--ok{background:var(--accent-soft);color:var(--accent)}
.pill--blue{background:var(--blue-soft);color:var(--blue-bar)}
.pill--alarm{background:var(--alarm-soft);color:var(--alarm)}
.pill + .pill{margin-left:4px}
.pills{display:flex;flex-wrap:wrap;gap:4px}
.pills .pill + .pill{margin-left:0}
.lead-flags{margin-top:6px}

.progress-cell{display:flex;align-items:center;gap:10px;min-width:140px}
.bar{flex:1;height:7px;border-radius:999px;background:var(--rule);overflow:hidden;min-width:48px}
.bar > i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.bar--blue > i{background:var(--blue-bar)}
.bar--alarm > i{background:var(--alarm)}
.bar--thin{height:5px}

.segments{display:flex;gap:3px;height:10px}
.segments i{flex:1;border-radius:999px;background:var(--rule)}
.segments i.done{background:var(--accent)}
.segments i.fail{background:var(--alarm)}

.mark{
  flex:0 0 24px;width:24px;height:24px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-3);font-family:var(--mono);font-size:12px;font-weight:700;
}
.mark--ok{background:var(--accent-soft);color:var(--accent)}
.mark--alarm{background:var(--alarm-soft);color:var(--alarm)}

.tabs{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-sm);background:var(--surface-2)}
.tabs a{
  padding:5px 10px;border-radius:var(--r-xs);font-size:12px;color:var(--ink-2);text-decoration:none;
  transition:background-color var(--ease),color var(--ease);white-space:nowrap;
}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current]{background:var(--rule);color:var(--ink)}

/* ==========================================================================
   Блоки дашбордов
   ========================================================================== */

.todo{list-style:none;margin:0;padding:0}
.todo li{padding:14px 18px;border-top:1px solid var(--rule-row);display:flex;flex-direction:column;gap:6px}
.todo li:first-child{border-top:0}
.todo p{margin:0;font-size:14px;line-height:1.45}

.qchart{display:flex;align-items:stretch;gap:14px;height:120px;padding:4px 0 0}
.qchart .q{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.qchart .pair{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.qchart .pair i{width:16px;min-height:2px;border-radius:6px 6px 2px 2px;background:var(--blue-bar)}
.qchart .pair i.done{background:var(--accent)}
.qchart .q.live .pair i{opacity:.55}
.qchart label{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .swatch-hired{background:var(--blue-bar)}
.legend .swatch-done{background:var(--accent)}
.legend .swatch-preliminary{background:var(--accent);opacity:.5}

.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fact{display:flex;flex-direction:column;gap:4px;min-width:0}
.fact .v{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.035em;overflow-wrap:anywhere}

.tiles{display:flex;flex-direction:column;gap:8px}
.tile{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2);text-decoration:none;
  transition:background-color var(--ease);
}
.tile:hover{background:var(--rule)}
.tile b{display:block;font-size:14px;font-weight:400}
.tile small{display:block;font-size:12px;color:var(--ink-3)}
.tile .num{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}

.resume{
  padding:18px;border-radius:var(--r-md);background:var(--surface-2);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.resume > div{display:flex;flex-direction:column;gap:5px;min-width:0}
.resume b{font-size:16px;font-weight:600}
.resume span{font-size:13px;color:var(--ink-2)}
.resume .btn{height:40px;padding:0 20px;font-size:15px}

.alert-inline{
  padding:14px 16px;border-radius:var(--r-md);background:rgba(226,72,58,.1);
  border:1px solid rgba(226,72,58,.35);color:var(--alarm-ink);
  display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;line-height:1.5;
}
.alert-inline .btn{height:34px;padding:0 14px;border-radius:var(--r-sm)}

.kv{margin:0;display:flex;flex-direction:column}
.kv > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.kv dt{font-size:13px;color:var(--ink-2)}
.kv dd{margin:0;font-family:var(--mono);font-size:13px;text-align:right;overflow-wrap:anywhere}

.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.log li{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid var(--rule-row)}
.log li:last-child{border-bottom:0}
.log time,.log .by{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.log .by{color:var(--accent)}
.log span{font-size:13px;line-height:1.45}

.limit{display:flex;flex-direction:column;gap:8px}
.limit + .limit{margin-top:14px}
.limit .row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-2)}
.limit .row b{font-family:var(--mono);font-weight:400;color:var(--ink)}

.stumble{list-style:none;margin:0;padding:0}
.stumble li{padding:12px 18px;border-top:1px solid var(--rule-row);display:flex;flex-direction:column;gap:8px}
.stumble li:first-child{border-top:0}
.stumble .row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.stumble .row b{font-family:var(--mono);font-weight:400;color:var(--alarm)}

.chips{display:flex;flex-wrap:wrap;gap:4px}

.methodists{list-style:none;margin:0;padding:0}
.methodists li{padding:12px 18px;border-top:1px solid var(--rule-row);display:flex;flex-direction:column;gap:6px}
.methodists li:first-child{border-top:0}
.methodists .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.methodists .row b{font-size:14px;font-weight:600}
.methodists .row span{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.methodists form{margin:0}

/* методист: список клиентов слева, рабочая область справа */
.master{display:grid;grid-template-columns:282px minmax(0,1fr);gap:20px;align-items:start}
.panel{background:var(--surface-1);border:1px solid var(--rule);border-radius:var(--r-lg);padding:16px 12px;display:flex;flex-direction:column;gap:12px}
.panel > .eyebrow,.panel > .note{padding:0 6px}
.clients{display:flex;flex-direction:column;gap:4px}
.client{
  display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--r-md);
  text-decoration:none;border-left:2px solid transparent;transition:background-color var(--ease);
}
.client:hover{background:var(--surface-2)}
.client[aria-current]{background:var(--surface-2);border-left-color:var(--accent)}
.client .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.client b{font-size:14px;font-weight:600}
.client small{font-size:12px;color:var(--ink-2)}
.client .metrics{display:flex;gap:10px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* ==========================================================================
   Сообщения, пустые состояния, формы
   ========================================================================== */

.notice{
  padding:14px 16px;border-radius:var(--r-lg);background:var(--surface-1);border:1px solid var(--rule);
  color:var(--ink-2);font-size:14px;line-height:1.5;
}
.notice--alarm{background:var(--alarm-bg);border-color:var(--alarm-rule);color:var(--alarm-ink)}
.notice--row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px}

.empty{
  padding:28px 22px;text-align:center;background:var(--surface-1);
  border:1px dashed var(--rule);border-radius:var(--r-lg);color:var(--ink-2);font-size:13px;
}
.empty strong{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.empty p{margin:6px 0 0;font-size:13px;color:var(--ink-2)}

.disclaim{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--ink-3);max-width:80ch}

.form{display:grid;gap:16px;max-width:560px}
.form--wide{max-width:820px}
.field{display:grid;gap:6px}
.field > label{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.field > label span{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:12px}
.field .help{font-size:12px;line-height:1.45;color:var(--ink-3)}
.field .errors{color:var(--alarm);font-size:13px}
/* Отметки и переключатели под это правило не попадают: ширина 100%
   и padding превращают их в широкую коробку, а подпись уезжает вправо. */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.field select,.field textarea,
.kb-search input,.kb-filter select{
  width:100%;min-height:46px;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid var(--rule);background:var(--surface-2);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.4;
  transition:border-color var(--ease);
}
.field select,.kb-filter select{background:var(--surface-2)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field textarea{resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus,
.kb-search input:focus,.kb-filter select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field input[type=file]{font-size:13px;color:var(--ink-2)}
.field div label{display:flex;align-items:center;gap:9px;font-size:14px;font-family:var(--sans);text-transform:none;letter-spacing:0;color:var(--ink-2)}
.field div label:hover{color:var(--ink)}
.field input[type=checkbox],.field input[type=radio]{flex:0 0 auto;width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
input.mono,.field input[name=username]{font-family:var(--mono)}

.confirm-line{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2)}
.confirm-line input{flex:0 0 auto;accent-color:var(--alarm)}

.band-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.band-pick a[aria-current]{border-color:var(--accent);color:var(--accent)}

.block{background:var(--surface-1);border:1px solid var(--rule-row);border-radius:var(--r-lg);padding:24px;margin-bottom:20px}
.block h2{font-size:17px;margin-bottom:14px}
.block-sub{font-size:15px;margin:22px 0 12px;font-weight:600}
.editor{display:flex;flex-direction:column;gap:0}

/* ==========================================================================
   Вход
   ========================================================================== */

.login-page{min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:var(--paper)}
.login-card{
  width:100%;max-width:520px;padding:48px 40px;border-radius:var(--r-lg);
  background:var(--surface-1);border:1px solid var(--rule-row);box-shadow:0 30px 70px -40px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:22px;
}
.login-card .logo{padding:0;font-size:16px}
.login-card .logo i{flex-basis:30px;width:30px;height:30px;border-radius:var(--r-sm)}
.login-card h1{font-size:28px}
.login-card .subtitle{margin-top:8px}
.login-card .form{max-width:none;gap:14px}
.login-card .field input:not([type=checkbox]){height:44px;background:var(--surface-1)}
.login-card .field input[type=text]{font-family:var(--mono)}
.pass{position:relative}
.pass input{padding-right:84px!important}
.pass button{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--ink-2);font:12px var(--sans);cursor:pointer;
}
.pass button:hover{color:var(--ink)}
.login-card .btn{height:46px;font-size:15px;width:100%;margin-top:4px}
.login-hint{margin:0;font-size:12px;line-height:1.55;color:var(--ink-3)}
.login-hint a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.login-hint a:hover{color:var(--accent)}
.login-page{grid-template-rows:auto auto;align-content:center;gap:18px}
.login-support{
  justify-self:center;background:none;border:0;padding:6px 10px;cursor:pointer;
  font:500 13px var(--sans);color:var(--ink-3);border-radius:var(--r-sm);
}
.login-support:hover{color:var(--accent)}
.login-legal{
  justify-self:center;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;
  text-align:center;font-size:12px;color:var(--ink-3);opacity:.8;
}

/* ==========================================================================
   Карточка доступа (печать логина и пароля)
   ========================================================================== */

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:start}
.access-card{
  background:var(--surface-1);border:1px solid var(--rule-strong);border-radius:var(--r-lg);padding:24px;
  font-family:var(--mono);
}
.access-card .who{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.02em;margin-bottom:2px}
.access-card .pos{font-family:var(--sans);color:var(--ink-2);font-size:13px;margin-bottom:20px}
.access-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
.access-card dt{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);align-self:center}
.access-card dd{margin:0;font-size:22px;font-weight:700;letter-spacing:.02em;word-break:break-all;color:var(--accent)}
.access-card .cut{margin-top:22px;padding-top:14px;border-top:1px dashed var(--rule-strong);font-size:11px;color:var(--ink-3);font-family:var(--sans);line-height:1.5}

/* ==========================================================================
   Ридер курса: материалы слева, слайд по центру
   ========================================================================== */

.reader-shell{display:flex;min-height:100vh;background:var(--surface)}
.reader-side{
  flex:0 0 280px;width:280px;background:var(--surface-1);border-right:1px solid var(--rule);
  padding:20px 14px;display:flex;flex-direction:column;gap:14px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.reader-side .eyebrow{padding:0 10px}
.reader-side .back{font-size:13px;color:var(--ink-2);text-decoration:none;padding:0 10px}
.reader-side .back:hover{color:var(--ink)}
.materials{display:flex;flex-direction:column;gap:2px}
.materials a{
  display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-sm);
  text-decoration:none;border-left:2px solid transparent;transition:background-color var(--ease);
}
.materials a:hover{background:var(--surface-2)}
.materials a[aria-current]{background:var(--surface-2);border-left-color:var(--accent)}
.materials b{font-size:13px;font-weight:500;line-height:1.4}
.materials a[aria-current] b{font-weight:600}
.materials span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.materials span.ok{color:var(--accent)}
.materials span.fail{color:var(--alarm)}
.reader-side .side-foot{gap:6px}
.reader-side .side-foot .big{font-size:18px}

.reader-main{flex:1;min-width:0;display:flex;flex-direction:column}
.reader-top{
  position:sticky;top:0;z-index:2;padding:16px 32px;background:var(--surface-1);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.reader-top > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.reader-top b{font-size:15px;font-weight:600}
.dots{display:flex;align-items:center;gap:6px;width:320px;max-width:40vw}
.dots i{flex:1;height:5px;border-radius:999px;background:var(--rule)}
.dots i.done{background:var(--accent)}
.dots i.now{background:var(--ink)}
.reader-body{flex:1;padding:44px 32px;display:flex;justify-content:center}
.reader-col{width:100%;max-width:640px;display:flex;flex-direction:column;gap:22px}
.reader-col h1{font-size:30px;line-height:1.2}
.reader-foot{
  position:sticky;bottom:0;padding:16px 32px;background:var(--surface-1);border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.reader-foot .btn{height:40px}
.reader-foot .btn:not(.btn--ghost){padding:0 22px;font-size:15px}
.reader-foot .note{font-size:13px}

.course-purpose{
  margin:0;font-size:17px;line-height:1.65;color:var(--ink-soft);
  padding:14px 16px;border-radius:var(--r-md);background:var(--surface-1);border:1px solid var(--rule);
}
.slide{display:flex;flex-direction:column;gap:22px}
.slide-inner{display:flex;flex-direction:column;gap:22px}
.slide--image_beside .slide-inner{flex-direction:row;align-items:flex-start}
.slide--image_beside .slide-text{flex:1;min-width:0}
.slide--image_beside .slide-image{flex:0 0 42%}
.slide-text{font-size:17px;line-height:1.65;color:var(--ink-soft)}
.slide-text p{margin:0 0 14px}
.slide-text p:last-child{margin-bottom:0}
.slide-text h3{font-size:17px;margin:22px 0 10px;font-weight:600;color:var(--ink)}
.slide-text strong{font-weight:700;color:var(--ink)}
.slide-text ul,.slide-text ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:li}
.slide-text ul li,.slide-text ol li{
  display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface-1);
  border:1px solid var(--rule);font-size:15px;line-height:1.55;
}
.slide-text ul li::before{content:"";flex:0 0 6px;width:6px;border-radius:3px;background:var(--accent)}
.slide-text ol li{counter-increment:li}
.slide-text ol li::before{content:counter(li);flex:0 0 auto;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent)}
.slide-image{margin:0}
.slide-image img{display:block;max-width:100%;border-radius:var(--r-lg);border:1px solid var(--rule)}
.slide-image figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:8px}
.image-placeholder{
  height:200px;border-radius:var(--r-lg);border:1px dashed var(--rule-strong);
  background:repeating-linear-gradient(135deg,#17191F 0 10px,#1F222A 10px 20px);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-3);
}
.course-mistakes{padding:16px 18px;border-radius:var(--r-lg);background:var(--alarm-bg);border:1px solid var(--alarm-rule)}
.course-mistakes h2{color:var(--alarm-ink);margin-bottom:10px}
.course-mistakes ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--alarm-ink)}
.quiz-run .questions{margin-top:6px}

/* старый вид курса ещё используется на экране результата теста */
.course{max-width:760px;margin-inline:auto}
.course-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}
.progress{height:7px;border-radius:999px;background:var(--rule);overflow:hidden}
.progress-fill{height:100%;background:var(--accent)}
.progress-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.course-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}

/* ==========================================================================
   Редактор материалов и тестов
   ========================================================================== */

.steps-edit{list-style:none;counter-reset:step;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.steps-edit li{
  counter-increment:step;display:grid;grid-template-columns:1fr auto;gap:14px;
  background:var(--surface-1);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px 16px;
}
.steps-edit li::before{content:counter(step);grid-column:1;font-family:var(--mono);font-weight:700;color:var(--ink-3);font-size:12px}
.steps-edit .step-body{grid-column:1;grid-row:2}
.steps-edit .step-body p{margin:0}
.steps-edit .step-tools{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.steps-edit .step-tools form{margin:0}
.steps-edit figure{margin:10px 0 0}
.steps-edit img{max-width:340px;border:1px solid var(--rule);border-radius:var(--r-md);display:block}
.steps-edit figcaption{font-size:12px;color:var(--ink-3);margin-top:6px}

.questions{list-style:none;counter-reset:q;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}
.questions > li{counter-increment:q;background:var(--surface-1);border:1px solid var(--rule);border-radius:var(--r-lg);padding:16px 18px}
.questions > li::before{
  content:"Вопрос " counter(q);display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.question-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.question-head form{margin:0}
.question-text{margin:0;font-weight:500;font-size:15px}
.options{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.options li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface-2);
  transition:border-color var(--ease);
}
.options li:hover{border-color:var(--rule-strong)}
.options li.option--correct{border-color:var(--accent);background:var(--accent-tint)}
.options form{margin:0}
.option-text{font-size:14px}
.option-pick{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%}
.option-pick input{accent-color:var(--accent);width:17px;height:17px;cursor:pointer}

.option-rows{display:flex;flex-direction:column;gap:8px}
.option-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.option-mark{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.option-mark input{accent-color:var(--accent);width:18px;height:18px;cursor:pointer}
.option-mark-label{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.option-row .errors{grid-column:2}
.option-count{display:flex;gap:6px}
.option-count-item{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--rule-strong);border-radius:var(--r-sm);cursor:pointer}
.option-count-item input{accent-color:var(--accent);cursor:pointer}

.markup-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.markup-bar button{
  font-family:var(--sans);font-size:12px;padding:5px 10px;cursor:pointer;border-radius:var(--r-sm);
  border:1px solid var(--rule-strong);background:var(--surface-2);color:var(--ink-2);
}
.markup-bar button:hover{border-color:var(--ink);color:var(--ink)}

.slides-edit{list-style:none;counter-reset:sl;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}
.slides-edit li{counter-increment:sl}
.slide-card{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  background:var(--surface-1);border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px 16px;
}
.slide-card-body{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.slide-card-body strong{font-weight:500}
.slide-card .step-tools{display:flex;gap:6px;align-items:center}
.slide-card .step-tools form{margin:0}

/* норма выхода прямо в плитке сводки: поле и кнопка в одну строку */
.norm-form{display:flex;gap:6px;align-items:center}
.norm-form input{
  width:76px;min-height:36px;padding:6px 10px;border-radius:var(--r-xs);
  border:1px solid var(--rule);background:var(--surface-2);color:var(--ink);
  font-family:var(--mono);font-size:13px;
}
.norm-form input:focus{border-color:var(--accent);outline:none}

/* диаграмма ежеквартального ревью */
.chart{display:block;max-width:none}
.chart .axis{stroke:var(--rule-strong);stroke-width:1}
.chart .bar-hired{fill:var(--blue-bar)}
.chart .bar-done{fill:var(--accent)}
.chart .preliminary{opacity:.5}
.chart text{font-family:var(--sans);font-size:11px;font-weight:500;fill:var(--ink-2)}
.chart text.label{fill:var(--ink);font-weight:700}

/* материал и справочник глазами сотрудника */
.reader{max-width:72ch}
.reader-purpose{
  font-size:16px;line-height:1.6;color:var(--ink-soft);
  border-left:2px solid var(--accent);padding-left:16px;
}
.reader-steps{padding-left:20px;display:flex;flex-direction:column;gap:14px}
.reader-steps p{margin:0}
.reader-steps img{max-width:100%;border:1px solid var(--rule);border-radius:var(--r-md);display:block}
.reader-mistakes{padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}

.reference{max-width:760px}
.reference-steps{list-style:none;counter-reset:ref;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.reference-step{counter-increment:ref;background:var(--surface-1);border:1px solid var(--rule);border-radius:var(--r-lg);padding:18px 20px}
.reference-step::before{content:counter(ref);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:6px}
.reference-step h2{font-size:17px;margin:0 0 10px}
.reference-body{
  margin-top:20px;font-size:16px;line-height:1.7;color:var(--ink-soft);
  background:var(--surface-1);border:1px solid var(--rule);border-radius:var(--r-lg);padding:22px 24px;
}

/* ==========================================================================
   Дерево базы знаний
   --------------------------------------------------------------------------
   Раскрытие сделано на <details>: работает без скриптов, переживает
   медленную сеть и остаётся доступным с клавиатуры.
   ========================================================================== */

.kb-tree{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}
.kb-tree--nested{margin:10px 0 0;gap:6px}
.kb-node{border:1px solid var(--rule);background:var(--surface-1);border-radius:var(--r-lg);overflow:hidden}
.kb-tree--nested .kb-node{background:var(--surface-2);border-radius:var(--r-md)}
/* Содержимое summary лежит в .kb-row, а сам summary остаётся блоком:
   раскладка внутри summary ломает раскрытие в части браузеров. */
.kb-node > summary{padding:13px 16px;cursor:pointer;list-style:none;transition:background-color var(--ease)}
.kb-node > summary::-webkit-details-marker{display:none}
.kb-node > summary:hover{background:var(--surface-2)}
.kb-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.kb-row::before{content:"+";font-family:var(--mono);font-size:14px;color:var(--accent);width:1ch;flex:0 0 1ch}
.kb-node[open] > summary .kb-row::before{content:"−"}
.kb-name{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;font-weight:500}
.kb-about{font-weight:400;font-size:12px;color:var(--ink-3)}
.kb-count{font-family:var(--mono);font-size:11px;color:var(--ink-3);background:var(--surface-2);border-radius:999px;padding:3px 9px}
.kb-body{padding:0 16px 14px 32px;border-top:1px solid var(--rule)}
.kb-body > *:first-child{margin-top:12px}
.kb-blank{margin:12px 0 0;font-size:13px;color:var(--ink-3)}
.kb-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.kb-tools form{margin:0}

.kb-topics{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.kb-topic{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 12px;text-decoration:none;border-radius:var(--r-md);
  border:1px solid transparent;background:var(--surface-2);transition:background-color var(--ease);
}
.kb-topic:hover{background:var(--rule)}
.kb-topic-title{font-weight:500}
.kb-topic-meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.kb-topics--found{margin-bottom:20px}
/* В результатах поиска под названием — кусок текста с найденным словом. */
.kb-topics--found .kb-topic{flex-direction:column;align-items:flex-start;gap:4px}
.kb-topics--found .kb-topic-meta{white-space:normal;font-family:var(--sans);font-size:12.5px;line-height:1.45}
.kb-found-head{margin:16px 0 0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
mark{background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:0 2px}

.kb-search{display:flex;gap:8px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.kb-search input{flex:1;min-width:220px;width:auto}
.kb-filter{display:flex;gap:8px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.kb-filter select{min-width:220px;width:auto}

/* Что даёт тариф — рядом с тем, чем управляет. */
.plan-panel{border:1px solid var(--rule);background:var(--surface-1);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:20px}
.plan-lines{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
.plan-usage{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:14px 0 0;font-size:13px}
.plan-usage dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);align-self:center}
.plan-usage dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.plan-panel .notice{margin-top:14px}

@media print{
  .sidebar,.topbar,.reader-side,.no-print{display:none!important}
  body,.workspace{background:#fff;color:#000}
  .access-card{border-color:#000;background:#fff;color:#000}
  .access-card dd{color:#000}
  .card-grid{display:block}
}

/* ==========================================================================
   Узкие экраны
   --------------------------------------------------------------------------
   Сотрудник открывает кабинет в первый рабочий день и обычно с телефона,
   руководитель смены ведёт людей не сидя за компьютером. Поэтому кабинеты
   сотрудника, HR и руководителя обязаны работать на телефоне.

   Таблицы на узком экране разворачиваются в карточки, а не прокручиваются
   вбок: горизонтальная прокрутка прячет половину столбцов.
   ========================================================================== */

@media (max-width: 1080px){
  .split,.split--course,.split--card,.split--even{grid-template-columns:minmax(0,1fr)}
  .master{grid-template-columns:minmax(0,1fr)}
  .stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 760px){
  body{font-size:15px}

  .shell,.reader-shell{flex-direction:column}
  .sidebar{
    position:static;width:auto;height:auto;flex:none;padding:12px 12px 8px;gap:10px;
    border-right:0;border-bottom:1px solid var(--rule);
  }
  .sidebar .side-card,.sidebar .side-foot{display:none}
  .side-help{margin-top:0;padding:7px 10px;font-size:12px}
  .side-nav{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px;-webkit-overflow-scrolling:touch}
  .side-nav::-webkit-scrollbar{display:none}
  .side-nav a{white-space:nowrap;padding:9px 12px;flex:0 0 auto}
  .side-nav .group{display:none}

  .topbar{padding:10px 12px;flex-wrap:wrap}
  .search{order:3;flex:0 0 100%;max-width:none}
  .search kbd{display:none}
  .profile .who span{display:none}

  main{padding:18px 12px 36px}
  .page-head{flex-direction:column;align-items:stretch;gap:14px}
  h1,h1.xl{font-size:24px}

  .stats,.stats--3,.stats--4{grid-template-columns:1fr 1fr;gap:8px}
  .stat{padding:12px}
  .stat .v{font-size:20px}
  .facts{grid-template-columns:1fr 1fr}

  .btn{min-height:44px}
  .btn--row,.btn--sm{min-height:38px}
  .form-actions .btn{flex:1 1 auto}
  .resume,.alert-inline,.notice--row{flex-direction:column;align-items:stretch}

  .scroller{border:0;background:transparent;overflow:visible}
  .card .scroller{padding:10px}
  table,thead,tbody,tr,td{display:block;width:100%}
  table{min-width:0}
  thead{display:none}
  tbody tr{
    border:1px solid var(--rule);background:var(--surface-1);border-radius:var(--r-lg);
    padding:12px 14px;margin-bottom:10px;
  }
  tbody tr:hover{background:var(--surface-1)}
  tbody td{border:0;padding:4px 0;display:flex;gap:14px;align-items:center;white-space:normal}
  tbody td::before{
    content:attr(data-label);flex:0 0 38%;
    font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  }
  tbody td:not([data-label])::before{content:none}
  tbody td:empty{display:none}
  tbody td.row-actions{padding-top:10px;justify-content:flex-start;text-align:left}
  tbody td.row-actions::before{content:none}
  .row-actions form{width:100%;display:block}
  .row-actions .btn{width:100%}
  tr.row--alarm td:first-child{box-shadow:none}
  tr.row--alarm{border-color:var(--alarm-rule)}

  .reader-side{position:static;width:auto;height:auto;flex:none;border-right:0;border-bottom:1px solid var(--rule)}
  .reader-side .materials,.reader-side .side-foot{display:none}
  .reader-top{position:static;padding:12px 16px;flex-direction:column;align-items:stretch}
  .dots{width:100%;max-width:none}
  .reader-body{padding:24px 16px}
  .reader-col h1{font-size:24px}
  .slide--image_beside .slide-inner{flex-direction:column}
  .slide--image_beside .slide-image{flex:none}
  .reader-foot{padding:10px 12px}
  .reader-foot .note{display:none}
  .reader-foot .btn{flex:1}

  .login-card{padding:32px 20px}
  .access-card{padding:18px}
  .access-card dd{font-size:18px}
  .card-grid{grid-template-columns:1fr}

  .kb-node > summary{padding:14px;min-height:48px}
  .kb-body{padding:0 12px 12px 20px}
  .kb-topic{flex-direction:column;gap:3px;min-height:48px}
  .kb-topic-meta{white-space:normal}
}

@media (max-width: 340px){
  .stats,.stats--3,.stats--4,.facts{grid-template-columns:1fr}
}

/* ==========================================================================
   Только для компьютера
   --------------------------------------------------------------------------
   Управление и админка на телефоне по делу не работают: широкие таблицы,
   фильтры и массовые операции. Сделать вид, что работают, — хуже, чем
   честно сказать.
   ========================================================================== */

.desktop-only-note{display:none}

@media (max-width: 760px){
  .desktop-only{display:none!important}
  .desktop-only-note{
    display:block;border:1px dashed var(--rule-strong);border-radius:var(--r-lg);
    background:var(--surface-1);padding:28px 20px;text-align:center;color:var(--ink-2);
  }
  .desktop-only-note strong{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
  .desktop-only-note p{margin:6px 0 0;font-size:14px;color:var(--ink-2)}
}

/* Список отметок: подопечные наставника в карточке HR и в форме заведения. */
.checks{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;padding:4px 0}
.checks label{display:flex;gap:10px;align-items:center;font-weight:400;cursor:pointer}

/* Кнопка панели разметки, чьё оформление уже стоит на выделении: нажатие его снимет. */
.markup-bar button[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}

/* Перетаскивание в кабинете методиста (core/static/core/reorder.js): разделы базы и материалы курса. */
.drag-grip{
  flex:0 0 auto;width:22px;height:32px;margin:-6px -8px -6px 0;border:0;border-radius:6px;vertical-align:middle;
  background-color:transparent;
  background-image:radial-gradient(circle,var(--ink-3) 1.4px,transparent 1.8px);
  background-size:8px 8px;background-position:3px 4px;background-repeat:repeat;
  background-clip:content-box;box-sizing:border-box;padding:4px 3px;
  cursor:grab;touch-action:none;opacity:.75;transition:background-color var(--ease),opacity var(--ease)
}
.drag-grip:hover,.drag-grip:focus-visible{background-color:var(--surface-2);opacity:1;outline:none}
.drag-grip:focus-visible{box-shadow:0 0 0 2px var(--accent-soft)}
td.row-actions .drag-grip{margin:0 0 0 6px}
/* Захваченный элемент: над остальными, оранжевый контур, тень «приподнят». */
[data-sortable-id].is-dragging{position:relative;z-index:20;will-change:transform}
.kb-item.is-dragging > .kb-node{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 16px 36px rgba(0,0,0,.55)}
tr.is-dragging{background:var(--surface-2);outline:2px solid var(--accent);outline-offset:-2px;box-shadow:0 16px 36px rgba(0,0,0,.55)}
tr.is-dragging td{border-top-color:transparent}
.is-dragging .drag-grip{background-color:var(--surface-2);opacity:1}
body.is-sorting,body.is-sorting *{cursor:grabbing !important;user-select:none}
.reorder-status{margin:-6px 0 14px;font-size:12px;color:var(--ink-3)}
.reorder-status.is-error{color:var(--alarm-ink)}

/* ==========================================================================
   Второй фактор админки (templates/staff_otp)
   ========================================================================== */
.otp-card{max-width:480px}
.otp-steps{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink-2);font-size:14px;line-height:1.5}
.otp-qr{width:fit-content;margin-inline:auto;align-self:center;padding:14px;background:#fff;border-radius:var(--r-md);line-height:0}
.otp-qr svg{display:block;width:232px;height:232px}
.otp-manual{font-size:13px;color:var(--ink-3)}
.otp-manual summary{cursor:pointer;color:var(--ink-2)}
.otp-manual p{margin:8px 0 6px}
.otp-manual code{display:block;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2,#1F222A);color:var(--ink);font-size:15px;letter-spacing:.06em;word-break:break-all;user-select:all}
.otp-input{font-size:22px;letter-spacing:.3em;text-align:center}
.otp-codes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.otp-codes li{padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2,#1F222A);text-align:center;font-size:16px;letter-spacing:.08em;user-select:all}