/* Пульт редакции — единственный стиль приложения.
   Основной сценарий — десктоп 1280–1920px; телефон не ломаем.
   Один брейкпойнт — 960px: выше него списки идут таблицей (.only-wide),
   ниже — карточками (.only-narrow). safe-area, кнопки от 44 px.
   Inline-стилей в шаблонах нет: CSP запрещает style-src кроме 'self'.

   В1: тема СВЕТЛАЯ и единственная. Автопереключения по prefers-color-scheme
   нет — в тёмной системной теме пульт остаётся светлым (решение администратора).
   Все пары «текст/фон» проверены на контраст ≥ 4.5:1 (WCAG AA).

   Две разные гаммы бейджей, и путать их нельзя (В3):
     * РЕКОМЕНДАЦИЯ ИИ (.badge--v-*) — заливка цветом: Брать зелёный, Условно
       янтарный, Пас серый, «Пас, но» сине-серый;
     * СТАТУС ЗАЯВКИ (.badge--s-*) — одна спокойная серая плашка с цветной
       точкой: где заявка сейчас, видно, но с оценкой книги это не спорит. */

:root {
  --bg: #f4f6f9;          /* фон страницы — почти белый */
  --card: #ffffff;
  --card-2: #eef1f6;      /* наведение, вторая плашка */
  --line: #ccd3de;
  --fg: #16191f;          /* 15.9:1 на --bg */
  --muted: #56606e;       /* 5.6:1 на --card, 5.3:1 на --bg */
  --accent: #14549c;      /* ссылки и фокус: 7.0:1 на --card */
  --accent-2: #0f3f78;
  --danger: #a5241c;      /* 6.4:1 на --card */
  --ok: #1a6b35;
  --warn: #8a5200;
  --violet: #4a3fa6;
  --gray: #6b7280;
  --chip: #eaeef4;        /* плашка статуса заявки */
  --chip-fg: #2c3541;     /* 10.4:1 на --chip */
  --chip-line: #cdd5e0;
  --radius: 16px;
  --radius-s: 10px;
  --pad: 16px;
  --tap: 44px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}

/* Страницы-«карточки» (вход, ошибка): шапка сверху, карточка по центру остатка */
body.body--center { display: flex; flex-direction: column; }
body.body--center .page { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

a { color: var(--accent); }
.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }
.muted { color: var(--muted); font-size: 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.req { color: var(--warn); }

/* Невидимо для глаза, но доступно скринридеру и форме */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- шапка ---------- */

.topbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: calc(10px + var(--safe-t)) calc(var(--pad) + var(--safe-r)) 10px calc(var(--pad) + var(--safe-l));
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar__brand { font-weight: 600; color: var(--fg); text-decoration: none; font-size: 15px; }
.topbar__nav { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar__link { color: var(--muted); text-decoration: none; font-size: 14px; padding: 6px 4px; }
.topbar__link:hover { color: var(--fg); }
.topbar__user {
  color: var(--muted); font-size: 14px; max-width: 40vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__logout { margin: 0; }

/* ---------- страница ---------- */

.page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--pad) calc(var(--pad) + var(--safe-r)) calc(32px + var(--safe-b)) calc(var(--pad) + var(--safe-l));
}
.page--narrow { max-width: 420px; }   /* вход, смена пароля, ошибка */
.page--form   { max-width: 560px; }   /* новая заявка */
.page--read   { max-width: 760px; }   /* полный обзор — колонка для чтения */
.page--wide   { max-width: 720px; }   /* списки; от 960px расширяется до 1560px */

/* Видно только на широком экране / только на узком (переключает медиазапрос) */
.only-wide { display: none; }

.pagehead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.pagehead__title { font-size: 22px; margin: 0; font-weight: 600; flex: 1 1 auto; word-break: break-word; }
.pagehead__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.block { margin: 22px 0; }
.block__title { font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 0 0 10px; font-weight: 600; }

.foot {
  padding: 18px calc(var(--pad) + var(--safe-r)) calc(18px + var(--safe-b)) calc(var(--pad) + var(--safe-l));
  text-align: center; color: var(--muted); font-size: 12px;
}

/* ---------- карточки и формы ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--line);
}
.card--login { width: min(360px, 100%); margin: 0 auto; padding: 26px; }
.card--error { text-align: center; }
.card__title { font-size: 21px; margin: 0 0 6px; font-weight: 600; }
.card__sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.card__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.errcode { font-size: 40px; margin: 0 0 4px; color: var(--muted); font-weight: 700; }

.field { margin-bottom: 14px; }
.label { display: block; font-size: 14px; color: var(--muted); margin: 12px 0 6px; }
.field .label:first-child { margin-top: 0; }

.input {
  width: 100%;
  font-size: 17px;               /* 17 px — iOS не зумит поле при фокусе */
  font-family: inherit;
  padding: 12px;
  min-height: var(--tap);
  border-radius: var(--radius-s);
  border: 1px solid #848e9c;   /* 3.3:1 на белом — граница поля видна (WCAG 1.4.11) */
  background: #fff;
  color: var(--fg);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.input--area { resize: vertical; line-height: 1.4; }
.input--file { padding: 10px; font-size: 15px; }
.input--small { font-size: 15px; padding: 10px; min-height: 40px; }
select.input { background-image: none; }

.hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.hint--pwa { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.err { color: var(--danger); font-size: 14px; margin: 14px 0 0; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 11px 16px;
  font-size: 16px; font-family: inherit; font-weight: 600;
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--card-2); color: var(--fg);
  text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.btn:active { filter: brightness(.96); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:active { background: var(--accent-2); }
.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:active { color: var(--fg); }
.btn--danger { background: #fff; border-color: #d9b0ab; color: var(--danger); }
.btn--wide { width: 100%; margin-top: 18px; }
.btn--small { min-height: 40px; padding: 8px 12px; font-size: 15px; }
.btn[disabled] { opacity: .5; }

/* ---------- бейджи ---------- */

.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge--big { font-size: 16px; padding: 7px 16px; }

/* Рекомендация ИИ — цветная заливка (В3) */
.badge--v-green  { background: #dff2e5; color: #0e5b27; border-color: #9fd2b2; }
.badge--v-orange { background: #fbeed6; color: #74460a; border-color: #e2bd79; }
.badge--v-gray   { background: #eaecf0; color: #3a424e; border-color: #cbd1da; }
/* «Пас, но» — сине-серый: это не «Пас» и не «Брать» */
.badge--v-violet { background: #e4eaf5; color: #2e4268; border-color: #aebfd9; }

/* Статус заявки — спокойная общая плашка, состояние показывает точка (В3) */
.badge--s {
  background: var(--chip); color: var(--chip-fg); border-color: var(--chip-line);
}
.badge--s::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; background: var(--dot, #7b8493);
}
.badge--s-gray   { --dot: #7b8493; }
.badge--s-blue   { --dot: #1e5fbd; }
.badge--s-violet { --dot: #5b4bc4; }
.badge--s-green  { --dot: #1a7f37; }
.badge--s-red    { --dot: #b3261e; }
.badge--s-orange { --dot: #a15c00; }

/* Мелкие пометки: «без одобрения», «доверенный», «эскалация» */
.badge--soft  { background: var(--chip); color: var(--chip-fg); border-color: var(--chip-line); }
.badge--alert { background: #fbe4e2; color: #8f1f18; border-color: #e3a9a3; }
.badge--good  { background: #dff2e5; color: #0e5b27; border-color: #9fd2b2; }
.badge--wait  { background: #fbeed6; color: #74460a; border-color: #e2bd79; }

/* ---------- список заявок ---------- */

.rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.rcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.rcard--pending { border-color: #e2bd79; background: #fffdf7; }
.rcard__body {
  display: block; padding: 14px 16px; color: inherit; text-decoration: none;
  min-height: var(--tap);
}
.rcard__top { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
/* `word-break: break-word` — старый синоним «рвать где угодно»: на 375px он
   ломал обычные слова посреди («исследован|ий»). Рвём только то, что само
   длиннее карточки. */
.rcard__title { font-size: 17px; font-weight: 600;
  overflow-wrap: break-word; word-break: normal; }
.rcard__meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px;
  color: var(--muted); font-size: 13px;
}
/* Длинная фамилия без пробелов иначе вылезает за край карточки: у названия
   перенос уже есть (.rcard__title), у автора его не было. */
.rcard__author { min-width: 0; overflow-wrap: anywhere; }
.rcard__note {
  display: block; margin-top: 8px; color: var(--muted); font-size: 13px;
  border-left: 2px solid var(--line); padding-left: 10px;
}
.rcard__actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 0 16px 14px; border-top: 1px solid var(--line); padding-top: 12px;
}
.act { display: flex; gap: 8px; align-items: center; margin: 0; flex: 1 1 auto; }
.act--approve { flex: 0 0 auto; }
.act--reject .input { flex: 1 1 120px; min-width: 0; }

.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty__title { font-size: 18px; color: var(--fg); margin: 0 0 6px; }
.empty__sub { margin: 0 0 20px; font-size: 14px; }

/* ---------- флеши и плашки ---------- */

.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.flash {
  padding: 12px 14px; border-radius: var(--radius-s); font-size: 14px;
  background: var(--card); border: 1px solid var(--line);
}
.flash--ok    { border-color: #9fd2b2; background: #eef8f1; }
.flash--warn  { border-color: #e2bd79; background: #fdf6e8; }
.flash--error { border-color: #e3a9a3; background: #fdeeec; }

.notice {
  margin: 14px 0; padding: 14px 16px; border-radius: var(--radius-s);
  background: var(--card); border: 1px solid var(--line);
}
.notice--ok    { border-color: #9fd2b2; background: #eef8f1; }
.notice--warn  { border-color: #e2bd79; background: #fdf6e8; }
.notice--error { border-color: #e3a9a3; background: #fdeeec; }
.notice__title { margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.notice__text { margin: 0 0 6px; font-size: 14px; word-break: break-word; }
.notice__hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.notice__pw { font-size: 20px; letter-spacing: .04em; user-select: all; -webkit-user-select: all; }
.notice__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.hb {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-s); font-size: 14px;
  background: var(--card); border: 1px solid var(--line); margin-bottom: 10px;
}
.hb__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--gray); }
.hb--ok .hb__dot { background: var(--ok); }
.hb--stale .hb__dot { background: var(--warn); }
.hb--stale { border-color: #e2bd79; background: #fdf6e8; }
.hb__extra { color: var(--muted); margin-left: 8px; font-size: 13px; }

.disk {
  padding: 10px 14px; border-radius: var(--radius-s); font-size: 13px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); margin-bottom: 10px;
}
.disk--warn { border-color: #e3a9a3; color: var(--danger); }
.disk__bar { width: 100%; height: 6px; margin-top: 8px; display: block; }

/* ---------- переключатель Рукопись / Ссылка (без JS) ---------- */

.switch {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.switch__opt {
  flex: 1 1 0; text-align: center; padding: 11px 8px; min-height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 16px; font-weight: 600; color: var(--muted);
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
#kind-pdf:checked  ~ .switch .switch__opt[for="kind-pdf"],
#kind-link:checked ~ .switch .switch__opt[for="kind-link"] {
  background: var(--accent); color: #fff;
}
#kind-pdf:focus-visible  ~ .switch .switch__opt[for="kind-pdf"],
#kind-link:focus-visible ~ .switch .switch__opt[for="kind-link"] { outline: 2px solid var(--accent); }

#kind-pdf:checked  ~ .fields .field--link,
#kind-pdf:checked  ~ .fields .hint--link,
#kind-link:checked ~ .fields .field--pdf,
#kind-link:checked ~ .fields .hint--pdf { display: none; }

/* И4: строка под заказчиком у рукописи и у ссылки разная — по рукописи полный
   отчёт присылает сам Агент2Мнение, по ссылке письмо о готовности шлёт пульт.
   Блок «Заказчик» живёт ВНЕ `.fields`, поэтому правило выше его не накрывает. */
#kind-pdf:checked  ~ .field--who .field--link,
#kind-link:checked ~ .field--who .field--pdf { display: none; }

/* ---------- загрузка ---------- */

.upload { margin-top: 16px; }
.upload__bar { width: 100%; height: 10px; display: block; }
.upload__text { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

progress { -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px;
  background: var(--card-2); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--card-2); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }

/* ---------- ключ-значение ---------- */

.kv { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 6px 12px; margin: 0; font-size: 15px; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; word-break: break-word; }
.kv__wrap { overflow-wrap: anywhere; }

/* ---------- таймлайн ---------- */

.tl { list-style: none; margin: 0; padding: 0 0 0 6px; }
.tl__item { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--line); }
.tl__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl__dot {
  position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--card-2); border: 2px solid var(--line);
}
.tl__body { display: block; }
.tl__label { display: block; font-size: 15px; }
.tl__ts { display: block; color: var(--muted); font-size: 13px; }
.tl__note { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.tl--done .tl__dot { background: var(--ok); border-color: var(--ok); }
.tl--current .tl__dot { background: var(--accent); border-color: var(--accent); }
.tl--current .tl__label { font-weight: 600; }
.tl--failed .tl__dot { background: var(--danger); border-color: var(--danger); }
.tl--cancelled .tl__dot { background: var(--gray); border-color: var(--gray); }
.tl--todo .tl__label { color: var(--muted); }

/* ---------- разделы memo ---------- */

.sect {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.sect__head {
  font-size: 16px; font-weight: 600; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 28px; list-style: none;
}
.sect__head::-webkit-details-marker { display: none; }
.sect--open .sect__head { cursor: default; }
.sect__more { font-size: 13px; font-weight: 500; color: var(--accent); white-space: nowrap; }
details[open] > .sect__head .sect__more { color: var(--muted); }

.prose { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 10px; }
.prose h1, .prose h2, .prose h3 { font-size: 16px; margin: 18px 0 6px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 12px; }
.prose li { margin-bottom: 4px; }
.prose blockquote {
  margin: 0 0 12px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--muted);
}
.prose code { font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.prose pre { background: var(--bg); padding: 12px; border-radius: 8px; overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.prose > table { display: block; overflow-x: auto; }

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

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card); }
.tbl { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14px; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl--off td { opacity: .55; }
.tbl__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tbl__sub { display: block; font-size: 13px; margin-top: 3px; }
/* Одна строка с многоточием: автор и заказчик. Полный текст — в title. */
.tbl__one { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl--req tbody tr + tr { border-top: 0; }
.tbl--req .tbl__c-kind, .tbl--req .tbl__c-date { white-space: nowrap; }
.tbl--req .tbl__c-verdict { white-space: nowrap; }
/* Ширины колонок держит `table-layout: fixed` (ниже, от 960px), поэтому длинная
   строка не может раздвинуть таблицу. Слова при этом рвать незачем:
   `break-word` переносит по пробелам и ломает только то, что само по себе
   длиннее колонки, — отсюда «исследован|ий» посреди слова больше не берётся. */
.tbl--req .tbl__c-title { overflow-wrap: break-word; word-break: normal; }
/* Название — максимум три строки, дальше многоточие; полное в title у ссылки.
   Без потолка одна книга с длинным названием делала строку в 14 строк высотой,
   а соседние колонки оставались полупустыми. */
.tbl__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden; }
.tbl__clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; }
.tbl--req .tbl__c-date { color: var(--muted); font-variant-numeric: tabular-nums; }
/* В таблице бейджи переносятся ПО ПРОБЕЛАМ (иначе «Забрано курьером, файл
   удалён с сервера» распирает колонку статуса на треть таблицы), но никогда
   посреди слова. Вне таблицы всё как было — там места хватает. */
.tbl--req .badge, .tbl--req .dec { white-space: normal; overflow-wrap: normal;
  word-break: normal; }
.link--row { font-weight: 600; font-size: 15px; color: var(--fg); text-decoration: none; }
.link--row:hover { color: var(--accent); text-decoration: underline; }

/* Заголовок карточки заявки: четыре строки и многоточие. Полное название —
   в подсказке к заголовку и строкой «Название целиком» в шапке заявки. */
.pagehead__title--clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  line-clamp: 4; overflow: hidden;
  overflow-wrap: break-word; word-break: normal;
}

/* Правка пользователя — вторая строка таблицы «Люди» */
.urow-edit > td { padding-top: 0; border-bottom: 1px solid var(--line); }
.uedit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.uedit .input { width: auto; flex: 1 1 170px; min-width: 0; }
.uedit__trusted { flex: 0 0 auto; }
/* Л1, Л2: роль и суточный лимит стоят в той же строке. Лимит — короткое поле:
   двузначное число не должно занимать столько же места, сколько почта. */
.uedit__role { flex: 0 1 150px; min-width: 120px; }
.uedit .uedit__limit { flex: 0 0 84px; min-width: 84px; }
.label--inline { margin: 0; font-size: 13px; color: var(--muted); flex: 0 0 auto; }

/* Л4: блок «Ждут одобрения» — сверху страницы «Люди» и заметнее остальных */
.block--pending .tablewrap { border-color: var(--accent); }
/* Р1: в колонке «Решение» остались две кнопки — роль, доверие и лимит правятся
   ниже, в строке человека. Поэтому таблице больше не нужны 880px, и она влезает
   на любой экран без горизонтальной прокрутки. */
.tbl--pending { min-width: 0; }
/* Р6: почту и имя человек вписывает сам в открытую форму. 64 знака до «@»
   допустимы, а без переноса такая строка распирает таблицу, и страница на
   1440px уезжает в горизонтальную прокрутку. */
.tbl--pending .tbl__c-who { overflow-wrap: anywhere; word-break: break-word; }
.tbl--pending .tbl__c-when { white-space: nowrap; }
.tbl--pending td { vertical-align: middle; }
/* «Одобрить» и «Отклонить» — две формы; в строку их ставит обёртка */
.pendact { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pendact .act { margin: 0; }
/* Р2: «Отклонить все» с галочкой подтверждения — под таблицей запросов */
.pendall {
  display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap;
  margin: 12px 0 0;
}
.pendall .hint { margin: 0; flex: 1 1 260px; }

/* Р6: в «Людях» почта и имя тоже приходят из открытой формы */
.tbl--users td { overflow-wrap: anywhere; word-break: break-word; }
.tbl--users .tbl__actions { overflow-wrap: normal; }
/* `anywhere` разрешает браузеру сжать колонку до одного знака, и обычный
   `kolya@eksmo.ru` в узком «Логине» ломался бы посередине без всякой нужды.
   Минимум даёт place под рядовой адрес; длинный всё равно перенесётся. */
.tbl--users .tbl__c-login { min-width: 170px; }

/* Р1: предупреждение о неподтверждённой почте — не «подсказка», а условие,
   при котором одобрять нельзя, поэтому и выглядит иначе */
.warnbox {
  margin: 0 0 12px; padding: 11px 13px; border-radius: var(--radius);
  border: 1px solid #e2bd79; background: #fdf6e8;
  font-size: 14px; line-height: 1.45;
}

/* Л4: ссылка «Запросить доступ» под формой входа */
.hint--register { margin-top: 14px; }

/* ---------- поиск и фильтры списка (GET-форма, без JS) ---------- */

.filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 0 0 14px;
}
.filters .input--small { width: auto; flex: 0 1 200px; min-width: 150px; }
.filters .filters__q { flex: 1 1 260px; min-width: 180px; }

/* Д1: период «с … по …». Пара полей держится вместе и переносится целиком —
   «с» без «по» на отдельной строке читалось бы как два разных фильтра. */
.filters__range { display: flex; gap: 6px; align-items: center; flex: 0 1 auto; }
.filters .filters__date { flex: 0 0 auto; min-width: 0; width: 9.5em; }

/* Д1: быстрые ссылки периода — под самой формой фильтров */
.quickrange {
  display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: baseline;
  margin: 8px 0 14px; font-size: 14px;
}
.quickrange__label { color: var(--muted); }
.quickrange__link { color: var(--accent); text-decoration: none; }
.quickrange__link:hover { text-decoration: underline; }
.quickrange__link--on { color: var(--fg); font-weight: 600; text-decoration: none; cursor: default; }

/* В2: на узком экране фильтры свёрнуты. Блок всегда `open`, а на широком экране
   прячется его сводка — свернуть там нечем и незачем, и фильтры видны всегда. */
.filterbox { margin: 0 0 6px; }
.filterbox__summary {
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  min-height: var(--tap); display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--muted);
}
.filterbox__summary::-webkit-details-marker { display: none; }
.filterbox__summary::before { content: "＋"; font-weight: 700; }
.filterbox[open] .filterbox__summary::before { content: "－"; }

/* ---------- сортировка кликом по заголовку ---------- */

.thsort { color: var(--muted); text-decoration: none; }
.thsort__arrow { margin-left: 5px; }
/* Заголовки таблицы заявок — в одну строку: «Название и автор», сломанное
   пополам, читалось как две разные колонки. Ширины под них подобраны ниже,
   в медиазапросе; стрелка сортировки идёт сразу за текстом. */
.tbl--req th { white-space: nowrap; }
.thsort:hover { color: var(--accent); text-decoration: underline; }
.thsort__arrow { font-size: 11px; opacity: .45; }
.thsort--on { color: var(--fg); }
.thsort--on .thsort__arrow { opacity: 1; color: var(--accent); }
.tbl__c--sorted { background: var(--card-2); }

/* Прочерк там, где значения ещё нет (рекомендация ИИ, статус в ОМАП) */
.nodata { color: var(--muted); font-weight: 600; cursor: help; }

/* ---------- пометка «с вопросами» и решение редакции ---------- */

/* П1: колонки «Тип» больше нет — у названия стоит короткая пометка */
.qmark {
  display: inline-block; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px; vertical-align: middle;
}

/* П3, Д2: статус в ОМАП — «Согласовано к покупке» / «Отказ» */
.dec {
  display: inline-block; font-size: 12px; font-weight: 700; white-space: nowrap;
  border-radius: 999px; padding: 2px 9px; border: 1px solid var(--line);
}
.dec--bought { color: #0e5b27; border-color: #9fd2b2; background: #dff2e5; }
.dec--passed { color: #8f1f18; border-color: #e3a9a3; background: #fbe4e2; }

.dec-line {
  margin: 10px 0 16px; font-size: 15px; font-weight: 600; color: var(--fg);
  border-left: 3px solid var(--line); padding: 2px 0 2px 12px;
}
.dec-line:last-child { margin-bottom: 0; }

/* В3: три строки состояния в карточке — шире подписи, крупнее значения */
.kv--state { margin-bottom: 14px; row-gap: 10px; align-items: baseline; }
.kv--state dd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* В3: те же три подписи на узком экране, в карточке списка */
.rcard__marks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.rcard__mark { font-size: 13px; color: var(--muted); display: inline-flex;
  align-items: center; gap: 6px; }

/* В5: заказчик в форме и адрес письма */
.field--who { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.who { margin: 0; font-size: 17px; font-weight: 600; }
.hint--warn { color: var(--warn); font-weight: 600; }
/* К3: состояние ручного запуска рядом с кнопкой «Запустить разбор сейчас» */
.hint--error { color: var(--danger); font-weight: 600; }
.hint--started { color: var(--ok); font-weight: 600; }
.act--runnow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.block--runnow { margin-top: 14px; }

.readhead__mark { display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--muted); }
.dec-line--bought { border-left-color: #1a7f37; }
.dec-line--passed { border-left-color: #b3261e; }

/* ---------- вопросы по подаче ----------
   П1: блок есть в любой заявке и свёрнут по умолчанию. Свёртывание делает
   сам <details> — без JS, без inline-обработчиков (CSP). */

.qbox {
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 0 16px; margin: 0 0 18px; min-width: 0;
}
.qbox[open] { padding-bottom: 4px; }
.qbox__summary {
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  padding: 14px 0; min-height: var(--tap); font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.qbox__summary::-webkit-details-marker { display: none; }
.qbox__summary::before {
  content: "＋"; color: var(--muted); font-weight: 700; flex: 0 0 auto;
}
.qbox[open] .qbox__summary::before { content: "－"; }
.qbox__intro { margin-top: 0; }
.qbox__items { display: grid; gap: 2px; margin: 10px 0 4px; }
.qbox__item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 6px; border-radius: 8px; cursor: pointer; font-size: 15px;
}
.qbox__item:hover { background: var(--card-2); }
.qbox__item input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.qbox__text { min-width: 0; }
.qbox__count { font-variant-numeric: tabular-nums; }
.qbox--over .qbox__count { color: var(--danger); }
.qbox--over #questions { border-color: var(--danger); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); }

/* Д4: «Что в файле» — два варианта радио в обычном fieldset. Рамку и отступы
   браузера снимаем: поле должно выглядеть как остальные поля формы. */
.fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.fieldset legend { padding: 0; }
.radio {
  display: flex; gap: 10px; align-items: flex-start; font-size: 15px;
  cursor: pointer; min-height: var(--tap); padding: 6px 0;
}
.radio input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.radio:focus-within { color: var(--accent); }

/* ---------- карточка: вопросы, письмо, «Полный обзор» ---------- */

.qlist { margin: 0 0 10px; padding-left: 20px; font-size: 15px; }
.qlist li { margin-bottom: 4px; }
.card__cta { margin: 16px 0 0; }
.block--verdict .card__row { margin-bottom: 14px; }

.mail {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: var(--radius-s); font-size: 14px;
  background: var(--card); border: 1px solid var(--line); margin-bottom: 10px;
}
.mail__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--gray); }
.mail--sent .mail__dot { background: var(--ok); }
.mail--dry .mail__dot,
.mail--no_email .mail__dot { background: var(--warn); }
.mail--stuck .mail__dot { background: var(--danger); }
.mail--stuck { border-color: #e3a9a3; background: #fdeeec; }

/* ---------- полный обзор ---------- */

.readhead { margin-bottom: 18px; }
.readhead__line { margin: 0 0 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.readhead__author { font-size: 16px; }
.readhead__verdict { margin: 0; }

.toc {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 12px 16px; margin-bottom: 22px;
}
.toc__title { margin: 0 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.toc__list { margin: 0; padding-left: 20px; font-size: 15px; }
.toc__list li { margin-bottom: 3px; }

.sect--read { background: transparent; border: 0; padding: 0; margin-bottom: 28px; }
.sect__head--read { display: block; font-size: 19px; margin: 0 0 8px; cursor: default; }
.sect--read .prose > :first-child { margin-top: 0; }

/* ---------- готовый текст приглашения ---------- */

.invite { margin-top: 16px; }
.invite__text { font-size: 14px; line-height: 1.5; }
.invite__actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.invite__done { margin: 0; color: var(--ok); font-weight: 600; }

/* ---------- фокус с клавиатуры ---------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.qbox__item:focus-within { background: var(--card-2); }
.check:focus-within { color: var(--accent); }

/* ---------- десктоп: единственный брейкпойнт ---------- */

@media (min-width: 960px) {
  .page { padding-top: 26px; padding-bottom: 48px; }
  /* На 1920 и 2560 таблице заявок нужна ширина: колонок восемь, и при 1200px
     всё лишнее отъедалось у названия. 1560 — предел, после которого строка
     таблицы становится слишком длинной, чтобы вести взгляд от названия
     к статусу. */
  .page--wide { max-width: 1560px; }
  .page--form { max-width: 640px; }
  .pagehead { margin-bottom: 18px; }
  .pagehead__title { font-size: 26px; }
  .block { margin: 26px 0; }

  .only-wide { display: block; }
  .only-narrow { display: none; }

  .tbl { min-width: 0; font-size: 14px; }
  .tbl th, .tbl td { padding: 11px 14px; }
  .tbl--req tbody tr:hover { background: var(--card-2); }

  /* Таблица заявок: ширины задаёт разметка, а не содержимое.
     С `auto` браузер считал ширину по самому длинному слову в клетке, и
     колонка названия (у которой перенос разрешён где угодно) получала
     минимум — 130px, — а статусы и даты забирали остальное. Здесь наоборот:
     семи служебным колонкам дано ровно столько, сколько нужно их заголовку и
     содержимому, а всё, что осталось, достаётся названию. Значения в пикселях,
     а не в процентах: на 1280 проценты дали бы колонкам дат меньше, чем нужно
     строке «18.09.26 16:48», и она вылезла бы в соседнюю клетку. */
  /* Нижний предел ширины самой таблицы: на 960–1100px восьми колонкам места
     уже нет, и без него названию оставалось бы 70px. Ниже предела прокрутку
     берёт на себя .tablewrap — как было и раньше; от 1280px она не нужна. */
  .tbl--req { table-layout: fixed; min-width: 1100px; }
  /* Отступы и кегль шапки в этой таблице плотнее остальных: восемь колонок,
     и каждые лишние 4px по краям клетки — это 56px, отнятых у названия. */
  .tbl--req th, .tbl--req td { padding: 11px 10px; }
  .tbl--req th { font-size: 12px; }
  .tbl--req .tbl__c-date { font-size: 13px; }
  /* «сабмишен» и «с вопросами» в таблице — мелкие пометки: в своём обычном
     кегле «сабмишен» не влезал в колонку формата и наползал на заказчика */
  .tbl--req .qmark { font-size: 11px; padding: 1px 6px; }
  /* Кегль бейджей здесь на пункт меньше общего: «Разбор готов» в 13px не
     помещался в колонку статуса и разваливался на две строки внутри плашки */
  .tbl--req .badge, .tbl--req .dec { font-size: 12px; }
  .tbl--req .tbl__c-title   { width: auto; }     /* всё, что осталось */
  .tbl--req .tbl__c-kind    { width: 94px; }
  /* 104px хватало ровно на «Анна Конс…»: имя коллеги в списке всех заявок —
     то, по чему строку и находят глазами, поэтому колонке дано место на имя
     и фамилию целиком */
  .tbl--req .tbl__c-who     { width: 150px; }
  .tbl--req .tbl__c-state   { width: 140px; min-width: 0; }
  .tbl--req .tbl__c-verdict { width: 144px; }
  .tbl--req .tbl__c-omap    { width: 126px; }
  .tbl--req .tbl__c-date    { width: 116px; }

  /* В2: на широком экране фильтры развёрнуты всегда — сворачивать их нечем */
  .filterbox__summary { display: none; }
  .filterbox { margin-bottom: 0; }

  .qbox__items { grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .kv { grid-template-columns: minmax(150px, 24%) 1fr; }
  .rcard__body { padding: 16px 18px; }
}

/* ---------- печать (полный обзор и карточка) ---------- */

@media print {
  .topbar, .foot, .flashes, .noprint, .pagehead__actions, .toc { display: none !important; }
  body { background: #fff; color: #000; }
  .page { max-width: none; padding: 0; }
  .card, .sect, .toc { background: transparent; border-color: #999; }
  a, .link, .link--row { color: #000; }
  .muted, .hint, .prose blockquote { color: #444; }
  .badge, .qmark, .dec { color: #000; background: transparent; border-color: #666; }
  .badge--s::before { background: #000; }
  .thsort { color: #000; text-decoration: none; }
  .thsort__arrow, .filterbox, .filters { display: none !important; }
  .nodata { color: #444; }
  .sect__head--read { page-break-after: avoid; }
  .prose { font-size: 12pt; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}