/* Приёмка компаний — дизайн в стиле Apple (SF-типографика, стеклянная шапка,
   белые карточки на #f5f5f7, pill-кнопки, мягкие тени). Без фреймворков. */

:root {
  /* Строка с плашкой этапа над карточкой: её высота и отступ под ней. Правая
     колонка сдвигается ровно на эту сумму, чтобы верх её первого блока совпал
     с верхом первого блока слева (25.07.2026). Одно место на оба правила. */
  --company-head-h: 27px;
  --company-head-gap: 14px;
  --bg-page: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-fill: #e8e8ed;
  --bg-fill-subtle: rgba(120, 120, 128, 0.08);
  --text: #1d1d1f;
  --text-secondary: #56565c;
  --text-tertiary: #6e6e73;
  --separator: rgba(0, 0, 0, 0.08);
  --hairline: #d2d2d7;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-tint: rgba(0, 113, 227, 0.12);
  --link: #0066cc;
  --green: #34c759;
  --green-text: #1e7a35;
  --green-tint: rgba(52, 199, 89, 0.12);
  --red: #ff3b30;
  --red-text: #c9000f;
  --red-tint: rgba(255, 59, 48, 0.08);
  --orange: #ff9500;
  --orange-text: #b53000;
  --orange-tint: rgba(255, 149, 0, 0.14);
  /* Цвета этапов — из палитры заказчика (20.07.2026). Подписи на них тёмные:
     белый текст на этих заливках даёт 2.1–2.6:1 и не проходит WCAG AA,
     тёмный — 5.8–8.0:1. Мягкий вариант используется как фон колонки. */
  --stage-sbor: #3fa9f5;
  --stage-sbor-soft: rgba(63, 169, 245, 0.10);
  --stage-kopiya: #7ac943;
  --stage-kopiya-soft: rgba(122, 201, 67, 0.12);
  --stage-realny: #22b14c;
  --stage-realny-soft: rgba(34, 177, 76, 0.10);
  /* «ЭЦП физлиц» (22.07.2026): сиреневый в ряд к голубому и зелёному.
     Контраст тёмного текста на заливке 6.2:1 — WCAG AA с запасом. */
  --stage-ecp: #ab8fe0;
  --stage-ecp-soft: rgba(171, 143, 224, 0.12);
  --stage-arhiv: #c7c7cc;
  --stage-arhiv-soft: rgba(120, 120, 128, 0.08);
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.10);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { padding: 20px 28px 64px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 18px; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: none; border-top: 1px solid var(--separator); margin: 18px 0; }

/* --- Шапка: стеклянная, липкая --- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 28px;
  padding: 12px 28px;
  background: rgba(251, 251, 253, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
}
.topbar nav { display: flex; align-items: center; gap: 15px; flex: 1; }
/* Пункты навигации — такие же прозрачные чипы, как кнопки загрузки файлов
   (21.07.2026): та же высота 34px и контур, ширина — по надписи. */
.topbar nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 6px 14px; border-radius: 980px;
  border: 1px solid var(--hairline);
  color: var(--text-secondary); font-size: 14px; text-decoration: none;
  /* фиксируем межстрочный: с наследованным 1.45 чип выходил 34.3px и стоял
     на 0.3px выше «Выйти», у которой свой line-height (24.07.2026) */
  line-height: 1.4; white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.topbar nav a:hover {
  color: var(--text); text-decoration: none;
  border-color: var(--text-tertiary);
}
.topbar nav a:focus-visible {
  outline: none; color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Круглой кнопки «+» с подсказкой больше нет (21.07.2026): вместо неё обычная
   ссылка «Добавить ООО / ИП», оформленная как остальные пункты навигации. */
.userbox { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); }
/* «Выйти» — обычного размера кнопок шапки: те же 34px, что у чипов навигации
   и кнопок загрузки файлов (24.07.2026) */
.userbox .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 6px 16px; font-size: 14px;
}
/* «Пользователи» рядом с «Выйти»: выглядит так же, как ссылки левой навигации */
/* Подчёркнута (25.07.2026): рядом стоит имя с ролью — обычный текст, и без
   подчёркивания ссылку от него на глаз не отличить. Подчёркивание чуть
   отодвинуто от букв, чтобы не задевать их нижние выносные. */
.userbox-link {
  color: var(--text); opacity: 0.72; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}
.userbox-link:hover { opacity: 1; text-decoration: underline; }

/* --- Flash --- */
.flashes { max-width: 1400px; margin: 14px auto 0; padding: 0 28px; }
.flash { padding: 11px 16px; border-radius: var(--radius-m); margin-bottom: 8px; font-size: 14px; }
.flash-error { background: var(--red-tint); color: var(--red-text); }
.flash-success { background: var(--green-tint); color: var(--green-text); }
/* Предупреждение о кончающемся диске (24.07.2026): не ошибка действия, а
   состояние сервера — поэтому янтарное, а не красное, и висит постоянно. */
.flash-warning {
  background: rgba(255, 149, 0, 0.14); color: #8a4b00;
  box-shadow: inset 0 0 0 1px rgba(255, 149, 0, 0.35);
}
.flash-note { display: block; margin-top: 3px; font-size: 12.5px; opacity: 0.8; }

/* --- Кнопки: pill --- */
.btn {
  display: inline-block; padding: 8px 18px;
  border-radius: 980px; border: none;
  background: var(--bg-fill-subtle); color: var(--text);
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none; line-height: 1.4;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:hover:not(:disabled) { background: rgba(120, 120, 128, 0.16); text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #e0352b; }
.btn-small { padding: 5px 13px; font-size: 13px; }
/* Админские действия карточки: «Удалённые» и удаление — в один ряд, с зазором */
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Подтверждение (21.07.2026) ------------------------------------------
   Своё окно вместо браузерного confirm: тот показывал «localhost:5000» и
   кнопки операционной системы. Разметку строит confirm-dialog.js. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: modal-fade 0.15s ease;
}
.modal {
  width: 100%; max-width: 420px; padding: 22px 24px 18px;
  background: var(--bg-elevated); border-radius: var(--radius-l);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  animation: modal-rise 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.modal-text {
  margin: 0 0 20px; font-size: 15px; line-height: 1.45; color: var(--text);
  text-align: center;
  /* длинное имя файла не должно распирать окно */
  overflow-wrap: anywhere;
}
.modal-buttons { display: flex; justify-content: center; gap: 10px; }
/* Перечень в окне-сообщении (31.07.2026): «чего не хватает для карточки».
   Заголовок по центру, а пункты — по левому краю: список из трёх строк,
   выровненный по центру, читается как стихи. */
.modal-list {
  margin: -8px 0 20px; padding: 0 0 0 20px;
  font-size: 14px; line-height: 1.5; color: var(--text-secondary);
  text-align: left; overflow-wrap: anywhere;
}
.modal-list li { margin: 4px 0; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.btn:disabled { background: var(--bg-fill); color: var(--text-tertiary); cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-tint); }

/* --- Вход --- */
.login-box {
  max-width: 380px; margin: 96px auto; background: var(--bg-elevated);
  padding: 40px 36px; border-radius: var(--radius-l); box-shadow: var(--shadow-lift);
}
.login-box h1 { text-align: center; font-size: 26px; margin: 0 0 24px; }
.login-box label { display: block; margin-bottom: 16px; }
.login-box input { width: 100%; margin-top: 6px; }
.login-box .btn { width: 100%; margin-top: 8px; padding: 11px 18px; font-size: 15px; }

/* --- Формы --- */
input, select, textarea {
  font: inherit; color: var(--text);
  padding: 9px 12px; border: 1px solid var(--hairline);
  border-radius: var(--radius-m); background: var(--bg-elevated); width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Ошибка под полем (app.js): красным, тем же тоном, что и звёздочка «обязательно» */
.field-error { font-size: 12px; line-height: 1.35; color: var(--red-text); }

/* Название банка по БИК — подпись под строкой р/с (30.07.2026), не поле.
   order: 1 — всегда НИЖЕ поля и ниже красной ошибки (её app.js дописывает в
   конец плитки, а подпись поля поднята order: -1).
   width: 0 + min-width: 100% — длинное название не должно раздувать сетку:
   .card-grid меряется по содержимому (width: max-content). */
.tile-note {
  order: 1;
  width: 0; min-width: 100%;
  font-size: 12px; line-height: 1.35; color: var(--text-secondary);
  overflow-wrap: anywhere;
}
/* БИК не введён — карточка выглядит ровно как раньше, без пустой полосы */
.tile-note:empty { display: none; }
/* «не найден» / «справочник не загружен» — тем же кеглем, но глуше: это не
   ошибка, ничего не блокируется */
.tile-note-miss { color: var(--text-tertiary); }
/* Плитки банковских строк равняются по верху: выросшая подпись под счётом
   иначе сдвинула бы соседний БИК вниз (.tile-field выравнен по центру).
   Двойной класс обязателен: у .tile-field такой же вес, и он объявлен ниже —
   одиночный .tile-top молча проигрывал бы ему (проверено в браузере). */
.tile-field.tile-top { align-self: start; }

/* Правило для всего проекта: длинное значение в поле ввода не растягивает
   вёрстку и не показывает свой хвост — видно начало, конец срезан многоточием.
   Прокрутку поля к началу возвращает app.js (браузер оставляет её в конце). */
input { text-overflow: ellipsis; }
/* Галочка выпадающего списка.
   Родную стрелку Chrome рисует вплотную к краю и на padding-right не реагирует,
   поэтому прячем её (appearance: none) и рисуем свою фоном — её положение
   задаётся точно. Сдвиг от края = обычный отступ плюс ширина самой галочки. */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* галочка отступает от края поля как обычный текстовый отступ */
  background-position: right 12px center;
  padding-right: 30px;
}
/* у Firefox остаётся пунктирная подсветка текста в закрытом списке */
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--text); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg-page); color: var(--text-secondary);
}
input.saving, select.saving, textarea.saving { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-tint); }
input.saved, select.saved, textarea.saved { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-tint); }
label { font-size: 13px; color: var(--text-secondary); display: block; }
label input, label select, label textarea { margin-top: 6px; }
.tile label input, .switch input { margin-top: 0; }
/* Страница «Пользователи» (25.07.2026): заголовки и блок добавления по
   центру — таблица наверху широкая, и прижатая к левому краю форма рядом с
   ней выглядела обрезком страницы. */
.page-title { text-align: center; }
.create-form {
  max-width: 540px; background: var(--bg-elevated); padding: 28px;
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  margin-left: auto; margin-right: auto;
  /* поля по два в ряд (25.07.2026): «Логин · Пароль», «Имя · Почта»,
     «Роль» одна слева. Промежуток по горизонтали 18px, по вертикали его
     даёт margin-bottom у подписи. minmax(0,…) — чтобы длинная подпись
     («Электронная почта») не растягивала свою колонку шире половины */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}
/* воздух вокруг заголовка формы: сверху отбивка от таблицы, снизу — столько
   же, сколько между полями внутри формы */
.create-form-title { margin: 40px 0 16px; }
.create-form label { margin-bottom: 16px; }
/* Кнопка — своей строкой во всю ширину и по центру. Сверху 28px, как и снизу
   до края блока (padding формы): 16px даёт margin-bottom подписи, ещё 12
   добираем здесь (25.07.2026). */
.create-form button[type="submit"] {
  grid-column: 1 / -1; justify-self: center; margin-top: 12px;
}

@media (max-width: 560px) {
  /* на телефоне два поля в ряд не помещаются — возвращаем колонку */
  .create-form { grid-template-columns: 1fr; }
}
/* форма добавления компании: плитки как на карточке, без белой подложки */
/* кнопка — по центру, под отцентрированной сеткой плиток */
/* «Добавить» переехала внутрь .card-grid (плитка .tile-action-pill), поэтому
   правила для кнопки — прямого потомка формы — здесь больше нет. */
.hint { color: var(--text-tertiary); font-size: 13px; }

/* --- Доска --- */
/* minmax(0,…) обязателен: у 1fr нижняя граница — max-content, и колонка с
   длинным названием растянула бы доску за край экрана вместо обрезки (24.07.2026) */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Юристу видны только два первых этапа (24.07.2026). Столбцы остаются такой же
   ширины, как на полной доске (треть за вычетом промежутков), а пара целиком
   встаёт по центру: 2 × (100% − 2×18px)/3 + 18px = (200% − 18px)/3. */
.board-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: calc((200% - 18px) / 3); margin-left: auto; margin-right: auto;
}
/* Цвет этапа задаётся один раз на колонке, шапка и фон берут его из переменной.
   Новый этап = один такой блок, править .column/.column h2 не нужно. */
.column-ecp { --stage: var(--stage-ecp); --stage-soft: var(--stage-ecp-soft); }
.column-sbor { --stage: var(--stage-sbor); --stage-soft: var(--stage-sbor-soft); }
/* «Принятые» (22.07.2026) — фон и плашка бывшего третьего столбца */
.column-prinyatye { --stage: var(--stage-realny); --stage-soft: var(--stage-realny-soft); }
.column {
  background: var(--stage-soft, var(--bg-fill)); border-radius: var(--radius-l);
  padding: 14px; min-height: 220px;
}
/* шапка колонки — плашка цвета этапа; текст тёмный, иначе не проходит AA */
.column h2 {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--stage, var(--bg-fill)); color: var(--text);
  border-radius: 980px; padding: 7px 8px 7px 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 0; margin: 0 0 12px;
}
.count {
  background: var(--bg-fill-subtle); color: var(--text-secondary);
  border-radius: 980px; padding: 1px 9px; font-size: 12px; font-weight: 600;
}
/* внутри цветной плашки нейтральный счётчик теряется — делаем его светлым */
.column h2 .count { background: rgba(255, 255, 255, 0.6); color: var(--text); }
.card {
  display: block; background: var(--bg-elevated); border-radius: var(--radius-m);
  padding: 13px 15px; margin-bottom: 10px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-lift);
  text-decoration: none;
}
/* Плашки всех колонок одной высоты (24.07.2026). Считается по самой высокой —
   «ЭЦП физлиц»: отступы 13+13, строка ФИО с чипом файла (34px), 4px между
   рядами и строка описания с кнопкой чата (34px) = 98. У компаний содержимое
   ниже, поэтому нижний ряд прижимается к низу (margin-top: auto) — кнопки
   чата во всех колонках оказываются на одной линии. */
.column .card { display: flex; flex-direction: column; min-height: 98px; }
.column .card .card-actions { margin-top: auto; }
/* Нижняя строка плашки «ЭЦП физлиц»: слева дни на этапе, посередине кнопка
   файла, справа чат (24.07.2026). Сетка 1fr auto 1fr держит кнопку ровно по
   центру плашки независимо от ширины боковых ячеек — тот же приём, что у
   ряда круглых кнопок эскиза. Выравнивание по низу, как у плашек компаний:
   тогда строка «N дн. на этапе» стоит на той же высоте, что и в остальных
   колонках, а кнопка файла — на одном уровне с кнопкой чата. */
.ecp-card .card-actions {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
}
.ecp-card .chat-cell { justify-self: end; }
/* Длинное название не переносится и не наползает на бейдж «р/с …»: обрезаем
   троеточием справа (24.07.2026). Заодно высота плашки перестаёт зависеть от
   длины названия — все плашки на доске одной высоты. */
.card-name {
  font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-meta { font-size: 12.5px; color: var(--text-secondary); }
/* то же для строк под названием: перенос сделал бы плашку выше соседних */
.column .card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-column { color: var(--text-secondary); text-align: center; padding: 28px 0; font-size: 13px; }
.archive { margin-top: 24px; }
.archive summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; font-size: 14px; }
/* срок жизни «Удалённых» — рядом с заголовком, обычным весом (24.07.2026) */
.archive-note { font-weight: 400; color: var(--text-tertiary); margin-left: 6px; }
/* minmax(0,…) — та же ловушка, что у .board: с голым 1fr длинное название
   в одну строку растянуло бы список за край экрана (24.07.2026) */
.archive-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.card-archived { opacity: 0.65; }

/* --- Страница компании --- */
/* блок шириной ровно с сетку плиток: всё внутри выравнено по её левому краю */
/* margin-bottom 34px — столько же, сколько над рядом кнопок «+ Карточка» /
   «+ Архив учдоков» (22px у .card-block-plain плюс 12px промежутка сетки),
   чтобы ряд стоял ровно посередине между блоком реквизитов и «Историей»
   (24.07.2026). Значение не складывается с 14px нижнего отступа .card-grid,
   а поглощает их: у .card-block нет ни рамки, ни внутреннего отступа снизу,
   поэтому поля схлопываются и остаётся большее из двух. */
.card-block { width: max-content; max-width: 100%; margin: 0 auto 34px; }
.card-block .card-grid { width: auto; margin-left: 0; margin-right: 0; }
/* Высота строки с плашкой этапа задана явно (25.07.2026): по ней правая
   колонка отступает вниз, чтобы её первый блок встал вровень с первым блоком
   слева. Иначе величину пришлось бы угадывать, и при смене кегля плашки они
   разъехались бы молча. */
.company-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  min-height: var(--company-head-h); margin-bottom: var(--company-head-gap);
}
/* Бейдж этапа — та же плашка, что и шапка колонки: один язык на доске и в карточке */
.status-badge {
  padding: 4px 13px; border-radius: 980px; font-size: 13px; font-weight: 600;
  background: var(--stage-sbor); color: var(--text);
}
.status-prinyatye { background: var(--stage-realny); }
.status-arhiv { background: var(--stage-arhiv); }

/* Бейдж р/с на плашке «Принятых» (22.07.2026): овал в строке названия,
   справа. Цвета прежних стадий, ужатые под надпись; текст тёмный — AA. */
.card-name-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.card-name-row .card-name { margin-bottom: 0; min-width: 0; }
.rs-badge {
  flex: none; border-radius: 980px; padding: 2px 10px;
  font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.rs-badge-kopiya { background: var(--stage-kopiya); }
.rs-badge-real { background: var(--stage-realny); }
/* Подсказка на плашках «Сбора» (22.07.2026): чего не хватает до «Принятых».
   Полный список — в title, поэтому курсор подсказывает, что можно навести. */
.todo-badge {
  flex: none; border-radius: 980px; padding: 2px 10px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: help;
  background: var(--bg-fill); color: var(--text-secondary);
}
.todo-badge-ready { background: var(--green-tint); color: var(--green-text); }

/* Плашка «ЭЦП физлица» (22.07.2026): как карточка компании, но с кнопками —
   поэтому это div, а не ссылка; переход по клику отдаёт board.js */
.ecp-card { cursor: pointer; }
/* Кнопка файла — тот же чип, что кнопки загрузки на карточке компании
   (24.07.2026): 34px, скрепка слева, ширина по содержимому. Стоит в правом
   верхнем углу плашки, в строке с ФИО (прежде была под ним, слева). */
.ecp-file-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: none; min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--hairline); border-radius: 980px;
  background: none; font: inherit; font-size: 14px;
  /* line-height числом (1.45 от body) давал 34.3px — min-height не срабатывал,
     и колонка «ЭЦП физлиц» уезжала от соседних на 0.3px на каждой плашке.
     1.4, как у .btn: 19.6 + 12 + 2 < 34, высота ровно 34 (24.07.2026) */
  line-height: 1.4;
  color: var(--text-secondary); cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ecp-file-btn .clip { flex: none; width: 15px; height: 15px; color: var(--text-tertiary); }
.ecp-file-btn:hover { color: var(--text); border-color: var(--text-tertiary); }
/* input внутри чипа невидим, но фокусируется — кольцо рисует сам чип */
.ecp-file-btn:focus-within {
  color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.ecp-file-btn.ecp-file-filled {
  background: var(--green-tint); border-color: transparent; color: var(--green-text);
}
.ecp-file-btn.ecp-file-filled .clip { color: var(--green-text); }
.ecp-del {
  flex: none; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.ecp-del svg { width: 14px; height: 14px; }
.ecp-del:hover { color: var(--red-text); background: var(--red-tint); border-color: transparent; }

/* --- Чат плашки (22.07.2026) --------------------------------------------- */
.company-card { cursor: pointer; }
/* Строки описания и кнопка чата — в одном ряду (24.07.2026): отдельной
   строкой кнопка делала плашку компании выше плашки «ЭЦП физлиц». */
.card-actions { display: flex; align-items: flex-end; gap: 10px; }
.card-metas { flex: 1; min-width: 0; }
.chat-cell { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* Кнопка чата — обычная круглая .round-btn (34px, значок 17px). Прежние 30/15px
   здесь ничего не меняли: .round-btn стоит в файле ниже и с той же
   специфичностью перебивал их — правила убраны, чтобы не вводить в заблуждение
   (24.07.2026). Высота плашки считается по этим 34px. */
.chat-count {
  min-width: 20px; text-align: center; border-radius: 980px; padding: 1px 7px;
  font-size: 11.5px; font-weight: 600;
  background: var(--bg-fill); color: var(--text-secondary);
  /* по счётчику тоже открывается чат (24.07.2026) — курсор об этом говорит */
  cursor: pointer;
}
/* адресовано лично мне — заметнее */
.chat-count-personal { background: var(--accent-tint); color: var(--accent); }

.chat-box {
  width: min(480px, 92vw); max-height: min(600px, 86vh);
  display: flex; flex-direction: column; padding: 18px 20px 16px;
  background: var(--bg-elevated); border-radius: var(--radius-l);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  animation: modal-rise 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* шапка окна: название слева, крестик справа (24.07.2026) */
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.chat-title { font-weight: 700; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.chat-close { flex: none; }
.chat-close svg { width: 16px; height: 16px; }
.chat-list {
  flex: 1 1 auto; overflow-y: auto; min-height: 120px;
  display: flex; flex-direction: column; gap: 10px; padding-right: 4px;
}
.chat-empty { color: var(--text-tertiary); font-size: 13.5px; text-align: center; padding: 30px 0; }
.chat-msg { background: var(--bg-fill-subtle); border-radius: var(--radius-m); padding: 8px 12px; }
.chat-msg-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 3px; }
.chat-msg-at { color: var(--text-tertiary); font-size: 11.5px; }
.chat-msg-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-mention { color: var(--accent); font-weight: 600; }
.chat-mention-me { background: var(--accent-tint); border-radius: 4px; padding: 0 3px; }
.chat-users { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-user-chip {
  border: none; cursor: pointer; border-radius: 980px; padding: 3px 10px;
  font-size: 12px; background: var(--bg-fill-subtle); color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-user-chip:hover { background: var(--accent-tint); color: var(--accent); }
.chat-form { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.chat-input {
  flex: 1 1 auto; resize: none; border: none; border-radius: var(--radius-m);
  padding: 8px 12px; font: inherit; font-size: 14px;
  background: var(--bg-fill-subtle); color: var(--text);
}
.chat-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.days { color: var(--text-tertiary); font-size: 13px; }

.company-layout { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; }
/* min-width:0 — иначе колонка не сожмётся уже своего содержимого (широкая таблица
   истории распирала страницу вбок вместо того, чтобы прокручиваться внутри себя) */
.company-main { min-width: 0; }
.company-side {
  position: sticky; top: 74px; min-width: 0;
  max-height: calc(100vh - 90px); overflow-y: auto;
  /* вниз ровно на строку с плашкой этапа: тогда верх правого блока совпадает
     с верхом первого блока слева на любой стадии (25.07.2026) */
  margin-top: calc(var(--company-head-h) + var(--company-head-gap));
}
.block {
  background: var(--bg-elevated); border-radius: var(--radius-l);
  padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow-card);
}

/* --- Плиточная сетка карточки компании ---
   Каждое поле и каждый файловый слот — отдельная плитка в сетке из 3 колонок
   (21.07.2026: было 5, но правая пара везде осталась пустой).
   Ширину плитки задаёт rules.CARD_LAYOUT (класс .tile-1 / .tile-2). */
.card-grid {
  display: grid;
  /* Все колонки одинаковые, а ширину задаёт самая широкая подпись:
     width:max-content сжимает сетку по содержимому, а равные доли 1fr
     подтягивают все колонки к самой требовательной. max-width не даёт вылезти. */
  /* Нижняя граница 155px — ровно min-width поля (.tile-input): без неё колонка
     ужимается по содержимому, и одна и та же сетка выходит разной ширины на
     разных формах. Так «ЭЦП физлица» (колонку там задавал чип, 139px) встала
     вровень с «ИНН» (155px) — колонки одинаковые везде (24.07.2026).
     Верхняя граница 1fr сохранена: колонка с самым широким содержимым по-
     прежнему подтягивает к себе остальные, и все три остаются равными. */
  grid-template-columns: repeat(3, minmax(155px, 1fr));
  width: max-content; max-width: 100%; margin-left: auto; margin-right: auto;
  gap: 12px; margin-bottom: 14px;
  /* плитка с файлами растёт вверх-вниз сама, соседние пустые не тянутся за ней */
  align-items: start;
}
/* Блок карточки (rules.card_blocks): подсетка на всю ширину, колонки те же,
   что у родителя, — плитки внутри блоков остаются выровненными между блоками. */
.card-block-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: 12px;
  align-items: start;
}
/* заголовок блока (rules.BLOCK_TITLES) — на всю ширину, над первой строкой */
.card-block-title {
  grid-column: 1 / -1;
  font-size: 13px; font-weight: 400; color: var(--text-secondary);
  /* до плиток — те же 4px, что от подписи до поля (замер на странице:
     gap 3px плюс дробный остаток строки). Отрицательный отступ гасит
     12px промежутка сетки: 12 − 8 = 4. */
  margin: 0 0 -8px;
}
/* --- ВНЕШНИЙ ВИД БЛОКОВ ---------------------------------------------------
   Убрать это одно правило — и карточка снова сплошная сетка, как раньше:
   разметка и раскладка не изменятся, исчезнут только подложка и отступы. */
.card-block-group {
  background: rgba(120, 120, 128, 0.07);
  border-radius: var(--radius-l);
  padding: 14px;
  /* Периметр — внутренней тенью, а не рамкой: рамка съела бы по пикселю от
     колонок подсетки, и плитки в блоках разъехались бы между собой. */
  box-shadow: inset 0 0 0 1px var(--hairline);
}
/* Блок без подложки (rules.BLOCK_PLAIN). Боковые отступы остаются, чтобы
   плитки стояли на тех же колонках, что и в остальных блоках, а вертикальные
   убраны: без подложки они лишь съедали расстояние. Отступ сверху доводит
   промежуток до 34px — высоты самой кнопки (12px даёт промежуток сетки). */
.card-block-plain {
  background: none; box-shadow: none;
  padding-top: 0; padding-bottom: 0; margin-top: 22px;
}
/* -------------------------------------------------------------------------- */

/* Форма добавления до ввода ИНН: единственное поле стоит без подложки —
   блок вокруг одного поля выглядит пустой рамкой. Класс вешает create.js
   и снимает, как только форма раскрылась. */
.card-grid-flat .card-block-group {
  background: none; box-shadow: none; padding: 0;
}
/* Пустой блок (все плитки скрыты) не занимает строку сетки и не рисуется:
   до ввода ИНН таких блоков пять, и они выглядели пустыми серыми полосами.
   Класс вешает create.js — на :has() полагаться нельзя, в старых браузерах
   всё правило целиком отбрасывается и пустые блоки остаются видимыми. */
.card-block-empty { display: none; }

/* Начало нового ряда: незаполненные ячейки предыдущего остаются пустыми.
   Ширину дублируем в каждом правиле — иначе сокращение grid-column у .tile-N
   ниже по файлу сбросило бы начальную колонку обратно. */
.tile-newrow.tile-1 { grid-column: 1 / span 1; }
.tile-newrow.tile-2 { grid-column: 1 / span 2; }
/* жёсткая привязка к столбцу (сбрасывается в медиазапросах ниже) */
.tile-col2.tile-1 { grid-column: 2 / span 1; }
.tile-col3.tile-1 { grid-column: 3 / span 1; }
.tile-1 { grid-column: span 1; }
.tile-2 { grid-column: span 2; }
.tile {
  position: relative; min-height: 68px;
  display: flex; flex-direction: column; justify-content: center;
  /* отступы под новую начинку: подпись (19px) + 3px + поле (34px) = 56px,
     плюс 6px сверху и снизу — плитка остаётся прежней высоты 68px */
  padding: 6px 14px; background: var(--bg-elevated);
  border-radius: var(--radius-m); box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
/* заметное кольцо фокуса: заливка --accent-tint давала контраст 1.1:1 */
.tile:focus-within { box-shadow: 0 0 0 2px var(--accent), var(--shadow-card); }
/* форма создания: до ввода ИНН видны только первые две строки, и раскладка
   ООО/ИП различается — лишние плитки прячет create.js этим классом */
.tile-hidden { display: none; }
/* распорка (rules._spacer): занимает ячейки, но ничего не рисует */
.tile-spacer { background: none; box-shadow: none; padding: 0; min-height: 0; }
/* Строка «Создана … · В текущем статусе с …» и её класс .card-meta-line
   убраны 24.07.2026 — вместе с ними ушёл и отступ, который они давали. */

/* Поля (21.07.2026): подпись стоит НАД прямоугольником поля, а сам белый
   прямоугольник и есть поле — высотой 34px, как кнопки загрузки файлов.
   Плитка-обёртка прозрачная: иначе получился бы прямоугольник в прямоугольнике.
   Прежняя «всплывающая» подпись внутри поля убрана: она требовала
   placeholder=" " и невидимого близнеца-sizer. */
.tile-field {
  background: none; box-shadow: none; padding: 0; min-height: 0;
  justify-content: flex-start; gap: 4px;
  /* поле ниже соседей (тумблер, кнопка) — держим его по центру строки */
  align-self: center;
}
.tile-input {
  width: 100%; border: none;
  /* Нижняя граница ширины. Сетка меряется по содержимому, и когда в форме
     добавления видно одно поле «ИНН», колонка сжималась до ширины подписи —
     поле превращалось в кружок на 64px. 155px — обычная ширина колонки. */
  min-width: 155px;
  min-height: 34px; padding: 6px 14px;
  border-radius: var(--radius-m); background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  font: inherit; font-size: 14px; color: var(--text);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
/* кольцо фокуса теперь на самом поле, а не вокруг прозрачной обёртки */
.tile-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent), var(--shadow-card); }
.tile-field:focus-within { box-shadow: none; }
.tile-input:disabled { background: var(--bg-elevated); color: var(--text-secondary); }
/* В плитке отступы больше: галочка отходит от края на 14px (обычный отступ
   поля) плюс 12px — ширину самой галочки. Место под неё — в padding-right.
   Картинку приходится повторить: сокращённое background у .tile-input выше
   сбрасывает background-image, заданный в общем правиле для select. */
select.tile-input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* тот же отступ от края, что у текста поля */
  background-position: right 14px center;
  padding-right: 32px;
}
/* --- Поля-справочники: ввод + список ранее введённого (21.07.2026) --------
   Выглядят как select (та же галочка, тот же отступ), но остаются обычным
   полем ввода: своё значение вписывается поверх подсказок. */
.suggest-wrap { position: relative; display: flex; }
.suggest-wrap .tile-input { padding-right: 32px; }
.suggest-toggle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--text-tertiary);
}
.suggest-toggle svg { width: 12px; height: 8px; }
.suggest-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius-s); }
.suggest-menu {
  position: absolute; z-index: 20; max-height: 260px; overflow-y: auto;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--bg-elevated); border-radius: var(--radius-m);
  box-shadow: var(--shadow-lift);
}
.suggest-item { display: flex; align-items: center; gap: 2px; }
.suggest-pick {
  flex: 1 1 auto; min-width: 0; border: none; background: none;
  text-align: left; cursor: pointer; padding: 7px 12px;
  border-radius: var(--radius-s); font: inherit; font-size: 14px;
  color: var(--text); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; transition: background 0.15s ease;
}
.suggest-pick:hover { background: var(--bg-fill-subtle); }
.suggest-pick:focus-visible, .suggest-del:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--accent);
}
.suggest-del {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: var(--radius-s); color: var(--red);
  display: flex; align-items: center; transition: background 0.15s ease;
}
.suggest-del svg { width: 15px; height: 15px; }
.suggest-del:hover { background: var(--red-tint); }
.suggest-empty {
  padding: 7px 12px; font-size: 13px; color: var(--text-tertiary);
  white-space: nowrap;
}

/* Плитка-кнопка (21.07.2026): такой же чип, как кнопки загрузки файлов —
   она стоит с ними в одной строке. Обёртка прозрачная, иначе получилась бы
   кнопка внутри прямоугольника. */
.tile-action {
  background: none; box-shadow: none; padding: 0; min-height: 0;
  /* кнопка во всю ширину столбца и прижата к низу строки — как чипы загрузки */
  align-items: stretch; align-self: end;
}
.tile-action:focus-within { box-shadow: none; }
.action-btn {
  width: 100%; min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--hairline); border-radius: 980px;
  background: none; text-align: center;
  font: inherit; font-size: 14px; color: var(--text-secondary); cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.action-btn:hover:not(:disabled) {
  color: var(--text); border-color: var(--text-tertiary);
}
/* Выключенная кнопка не бледнее остальных: заказчик просил одинаковый вид
   (21.07.2026). О том, что кнопка пока не работает, говорят курсор
   not-allowed и подсказка title, но на глаз она от рабочих не отличается. */
.action-btn:disabled { color: var(--text-secondary); cursor: not-allowed; }
.action-btn:focus-visible {
  outline: none;
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
/* Эскиз создан: кнопка становится зелёным чипом, как заполненный слот файла,
   и открывает меню «Скачать / Создать заново / Удалить» */
.action-filled {
  background: var(--green-tint); border-color: transparent; color: var(--green-text);
}
.action-filled:hover:not(:disabled) {
  background: var(--green-tint); border-color: transparent; color: var(--green-text);
}
/* пока генерация в пути — кнопку не жмут дважды */
.action-busy { opacity: 0.55; pointer-events: none; }

/* Круглые кнопки готового эскиза (22.07.2026): диаметр равен высоте кнопок,
   крайние прижаты к краям столбца, средняя ровно посередине */
.eskiz-tools {
  /* .tile задаёт колонку — здесь нужен ряд: крайние кнопки по краям */
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  align-self: end; min-height: 34px;
}
.eskiz-tools-hidden { display: none; }
.round-btn {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  color: var(--text-secondary); cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.round-btn svg { width: 17px; height: 17px; }
.round-btn:hover { color: var(--text); border-color: var(--text-tertiary); }
.round-btn:focus-visible {
  outline: none;
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.round-btn-danger:hover { color: var(--red-text); background: var(--red-tint); border-color: transparent; }

/* окно просмотра эскиза: та же подложка, что у подтверждений */
.preview-box {
  width: min(480px, 92vw); padding: 14px;
  background: var(--bg-elevated); border-radius: var(--radius-l);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  animation: modal-rise 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.preview-box img {
  display: block; width: 100%; max-height: min(480px, 70vh);
  object-fit: contain; border-radius: var(--radius-m); background: #fff;
}
/* «Добавить» — такая же плитка последней строки, что и кнопки «+ …»:
   те же размеры, но фирменный синий цвет из .btn-primary остаётся */
.tile-action .btn {
  width: 100%; min-height: 34px; padding: 6px 14px;
  font-size: 14px; line-height: 1.4; text-align: center;
}
/* «Добавить» — под сеткой, по центру её ширины. Отступ сверху равен высоте
   самой кнопки (34px); с margin-bottom сетки он схлопывается, поэтому видимое
   расстояние остаётся 34px, а не 34+14. */
.submit-row {
  display: flex; justify-content: center;
  width: max-content; max-width: 100%; margin: 34px auto 18px;
}
.submit-row .btn {
  min-height: 34px; padding: 6px 18px; font-size: 14px; line-height: 1.4;
}
/* до ввода ИНН кнопки ещё нет (create.js) */
.submit-row-hidden { display: none; }

/* поле заморожено (включён «р/с реальный»): данные видны, правка запрещена.
   Заливка на самом поле — обёртка теперь прозрачная */
.tile-locked { background: none; }
.tile-locked .tile-input {
  color: var(--text-secondary); cursor: not-allowed;
  background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--hairline);
}
/* название компании — жирным: оно заменяет собой убранный заголовок страницы */
.tile-input[data-field="name"], .tile-input[name="name"] { font-weight: 700; }
/* Chromium раздвигает точки в дате собственными отступами разделителей */
.tile-input[type="date"]::-webkit-datetime-edit-text { padding: 0; }
.tile-input[type="date"]::-webkit-datetime-edit-day-field,
.tile-input[type="date"]::-webkit-datetime-edit-month-field,
.tile-input[type="date"]::-webkit-datetime-edit-year-field { padding: 0; }
/* Подпись поля — над полем. Порядок в разметке обратный (поле, потом подпись),
   поэтому подпись поднимает order, а не перестановка в двух шаблонах.
   .tile-caption — строка «маленький тумблер + подпись» у полей из FIELD_TOGGLES;
   у остальных полей в ней только подпись. */
.tile-caption { order: -1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.tile-label {
  order: -1;
  font-size: 12.5px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* внутри строки подписи порядок прямой: сначала тумблер, потом текст */
.tile-caption .tile-label { order: 0; }
/* --red #ff3b30 даёт на белом 3.2:1 — для звёздочки берём тёмный вариант */
.tile-label .req { color: var(--red-text); font-weight: 400; margin-left: 2px; }
/* Близнец подписи больше не нужен: подпись стоит в потоке и сама задаёт ширину
   колонки. Оставлен в шаблонах, чтобы не переписывать их ради одной строки. */
.tile-sizer { display: none; }
.tile-label-top { font-size: 12px; color: var(--text-secondary); }

/* списки людей */
.tile-people { justify-content: flex-start; }
.tile-people .tile-input {
  padding: 4px 0 0; font-size: 13.5px; height: auto;
}

/* переключатели вместо галочек */
/* Плитка тумблера (21.07.2026): ни белой подложки, ни видимой подписи —
   только сам бегунок, прижатый к правому краю своего столбца и выровненный
   по центру строки. Что означает тумблер, видно по соседнему полю справа. */
.tile-toggle {
  background: none; box-shadow: none; padding: 0; min-height: 0;
  align-items: flex-end; justify-content: center; align-self: center;
}
/* Подпись невидима, но место занимает: благодаря этому бегунок встаёт ровно
   на ту же горизонталь, что поле ввода справа (у поля сверху своя подпись).
   opacity, а не display:none и не visibility — иначе для скринридера
   переключатель остался бы без имени. */
.tile-toggle .switch { flex-direction: column; align-items: flex-end; gap: 3px; }
.tile-toggle .switch-text { order: -1; opacity: 0; font-size: 12.5px; }
/* добор до высоты поля ввода (34px); лишний пиксель сверху — компенсация
   дробной высоты строки подписи, без него центры расходились на 1px */
.tile-toggle .switch-track { margin: 5px 0 4px; }
/* кольцо фокуса — на самом бегунке (см. .switch input:focus-visible ниже) */
.tile-toggle:focus-within, .tile-toggle:has(:focus-visible) { box-shadow: none; }

.switch { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  flex: none; width: 42px; height: 25px; border-radius: 980px;
  background: var(--bg-fill); position: relative;
  /* граница обязательна: серая заливка на белой плитке давала 1.2:1 — выключенный
     переключатель был почти не виден (WCAG 1.4.11 требует 3:1 для контролов) */
  border: 1px solid #8e8e93;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.switch-track::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease;
}
.switch input:checked + .switch-track { background: var(--green); border-color: var(--green-text); }
.switch input:checked + .switch-track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 4px var(--accent-tint); }
.switch input:disabled ~ .switch-text { color: var(--text-secondary); }
.switch input:disabled + .switch-track { opacity: 0.5; }
.switch-text { font-size: 14px; color: var(--text); }

/* Маленький тумблер внутри подписи поля (rules.FIELD_TOGGLES).
   Подпись рядом — 12.5px, поэтому переключатель уменьшен под её рост. */
.switch-sm { flex: none; }
.switch-sm .switch-track { width: 30px; height: 18px; }
.switch-sm .switch-track::after { width: 14px; height: 14px; }
.switch-sm input:checked + .switch-track::after { transform: translateX(12px); }
/* подпись самого тумблера не показываем — рядом стоит подпись поля,
   но для скринридера имя контрола остаётся */
.switch-sm .switch-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

/* Файловые слоты — компактные кнопки-чипы (21.07.2026).
   Плитки-карточки у слотов нет: сам слот и есть кнопка, её ширина — по подписи,
   а не по колонке сетки. Позицию в сетке по-прежнему задают tile-* классы. */
.tile-slot {
  background: none; box-shadow: none; padding: 0; min-height: 0;
  /* кнопка занимает всю ширину своего столбца, как поля ввода */
  align-items: stretch; justify-content: center;
  /* Прижимаем к низу строки: у поля рядом сверху подпись, и его прямоугольник
     заканчивается там же, где кнопка. Оба высотой 34px — значит совпадают и
     низ, и центр. По центру строки кнопка висела бы выше поля. */
  align-self: end;
}
/* клик по всей плитке открывает выбор файла (обработчик в company.js/create.js);
   :has — только там, где слот вообще редактируемый */
.tile-slot:has(.upload-input) { cursor: pointer; }
.slot-add {
  /* скрепка и подпись — единой группой по центру кнопки */
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 6px 14px; border-radius: 980px;
  border: 1px solid var(--hairline);
  font-size: 14px; color: var(--text-secondary);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.slot-name { flex: 0 1 auto; }
/* курсор и подсветка — только когда слот реально кликабельный (роль с правами) */
label.slot-add { cursor: pointer; }
label.slot-add:hover { color: var(--text); border-color: var(--text-tertiary); }
/* input больше не hidden, прячем его так, чтобы он оставался в порядке табуляции */
.upload-input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  padding: 0; border: 0; /* иначе глобальные отступы полей раздувают его до 26x20 */
}
/* кольцо фокуса теперь на самом чипе, а не вокруг невидимой плитки */
.slot-add:focus-within {
  color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.tile-slot:focus-within { box-shadow: none; }
/* скрепка слева от подписи (order, чтобы не трогать разметку обоих шаблонов) */
.slot-add .clip { order: -1; flex: none; width: 15px; height: 15px; color: var(--text-tertiary); }
/* загружено: заливка вместо контура — состояние видно и без чтения подписи */
.slot-filled .slot-add {
  background: var(--green-tint); border-color: transparent; color: var(--green-text);
}
.slot-filled .slot-add .clip { color: var(--green-text); }
.slot-name .optional {
  display: block; font-style: normal; font-size: 11.5px; color: var(--text-tertiary);
}
/* Отдельной отметки ✔ больше нет: о наличии файла говорит цвет чипа. */
.slot.dragover { background: none; box-shadow: none; }
.slot.dragover .slot-add {
  background: var(--accent-tint); border-color: var(--accent);
  color: var(--text);
}
.slot.uploading { opacity: 0.55; }
/* Список загруженных файлов под чипом не показываем (21.07.2026): о наличии
   файла говорит зелёный цвет самой кнопки. Разметка списка остаётся видимой
   для JS — из неё берутся id, имена и ссылки для меню «Скачать / Удалить»,
   которое открывается кликом по зелёной кнопке (company.js). */
.tile-slot .file-list { display: none; }

/* Меню зелёной кнопки: единственный путь к самому файлу, раз имя скрыто */
.slot-menu {
  position: absolute; z-index: 20;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--bg-elevated); border-radius: var(--radius-m);
  box-shadow: var(--shadow-lift);
}
.slot-menu-item {
  border: none; background: none; text-align: left; cursor: pointer;
  padding: 7px 12px; border-radius: var(--radius-s);
  font: inherit; font-size: 14px; color: var(--text);
  transition: background 0.15s ease;
}
.slot-menu-item:hover { background: var(--bg-fill-subtle); }
.slot-menu-item:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--accent);
}
.slot-menu-danger { color: var(--red-text); }
.slot-menu-danger:hover { background: var(--red-tint); }
/* отступ сверху — только когда файлы есть; иначе пустой список сдвигает подпись
   вверх и она перестаёт стоять по центру плитки */
.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li:first-child { margin-top: 6px; }
.file-list li { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 13px; flex-wrap: wrap; }
/* длинное имя файла не растягивает плитку на пол-экрана; полное — в title */
.file-list a, .file-list .file-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.file-meta { color: var(--text-tertiary); font-size: 11.5px; }
.btn-del {
  border: none; background: none; color: var(--red); cursor: pointer;
  font-size: 13px; padding: 2px 8px; border-radius: 980px;
  transition: background 0.2s ease;
}
.btn-del:hover { background: var(--red-tint); }

/* --- Переходы --- */
.transition { margin-bottom: 14px; }
.btn-transition { width: 100%; padding: 11px 18px; font-size: 14px; }
.missing-block {
  /* 20px — столько же, сколько отступ блока сверху: раньше «Не хватает»
     жалось к кнопке, хотя над кнопкой воздуха было вдвое больше
     (25.07.2026) */
  margin-top: 20px; background: var(--red-tint);
  border-radius: var(--radius-m); padding: 10px 13px;
}
/* «Сменить статус» отходит от поля на те же 20px, что и остальные блоки
   правой колонки друг от друга (25.07.2026) */
.force-status button { margin-top: 20px; }
.missing-title { font-size: 12.5px; font-weight: 600; color: var(--red-text); margin-bottom: 5px; }
.missing-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--red-text); }
.missing-list li { margin-bottom: 3px; }
.hidden { display: none; }
/* не видно на экране, но доступно скринридеру (навигация по заголовкам) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

/* --- История и таблицы --- */
/* таблица прокручивается внутри себя, иначе на узком экране едет вся страница */
.table-scroll { overflow-x: auto; }
.history, .users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.history th, .history td, .users-table th, .users-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--separator); vertical-align: middle;
}
.history tbody tr:hover, .users-table tbody tr:hover { background: rgba(0, 0, 0, 0.02); }
.history th, .users-table th {
  color: var(--text-tertiary); font-weight: 600; font-size: 12px;
}
.users-table input, .users-table select { font-size: 13px; padding: 5px 8px; }
/* столбец «Статус»: галочка ровно под серединой подписи (25.07.2026) */
.users-table th.col-status, .users-table td.col-status { text-align: center; }

@media (max-width: 1000px) {
  .company-layout { grid-template-columns: 1fr; }
  /* колонка одна — правый блок идёт под левым, и выравнивать по верху нечего */
  .company-side {
    position: static; max-height: none; overflow-y: visible; margin-top: 0;
  }
  .board { grid-template-columns: 1fr; }
  /* на узком экране колонки и так в одну — центровать нечего */
  .board-cols-2 { width: auto; }
  .archive-list { grid-template-columns: 1fr; }
  /* плитки: 3 колонки → 2, широкие занимают всю строку */
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  /* столбцов меньше — привязка к 3-му создала бы лишнюю колонку за краем */
  .tile-col3.tile-1 { grid-column: auto / span 1; }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
  /* на узком экране отступы блока и длинные подписи в одну строку вместе
     вылезали за край — ужимаем первое и разрешаем перенос второму */
  .card-block-group:not(.card-block-plain) { padding: 12px 8px; }
  .card-block-plain { padding-left: 8px; padding-right: 8px; }
  .tile-label { white-space: normal; }
  .tile-2 { grid-column: span 1; }
  .tile-col2.tile-1, .tile-col3.tile-1 { grid-column: auto / span 1; }
  .tile-newrow.tile-1, .tile-newrow.tile-2 { grid-column: auto / span 1; }
  /* на узком экране шапка переносится, а не вылезает за край */
  .topbar { flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; }
  .topbar nav { flex: 1 1 100%; }
  main { padding: 16px 16px 48px; }
}