/* Общий стиль сайта регламентов.

   Ровно один файл на все страницы, включая views/reader.html: регламент
   открывают с телефона в зале, и если оформление списка и оформление текста
   разъедутся, это увидят раньше нас. Никаких CDN и внешних шрифтов —
   внутренний сайт должен открываться и когда до интернета не дотянуться,
   а на сервере перед сайтом стоит обычный nginx, и лишние внешние запросы
   он ничем не ускорит.

   ФИРМЕННЫЙ СТИЛЬ. Цвета берутся из brand-tokens.css (разбор брендбука —
   docs/brand.md). Как бренд применён здесь:
     • поверхность чтения светлая. Регламент читают подолгу и с телефона,
       фирменный чёрный на всю страницу для этого плох;
     • чёрный работает как «обвязка» — шапка сайта и поле страницы входа;
     • голубой — единственный акцент: ссылки, активная вкладка, фокус,
       кнопка действия.
   Голубой #4bb8ed мелким текстом на белом не читается (2.24:1), поэтому для
   текста берётся производный затемнённый вариант того же тона
   (--brand-blue-ink), а чистый фирменный остаётся на заливках, рамках и
   крупных элементах. Подробности вывода — в brand-tokens.css. */

@import url("/brand-tokens.css");

/* Фирменный шрифт — Manrope (брендбук, стр. 12). Файлов нет ни в проекте, ни
   в системе, а CDN запрещены, поэтому страница едет на системном гротеске:
   --brand-font-sans держит Manrope первым и системный стек следом.

   Когда файлы появятся: положить их в frontend/fonts/ и раскомментировать
   блок ниже. Нужны woff2 с КИРИЛЛИЦЕЙ, начертания 400/600/700 (или один
   вариативный Manrope[wght].woff2 на 400–700). Лицензию проверяет владелец —
   брендбук на той же странице требует убедиться, что она приобретена.

@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/Manrope-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/Manrope-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/fonts/Manrope-Bold.woff2") format("woff2");
}
*/

:root{
  /* Рабочие переменные интерфейса. Собственных красок здесь нет — только
     раскладка фирменных и производных из brand-tokens.css по ролям. */
  --bg:var(--brand-gray-04);
  --surface:var(--brand-white);
  --surface-2:var(--brand-gray-02);
  --text:var(--brand-black);
  --muted:var(--brand-gray-64);
  --placeholder:var(--brand-gray-58);
  --border:var(--brand-gray-12);
  --border-strong:var(--brand-gray-22);

  /* Акцент. Три роли одного фирменного голубого: текст, рамка, заливка. */
  --accent:var(--brand-blue-ink);            /* мелкий текст: ссылки, вкладка */
  --accent-strong:var(--brand-blue-ink-strong); /* наведение, текст на плашке */
  --accent-line:var(--brand-blue-edge);      /* рамки и кольцо фокуса */
  --accent-fill:var(--brand-blue);           /* заливки: кнопка, полоса вкладки */
  --accent-fill-hover:var(--brand-blue-edge);
  --on-fill:var(--brand-black);              /* текст на голубой заливке: 9.38:1 */
  --accent-bg:var(--brand-blue-tint);
  --accent-bg-edge:var(--brand-blue-tint-edge);

  /* Чёрная обвязка: шапка сайта и поле страницы входа. */
  --band:var(--brand-black);
  --band-text:var(--brand-white);
  --band-muted:var(--brand-gray-22);
  --band-line:rgba(255,255,255,.22);

  /* Служебные цвета состояний. В брендбуке их НЕТ и вывести из трёх
     фирменных красок нельзя: «ошибка» голубым не показывается. Поэтому они
     живут здесь, а не в brand-tokens.css, и фирменными не считаются.
     Взяты приглушённые тона, проходящие 4.5:1 и на белом, и на своей плашке. */
  --danger:#b3261e;   /* 6.54:1 на белом, 5.70:1 на своей плашке */
  --danger-bg:#fbeceb;
  --danger-edge:#f0c8c5;
  --ok:#1c7a46;       /* 5.35:1 на белом, 4.78:1 на своей плашке */
  --ok-bg:#e9f5ee;
  --ok-edge:#c3e2d0;
  --warn:#8a5a00;     /* 5.93:1 на белом, 5.38:1 на своей плашке */
  --warn-bg:#fdf3e0;
  --warn-edge:#f0dcb4;

  /* Скругления и тень. В брендбуке как константы стиля не заданы (см.
     docs/brand.md) — это решение вёрстки, а не бренда. */
  --radius:10px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px -18px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--brand-font-sans);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  font-weight:var(--brand-weight-body);
  -webkit-font-smoothing:antialiased;
}

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

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* Фокус виден всегда и одной краской — голубой рамочный тон (3.89:1 на белом,
   чистый #4bb8ed этот порог не проходит). */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-line);outline-offset:2px;border-radius:3px;
}

.hidden{display:none !important}
.nowrap{white-space:nowrap}

/* ---------- Логотип ---------- */

/* Настоящего знака нет: векторного оригинала не существует, а растровые
   вырезки низкого качества и с неверным голубым — брендбук (стр. 8) прямо
   запрещает и произвольные цвета, и искажение пропорций. Поэтому здесь
   типографическая заглушка: слово «Базум» фирменным начертанием плюс подпись
   «Регламенты» через разделитель. Монограмму не изображаем — придуманный знак
   хуже честной надписи.

   Разметка (одна и та же в шапке и на входе) — <span class="mark">Р</span>
   и следом <span>Регламенты</span>. Букву-заглушку из разметки прячем и
   рисуем ::before, потому что его content умеет подставляться переменной:
   как только в brand-tokens.css раскомментируют --brand-logo-content с
   адресом файла, картинка встанет на место надписи сама. Один файл — и всё. */
.brand,.auth-brand{display:flex;align-items:center;gap:0;min-width:0}
/* Через .topbar намеренно: ниже по файлу правило .topbar a красит ссылки шапки
   голубым, и без этой добавки оно перебило бы белое слово логотипа. */
.topbar .brand{color:var(--band-text)}
.topbar .brand:hover{text-decoration:none;color:var(--band-text)}

.brand .mark,.auth-brand .mark{
  display:inline-flex;align-items:center;flex-shrink:0;
  width:auto;height:auto;background:none;border-radius:0;
  font-size:0;  /* прячет букву-заглушку из разметки */
}
.brand .mark::before,.auth-brand .mark::before{
  content:var(--brand-logo-content,"Базум");
  display:block;width:auto;height:auto;max-height:var(--brand-logo-height);
  font-size:18px;font-weight:var(--brand-weight-heading);
  letter-spacing:-.02em;line-height:1.15;
}
/* Подпись «Регламенты» — второй span, у него нет своего класса: он приходит
   из app.js и из шаблонов, править их ради классов не за чем. */
.brand .mark + span,.auth-brand .mark + span{
  font-size:13px;font-weight:var(--brand-weight-body-strong);letter-spacing:.01em;
  margin-left:10px;padding-left:10px;border-left:1px solid var(--band-line);
  white-space:nowrap;
}
.brand .mark + span{color:var(--accent-fill)}   /* голубой по чёрному — 9.38:1 */

.auth-brand .mark::before{color:var(--text)}
.auth-brand .mark + span{color:var(--accent);border-left-color:var(--border-strong)}

/* ---------- Каркас ---------- */

/* Шапка — фирменная чёрная обвязка с голубой отбивкой снизу. Тот же чёрный,
   что в палитре брендбука («фон, наборной текст»), и единственное место, где
   он занимает большую площадь: текст регламента остаётся на светлом. */
.topbar{
  background:var(--band);
  color:var(--band-text);
  border-bottom:2px solid var(--accent-fill);
  position:sticky;top:0;z-index:20;
}
.topbar-in{
  max-width:1100px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.topbar-spacer{flex:1 1 auto}
.topbar-user{color:var(--band-muted);font-size:13.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-user strong{color:var(--band-text);font-weight:var(--brand-weight-heading)}
.topbar a{color:var(--accent-fill)}
.topbar a:hover{color:var(--accent-fill);text-decoration:underline}
.topbar .btn-ghost{color:var(--band-muted)}
.topbar .btn-ghost:hover{color:var(--accent-fill)}
.topbar .btn-outline{background:transparent;color:var(--band-text);border-color:var(--band-line)}
.topbar .btn-outline:hover{border-color:var(--accent-fill);color:var(--accent-fill)}
.topbar .chip-accent{
  background:rgba(75,184,237,.16);color:var(--accent-fill);border-color:rgba(75,184,237,.45);
}
/* На чёрном белое кольцо фокуса заметнее голубого рамочного тона. */
.topbar a:focus-visible,.topbar button:focus-visible{outline-color:var(--accent-fill)}

.wrap{max-width:760px;margin:0 auto;padding:28px 20px 80px}
.wrap.wide{max-width:1100px}

.page-title{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:6px}
.page-sub{color:var(--muted);font-size:13.5px;margin-bottom:22px;max-width:64ch}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;margin-bottom:16px;box-shadow:var(--shadow);
}
.card-title{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.card-desc{color:var(--muted);font-size:13px;margin-bottom:16px;max-width:62ch}

/* ---------- Формы ---------- */

.field{margin-bottom:14px}
.field-label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px}
.field-hint{display:block;font-size:12px;color:var(--muted);font-weight:400;margin:-2px 0 6px}
.inp{
  width:100%;padding:11px 13px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-size:15px;
  transition:border-color .14s,box-shadow .14s,background .14s;
}
.inp:focus{
  outline:none;border-color:var(--accent-line);background:#fff;
  box-shadow:0 0 0 3px rgba(75,184,237,.35);
}
.inp:disabled{background:var(--surface-2);color:var(--muted)}
.inp.bad{border-color:var(--danger);background:var(--danger-bg)}
/* Placeholder не приглушаем прозрачностью: под opacity он проваливается
   ниже 4.5:1. Отдельный серый, который порог проходит (5.33:1). */
.inp::placeholder{color:var(--placeholder);opacity:1}
.inp-sm{padding:7px 9px;font-size:13.5px}

.row{display:flex;gap:12px;flex-wrap:wrap}
.row > *{flex:1 1 180px;min-width:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:var(--radius-sm);
  font-weight:700;font-size:14.5px;white-space:nowrap;
  border:1.5px solid transparent;transition:background .14s,border-color .14s,color .14s;
}
/* Кнопка действия — фирменный голубой заливкой. Текст на нём ЧЁРНЫЙ: белый по
   #4bb8ed даёт 2.24:1 и не читается, чёрный — 9.38:1. Брендбук цвет текста на
   голубой плашке не задаёт, задаёт только цвет логотипа на ней. */
.btn-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-fill)}
.btn-primary:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover);color:var(--on-fill)}
.btn-outline{border-color:var(--border-strong);color:var(--text);background:var(--surface)}
.btn-outline:hover{border-color:var(--accent-line);color:var(--accent)}
.btn-danger{border-color:var(--danger);color:var(--danger);background:var(--surface)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-ghost{color:var(--muted)}
.btn-ghost:hover{color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:7px}
.btn-block{width:100%}

.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}

/* ---------- Сообщения ---------- */

.note{font-size:13px;color:var(--muted)}
.note.ok{color:var(--ok)}
.note.err{color:var(--danger)}

.alert{
  border-radius:var(--radius-sm);padding:11px 13px;font-size:13.5px;
  border:1px solid transparent;margin-bottom:14px;
}
.alert-err{background:var(--danger-bg);border-color:var(--danger-edge);color:var(--danger)}
.alert-ok{background:var(--ok-bg);border-color:var(--ok-edge);color:var(--ok)}
.alert-warn{background:var(--warn-bg);border-color:var(--warn-edge);color:var(--warn)}
.alert-info{background:var(--accent-bg);border-color:var(--accent-bg-edge);color:var(--accent-strong)}

/* Пустой экран: он объясняет, а не молчит. Пустой список регламентов у нового
   сотрудника — обычное дело, и без объяснения выглядит как поломка. */
.empty{
  text-align:center;padding:40px 22px;color:var(--muted);
  background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius);
}
.empty-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}
.empty p{font-size:13.5px;max-width:44ch;margin:0 auto}

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

.chip{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;
  font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--surface-2);
  color:var(--muted);border:1px solid var(--border);
}
.chip-accent{background:var(--accent-bg);color:var(--accent-strong);border-color:var(--accent-bg-edge)}
.chip-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-edge)}
.chip-off{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-edge)}
.chip-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-edge)}
.chips{display:flex;flex-wrap:wrap;gap:5px}

/* ---------- Таблицы интерфейса ---------- */

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.tbl th{
  text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border);
  white-space:nowrap;
}
table.tbl td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl td.actions{text-align:right;white-space:nowrap}
table.tbl td.actions .btn{margin-left:6px}
tr.off td{color:var(--muted)}
tr.off td .name{text-decoration:line-through}

/* Строка-редактор раскрывается прямо под учёткой: так видно, кого правишь,
   и не нужен модальный слой поверх таблицы. */
tr.editor td{background:var(--surface-2);padding:16px 12px}
.editor-box{display:flex;flex-direction:column;gap:12px}
.editor-cols{display:flex;gap:16px;flex-wrap:wrap}
.editor-cols > div{flex:1 1 220px;min-width:0}

/* ---------- Флажки должностей ---------- */

.checks{display:flex;flex-wrap:wrap;gap:6px}
.check{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
  border:1.5px solid var(--border);border-radius:20px;background:var(--surface);
  font-size:13px;cursor:pointer;user-select:none;transition:.14s;
}
.check:hover{border-color:var(--border-strong)}
.check input{margin:0;accent-color:var(--accent-line)}
.check:focus-within{outline:2px solid var(--accent-line);outline-offset:2px}
.check.on{border-color:var(--accent-line);background:var(--accent-bg);color:var(--accent-strong);font-weight:600}

/* ---------- Вкладки админки ---------- */

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:22px;overflow-x:auto}
.tab{
  padding:10px 15px;font-weight:700;font-size:14px;color:var(--muted);
  border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.tab:hover{color:var(--text)}
/* Активная вкладка — фирменный голубой полосой (заливка, порог 3:1 проходит)
   и затемнённый голубой текстом (5.32:1). */
.tab.on{color:var(--accent);border-bottom-color:var(--accent-fill)}

/* ---------- Временный пароль ---------- */

/* Пароль показывается ровно один раз — поэтому он крупный, моноширинный и с
   кнопкой «скопировать» рядом: переписывать его глазами с экрана в мессенджер
   и есть тот момент, когда админ ошибётся символом. */
.secret{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--warn-bg);border:1px solid var(--warn-edge);border-radius:var(--radius-sm);
  padding:12px 14px;margin-top:10px;
}
.secret code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:18px;font-weight:700;letter-spacing:.04em;color:var(--text);
  user-select:all;word-break:break-all;
}

/* ---------- Список регламентов ---------- */

.search-box{position:relative;margin-bottom:22px}
.section-h{
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:26px 0 8px;
}
.section-h:first-of-type{margin-top:0}

.doc-list{display:flex;flex-direction:column;gap:8px;list-style:none}
.doc-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color .14s,box-shadow .14s;
}
.doc-item:hover{border-color:var(--accent-line);box-shadow:var(--shadow)}
.doc-item a{
  display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--text);
}
.doc-item a:hover{text-decoration:none;color:var(--text)}
.doc-item .t{flex:1 1 auto;font-weight:600;font-size:15.5px;min-width:0}
.doc-item .d{color:var(--muted);font-size:12.5px;white-space:nowrap}
.doc-item .arrow{color:var(--border-strong);font-size:16px}
.doc-item:hover .arrow{color:var(--accent)}

/* ---------- Текст регламента ---------- */

/* Содержимое регламента — голые h1..h3/p/ul/table без единого класса: файлы
   пишут люди в редакторе, и требовать от них классы значит получить вёрстку
   вразнобой через месяц. Поэтому стилизуем теги внутри .doc. */
.doc{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px 34px 40px;box-shadow:var(--shadow);
  font-size:17px;line-height:1.68;
}
.doc > *:first-child{margin-top:0}
.doc > *:last-child{margin-bottom:0}

.doc h1{font-size:27px;line-height:1.25;font-weight:800;letter-spacing:-.02em;margin:0 0 18px}
/* Голубая отбивка под h2 — тот же приём, что голубая линия под шапкой: акцент
   заливкой, а не текстом, поэтому чистый фирменный цвет здесь уместен. */
.doc h2{
  font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.01em;
  margin:34px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--accent-fill);
}
.doc h3{font-size:17.5px;font-weight:700;margin:26px 0 8px}
.doc h4{font-size:16px;font-weight:700;margin:22px 0 6px}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:26px}
.doc li{margin-bottom:7px}
.doc li > ul,.doc li > ol{margin:7px 0 0}
.doc strong{font-weight:700}
.doc a{color:var(--accent);text-decoration:underline}
.doc a:hover{color:var(--accent-strong)}
.doc hr{border:none;border-top:1px solid var(--border);margin:28px 0}
.doc blockquote{
  margin:0 0 18px;padding:12px 18px;background:var(--accent-bg);
  border-left:4px solid var(--accent-fill);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.doc blockquote p:last-child{margin-bottom:0}
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;
}
.doc pre{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 16px;overflow-x:auto;margin:0 0 16px;
}
.doc pre code{border:none;background:none;padding:0}
.doc img{max-width:100%;height:auto;border-radius:var(--radius-sm)}

/* Таблица в регламенте почти всегда шире телефона — оборачивать её в div
   мы не можем (файл пишут руками), поэтому прокрутку даёт сам .doc-scroll. */
.doc table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15.5px}
.doc th,.doc td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--surface-2);font-weight:700;font-size:14px}
.doc tbody tr:nth-child(even){background:var(--surface-2)}
.doc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Страница чтения ---------- */

.reader-head{margin-bottom:16px}
.reader-back{
  display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;
  color:var(--muted);margin-bottom:12px;
}
.reader-back:hover{color:var(--accent);text-decoration:none}
.reader-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);margin-bottom:14px;
}
/* Готовая страница-регламент (documents/<slug>.page.html) со своей вёрсткой:
   вставить её в .doc нельзя — свои стили и шрифты подрались бы с нашими,
   поэтому она живёт в рамке. Высоту рамке ставит скрипт читалки: остаток
   вьюпорта под шапкой, чтобы прокрутка была внутри страницы регламента, а не
   двойная. Внутрь рамки фирменный стиль НЕ лезет: там чужая вёрстка со своим
   тёмным оформлением, и трогать её нечем и незачем. */
/* Нижнего поля у рабочей области в этом режиме нет: рамка занимает вьюпорт
   ровно до низа, и обычные 80px под ней дали бы внешнюю прокрутку рядом с
   внутренней — две полосы прокрутки на одном экране. */
/* Селектор из двух классов намеренно: он должен пересиливать телефонное
   правило .wrap{padding-bottom:64px} ниже по файлу. */
.wrap.reader-wide{max-width:1100px;padding-bottom:12px}
.reader-frame{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;min-height:60vh;
}
.reader-frame iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.print-only{display:none}

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

/* Единственный экран, который целиком стоит на фирменном чёрном: читать здесь
   нечего, а бренд предъявить надо. Сама форма — светлая карточка. */
.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 18px;
  background:var(--band);
}
.auth-card{
  width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:28px 26px 26px;box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
  border-top:3px solid var(--accent-fill);
}
.auth-brand{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.auth-title{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:5px}
.auth-sub{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.auth-foot{margin-top:18px;font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- Телефон ---------- */

@media (max-width:640px){
  body{font-size:15px}
  .topbar-in{padding:10px 14px;gap:10px}
  .wrap{padding:20px 14px 64px}
  .page-title{font-size:22px}
  .brand .mark::before,.auth-brand .mark::before{font-size:16px}
  .brand .mark + span,.auth-brand .mark + span{font-size:12px;margin-left:8px;padding-left:8px}
  .doc{padding:20px 16px 26px;border-radius:0;border-left:none;border-right:none;
       margin:0 -14px;font-size:16.5px;line-height:1.65}
  .doc h1{font-size:23px}
  .doc h2{font-size:19px}
  .doc h3{font-size:16.5px}
  .doc table{font-size:14px}
  .doc th,.doc td{padding:7px 9px}
  .tbl-wrap{margin:0 -14px;padding:0 14px}
  .card{padding:16px 14px}
  .doc-item a{padding:12px 13px;gap:8px;flex-wrap:wrap}
  .doc-item .d{flex-basis:100%}
  .doc-item .arrow{display:none}
  .btn{padding:11px 15px}
  .topbar-user{font-size:12.5px}
  /* Рамка готовой страницы — во всю ширину телефона: свои поля у неё уже есть,
     а наши только съедали бы и без того узкую колонку. */
  .reader-frame{margin:0 -14px;border-radius:0;border-left:none;border-right:none}
}

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

/* Регламент вешают на стену и подшивают в папку — печать обязана быть просто
   чёрным по белому: без шапки, кнопок и рамок, ссылки не подчёркиваем.
   Фирменный голубой на бумагу не тянем: у нас нет ни одного носителя из
   брендбука, где голубым набран мелкий текст, а на ч/б принтере он уйдёт
   в бледно-серый. */
@media print{
  :root{--border:#999}
  body{background:#fff;color:#000;font-size:12pt}
  .topbar,.reader-back,.no-print,.btn,.tabs,.search-box{display:none !important}
  .wrap{max-width:none;padding:0}
  .doc{
    border:none;box-shadow:none;padding:0;margin:0;background:#fff;
    font-size:12pt;line-height:1.5;
  }
  .doc h1{font-size:20pt;margin-bottom:10pt}
  .doc h2{font-size:15pt;margin:16pt 0 8pt;page-break-after:avoid;border-bottom:1px solid #999}
  .doc h3{font-size:13pt;margin:12pt 0 6pt;page-break-after:avoid}
  .doc p,.doc li{orphans:3;widows:3}
  .doc a{color:#000;text-decoration:none}
  .doc blockquote{background:none;border-left:3pt solid #000;padding:0 0 0 10pt;border-radius:0}
  .doc table,.doc tr,.doc img,.doc blockquote{page-break-inside:avoid}
  .doc th{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .doc tbody tr:nth-child(even){background:none}
  .doc th,.doc td{border:1px solid #666}
  .reader-meta{color:#000;font-size:10pt;margin-bottom:12pt}
  .chip{border:1px solid #666;color:#000;background:none}
  /* Рамку с чужой страницей печатать бессмысленно: на бумаге окажется
     обрезанный по высоте кусок. Вместо неё — строка, что печатать надо
     кнопкой самой страницы. */
  .reader-frame{display:none !important}
  .print-only{display:block;font-size:11pt}
}