/* ============================================================================
   Пульт учебного отдела

   Инструмент, за которым сидят весь день, и открывают его раз в несколько
   дней: поэтому экраны подсказывают, что делать дальше, а не ждут, что
   человек помнит порядок. Один акцент, три смысловых цвета, подписанная
   боковая навигация и «маршрут группы» из четырёх станций.

   Токены объявлены переменными. Правка палитры или шкалы делается в одном
   месте, а не по сорока селекторам. Новый цвет получает пару в тёмной теме.

   Разделы файла: токены · база · оболочка · кнопки · подсказки · плашки ·
   метки · маршрут · таблицы · поля · окна · тост · тур · экраны ·
   справочники · ошибка · печать.
   ============================================================================ */

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

:root {
  --font-ui: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-head: "Onest", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Типографическая шкала, база 16, шаг ~1.25 */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5625rem;  /* 25 */
  --text-2xl: 1.9375rem; /* 31 */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* Отступы, база 4 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Плотность. Переключается атрибутом data-density на body: за восемь часов
     у разных людей разные предпочтения, и это не каприз. */
  --row-padding-y: 14px;

  --sidebar: 252px;

  /* Движение. Отклик 120-200 мс, появление 260-320 мс. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
}

body[data-density="compact"] {
  --row-padding-y: 7px;
}

/* Светлая тема. Фон намеренно не белый: чистый белый утомляет за рабочий день. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f7;
  --surface: #ffffff;
  --surface-hover: #f5f6f9;
  --surface-sunken: #f8f9fb;
  --field-bg: #ffffff;

  --border: #e6e8ee;
  --border-strong: #d3d6df;

  --text: #15171c;
  --text-secondary: #5b6070;
  --text-tertiary: #656a7b;

  --accent: #2453d6;
  --accent-hover: #1c44b5;
  --accent-soft: #eef2fd;
  --accent-line: #c9d5f6;
  --accent-contrast: #ffffff;

  --success: #157a4f;
  --success-soft: #e8f5ee;
  --success-line: #bfe3cf;
  --warning: #8a5300;
  --warning-soft: #fdf3e2;
  --warning-line: #ecc47d;
  --warning-ink: #6e4503;
  --danger: #c0281f;
  --danger-soft: #fdeceb;
  --danger-line: #f3c6c2;
  --danger-wash: #fff8f7;

  --chip: #eceef3;
  --track: #e2e4ea;
  --line-soft: #f0f1f5;
  --dot-border: #d5d8e0;
  --tip-bg: #1a1d26;
  --tip-fg: #eef0f5;
  --tray-box: #ffffff;
  --tray-edge: #c9a14f;
  --tray-wall: #6e4503;
  --tray-paper: #fffdf6;
  --tray-paper-edge: #8a5604;
  --tray-lines: #e2cfa3;
  /* Цвета физических бланков (метки на плитках и в подсказках выпуска).
     Спокойные: это опознавательный знак, а не украшение. */
  --blank-blue: #3f86c9;
  --blank-yg-a: #d6b93a;
  --blank-yg-b: #7fae3e;
  --blank-green: #3a9a63;
  --blank-red: #c9423a;
  --blank-plain: #b4b8c6;
  --scrim: rgb(15 18 28 / 45%);
  --shadow-card: 0 1px 2px rgb(20 24 40 / 5%), 0 6px 20px rgb(20 24 40 / 5%);
  --shadow-pop: 0 6px 16px rgb(20 24 40 / 10%), 0 24px 56px rgb(20 24 40 / 18%);
}

/* Тёмная тема. Не инверсия светлой: поверхности подняты, акцент осветлён,
   иначе на тёмном он проваливается и теряет контраст. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e11;
  --surface: #17171c;
  --surface-hover: #1e1e24;
  --surface-sunken: #121216;
  --field-bg: #0f0f13;

  --border: #26262e;
  --border-strong: #35353f;

  --text: #ececf0;
  --text-secondary: #9d9daa;
  --text-tertiary: #8e8e9c;

  --accent: #6a8cff;
  --accent-hover: #8aa4ff;
  --accent-soft: #1b2140;
  --accent-line: #2c386b;
  --accent-contrast: #0e0e11;

  --success: #4ec38a;
  --success-soft: #14261e;
  --success-line: #21452f;
  --warning: #e0a94a;
  --warning-soft: #2a2114;
  --warning-line: #5a4417;
  --warning-ink: #f0c56e;
  --danger: #f0736e;
  --danger-soft: #2c1817;
  --danger-line: #5a2a28;
  --danger-wash: #231415;

  --chip: #26262e;
  --track: #2a2a33;
  --line-soft: #1e1e24;
  --dot-border: #3a3a45;
  --tip-bg: #2e2e3a;
  --tip-fg: #ececf0;
  --tray-box: #17171c;
  --tray-edge: #8a6a24;
  --tray-wall: #c99a3c;
  --tray-paper: #2a2418;
  --tray-paper-edge: #c99a3c;
  --tray-lines: #5a4a28;
  --blank-blue: #62a6ec;
  --blank-yg-a: #e0c552;
  --blank-yg-b: #8cc152;
  --blank-green: #55c284;
  --blank-red: #ee7a73;
  --blank-plain: #6b6d7b;
  --scrim: rgb(0 0 0 / 60%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
  --shadow-pop: 0 4px 12px rgb(0 0 0 / 40%), 0 16px 40px rgb(0 0 0 / 35%);
}

/* ------------------------------------------------------------------ База -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Широкая таблица внутри .table-wrap листается своей прокруткой. Но у
     Chromium html.scrollWidth раздувается её шириной, и колесо мыши боком
     листает страницу в пустоту. overflow-x:hidden на html эту фантомную
     прокрутку убирает, не пряча ничего видимого. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Цифры выравниваются по разрядам: СНИЛС, даты и количества читаются столбиком. */
.tnum,
td,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-2xl); letter-spacing: -0.015em; line-height: 1.15; }
h2 { font-size: var(--text-lg); line-height: 1.25; }
h3 { font-size: var(--text-base); line-height: 1.35; }

p { margin: 0 0 var(--space-3); }

/* Атрибут hidden должен побеждать display из классов: иначе спрятанная
   плашка или карточка остаётся на экране. */
[hidden] { display: none !important; }

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.muted { color: var(--text-secondary); }
.hint { font-size: var(--text-sm); color: var(--text-secondary); }
.dash { color: var(--text-tertiary); }
.nowrap { white-space: nowrap; }

code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- Оболочка и меню -- */

/* Слева навигация на всю высоту, справа рабочая область. Фон колонки меню
   рисуем градиентом сетки, чтобы он тянулся на всю высоту страницы, а не
   обрывался там, где кончается содержимое. */
.app {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
  overflow-x: clip;
  background: linear-gradient(90deg, var(--surface) calc(var(--sidebar) - 1px),
    var(--border) calc(var(--sidebar) - 1px) var(--sidebar), transparent var(--sidebar));
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.side__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  color: var(--text);
}

.side__brand:hover { text-decoration: none; }

.side__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-contrast);
  font: 700 18px/1 var(--font-head);
}

.side__title {
  font: 600 15px/1.2 var(--font-head);
}

.side__title small {
  display: block;
  font: 400 12px/1.3 var(--font-ui);
  color: var(--text-tertiary);
}

.side__new { margin: 0 0 14px; }

.side__nav { display: grid; gap: 4px; }

.side__label {
  margin: 14px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.nav-i {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  font-size: 15px;
  background: none;
  border: 0;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.nav-i svg { width: 20px; height: 20px; flex: none; }

.nav-i:hover {
  background: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
}

.nav-i[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-i .count {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--chip);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.nav-i .count--alert {
  background: var(--danger);
  color: var(--accent-contrast);
}

.side__foot {
  margin-top: auto;
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Меню пользователя раскрывается вверх: оно стоит в самом низу колонки. */
.usermenu { position: relative; }

.usermenu > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { background: var(--surface-hover); }

.side__ava {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.side__who { min-width: 0; line-height: 1.3; }
.side__who b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-weight: 500; overflow: hidden; overflow-wrap: anywhere; }
.side__who small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }

.menu {
  position: absolute;
  z-index: 30;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

.usermenu .menu { left: 0; right: 0; bottom: calc(100% + 6px); }

.menu a,
.menu button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.menu a:hover,
.menu button:hover { background: var(--surface-hover); text-decoration: none; }

.menu small {
  display: block;
  margin-top: 1px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 400;
}

.menu .menu__danger { color: var(--danger); }

.main { min-width: 0; }

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 40px 72px;
}

.page > * + * { margin-top: var(--space-5); }
.page > .crumbs + * { margin-top: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.crumbs a { color: var(--text-secondary); }

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.head__meta {
  margin: 6px 0 0;
  color: var(--text-secondary);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.page-head__count {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: var(--shadow-card);
}

.card__body { padding: 24px 28px; }
.card + .card { margin-top: var(--space-5); }

.card__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.card__hint {
  margin-bottom: var(--space-5);
  max-width: 70ch;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.stack > * + * { margin-top: var(--space-5); }

/* Выпадающее «Ещё действия» и меню пользователя закрываются щелчком мимо
   и Escape: см. встроенный скрипт base.html. */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu .menu { right: 0; top: calc(100% + 6px); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: 500 var(--text-sm)/1 var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.btn:hover { background: var(--surface-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Главная кнопка экрана. Синяя в рабочей области ровно одна. */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 1px 2px rgb(36 83 214 / 25%), inset 0 1px 0 rgb(255 255 255 / 14%);
}

.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--lg {
  min-height: 50px;
  padding: 0 22px;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: 12px;
}

.btn--block,
.btn--wide { width: 100%; }

.btn--quiet,
.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
}

.btn--quiet:hover,
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn--outline {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--danger {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}

.btn--danger:hover { background: var(--danger); border-color: var(--danger); color: var(--accent-contrast); }

.btn--icon { width: 40px; padding: 0; }

/* Выключенная кнопка. Причину пишем текстом рядом (.btn-note), а не в title:
   подсказка по наведению недоступна ни с клавиатуры, ни на планшете. */
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-note {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}

.btn.is-loading { color: transparent; position: relative; pointer-events: none; }

.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: var(--accent-contrast) transparent var(--accent-contrast) var(--accent-contrast);
  animation: spin 0.7s linear infinite;
}

.btn:not(.btn--primary).is-loading::after {
  border-color: var(--text-secondary) transparent var(--text-secondary) var(--text-secondary);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ Подсказки -- */

/* «?» у поля, заголовка или колонки. Текст лежит в HTML рядом с кнопкой:
   он виден тестам и скринридеру, а JS только открывает и закрывает. */
.tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.tip__btn {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font: 600 12px/1 var(--font-ui);
  cursor: help;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.tip__btn:hover,
.tip[data-open] .tip__btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* Всплывающий текст «?» - fixed: его не обрезает ни прокрутка таблицы, ни
   карточка, и он не раздувает ширину страницы. Место считает hints.js от
   кнопки: по центру под ней, у края экрана сдвигается, внизу экрана
   откидывается вверх. */
.tip__pop {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: min(320px, calc(100vw - 24px));
  transform: translateY(4px);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--tip-bg);
  color: var(--tip-fg);
  font: 400 var(--text-sm)/1.45 var(--font-ui);
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.tip__pop::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--arrow-x, 50%);
  width: 10px;
  height: 10px;
  background: var(--tip-bg);
  transform: translateX(-50%) rotate(45deg);
}

/* Мостик через зазор между кнопкой и текстом: иначе при движении мыши вниз
   подсказка гаснет раньше, чем курсор до неё дошёл. */
.tip__pop::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.tip__pop.is-above::before { top: auto; bottom: -5px; }
.tip__pop.is-above::after { top: auto; bottom: -14px; }

.tip__pop b { color: #fff; }
.tip__pop a { color: var(--tip-link, #9db4ff); }

.tip[data-open] .tip__pop,
.tip:hover .tip__pop,
.tip:focus-within .tip__pop {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Подсказка у кнопки без «?»: data-hint, чистый CSS, через 250 мс наведения. */
[data-hint] { position: relative; }

[data-hint]::after {
  content: attr(data-hint);
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 280px;
  transform: translate(-50%, 4px);
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--tip-bg);
  color: var(--tip-fg);
  font: 400 13px/1.4 var(--font-ui);
  white-space: normal;
  text-align: left;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--ease) 0.25s, transform 0.16s var(--ease) 0.25s;
}

[data-hint]:hover::after,
[data-hint]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- Плашки -- */

.callout {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 2px 14px;
  align-items: start;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}

.callout__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 700;
}

.callout__icon svg { width: 20px; height: 20px; }
.callout__title { margin: 0; font-weight: 600; }
.callout__body { margin: 0; grid-column: 2; color: var(--text-secondary); }
.callout__body + .callout__body { margin-top: 6px; }
.callout__action { grid-row: 1 / span 2; grid-column: 3; align-self: center; }

.callout--danger { background: var(--danger-soft); border-color: var(--danger-line); }
.callout--danger .callout__icon { background: var(--danger); color: var(--accent-contrast); }
.callout--warn { background: var(--warning-soft); border-color: var(--warning-line); }
.callout--warn .callout__icon { background: var(--warning); color: var(--accent-contrast); }
.callout--info { background: var(--accent-soft); border-color: var(--accent-line); }
.callout--info .callout__icon { background: var(--accent); color: var(--accent-contrast); }
.callout--ok { background: var(--success-soft); border-color: var(--success-line); }
.callout--ok .callout__icon { background: var(--success); color: var(--accent-contrast); }

/* Старые плашки: ошибки форм и «что-то пошло не так» на экранах, которые
   ещё не переехали на .callout. Те же цвета, тот же вид. */
.form-error,
.form-notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid transparent;
}

.form-error { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.form-notice { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning-ink); }

/* Результат выпуска: цвет задаёт data-kind (ok / error), текст пишет скрипт. */
[data-issue-result] { margin: 0; white-space: pre-line; }
[data-issue-result][data-kind="ok"] { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
[data-issue-result][data-kind="error"] { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }

/* ---------------------------------------------------------------- Метки -- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.pill--danger { background: var(--danger-soft); color: var(--danger); }
.pill--warn { background: var(--warning-soft); color: var(--warning); }
.pill--ok { background: var(--success-soft); color: var(--success); }
.pill--info { background: var(--accent-soft); color: var(--accent); }
.pill--grey { background: var(--chip); color: var(--text-secondary); }

/* Счётчики в старых списках замечаний. */
.badge {
  display: inline-flex;
  align-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--chip);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.badge--blocker { background: var(--danger-soft); color: var(--danger); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--info { background: var(--accent-soft); color: var(--accent); }
.badge--success { background: var(--success-soft); color: var(--success); }

/* ----------------------------------------- Маршрут группы (опознавательный) -- */

/* Четыре станции: проверка списка, файл для СДОПРОФ, загрузка в СДОПРОФ,
   выпуск документов. Видны на каждом экране группы. */
.route { display: grid; grid-template-columns: repeat(4, 1fr); }
.route__caption { margin: 0 0 14px; }
.stage-legend { display: none; }

.route__step {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--text-secondary);
}

.route__step::before {
  content: "";
  position: absolute;
  top: 19px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  height: 3px;
  border-radius: 3px;
  background: var(--track);
}

.route__step:last-child::before { display: none; }
.route__step--done::before { background: var(--success); }

.route__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--dot-border);
  color: var(--text-tertiary);
  font: 700 15px/1 var(--font-head);
}

.route__dot svg { width: 20px; height: 20px; }

.route__step--done .route__dot { background: var(--success); border-color: var(--success); color: var(--accent-contrast); }
.route__step--now .route__dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }

/* Пульсация текущей станции: только opacity и transform. */
.route__step--now .route__dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: ping 2.4s var(--ease) infinite;
}

.route__step--stop .route__dot { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 0 6px var(--danger-soft); }

.route__link { color: inherit; }
.route__link:hover { color: var(--accent); }
.route__name { font-weight: 600; color: var(--text); font-size: var(--text-sm); }
.route__step--todo .route__name { color: var(--text-secondary); font-weight: 500; }
.route__state { font-size: var(--text-xs); line-height: 1.35; max-width: 190px; }
.route__step--stop .route__state { color: var(--danger); font-weight: 500; }
.route__step--now .route__state { color: var(--accent); font-weight: 500; }

@keyframes ping {
  0% { opacity: 0.55; transform: scale(0.9); }
  70%, 100% { opacity: 0; transform: scale(1.25); }
}

/* Мини-маршрут в строке списка: четыре полоски. */
.mini { display: inline-flex; gap: 3px; vertical-align: middle; }
.mini i { width: 18px; height: 6px; border-radius: 3px; background: var(--track); }
.mini i.d { background: var(--success); }
.mini i.n { background: var(--accent); }
.mini i.s { background: var(--danger); }

/* Панель «Что сделать сейчас»: цвет полосы слева = состояние. */
.next {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 32px;
  align-items: center;
  padding: 24px 28px 24px 32px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.next--stop::before { background: var(--danger); }
.next--ok::before { background: var(--success); }

.next__eyebrow {
  margin: 0 0 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.next--stop .next__eyebrow { color: var(--danger); }
.next--ok .next__eyebrow { color: var(--success); }
.next__title { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.01em; }
.next__text { margin: 8px 0 0; color: var(--text-secondary); max-width: 62ch; }
.next__note { margin: 10px 0 0; max-width: 62ch; }
.next__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 260px; }
.next__actions form { display: contents; }

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

/* Горизонтальная прокрутка нужна только на узких экранах: на широких overflow
   создаёт контейнер прокрутки и ломает липкие элементы внутри. */
.table-wrap {
  position: relative; /* скрытые подписи (visually-hidden) не уезжают за край и не раздувают страницу */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: 12px 16px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

td {
  padding: var(--row-padding-y) 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }

tbody tr.is-link { cursor: pointer; transition: background var(--duration-fast) var(--ease); }
tbody tr.is-link:hover,
tbody tr.is-link:focus-visible { background: var(--surface-hover); outline: none; }
tbody tr.is-link:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

tr.row--problem { background: var(--danger-wash); }
tr.row--problem td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.row--muted td { color: var(--text-tertiary); }

.cell-name { font-weight: 500; }

.cell-sub {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 400;
}

.missing { color: var(--danger); font-weight: 500; white-space: nowrap; }

.cell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.app-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* Пустое состояние: пиктограмма, что это за место и одна кнопка. */
.empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--text-secondary);
}

.empty p { margin: 0; max-width: 56ch; }
.empty p + p { margin-top: var(--space-2); }

.empty__ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-3);
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent);
}

.empty__ic svg { width: 30px; height: 30px; }

.empty__title {
  margin-bottom: var(--space-1);
  color: var(--text);
  font: 600 var(--text-lg)/1.25 var(--font-head);
}

.empty .btn { margin-top: var(--space-3); }

/* ------------------------------------------------------------ Поля форм -- */

.field { display: grid; gap: 6px; align-content: start; min-width: 0; }

label,
.label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field > label,
.field > .label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.req { color: var(--danger); margin-left: 2px; }

input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

textarea { padding: 10px 12px; }
input[type="file"] { padding: 8px 12px; }

input::placeholder,
textarea::placeholder { color: var(--text-tertiary); opacity: 1; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input:disabled,
select:disabled,
textarea:disabled { opacity: 0.55; cursor: not-allowed; }

input.is-filled { border-color: var(--success-line); }
input.is-missing,
select.is-missing { border-color: var(--danger-line); background: var(--danger-wash); }
input.is-bad,
select.is-bad,
textarea.is-bad { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

input[type="checkbox"],
input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); }

.field__msg { margin: 0; font-size: var(--text-sm); display: flex; gap: 6px; align-items: center; }
.field__msg--ok { color: var(--success); }
.field__msg--bad { color: var(--danger); }

/* Короткая строка-пояснение под полем; длинное уходит в «?». */
.field__hint,
.field__note {
  display: block;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }

.grid-form {
  display: grid;
  gap: var(--space-4) var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.grid-form__section {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.grid-form__section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.grid-form__hint {
  grid-column: 1 / -1;
  max-width: 70ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.field--action { align-content: end; }

fieldset {
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

legend {
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Переключатель-сегменты: пол «Мужской / Женский». */
.seg { display: inline-flex; padding: 3px; border-radius: var(--radius-md); background: var(--chip); gap: 3px; }
.seg label { position: relative; font-weight: 500; }
.seg input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 8px 18px; border-radius: 8px; color: var(--text-secondary); }
.seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgb(20 24 40 / 12%); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }

/* Раскрывашка «Подробнее». */
details.more { border-top: 1px dashed var(--border-strong); padding-top: 12px; }

details.more > summary {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}

details.more > summary::-webkit-details-marker { display: none; }

details.more > summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--chip);
  font-weight: 700;
}

details.more[open] > summary::before { content: "−"; }
details.more > :not(summary) { margin-top: 12px; }

/* Для разработчика: то, что оператору не нужно, но убирать нельзя. */
details.dev { margin-top: var(--space-4); }
details.dev > summary { cursor: pointer; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }

/* ------------------------------------------------------------ Окна-диалоги -- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
}

.scrim[data-open] { display: grid; animation: fade 0.2s var(--ease); }

.dialog {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow-pop);
  animation: rise 0.26s var(--ease);
}

/* Заголовок и кнопки закреплены, прокручивается только середина: так и
   название окна, и кнопка «выпустить» видны даже на низком экране. */
.dialog__head { flex: none; padding: 24px 28px 0; }
.dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 28px 8px; }
.dialog__foot { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 16px 28px 24px; }

.sum { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; margin: 0; }
.sum dt { color: var(--text-secondary); }
.sum dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Тост -- */

/* «Что дальше» после действия: показывается один раз на следующей странице. */
.toast {
  position: fixed;
  z-index: 70;
  right: 24px;
  top: 20px;
  width: 400px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 2px 12px;
  padding: 16px 16px 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--tip-bg);
  color: var(--tip-fg);
  box-shadow: var(--shadow-pop);
  animation: slide 0.32s var(--ease);
}

.toast__ic {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--success);
  color: var(--accent-contrast);
  font-weight: 700;
}

.toast b { color: #fff; font-weight: 600; }
.toast p { margin: 0; color: #b8bdcc; font-size: var(--text-sm); grid-column: 2; }
.toast .btn { grid-column: 2; justify-self: start; margin-top: 10px; }

.toast__x {
  grid-row: 1;
  grid-column: 3;
  background: none;
  border: 0;
  color: #8b90a0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

@keyframes slide { from { opacity: 0; transform: translateY(-10px); } }

/* ------------------------------------------------------------------- Тур -- */

.tour-hole {
  position: fixed;
  z-index: 80;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgb(15 18 28 / 55%);
  transition: left 0.3s var(--ease), top 0.3s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease);
  pointer-events: none;
}

.tour-pop {
  position: fixed;
  z-index: 81;
  width: min(340px, calc(100vw - 32px));
  padding: 20px 22px 16px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  transition: top 0.3s var(--ease), left 0.3s var(--ease);
}

.tour-pop__step {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tour-pop h3 { margin: 6px 0; font-size: var(--text-lg); }
/* Крестик закрывает тур этого экрана (N5); «Пропустить всё» - для всех. */
.tour-pop__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.tour-pop__close:hover { background: var(--line-soft); color: var(--text); }
.tour-pop p { color: var(--text-secondary); font-size: var(--text-sm); }
.tour-pop__text { margin: 0; }
.tour-pop__foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-pop__dots { display: flex; gap: 5px; margin-right: auto; }
.tour-pop__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot-border); }
.tour-pop__dots i.on { background: var(--accent); width: 18px; border-radius: 3px; }

/* backwards, не both: после анимации transform не остаётся, иначе вложенное position: fixed (окно подтверждения в форме выпуска) считается от карточки, а не от экрана. */
.reveal { animation: rise 0.32s var(--ease) backwards; }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

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

/* === экраны === */

/* Окно «Как работать»: те же четыре шага, что на главной. */
.howto-list {
  display: grid;
  gap: 12px;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: h;
}

.howto-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  counter-increment: h;
}

.howto-list li::before {
  content: counter(h);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font: 700 14px/1 var(--font-head);
}


/* ---------------------------------------------------- Выпуск документов -- */

.issue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-6);
  align-items: start;
}

.issue > * { min-width: 0; }

.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 16px; }
.step__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.step__head { display: flex; align-items: center; gap: 4px; min-height: 36px; }
.step__title { display: flex; align-items: center; gap: 4px; font-size: var(--text-lg); }
.step__body { grid-column: 2; margin-top: var(--space-3); min-width: 0; }
.step__body > .callout, .step__body > .tray { margin-top: var(--space-3); }
.step + .step { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.field__head { display: flex; align-items: center; gap: 2px; }
.field__head .req { margin-left: 2px; }

.group-label {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: var(--space-4); }

.tile {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}

.tile:hover { border-color: var(--text-tertiary); transform: translateY(-1px); }
.tile[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.tile[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Плитки - галочки (выпуск набором, этап 4б): у неотмеченной пустой
   квадрат, чтобы было видно, что отметить можно несколько. */
.tile::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
}
.tile[aria-checked="true"]::after { border-color: var(--accent); border-radius: 5px; }

/* Длинное слово («Профессиональная») не заезжает под квадрат галочки и не
   рвётся посреди слова без дефиса. Перенос ставят мягкие дефисы в названии
   (фильтр soft_hyphens): словарь русского в Chrome есть не везде, и без них
   hyphens: auto молча не работает. overflow-wrap: anywhere убран нарочно: он
   разрешал ломать слово где угодно, не дожидаясь переноса. */
.tile__name { min-width: 0; font-weight: 600; padding-right: 26px; line-height: 1.3; hyphens: auto; overflow-wrap: normal; word-break: normal; }
.tile__meta { font-size: var(--text-xs); color: var(--text-secondary); }
.tile__meta .warn { color: var(--danger); font-weight: 600; }

/* Цвет бланка, на котором печатается документ (documents/blanks.py): полоска
   по левому краю плитки и подпись с цветным квадратиком. Подпись словами
   обязательна - по цвету одному бланк не опознать. */
[data-blank="blue"] { --blank: var(--blank-blue); }
[data-blank="yellow_green"] { --blank: linear-gradient(135deg, var(--blank-yg-a) 50%, var(--blank-yg-b) 50%); }
[data-blank="green"] { --blank: var(--blank-green); }
[data-blank="red_book"] { --blank: var(--blank-red); }
[data-blank="plain"] { --blank: var(--blank-plain); }
.tile[data-blank] { padding-left: 19px; }
.tile[data-blank]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--blank);
}
.blank-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
.blank-tag i { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--blank, var(--blank-plain)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%); }
[data-theme="dark"] .blank-tag i { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%); }
.tile .blank-tag { margin-top: 2px; }

/* «Что дальше» после выпуска: короткий список шагов под сообщением «Скачано». */
.whatnext { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); }
.whatnext[hidden] { display: none; }
.whatnext__title { margin: 0 0 8px; }
.whatnext__list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--text-sm); overflow-wrap: break-word; }
.whatnext__list ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.whatnext__list .blank-tag { font-size: inherit; color: var(--text); font-weight: 600; }

/* ---- Выпуск набором (этап 4б) ---- */
.tiles-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.tiles-clear { min-height: 36px; margin: 0 0 8px; padding: 0 10px; font-size: var(--text-sm); }
.tiles-clear[hidden] { display: none; }

.set-presets { margin-bottom: var(--space-4); }
.set-presets__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.set-preset {
  display: grid;
  gap: 2px;
  align-content: start;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.set-preset:hover { border-color: var(--accent); }
.set-preset[aria-pressed="true"] { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.set-preset:disabled { cursor: not-allowed; border-color: var(--border); background: var(--surface-sunken); color: var(--text-secondary); }
.set-preset__name { font-weight: 600; line-height: 1.3; }
.set-preset__meta { font-size: var(--text-xs); color: var(--text-secondary); }

.set-batch {
  margin: 0 0 var(--space-4);
  padding: 14px;
  border: 1px solid var(--warning-line);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
}
.set-batch[hidden] { display: none; }
.set-batch__title { margin: 0 0 10px; font-weight: 600; }
.set-batch .rcard:disabled { cursor: not-allowed; opacity: 0.6; }
.set-batch [data-batch-drop] { margin-top: 8px; min-height: 36px; padding: 0 10px; font-size: var(--text-sm); }

.set-note { margin: 0 0 var(--space-3); }
.set-note[hidden], [data-repeat-set][hidden] { display: none; }
.field__for { margin: 0 0 6px; font-size: var(--text-xs); font-weight: 500; color: var(--accent); }
.field__for[hidden] { display: none; }

.set-printers { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.set-printers[hidden] { display: none; }
.set-printer label { display: block; margin-bottom: 6px; }
.set-printer select { width: 100%; }

.set-numbers[hidden], .set-table-wrap[hidden] { display: none; }
.set-firsts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.set-first label,
.set-first__title { display: block; margin: 0 0 6px; font-size: var(--text-sm); font-weight: 600; }
.set-first__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.set-first__row input { flex: 1 1 140px; min-width: 0; }
.set-first__row .hint { flex: 1 1 200px; margin: 0; }
.set-first .numbers-preview { margin-top: 6px; }
.set-copy { min-height: 40px; height: auto; padding: 6px 12px; font-size: var(--text-sm); white-space: normal; text-align: left; }

.set-table-wrap { position: relative; }
.set-table th { padding: 8px 6px; white-space: normal; vertical-align: bottom; }
.set-table td { padding: 6px; }
.set-table th:first-child, .set-table td:first-child { width: 28px; padding-left: 2px; padding-right: 0; }
.set-table__kind { display: block; margin-top: 2px; font-weight: 500; color: var(--text-secondary); }
.set-table .cell-name { min-width: 9em; overflow-wrap: anywhere; }
.set-table td input { width: 100%; min-width: 5.5em; min-height: 40px; padding: 0 8px; }
/* Узко для всех колонок (считает скрипт по числу колонок): каждая строка -
   карточка слушателя с подписанными полями, без прокрутки вбок. */
.set-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.set-table--cards, .set-table--cards tbody { display: block; width: 100%; }
.set-table--cards tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.set-table--cards tbody tr:last-child { border-bottom: 0; }
.set-table--cards td { display: flex; flex-direction: column; justify-content: flex-end; padding: 0; border: 0; }
.set-table--cards td:first-child { display: none; }
.set-table--cards td.cell-name { grid-column: 1 / -1; min-width: 0; font-weight: 600; }
.set-table--cards td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); }
.set-table--cards td input { min-width: 0; min-height: 44px; }
.fix-links a { font-weight: 600; }

.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.rcard {
  display: grid;
  gap: 2px;
  padding: 14px 16px 14px 44px;
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.rcard::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
}

.rcard[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rcard[aria-checked="true"]::before { border: 5px solid var(--accent); }
.rcard b { font-weight: 600; }
.rcard span { font-size: var(--text-sm); color: var(--text-secondary); }

.printer-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 2px 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--success-line);
  border-radius: var(--radius-md);
  background: var(--success-soft);
}

.printer-card[hidden] { display: none; }
.printer-card--bad { border-color: var(--danger-line); background: var(--danger-soft); }
.printer-card__ic { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--surface); color: var(--success); }
.printer-card--bad .printer-card__ic { color: var(--danger); }
.printer-card__ic svg { width: 24px; height: 24px; }
.printer-card__name { font-weight: 600; }
.printer-card__meta { grid-column: 2; font-size: var(--text-sm); color: var(--text-secondary); }
.printer-card .btn { grid-row: span 2; grid-column: 3; }

.tray {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: center;
  margin-top: var(--space-4);
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--warning-soft);
  border: 1px solid var(--warning-line);
}

.tray[hidden] { display: none; }
.tray h3 { margin-bottom: 6px; color: var(--warning-ink); }
.tray p { margin: 0; color: var(--warning-ink); font-size: var(--text-sm); }
.tray svg { width: 100%; height: auto; display: block; }
.tray__box { fill: var(--tray-box); stroke: var(--tray-edge); }
.tray__wall { fill: var(--tray-wall); }
.tray__paper { fill: var(--tray-paper); stroke: var(--tray-paper-edge); }
.tray__lines { stroke: var(--tray-lines); fill: none; }
.tray__guide { fill: var(--accent); }
.tray__guide-line { stroke: var(--accent); fill: none; }
.tray__guide-text { fill: var(--accent); }
.tray__go { stroke: var(--success); fill: none; }
.tray__go-text { fill: var(--success); }
.tray__ink { fill: var(--warning-ink); }

.numbers-preview { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.numbers-preview b { color: var(--text); font-variant-numeric: tabular-nums; }

.blank-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--space-4) 0 0; }
.blank-tools[hidden] { display: none; }
.blank-tools .hint { flex: 1 1 260px; }

/* Таблица «Номера»: помещается в карточку на любой ширине. Колонки узкие:
   имя переносится, номера - по содержимому (регистрационный 8-10 знаков,
   номер бланка 13). Когда карточка уже 480 px, строки становятся
   карточками. Ширину меряет сама обёртка (container), а не окно: карточка
   выпуска теснее окна на ширину меню и правой колонки. */
.students-wrap { container-type: inline-size; }
.students { margin-top: var(--space-4); }
.students th { white-space: normal; vertical-align: bottom; }
.students th, .students td { padding-left: 6px; padding-right: 6px; }
.students th:first-child, .students td:first-child { width: 28px; padding-left: 2px; padding-right: 0; }
.students .cell-name { min-width: 0; overflow-wrap: anywhere; }
.students td input { min-height: 40px; padding: 0 8px; }
@media (max-width: 1024px) { .students td input { min-height: 44px; } }
.students td input[data-reg-input] { width: 8em; }
.students td input[data-blank-input] { width: 10em; }

@container (max-width: 479px) {
  .students thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .students, .students tbody, .students td { display: block; width: 100%; }
  .students tr { display: flex; flex-direction: column; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .students tbody tr:last-child { border-bottom: 0; }
  .students td { display: flex; align-items: center; gap: 8px; padding: 3px 0; border: 0; white-space: normal; }
  .students td::before { content: attr(data-label); flex: 0 0 96px; color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 600; }
  .students td[data-label=""]::before { display: none; }
  .students td:first-child { display: none; }
  .students td.cell-name { order: -1; font-size: var(--text-base); }
  .students td input { flex: 1; width: auto; min-width: 0; min-height: 44px; }
  .students td input[data-reg-input], .students td input[data-blank-input] { width: auto; }
}

.aside { position: sticky; top: 28px; }

.check { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.check li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: var(--text-sm);
}

.check li .m {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--dot-border);
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.check li.ok .m { background: var(--success); border-color: var(--success); color: var(--accent-contrast); }
.check li.bad .m { border-color: var(--danger); color: var(--danger); }
.check li.bad { background: var(--danger-wash); }
.check li.warn .m { border-color: var(--warning); color: var(--warning); }
.check li.warn { background: var(--warning-soft); }
.check li.warn .k { color: var(--text); }
.check li .links { display: block; margin-top: 2px; font-size: var(--text-xs); }
.check li .links a { margin-right: 10px; }
.check li button { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.check li .k { display: block; }
.check li .v { display: block; color: var(--text-secondary); font-size: var(--text-xs); overflow-wrap: anywhere; }
.check li.ok .k { color: var(--text); }

.aside__foot { margin-top: var(--space-4); display: grid; gap: 8px; }
.aside__left { margin: 0; font-size: var(--text-sm); color: var(--danger); text-align: center; }
.aside__left.ok { color: var(--success); }
[data-issue-result][data-kind="busy"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.after { counter-reset: a; list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.after li { counter-increment: a; display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: var(--text-sm); }

.after li::before {
  content: counter(a);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .issue { grid-template-columns: 1fr; }
  .aside { position: static; }
  .tray { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .step { display: block; }
  .step__n { display: none; }
  .printer-card { grid-template-columns: 1fr auto; }
  .printer-card__ic { display: none; }
  .printer-card__meta { grid-column: 1; }
  .printer-card .btn { grid-column: 2; grid-row: 1 / span 2; }
}

/* ------------------------------------------------------ Карточка группы -- */

.fyi {
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.fyi > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

.fyi > summary::-webkit-details-marker { display: none; }
.fyi ul { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }

.fyi li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

.fyi li p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

.table-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 18px 24px 6px; }
.table-note { margin: 0; padding: 12px 24px 18px; }
.cell-end { text-align: right; white-space: nowrap; }
td.tnum { white-space: nowrap; }
.head > .row { flex: none; flex-wrap: nowrap; }

/* «Исправить» в строке с ошибкой: заметная, но не синяя: главная кнопка
   экрана в панели «Что сделать сейчас» ровно одна. */
.btn--fix { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.btn--fix:hover { background: var(--danger); border-color: var(--danger); color: var(--accent-contrast); }

.check-line { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--space-4); font-weight: 400; }
.check-line input { margin-top: 2px; flex: none; }

.dialog form { display: contents; }

@media (max-width: 760px) {
  .col-opt { display: none; }
  .table-head, .table-note { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------- Новая группа -- */

.drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 56px 32px;
  border: 2px dashed var(--accent-line);
  border-radius: 18px;
  background: var(--surface-sunken);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.drop:hover,
.drop[data-over] { border-color: var(--accent); background: var(--accent-soft); }
.drop[data-over] { transform: scale(1.01); }
.drop:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.drop__ic { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 20px; background: var(--surface); color: var(--accent); box-shadow: var(--shadow-card); }
.drop__ic svg { width: 34px; height: 34px; }
.drop__title { font: 600 var(--text-xl)/1.2 var(--font-head); }
.drop__pick { color: var(--accent); font-weight: 600; }
.drop--busy { cursor: default; }
.drop--busy:hover { border-color: var(--accent-line); background: var(--surface-sunken); }

.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 24px; }

.kind {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 2px 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}

.kind__ext { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 52px; border-radius: 6px 14px 6px 6px; background: var(--surface); border: 1px solid var(--border-strong); font: 700 11px var(--font-ui); color: var(--accent); }
.kind__ext--x { color: var(--success); }
.kind b { font-size: var(--text-sm); }
.kind span { font-size: 13px; color: var(--text-secondary); }

.bar { width: min(420px, 100%); height: 8px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; }
.bar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--accent); animation: bar 1.4s var(--ease) infinite; }
@keyframes bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.busy-steps { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; text-align: left; font-size: var(--text-sm); }
.busy-steps li::before { content: "✓"; margin-right: 8px; color: var(--success); font-weight: 700; }
.busy-steps li.wait::before { content: "…"; color: var(--accent); }
/* Несколько файлов в одну группу: какие именно разбираются (листы учёта, 21.10.2026). */
.busy-files { max-height: 180px; overflow-y: auto; margin: 10px 0 0; padding: 0 0 0 22px; text-align: left; font-size: var(--text-sm); color: var(--text-secondary); }
.refused-files { margin: 0 0 8px; padding-left: 20px; }
.refused-files li + li { margin-top: 4px; }

/* ---------------------------------------------------- Правка слушателя -- */

.edit { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.photo { position: sticky; top: 24px; }

.frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 16px;
  border: 2px dashed var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
  font-weight: 400;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.frame:hover,
.frame:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.frame input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.frame svg { display: block; width: 44px; height: 44px; margin: 0 auto 8px; color: var(--text-tertiary); }
.frame__empty b { display: block; color: var(--text); }
.frame--has { padding: 0; border-style: solid; border-color: var(--border); }
.frame__img { width: 100%; height: 100%; object-fit: cover; }

.frame__cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px;
  background: rgb(15 18 28 / 62%);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.frame--has:hover .frame__cta,
.frame--has:focus-within .frame__cta { opacity: 1; }
.frame:not(.frame--has)::after { content: "3 × 4"; position: absolute; right: 10px; bottom: 8px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); }

.sec { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sec > h2 { margin-bottom: 16px; }
.sec__head { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.sec__head h2 { margin: 0; }

.problem { padding: 12px 14px; margin: -12px 0 0; border-radius: 12px; background: var(--danger-soft); border: 1px solid var(--danger-line); }
.problem .label { color: var(--danger); }

.bar-bottom {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.bar-bottom__note { margin-left: auto; max-width: 42ch; }
.pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.pager .btn--icon { color: var(--text); }

@media (max-width: 960px) {
  .edit { grid-template-columns: 1fr; }
  .photo { position: static; max-width: 260px; }
  .kinds { grid-template-columns: 1fr; }
  .bar-bottom { padding: 12px 16px; }
  .bar-bottom__note { margin-left: 0; max-width: none; }
  .drop { padding: 36px 16px; }
}

/* ------------------------------------------------- Загрузка в СДОПРОФ -- */

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.layout > * { min-width: 0; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-item { display: grid; grid-template-columns: 40px 1fr; gap: 0 18px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.todo-item:last-child { border-bottom: 0; }
.todo-item__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--dot-border); font-weight: 700; color: var(--text-tertiary); }
.todo-item--done .todo-item__n { background: var(--success); border-color: var(--success); color: var(--accent-contrast); }
.todo-item--now .todo-item__n { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.todo-item h3 { font-size: var(--text-lg); line-height: 40px; }
.todo-item--done h3 { color: var(--text-secondary); font-weight: 500; }
.todo-item__body { grid-column: 2; color: var(--text-secondary); }
.todo-item__body p { margin: 0; }
.todo-item__body p + p { margin-top: 6px; }
.todo-item__body .row { margin-top: 12px; }
.big-num { font: 600 40px/1 var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; }

.facts { display: grid; gap: 16px; margin: 0; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: var(--text-sm); color: var(--text-secondary); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sep { margin: 18px 0; border: 0; border-top: 1px solid var(--border); }

.finish {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: var(--space-5);
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}

.finish p { margin: 0; }

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .finish { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .todo-item { grid-template-columns: 32px 1fr; gap: 0 12px; }
  .todo-item__n { width: 32px; height: 32px; }
  .todo-item h3 { font-size: var(--text-base); line-height: 32px; }
}

/* --------------------------------------------------- Группы в работе -- */

.howto { padding: var(--space-5) var(--space-6); }
.howto__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: var(--space-4); }
.howto ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: h; }
.howto li { position: relative; padding: 0 20px 0 0; counter-increment: h; }

.howto li::before {
  content: counter(h);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.howto li::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 42px;
  right: 12px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent-line) 0 6px, transparent 6px 11px);
}

.howto li:last-child::after { display: none; }
.howto b { display: block; margin-bottom: 4px; }
.howto li span { font-size: var(--text-sm); color: var(--text-secondary); }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a { padding: 6px 14px; border-radius: var(--radius-full); color: var(--text-secondary); font-weight: 500; font-size: var(--text-sm); }
.tabs a:hover { text-decoration: none; background: var(--chip); }
.tabs a[aria-current] { background: var(--text); color: var(--bg); }
.tabs a[aria-current]:hover { background: var(--text); }
.page > .tabs { margin-top: var(--space-5); }

.col-name { width: 34%; }
.stage-cell { display: grid; gap: 6px; }
.stage-cell small { font-size: var(--text-sm); color: var(--text-secondary); }
.next-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.next-link--danger { color: var(--danger); }

/* --------------------------------------------------------------- Вход -- */

.login { display: grid; grid-template-columns: minmax(420px, 1fr) 1.1fr; min-height: 100vh; }
.login--single { grid-template-columns: 1fr; }
.login__form { display: grid; place-items: center; padding: 40px; background: var(--surface); }
.login__box { width: min(380px, 100%); }
.theme-btn.login__theme { position: fixed; top: 12px; right: 12px; z-index: 5; background: var(--surface); border: 1px solid var(--border); }
.login__brand { padding: 0 0 40px; }
.login__box h1 { margin-bottom: 8px; }
.login__fields { display: grid; gap: 18px; margin-top: 28px; }
.login__note { margin-top: 28px; font-size: var(--text-sm); }

.pw { position: relative; }
.pw input { padding-right: 96px; }

.pw button {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: 500 13px var(--font-ui);
  cursor: pointer;
}

.pw button:hover { background: var(--surface-hover); }
.caps { color: var(--warning); }

.login__art {
  display: grid;
  align-content: center;
  padding: 56px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, var(--accent-soft) 0%, transparent 55%), var(--surface-sunken);
}

.login__art h2 { max-width: 16ch; font-size: var(--text-2xl); line-height: 1.2; }
.login__art > p { margin-top: 12px; max-width: 46ch; color: var(--text-secondary); }
.art-route { display: grid; gap: 14px; max-width: 460px; margin-top: 40px; }

.art-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  animation: rise 0.5s var(--ease) both;
}

.art-step:nth-child(2) { animation-delay: 0.08s; margin-left: 24px; }
.art-step:nth-child(3) { animation-delay: 0.16s; margin-left: 48px; }
.art-step:nth-child(4) { animation-delay: 0.24s; margin-left: 72px; }
.art-step i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font: 700 17px var(--font-head); font-style: normal; }
.art-step b { display: block; }
.art-step span { font-size: var(--text-sm); color: var(--text-secondary); }

@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__art { display: none; }
  .login__form { padding: 28px 20px; min-height: 100vh; align-items: start; }
  .howto ol { grid-template-columns: 1fr; gap: 14px; }
  .howto li::after { display: none; }
  .howto { padding: var(--space-4); }
  .col-name { width: auto; }
}

/* ---------------------------------------------------------- Справочники -- */

.ref-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.ref-tabs a {
  margin-bottom: -1px;
  padding: 10px 12px;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.ref-tabs a:hover { color: var(--text); text-decoration: none; }
.ref-tabs a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }

/* Без скриптов блоки справочника лежат друг под другом; со скриптом
   показывается выбранный. */
.panels > [data-panel] + [data-panel] { margin-top: var(--space-6); }
.js-tabs > [data-panel] { display: none; }
.js-tabs > [data-panel].on { display: block; }
.js-tabs > [data-panel] + [data-panel] { margin-top: 0; }

.fmt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }

.fmt {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.fmt--warn { border-color: var(--warning-line); background: var(--warning-soft); }
.fmt__name { font: 600 var(--text-base)/1.3 var(--font-head); }
.fmt__printer { font-size: var(--text-sm); color: var(--text-secondary); }
.fmt__st { display: flex; gap: 6px; flex-wrap: wrap; }

.wizard { counter-reset: w; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.wz {
  position: relative;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  counter-increment: w;
}

.wz::before {
  content: counter(w);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font: 700 14px var(--font-head);
}

.wz h3 { margin-bottom: 6px; }
.wz .hint { margin-bottom: 0; }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.calc output { display: block; min-height: 1.4em; margin-top: 2px; font-size: 13px; color: var(--text-tertiary); }
.calc output.on { color: var(--accent); font-weight: 600; }

.dev-box > summary { cursor: pointer; color: var(--text-secondary); font-weight: 500; }
.dev-box__in { border-top: 1px solid var(--border); }
.dev-more { margin-top: var(--space-4); }
.dev-more > summary { cursor: pointer; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }

@media (max-width: 1100px) {
  .wizard { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .calc { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- Справочники -- */

.split {
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.printer-now {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  text-align: right;
}

.printer-now__value {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.printer-now__meta {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.known summary {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.history__family {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.history__family:first-of-type { margin-top: var(--space-4); }

/* Название строки плана правит методист прямо в таблице, поэтому поле
   занимает всю ячейку: обрезанный текст здесь и правят вслепую. */
table input[type="text"] {
  width: 100%;
  min-height: 38px;
}

.sources {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.sources li { margin-bottom: var(--space-1); }

.plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

details.card summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
}

details.card summary::-webkit-details-marker { color: var(--text-tertiary); }

.stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.photo-preview {
  display: block;
  width: 150px;
  height: 200px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

/* Старые списки замечаний: остаются на экранах, где ещё нет .callout. */
.issues { margin-bottom: var(--space-5); }
.issues__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.issues ul { margin: 0; padding: 0; list-style: none; }

.issues li {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--border-strong);
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
}

.issues--blocker li { border-left-color: var(--danger); }
.issues--warning li { border-left-color: var(--warning); }
.issues--info li { border-left-color: var(--accent); }

/* ------------------------------------------------------- Страница ошибки -- */

.error-page {
  display: grid;
  justify-items: center;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.error-page__ic {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-4);
  border-radius: 20px;
  background: var(--danger-soft);
  color: var(--danger);
}

.error-page__ic svg { width: 34px; height: 34px; }

.error-page__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.error-page__message {
  max-width: 56ch;
  margin: 0 auto var(--space-6);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.error-page__message:has(+ .error-page__hint) { margin-bottom: var(--space-3); }

.error-page__hint {
  max-width: 60ch;
  margin: 0 auto var(--space-6);
  color: var(--text-secondary);
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ------------------------------------------------------------ Адаптив -- */

/* ------------------------------------- Верхняя панель, меню, тема, адаптив -- */

/* Верхняя панель, затемнение и крестик меню нужны только на узких экранах. */
.topbar { display: none; }
.nav-scrim { display: none; }
.side__close { display: none; }

.side__user { display: flex; align-items: center; gap: 4px; }
.side__user .usermenu { flex: 1; min-width: 0; }

/* Переключатель темы виден всегда. Показывает, куда переключит: луна в
   светлой теме, солнце в тёмной. */
.theme-btn { flex: none; width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: transparent; color: var(--text-secondary); }
.theme-btn:hover { background: var(--surface-hover); color: var(--text); }
.theme-btn svg { width: 22px; height: 22px; }
.theme-btn svg:nth-of-type(2) { display: none; }
[data-theme="dark"] .theme-btn svg:nth-of-type(1) { display: none; }
[data-theme="dark"] .theme-btn svg:nth-of-type(2) { display: block; }

/* Галочка на плитке: на светлом акценте тёмная, на тёмном светлая. */
[data-theme="dark"] .tile[aria-checked="true"]::after {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e11' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* До 1280 страница чуть теснее, правая колонка выпуска уже. */
@media (max-width: 1280px) {
  .page { padding: 24px 28px 64px; }
  .issue { gap: var(--space-5); grid-template-columns: minmax(0, 1fr) 320px; }
  .layout { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-5); }
}

/* До 1180 выпуск в одну колонку: список «Перед выпуском» под формой, а
   кнопка выпуска приклеена к низу экрана и видна всегда. */
@media (max-width: 1180px) {
  .issue { grid-template-columns: 1fr; }
  .aside { position: static; padding-bottom: 104px; }

  .aside__foot {
    position: fixed;
    left: var(--sidebar);
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0;
    padding: 10px 24px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgb(20 24 40 / 10%);
  }

  .aside__foot .btn { flex: 1 1 260px; }
  .aside__foot .aside__left { flex: 0 1 auto; margin: 0; }
  .howto ol { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .howto li:nth-child(2)::after { display: none; }
}

/* До 1024 левое меню становится выезжающей панелью. */
@media (max-width: 1023px) {
  .app { display: block; background: none; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .topbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-right: auto;
    color: var(--text);
    font: 600 15px/1.2 var(--font-head);
  }

  .topbar__brand:hover { text-decoration: none; }
  .topbar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__new { flex: none; padding: 0 14px; }
  .topbar .btn--icon { color: var(--text-secondary); border-color: transparent; background: transparent; }
  .topbar .btn--icon:hover { background: var(--surface-hover); color: var(--text); }

  .nav-scrim { position: fixed; inset: 0; z-index: 55; display: block; background: var(--scrim); }
  .nav-scrim[hidden] { display: none !important; }
  body.nav-open { overflow: hidden; }

  .side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: min(320px, 86vw);
    height: 100vh;
    height: 100dvh;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.26s var(--ease), visibility 0s linear 0.26s;
  }

  body.nav-open .side { transform: none; visibility: visible; transition: transform 0.26s var(--ease); }
  .side__close { display: inline-flex; align-self: flex-end; margin-bottom: -4px; color: var(--text-secondary); border-color: transparent; background: transparent; }
  .side__new { display: none; }
  .aside__foot { left: 0; padding-left: 16px; padding-right: 16px; }
}

/* Касаемые элементы не меньше 44 px: всё, что бывает под пальцем. */
@media (max-width: 1024px) {
  .btn { min-height: 44px; }
  .btn--icon { width: 44px; }
  .nav-i { min-height: 48px; }
  .tip__btn { position: relative; }
  .tip__btn::before { content: ""; position: absolute; inset: -12px; }
  .tabs a { padding: 12px 16px; }
  .ref-tabs a { padding: 13px 14px; }
  .seg span { padding: 11px 18px; }
  .menu a, .menu button { min-height: 44px; padding: 12px; }
  details.more > summary { min-height: 44px; }
  .check-line { min-height: 44px; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .next-link { min-height: 44px; }
  .route__link { position: relative; }
  .route__link::after { content: ""; position: absolute; inset: -14px -8px; }
  td a:not(.btn) { position: relative; }
  td a:not(.btn)::after { content: ""; position: absolute; inset: -10px -6px; }
  .check li { padding: 2px 8px; }
  .check li button { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .known summary, .dev-more > summary, .dev-box > summary, .fyi > summary { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 960px) {
  .page { padding: 20px 20px 56px; }
  .head { flex-direction: column; align-items: flex-start; }
  .next { grid-template-columns: 1fr; }
  .next__actions { min-width: 0; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .callout { grid-template-columns: 36px 1fr; }
  .callout__action { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 8px; }
  .callout__action { max-width: 100%; }
  .callout__action .btn { white-space: normal; text-align: left; height: auto; max-width: 100%; }
  .card__body { padding: 18px 16px; }

  .route { grid-template-columns: 1fr; gap: 14px; }
  .route__step { grid-template-columns: 40px 1fr; justify-items: start; text-align: left; column-gap: 12px; row-gap: 0; padding: 0; }
  .route__dot { grid-row: span 2; }
  .route__step::before { top: 44px; left: 19px; right: auto; width: 3px; height: 18px; }
  .route__state { max-width: none; }

  .sum { grid-template-columns: 1fr; gap: 2px; }
  .sum dd { margin-bottom: 8px; }
  .dialog__head { padding: 20px 18px 0; }
  .dialog__body { padding: 12px 18px 4px; }
  .dialog__foot { padding: 14px 18px 20px; }
}

@media (max-width: 700px) {
  .page { padding: 16px 16px 48px; }
  .head > .row { flex-wrap: wrap; flex: initial; }
  .howto ol { grid-template-columns: 1fr; gap: 14px; }
  .howto li::after { display: none; }
  .radio-cards { grid-template-columns: 1fr; }
  .scrim { padding: 16px; }
  .dialog { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .dialog__foot .btn { flex: 1 1 auto; }
  .toast { left: 16px; right: 16px; top: 12px; width: auto; }
  .aside__foot { padding-left: 16px; padding-right: 16px; }

  /* Подсказка тура на телефоне - нижняя панель на всю ширину с полями 16. */
  .tour-pop { left: 16px !important; right: 16px; top: auto !important; bottom: 16px; width: auto; }
  /* Цель посреди страницы: панель сверху, под верхней панелью (hints.js). */
  .tour-pop.tour-pop--top { top: var(--sheet-top, 72px) !important; bottom: auto; }

  /* Списки слушателей и групп на телефоне - карточками: у строки есть
     подписи значений и кнопка действия под рукой. */
  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* «?» в шапке карточек не виден, но лежит поверх строки и ловит касания (QA-C9). */
  .table--cards thead .tip { display: none; }
  .stage-legend { display: block; margin: 0; padding: 12px 16px 16px; }
  .table--cards,
  .table--cards tbody,
  .table--cards td { display: block; width: 100%; }
  .table--cards tr { display: flex; flex-direction: column; width: 100%; position: relative; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .table--cards tbody tr:last-child { border-bottom: 0; }
  .table--cards td { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; border: 0; white-space: normal; text-align: left; }
  .table--cards td::before { content: attr(data-label); flex: 0 0 92px; color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 600; }
  .table--cards td[data-label=""]::before { display: none; }
  .table--cards td.col-opt { display: flex; }
  .table--cards td.num { justify-content: flex-start; }
  .table--cards td a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .table--cards td a:not(.btn)::after { display: none; }
  .table--cards td.cell-end { margin-top: 8px; }
  .table--cards td.cell-end::before { display: none; }
  .table--cards td.cell-end .btn { width: 100%; }
  .table--cards tr.row--problem { box-shadow: inset 4px 0 0 var(--danger); }
  .table--cards tr.row--problem td:first-child { box-shadow: none; }
  .table--cards td.cell-name { order: -1; font-size: var(--text-base); }
  .table--cards td input { flex: 1; min-width: 0; }
  .table--cards td[data-blank-number][hidden] { display: none; }
  /* «Учебные планы» карточками (N4): курс - блоком сверху, вердикты по
     документам переносятся, кнопки действий - друг под другом во всю ширину. */
  #plans-table.table--cards td.plan-course { display: block; order: -1; min-width: 0; }
  #plans-table.table--cards td.plan-course .cell-sub { display: block; }
  #plans-table.table--cards td[data-label="Строк в документе"] { flex-wrap: wrap; }
  #plans-table.table--cards .plan-verdict { max-width: none; flex-basis: 100%; }
  #plans-table.table--cards td.cell-end { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
  .topbar__title { display: none; }
  .topbar__new { padding: 0 12px; }
}

/* ----------------------------------------------------------------- Печать -- */

/* Разметку печатаем без интерфейсной обвязки: оператор иногда распечатывает
   список группы, чтобы отнести на подпись. */
@media print {
  .side,
  .app-foot,
  .toast,
  .btn { display: none; }

  .app { display: block; background: none; }
  body { background: #fff; }
  .card { box-shadow: none; }
}

/* ------------------------------------------------ Фото слушателя: кадр 3×4 -- */

.photo__pick { position: relative; width: 100%; margin-top: 12px; cursor: pointer; justify-content: center; }
.photo__pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo__paste { margin: 8px 0 0; text-align: center; }
.photo__tools { display: grid; gap: 8px; margin-top: 12px; }
.photo__tools .btn { width: 100%; justify-content: center; }

.photo__check {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--warning-line);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--warning-ink);
  font-size: var(--text-sm);
}

.photo__check b { font-weight: 600; }
.photo__check--ok { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }

.frame__drop {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 12px;
  background: color-mix(in srgb, var(--accent) 86%, transparent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.photo--drag { outline: 2px dashed var(--accent); outline-offset: 2px; }
.photo--drag .frame__drop { display: grid; }

.crop-dialog { width: min(940px, 100%); }
.crop-dialog .dialog__head h2 { margin-bottom: 6px; }
.crop-dialog .dialog__head .hint { margin: 0; }
.crop { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; align-items: start; }
.crop[hidden] { display: none; }
.crop__main { min-width: 0; text-align: center; }

.crop__stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  line-height: 0;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.crop__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(60vh, 620px);
  pointer-events: none;
}

/* Рамка: всё вне её затемнено тенью, рамка видна и на светлом, и на тёмном фото. */
.crop__frame {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  outline: 1px solid rgb(0 0 0 / 60%);
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 55%);
  cursor: move;
  touch-action: none;
}

.crop__frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* Направляющие: макушка около 10% от верха кадра, подбородок в полосе 80-90%.
   Лицо тогда занимает 70-80% высоты. Числа те же, что в static/photo-crop.js. */
.crop__line,
.crop__band,
.crop__axis { position: absolute; left: 0; right: 0; pointer-events: none; }
.crop__line { top: 10%; border-top: 2px dashed #ffd24a; }
.crop__band { top: 80%; height: 10%; border-top: 2px dashed #ffd24a; border-bottom: 2px dashed #ffd24a; background: rgb(255 210 74 / 18%); }
.crop__axis { top: 0; bottom: 0; left: 50%; right: auto; width: 0; border-left: 1px dashed rgb(255 255 255 / 55%); }

.crop__line span,
.crop__band span {
  position: absolute;
  left: 4px;
  top: 2px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgb(0 0 0 / 55%);
  color: #ffd24a;
  font-size: 11px;
  font-style: normal;
  line-height: 1.25;
}

.crop__frame--small .crop__line span,
.crop__frame--small .crop__band span { display: none; }

.crop__side { display: grid; gap: 16px; }
.crop__side .label { display: block; margin-bottom: 6px; }

.crop__preview {
  display: block;
  width: 150px;
  height: 200px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: #fff;
}

.crop__zoom { width: 100%; min-height: 0; padding: 0; border: 0; accent-color: var(--accent); }
.crop__side .hint { margin: 4px 0 0; }
.crop__info--warn { color: var(--danger); font-weight: 500; }
.crop__status { margin: 0 0 8px; color: var(--text-secondary); }
.crop__status[hidden] { display: none; }
.crop__status--bad { color: var(--danger); }

@media (max-width: 700px) {
  .crop { grid-template-columns: 1fr; gap: 14px; }
  .crop__side { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
  .crop__preview { width: 96px; height: 128px; }
  .crop__stage img { max-height: 40vh; }
  .crop__more { display: none; }
}

/* Подсказка номера на экране выпуска (A-015): текст сверху, кнопка «Подставить» под ним. */
.reg-hint { margin-top: 6px; }
.reg-hint[hidden] { display: none; }
.reg-hint .btn { margin-top: 4px; }
.field__auto { color: var(--accent); }
.field__auto[hidden] { display: none; }

/* Кнопка-ссылка (тест 20.10.2026): «Обновить список планов», «Очистить форму».
   Действие на месте, а не переход, поэтому кнопка, но вид - как у ссылки. */
.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.linkbtn:hover { text-decoration-thickness: 2px; }
.linkbtn[disabled] { opacity: 0.55; cursor: progress; }
.plan-refresh { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
#draft-note { margin-bottom: var(--space-5); }
#draft-note .callout__body p + p { margin-top: 6px; }

/* «Взять из СДОПРОФ» на экране выпуска (этап 6): панель над графами, список
   групп отчёта карточками-кнопками, итог и таблица слушателей. Номер,
   вписанный из СДОПРОФ, - с синей рамкой (is-sdo). */
.sdo { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-5); background: var(--surface-sunken); }
.sdo__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.sdo__head > div { flex: 1 1 320px; min-width: 0; }
.sdo__head .btn { flex: 0 0 auto; }
.sdo__title { font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sdo__title .pill[hidden] { display: none; }
.sdo__off { margin-top: 8px; }
.sdo__query { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; margin-top: var(--space-4); }
.sdo__query .field { margin: 0; }
.sdo__msg { margin: var(--space-4) 0 0; white-space: pre-line; }
.sdo__msg[hidden] { display: none; }
.sdo__msg[data-kind="info"], .sdo__msg[data-kind="busy"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.sdo__msg[data-kind="error"] { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.sdo__groups { margin-top: var(--space-3); }
.sdo__groups[hidden], .sdo__result[hidden] { display: none; }
.sdo__list { display: grid; gap: 8px; }
.sdo-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: 100%; text-align: left; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.sdo-group:hover { border-color: var(--accent-line); }
.sdo-group:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sdo-group b { font-weight: 600; overflow-wrap: anywhere; }
.sdo-group span { font-size: var(--text-sm); color: var(--text-secondary); }
.sdo-group .pill { color: inherit; }
.sdo-group--suggested { border-color: var(--success-line); }
.sdo-group[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sdo-group:disabled { cursor: progress; opacity: 0.7; }
.sdo__others { margin-top: 10px; font-size: var(--text-sm); color: var(--text-secondary); }
.sdo__others ul { margin: 6px 0 0; padding-left: 18px; }
.sdo__result { margin-top: var(--space-4); display: grid; gap: 10px; }
.sdo__result .callout[hidden] { display: none; }
.sdo__result .callout__body p { margin: 0 0 4px; }
.sdo__result .callout__body p:last-child { margin-bottom: 0; }
.sdo-table td { vertical-align: top; }
.sdo-table .sdo-num { white-space: nowrap; }
.sdo-table td { flex-wrap: wrap; }
.sdo-table .sdo-why { flex: 1 1 100%; }
.sdo__query input { width: 100%; min-width: 0; }
.sdo-why { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--text-secondary); }
.sdo-why--warn { color: var(--warning-ink); }
.sdo-ref { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--text-secondary); max-width: 16em; }
.sdo-ref--warn { color: var(--warning-ink); }
.sdo-ref[hidden] { display: none; }
/* Карточки таблицы номеров на узком экране: справка СДОПРОФ - под полем, а не
   рядом с ним, иначе поле номера сжимается в полоску. */
@container (max-width: 479px) {
  .students td:has(> .sdo-ref:not([hidden])) { flex-wrap: wrap; }
  .students td > .sdo-ref { flex: 1 1 100%; max-width: none; padding-left: 104px; }
}
input.is-sdo { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
@media (max-width: 700px) {
  .sdo { padding: var(--space-3); }
  .sdo__query { grid-template-columns: 1fr; }
  .sdo__head .btn { width: 100%; }
  /* G-12: на 390 px плашки итога были узкой колонкой справа от значка. Текст -
     на всю ширину под заголовком, значок меньше. */
  .sdo__result .callout { grid-template-columns: 28px 1fr; gap: 4px 10px; padding: 12px 14px; }
  .sdo__result .callout__icon { grid-row: auto; width: 28px; height: 28px; }
  .sdo__result .callout__icon svg { width: 16px; height: 16px; }
  .sdo__result .callout__title { align-self: center; }
  .sdo__result .callout__body { grid-column: 1 / -1; }
  .sdo-table td::before { flex-basis: 84px; }
}

/* H-03: чего не хватает для выпуска приложений - под этапами на карточке. */
.route__gaps { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--warning-soft); border: 1px solid var(--warning-line); font-size: var(--text-sm); }
.route__gaps svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--warning-ink); }

/* H-07: что лежит в архиве - над поиском. */
.archive-note { margin: 0 0 14px; }

/* H-13: липкая панель «Сохранить» внизу формы слушателя закрывала подсказку
   под полем, к которому прокрутил браузер. Прокрутка к полю оставляет место
   под панелью; на телефоне пояснение в панели мельче. */
html:has(.bar-bottom) { scroll-padding-bottom: 170px; }
@media (max-width: 700px) {
  .bar-bottom__note { font-size: var(--text-xs); }
}

/* Поле, которое сервер не принял: красная рамка, чтобы было видно, что
   править, а не только плашку сверху (найдено на бою 13.10.2026). */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-soft);
}