/* White One · Казначейство — каркас интерфейса. UX.md §11.
   Без фреймворков и сборки. Цвета — ТОЛЬКО через переменные ниже: тёмная тема
   переопределяет их в `theme.css` (режимы «как в системе» / светлая / тёмная,
   атрибут `data-theme` на <html>). Новый жёстко зашитый цвет в правилах ломает
   тёмную тему и валит тест-сторож `tests/test_theme.py`. */

/* --- Шрифт: Golos Text, свои файлы (DESIGN.md §2.3) -----------------------
   Кириллица родная, цифры табличные. Подмножества и `unicode-range` — как
   отдаёт Google, но файлы лежат у нас: наружу интерфейс не ходит.
   Начертания 400–700 в одном переменном файле на подмножество. */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-text-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-text-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/golos-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* --- Палитра: светлая тема (значения по умолчанию) ---
     Мир предмета: холодный камень стола, белая бумага счёта, синие чернила
     штампа, красная печать отказа (DESIGN.md §2.1). */
  --bg: #eceef1;
  --surface: #ffffff;
  /* Вторая поверхность: колонка-«стоп» на доске, подложка служебных полос.
     Шапку таблицы ею больше не заливаем — там линия, а не плашка. */
  --surface-2: #f3f5f7;
  --line: #d9dde3;
  /* Линия, которая делит смысл, а не просто очерчивает: шапка таблицы,
     подвал формы, граница листа под прокруткой. */
  --line-strong: #b4bcc7;
  --text: #14181d;
  --muted: #5b6470;
  --accent: #1f3a93;
  --accent-hover: #172c73;
  --ok: #1b7f4a;
  --warn: #b26a00;
  --danger: #b3261e;
  --info-plan: #6b4fbb;
  --info-flow: #0b7285;
  --note: #8a6508;
  --note-bg: #fbf0d5;

  /* Текст на сплошной заливке цветом состояния (кнопки, бейджи «оплачено»
     и т. п.). В тёмной теме заливка светлая, поэтому текст на ней тёмный. */
  --accent-text: #ffffff;
  /* Текст на заливке цветом `--text` (активный чип, сегмент). */
  --invert-text: var(--bg);
  --invert-muted: color-mix(in srgb, var(--bg) 72%, var(--text));

  /* Основа для мягких подложек: с чем смешивается цвет состояния в чипах.
     В светлой теме — белый, в тёмной — тон поверхности. */
  --mix-base: #ffffff;
  --muted-soft: color-mix(in srgb, var(--muted) 12%, var(--mix-base));
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--mix-base));
  --ok-soft: color-mix(in srgb, var(--ok) 14%, var(--mix-base));
  --warn-soft: color-mix(in srgb, var(--warn) 16%, var(--mix-base));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--mix-base));
  --plan-soft: color-mix(in srgb, var(--info-plan) 12%, var(--mix-base));
  --flow-soft: color-mix(in srgb, var(--info-flow) 16%, var(--mix-base));

  /* Чернила состояния: тот же цвет, подмешанный к тексту. Нужен там, где
     цветом пишут поверх мягкой подложки: чистый `--warn` на `--warn-soft`
     давал 3,5:1, а бейдж «На удержании» — 2,36:1 (ревизия 16.09). */
  --ok-ink: color-mix(in srgb, var(--ok) 75%, var(--text));
  --warn-ink: color-mix(in srgb, var(--warn) 75%, var(--text));
  --danger-ink: color-mix(in srgb, var(--danger) 75%, var(--text));
  --plan-ink: color-mix(in srgb, var(--info-plan) 75%, var(--text));
  --flow-ink: color-mix(in srgb, var(--info-flow) 75%, var(--text));
  --accent-ink: color-mix(in srgb, var(--accent) 75%, var(--text));
  --note-ink: color-mix(in srgb, var(--note) 75%, var(--text));

  /* Совсем светлая подложка полос состояния и подсветки строк. */
  --danger-wash: color-mix(in srgb, var(--danger) 6%, var(--mix-base));
  --warn-wash: color-mix(in srgb, var(--warn) 6%, var(--mix-base));
  --accent-wash: color-mix(in srgb, var(--accent) 7%, var(--mix-base));
  --row-hover: color-mix(in srgb, var(--accent) 4%, var(--surface));
  --row-selected: color-mix(in srgb, var(--accent) 10%, var(--surface));
  /* Бейдж «закрыта»: серо-синяя плашка, а не цвет состояния. */
  --closed: #3b434e;

  /* Поля ввода: в тёмной теме поле темнее карточки, иначе сливается с ней. */
  --field-bg: var(--surface);
  --focus: var(--accent);

  /* Окно счёта: подложка вокруг листа PDF/картинки. Светлой не бывает —
     белый лист должен читаться как лист, а не сливаться с карточкой. */
  --viewer-bg: #5b6068;
  --viewer-text: #f2f4f7;

  /* Тени — только у того, что всплыло над страницей (DESIGN.md §2.4).
     В тёмной теме тень плотнее, иначе её не видно. */
  --overlay: rgba(0, 0, 0, .3);
  --shadow-pop: 0 6px 18px rgba(20, 24, 29, .14);
  --shadow-bar: 0 -4px 14px rgba(20, 24, 29, .10);
  --shadow-drawer: 2px 0 14px rgba(20, 24, 29, .14);
  /* Тень у края прокрутки таблиц и доски: цвет и его прозрачный конец. */
  --scroll-shade: rgba(20, 24, 29, .13);
  --scroll-shade-0: rgba(20, 24, 29, 0);
  --surface-fade: rgba(255, 255, 255, 0);
  --bg-fade: rgba(236, 238, 241, 0);

  --sidebar-w: 220px;
  --topbar-h: 56px;
  /* Радиус — это иерархия: поле, кнопка, панель (DESIGN.md §2.4). */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-field: 4px;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h2, h3 { font-size: 16px; }
p { margin: 0 0 8px; }
/* Моноширинный — только там, где цифру сверяют с цифрой: счёт, БИК, код. */
code, .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.ok-text { color: var(--ok-ink); }
.danger-text { color: var(--danger-ink); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num--estimate { color: var(--muted); }
.num--base { color: var(--muted); font-size: 13px; }
.big { font-weight: 600; }

/* Сумма: рубли — чернилами, копейки и знак валюты тише и мельче.
   Глаз читает разряды, а не хвост (DESIGN.md §2.3). */
.amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount--estimate { color: var(--muted); }
/* Копейки и знак валюты тише, но не мельче 11 px: в таблице 70 % от 13 px
   превращались в 9 px, и рубль переставал читаться. */
.amount__frac, .amount__cur { color: var(--muted); font-size: max(11px, .7em); font-weight: 500; }
.amount__cur { margin-left: .18em; }

/* Ярлык — это предложение, а не капс с разрядкой (DESIGN.md §3 п. 4). */
.label { font-size: 13px; font-weight: 500; color: var(--muted); }

/* --- Верхняя панель --- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  height: var(--topbar-h); padding: 0 20px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
/* Словесный знак вместо склейки «White One · Казначейство»: имя бренда и
   под ним, мельче, название системы — как шапка фирменного бланка. */
.topbar__brand { display: flex; flex-direction: column; justify-content: center; color: var(--text); white-space: nowrap; }
.topbar__brand:hover { text-decoration: none; }
.topbar__word { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.topbar__sub { font-size: 12px; color: var(--muted); line-height: 1.15; }
.topbar__search { flex: 1 1 360px; max-width: 360px; }
.topbar__search input {
  width: 100%; height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-field); background: var(--bg);
  font: inherit; color: inherit;
}
.topbar__bell { position: relative; margin-left: auto; font-size: 16px; }
.badge-count {
  position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--danger); color: var(--accent-text); font-size: 11px; line-height: 16px; text-align: center;
}
.topbar__burger { display: none; }
.topbar__user { position: relative; }
.topbar__user summary { cursor: pointer; list-style: none; padding: 4px 8px; border-radius: var(--radius-sm); }
.topbar__user summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: 34px; min-width: 180px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 4px;
}
.menu-pop a, .menu-pop__btn {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.menu-pop a:hover, .menu-pop__btn:hover { background: var(--bg); text-decoration: none; }

/* --- Каркас --- */
.layout { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-h)); }
.sidebar {
  position: sticky; top: var(--topbar-h);
  flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 8px 0; background: var(--surface); border-right: 1px solid var(--line);
}
.sidebar__item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 13px; border-left: 3px solid transparent; color: var(--text);
}
.sidebar__item:hover { background: var(--bg); text-decoration: none; }
.sidebar__item.is-active { background: var(--accent-wash); border-left-color: var(--accent); font-weight: 600; }
.sidebar__title { flex: 1; }
.sidebar__badge {
  min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--line);
  color: var(--text); font-size: 12px; line-height: 18px; text-align: center;
}
.sidebar__badge.is-overdue { background: var(--danger); color: var(--accent-text); }
/* Главное меню: три основные функции сверху, остальное под чертой (владелец 16.09).
   Подпись черты — обычное слово, без капса и разрядки. */
.sidebar__divider {
  margin: 12px 12px 4px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.sidebar__item--main .sidebar__title { font-weight: 600; }
/* «Остальное» свёрнуто по умолчанию (владелец 16.10.2026): подпись черты — она
   же кнопка; стрелка поворачивается, сумма счётчиков видна только свёрнутой. */
.sidebar__more > summary {
  display: flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer;
}
.sidebar__more > summary::-webkit-details-marker { display: none; }
.sidebar__more > summary::after { content: "▸"; margin-left: auto; font-size: 12px; transition: transform .15s; }
.sidebar__more[open] > summary::after { transform: rotate(90deg); }
.sidebar__more[open] .sidebar__more-badge { display: none; }
/* Отделы под «Доской» (владелец 16.10.2026): тише главных пунктов, со сдвигом,
   число справа — заявки отдела в работе. Пустой отдел — бледнее. */
.sidebar__depts { padding: 0 0 6px; }
.sidebar__dept { padding: 5px 12px 5px 25px; font-size: 13px; }
.sidebar__dept--child { padding-left: 37px; }
.sidebar__dept.is-quiet { color: var(--muted); }
.sidebar__count { font-size: 12px; color: var(--muted); }

.content { flex: 1 1 auto; min-width: 0; padding: 20px 24px 64px; }
.content--bare { padding: 0; }
.content__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; }
.page-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.page-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
/* Панель кнопок карточки заявки (UX 4.5.3): слева основные, справа второстепенные. */
.page-actions--card {
  margin: 0 0 12px; margin-left: 0; flex-wrap: wrap; align-items: center;
  padding: 8px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.page-actions--card .page-actions__spacer { margin-left: auto; }

/* --- Карточки и секции --- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 24px;
  /* `fieldset` по умолчанию `min-inline-size: min-content` — без этого длинная
     кнопка или слово распирают страницу вбок на телефоне. */
  min-width: 0;
}
.card__title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.card p { max-width: 72ch; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }

/* --- Список «ключ — значение» (профиль, обмен с 1С) ---
   Селектор с элементом: ниже по файлу `.summary` — это ещё и строка
   показателей над доской (flex), и без `dl` она перебивала бы сетку. */
dl.summary { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 0 16px; margin: 0; }
dl.summary dt { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 26px; }
dl.summary dd { margin: 0; line-height: 26px; min-height: 26px; }

/* Верхний блок заявки (UX 4.5.2): подпись слева, значение справа. */
.top-block { margin-bottom: 16px; }
.top-block__rows { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0 12px; margin: 0; }
.top-block__rows dt {
  font-size: 13px; font-weight: 500; color: var(--muted);
  line-height: 22px; padding: 3px 0;
}
.top-block__rows dd { margin: 0; line-height: 22px; padding: 3px 0; min-width: 0; overflow-wrap: anywhere; }
.top-block__comments { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.top-block__comments p { margin: 0 0 4px; }
.top-block--compact { margin-bottom: 0; padding: 12px; }
@media (min-width: 1000px) {
  .top-block--compact .top-block__rows {
    grid-template-columns: 110px minmax(0, 1fr) 110px minmax(0, 1fr);
  }
}

/* --- Экран согласования (UX 4.5.1): данные и решение слева, счёт справа --- */
.card-split { display: block; }
.card-split__main, .card-split__rest { min-width: 0; }

/* Карточка заявки без шапки страницы: место над счётом отдано счёту (владелец 16.09). */
.page--card .content__head { display: none; }
.page--card .content { padding: 10px 16px 64px; }
/* Меню на карточке спрятано, чтобы не отвлекало; ☰ в шапке выдвигает его поверх. */
@media (min-width: 720px) {
  .page--card .layout { display: block; }
  .page--card .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: 260px;
    transform: translateX(-100%); transition: transform .2s ease; z-index: 45;
    box-shadow: var(--shadow-drawer);
  }
  .page--card .sidebar.is-open { transform: translateX(0); }
  .page--card .topbar__burger { display: inline-flex; }
}
.top-block__more { margin-top: 6px; }
.top-block__more summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.top-block__more[open] summary { margin-bottom: 4px; }
.req-details { font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Шапка экрана согласования (UX 4.5.2а): сумма-герой, штамп, кому, за что,
   «в финансах». Это лист счёта: белая бумага, тонкая линия, никакой тени. */
.hero {
  position: relative;
  margin: 0 0 12px; padding: 14px 18px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); min-width: 0;
}
.hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 2px; font-size: 13px; }
.hero__seq { font-weight: 500; font-size: 13px; color: var(--muted); }
/* Номер в списках: «МЕД-7 (№ 12)» — первый чернилами, второй карандашом. */
.reqno { font-weight: 600; color: var(--text); }
.reqno__global { color: var(--muted); }
/* Сумма — герой экрана: на неё смотрят первой, всё остальное тише. */
.hero__amount {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.hero__amount-value { min-width: 0; }
.hero__amount-note { font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; line-height: 1.4; }
/* Штамп стоит справа от суммы — как оттиск в углу счёта. Он вынут из потока,
   иначе длинная пометка о сумме утаскивает его на следующую строку. */
.hero__stamp { position: absolute; top: 16px; right: 18px; }
.hero:has(.hero__stamp) .hero__top,
.hero:has(.hero__stamp) .hero__amount { padding-right: 150px; }
.hero__who { margin-top: 10px; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* Ссылка на контрагента — чернилами: синяя жирная строка 20 px спорила с суммой. */
.hero__who-link { color: inherit; }
.hero__who-link:hover { color: inherit; text-decoration: underline; }
.hero__who-note { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
/* Контакт блогера/креатора (DECISIONS 2.3e): тихо, рядом с именем получателя. */
.hero__contact { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.hero__paid-for { font-size: 16px; font-weight: 500; }
.hero__what { margin-top: 6px; font-size: 16px; line-height: 1.4; max-width: 72ch; overflow-wrap: anywhere; }
.hero__finance {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.hero__finance-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.hero__finance-value { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.hero__finance-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.finance-form, .finance-split { flex: 1 1 100%; min-width: 0; }
.finance-form__cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.finance-form__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.finance-split .card { margin-bottom: 8px; }
.finance-split__cancel { margin-bottom: 4px; }

/* Блок решения (UX 4.5.3а): под ключевыми данными, три кнопки крупно. */
.decision {
  margin: 0 0 16px; padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius);
}
.decision__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.decision__title { font-weight: 600; }
.decision__next { margin-left: auto; white-space: nowrap; }
.decision__caption {
  margin: 8px 0 4px; font-size: 13px; font-weight: 500; color: var(--muted);
}
.decision__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.decision__btn { flex: 1 1 120px; height: 48px; font-size: 15px; font-weight: 600; }
.decision__all { margin-top: 8px; }
.decision__nav { margin-left: auto; display: flex; gap: 12px; white-space: nowrap; }
.decision__comments { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.decision__comments li { margin: 0 0 3px; overflow-wrap: anywhere; }
.decision__comment { margin: 0 0 10px; }
.viewer--empty .viewer__body { background: var(--bg); }
.viewer--empty .viewer__fallback { color: var(--muted); }
.viewer--empty .viewer__fallback p { margin: 0; }
/* Панель второстепенных кнопок без единой кнопки — пустая рамка не нужна. */
.page-actions--card:not(:has(.btn)) { display: none; }
.cell-link, .cell-link:hover { color: inherit; }

/* Окно счёта: PDF/картинка на месте, шапка с файлами и ссылками. */
.viewer {
  display: flex; flex-direction: column; min-width: 0; margin: 0 0 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.viewer__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 4px 10px; min-height: 32px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.viewer__head .btn { min-height: 26px; height: 26px; padding: 0 6px; font-size: 13px; }
.viewer__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
/* `display: flex` сильнее служебного `[hidden]` — прячем шапку и вкладки явно. */
.viewer__head[hidden], .viewer__tabs[hidden] { display: none; }
.viewer__label { font-weight: 600; }
.viewer__name {
  flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px;
}
.viewer__body { flex: 1 1 auto; min-height: 0; height: 70vh; background: var(--viewer-bg); }
.viewer__frame { display: block; width: 100%; height: 100%; border: 0; }
.viewer__fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  height: 100%; padding: 24px; color: var(--viewer-text); text-align: center;
}
.viewer__fallback p { margin: 0; }
.viewer__imgwrap { display: block; height: 100%; overflow: auto; background: var(--viewer-bg); }
.viewer__img { display: block; width: 100%; height: auto; }
.viewer__others { padding: 6px 12px; border-top: 1px solid var(--line); font-size: 13px; }
/* Заглушка окна счёта, пока файл не загружен (UX §4.4): окно светлое —
   тёмная плита в полэкрана читается как поломка, а не как «файла ещё нет». */
.viewer__empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  min-height: 160px; margin: 0; padding: 24px; text-align: center;
}
.viewer--blank .viewer__body { background: var(--surface); }
.viewer--blank .viewer__empty { color: var(--muted); }

@media (min-width: 1100px) {
  /* Счёту максимум места: 38/62, узкое меню, без шапки страницы (владелец 16.09). */
  .page--card { --sidebar-w: 180px; }
  .card-split--viewer {
    display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    column-gap: 14px; align-items: start;
  }
  .card-split--viewer .card-split__main { grid-column: 1; grid-row: 1; }
  .card-split--viewer .card-split__rest { grid-column: 1; grid-row: 2; }
  .card-split--viewer .viewer {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    position: sticky; top: calc(var(--topbar-h) + 10px);
    height: calc(100vh - var(--topbar-h) - 20px); margin: 0;
  }
  .card-split--viewer .viewer__body { height: auto; }
  /* Короткая форма (UX §4.4): счёту места больше, чем полям. */
  .card-split--quick { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
  .card-split--quick .card-split__main .form--narrow { max-width: none; }
}

/* Узкий экран: пустое окно счёта не занимает полэкрана — появляется с файлом. */
@media (max-width: 1099px) {
  .viewer--quick.viewer--blank { display: none; }
}

@media (max-width: 719px) {
  .hero__amount { font-size: 28px; }
  .hero__who { font-size: 18px; }
  .hero__stamp { top: 12px; right: 12px; }
  .hero__stamp .stamp { padding: 3px 8px; font-size: 11px; letter-spacing: .07em; }
  .hero:has(.hero__stamp) .hero__top,
  .hero:has(.hero__stamp) .hero__amount { padding-right: 110px; }
  .hero__finance-actions { margin-left: 0; }
  .decision__btn { flex: 1 1 100%; }
  .decision__nav { margin-left: 0; }
  .viewer__body { height: 65vh; }
}

/* --- Плитки главной --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.tile {
  display: block; padding: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
}
.tile:hover { text-decoration: none; border-color: var(--accent); }
.tile__title { font-size: 14px; color: var(--muted); }
.tile__value { font-size: 28px; font-weight: 600; margin: 4px 0; }
.tile__note { font-size: 13px; color: var(--muted); }
.tile--danger .tile__value { color: var(--danger); }

/* --- Таблицы --- */
/* Обёртка: горизонтальная прокрутка + тень у края, чтобы было видно,
   что таблицу можно листать вбок (UX §6). Тени рисуются фоном: «местные»
   градиенты закрывают их, когда прокрутка дошла до края. */
.table-wrap, .table__wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Рамки нет: белый лист сам виден на цветном столе, а вторая обводка
     превращала список в карточку (DESIGN.md §3 п. 2). */
  border-radius: var(--radius);
  max-height: calc(100vh - 230px);
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--surface), var(--surface-fade)),
    linear-gradient(to left, var(--surface), var(--surface-fade)),
    radial-gradient(farthest-side at 0 50%, var(--scroll-shade), var(--scroll-shade-0)),
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), var(--scroll-shade-0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* Таблица внутри панели не рисует вторую рамку: одна бумага — один контур. */
.card > .table-wrap, .card > .table__wrap { border: 0; border-radius: 0; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th, .table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
/* Шапка таблицы отделена линией, а не заливкой: таблица лежит на той же
   бумаге, что и страница (DESIGN.md §3 п. 2). */
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}
.table tbody tr { height: 32px; }
.table tbody tr:hover { background: var(--row-hover); }
.table tbody tr.is-selected { background: var(--row-selected); }
.table tbody tr.is-hold td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.table tbody tr.is-overdue td.date { color: var(--danger-ink); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table th:first-child, .table td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 2px 0 0 var(--line);
  max-width: 320px;
}
.table thead th:first-child { z-index: 3; background: var(--surface); }
.table tbody tr:hover td:first-child { background: var(--row-hover); }
/* Первая колонка списков — «Контрагент» шириной 240px (UX 4.3). */
.table th.col-sticky, .table td.col-sticky { width: 240px; max-width: 240px; }
/* Очередь оплаты: ширины колонок из `colgroup`, иначе «За что» переносится
   по одному слову, а «Действия» уезжают за край (UI_REVIEW 2.3). */
.table--queue { table-layout: fixed; width: 100%; }
.table--queue th.col-sticky, .table--queue td.col-sticky { width: auto; max-width: none; }
.table--queue td { vertical-align: top; }
/* Текст в узкой колонке переносится по словам, а не рубится по слогам:
   `hyphens: auto` без словаря давал «Виноградов/а» (ревизия критика, п. 7). */
.table--queue td { overflow: hidden; overflow-wrap: break-word; }
.table--queue th { overflow-wrap: break-word; }
/* Название юрлица — одна строка с многоточием, полное имя в подсказке. */
.table td.cell-entity { max-width: 170px; }
.table td.cell-entity > span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table--queue .badge, .table--queue .risk, .table--queue .user-chip {
  white-space: normal; height: auto; min-height: 20px;
}
.table--queue .risk { font-size: 11px; padding: 1px 6px; }
.table--queue .rowactions { flex-wrap: wrap; white-space: normal; }
.table--queue .rowactions .btn { max-width: 100%; }
/* Раскрывающаяся форма шага не должна растягивать колонку. */
.table--queue .rowform { position: relative; }
.table--queue .rowform[open] > form {
  position: absolute; right: 0; z-index: 20; width: 260px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.table--queue .rowform[open] > form .field__input { width: 100%; }
/* Таблица «показатель — значение» (операционные показатели отчётов):
   две колонки во всю ширину монитора читать невозможно. */
.table--pairs { max-width: 560px; }
/* Кассовый разрыв: день — 100 px, суммы без знака валюты (он в заголовке
   блока), первая колонка закреплена, таблица листается вбок. Селектор с
   `.table` — чтобы перебить ширину первой колонки из блока календаря ниже. */
.table.cal--gap th:first-child, .table.cal--gap td:first-child { width: 150px; max-width: 150px; }
.table--docs { table-layout: fixed; width: 100%; }
.table--docs th.col-sticky, .table--docs td.col-sticky { width: auto; max-width: none; }
.table--docs td { vertical-align: top; }
.table .cell-main { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* Если класс повесили на саму ячейку, она должна остаться ячейкой. */
.table td.cell-main, .table th.cell-main { display: table-cell; }
.table .cell-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* Две строки в ячейке: название (жирно, с многоточием) и «№ 1042 · за что…». */
.cell-two { display: block; min-width: 0; }
.cell-two > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-two > small { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Что показывать только на телефоне: там таблица листается вбок, и в липкую
   первую колонку уходит то, ради чего иначе пришлось бы листать — сумма и
   автор счёта (владелец 17.09.2026). Пара к `[data-mobile="hide"]` ниже. */
.table [data-mobile="only"] { display: none; }
/* Показ/скрытие решает правило выше — здесь только размер. */
.cell-two > .cell-amount { font-size: 16px; }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Итог над списком — строка, а не плашка: «5 заявок на 467 296 ₽». */
.list-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.list-total__sum { color: var(--muted); }
/* «Мне на согласование»: решение принимают по сумме — она крупнее строки. */
.table--inbox .num-cell .amount { font-size: 16px; }
.num-cell small { display: block; font-size: 12px; }
.row-link { cursor: pointer; }
/* Ячейка «Действия»: кнопки в одну строку, не разносят строку по высоте. */
.rowactions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; white-space: nowrap; }
.rowactions .btn { height: 26px; padding: 0 8px; font-size: 13px; }
.rowactions form { display: flex; align-items: center; gap: 6px; margin: 0; }
.rowactions .field__input { width: auto; min-width: 110px; height: 26px; padding: 2px 6px; font-size: 13px; }
.rowmenu { position: relative; }
.rowmenu > summary { cursor: pointer; list-style: none; }
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu .menu-pop { top: 28px; white-space: normal; }
.rowmenu .menu-pop .btn { display: block; width: 100%; justify-content: flex-start; height: 30px; }
/* Раскрытая под строкой панель с верхним блоком. */
.row-detail > td { background: var(--bg); padding: 8px; }
.row-detail[hidden] { display: none; }
tr.is-expanded > td { background: var(--accent-wash); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.th-sort { color: inherit; }
.pagination { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
/* Нижняя панель массовых действий: показывается, только когда что-то отмечено. */
.bulkbar {
  position: sticky; bottom: 0; z-index: 5;
  display: none; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 12px; padding: 10px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-bar);
}
.bulkbar.is-visible { display: flex; }

/* --- Бейджи статусов (UX §1.3–1.5) --- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge--draft { background: var(--muted-soft); color: var(--muted); }
.badge--planned { background: var(--plan-soft); color: var(--plan-ink); }
.badge--on-approval { background: var(--accent); color: var(--accent-text); }
.badge--approved { border: 1px solid var(--ok); color: var(--ok-ink); background: var(--surface); }
.badge--handed { background: var(--flow-soft); color: var(--flow-ink); }
.badge--partial { border: 1px solid var(--ok); color: var(--ok-ink); background: var(--surface); }
.badge--paid { background: var(--ok); color: var(--accent-text); }
.badge--closed { background: var(--closed); color: var(--accent-text); }
.badge--rejected { background: var(--danger); color: var(--accent-text); }
.badge--cancelled { background: var(--muted-soft); color: var(--muted); text-decoration: line-through; }
.badge--hold { background: var(--warn-soft); color: var(--warn-ink); }
.badge--clarify { background: var(--note-bg); color: var(--note-ink); }

.badge--pay-to-prepare { background: var(--muted-soft); color: var(--muted); }
.badge--pay-prepared { background: var(--accent-soft); color: var(--accent-ink); }
.badge--pay-awaiting { background: var(--plan-soft); color: var(--plan-ink); }
.badge--pay-sent { background: var(--flow-soft); color: var(--flow-ink); }
.badge--pay-executed { border: 1px solid var(--ok); color: var(--ok-ink); background: var(--surface); }
.badge--pay-reconciled { background: var(--ok); color: var(--accent-text); }
.badge--pay-cancelled { background: var(--muted-soft); color: var(--muted); }

.badge--doc-expected { background: var(--muted-soft); color: var(--muted); }
.badge--doc-received { border: 1px solid var(--accent); color: var(--accent-ink); background: var(--surface); }
.badge--doc-review { background: var(--accent); color: var(--accent-text); }
.badge--doc-accepted { border: 1px solid var(--ok); color: var(--ok-ink); background: var(--surface); }
.badge--doc-posted { background: var(--ok); color: var(--accent-text); }
.badge--doc-overdue { background: var(--danger); color: var(--accent-text); }
.badge--doc-correction { background: var(--warn-soft); color: var(--warn-ink); }
.badge--doc-annulled { background: var(--muted-soft); color: var(--muted); text-decoration: line-through; }
.badge--doc-not-required { border: 1px dashed var(--line); color: var(--muted); background: var(--surface); }

/* --- Штамп: единственная смелая вещь в оформлении (DESIGN.md §2.5) --------
   Терминальный статус заявки — не чип, а оттиск на счёте: рамка в два
   пункта, капс с разрядкой, лёгкий наклон. Ставится только там, где есть
   «лист»: шапка карточки заявки и карточка на доске. В таблицах — чип. */
.stamp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 12px; border: 2px solid currentColor; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .09em; white-space: nowrap;
  opacity: .85; transform: rotate(-5deg); transform-origin: center;
}
.stamp--paid { color: var(--ok-ink); }
.stamp--rejected { color: var(--danger-ink); }
.stamp--closed { color: var(--closed); }
.stamp--cancelled { color: var(--muted); }

/* --- Чипы риска и приоритеты --- */
.risks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.risk { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-sm); font-size: 12px; }
.risk--note { background: var(--note-bg); color: var(--note-ink); }
.risk--warn { background: var(--warn-soft); color: var(--warn-ink); }
.risk--danger { background: var(--danger-soft); color: var(--danger-ink); }
.risk--info { background: var(--accent-soft); color: var(--accent-ink); }
.risk--muted { background: var(--bg); color: var(--muted); }

.prio { font-size: 12px; color: var(--muted); }
.prio::before { content: ""; display: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.prio--p1 { color: var(--danger); }
.prio--p1::before, .prio--p2::before, .prio--p4::before { display: inline-block; vertical-align: middle; }
.prio--p1::before { background: var(--danger); }
.prio--p2::before { background: var(--warn); }
.prio--p4::before { background: var(--muted); }

.user-chip { white-space: nowrap; }

/* --- Кнопки --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font: 500 14px/1 inherit; cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--accent-text); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn--secondary:hover { background: var(--bg); }
.btn--danger { background: var(--danger); color: var(--accent-text); }
.btn--danger.btn--outline { background: var(--surface); border-color: var(--danger); color: var(--danger-ink); }
.btn--danger.btn--outline:hover { background: var(--danger-wash); }
.btn--ok { background: var(--ok); color: var(--accent-text); }
.btn--ghost { background: none; color: var(--accent); }
.btn--ghost:hover { color: var(--accent-hover); background: var(--accent-wash); }
.btn--lg { height: 48px; padding: 0 20px; font-size: 15px; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; }
/* Фокус видно всегда и везде, включая кнопки без класса и раскрывающиеся
   заголовки: по интерфейсу ходят с клавиатуры. */
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* --- Чипы фильтров --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 13px;
}
.chip:hover { border-color: var(--accent); text-decoration: none; }
.chip__count { color: var(--muted); font-size: 12px; }
.chip--active { background: var(--text); border-color: var(--text); color: var(--invert-text); }
.chip--active .chip__count { color: var(--invert-muted); }
.chip--layer::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.chip--layer.layer--forecast::before { background: var(--info-plan); }
.chip--layer.layer--committed::before { background: var(--ok); }
.chip--layer.layer--ready::before { background: var(--info-flow); }
.chip--layer.layer--actual::before { background: var(--ok); }
/* Вариант написания активного чипа, встречающийся в шаблонах. */
.chip.is-active { background: var(--text); border-color: var(--text); color: var(--invert-text); }
.chip.is-active .chip__count { color: var(--invert-muted); }

/* Вкладки карточки заявки: одна полоса с прокруткой вбок. В колонке 38 %
   восемь вкладок разваливались на два ряда и съедали высоту у счёта. */
.chips--tabs {
  flex-wrap: nowrap; gap: 6px; padding-bottom: 4px; margin-bottom: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background-image:
    linear-gradient(to right, var(--bg), var(--bg-fade)),
    linear-gradient(to left, var(--bg), var(--bg-fade)),
    radial-gradient(farthest-side at 0 50%, var(--scroll-shade), var(--scroll-shade-0)),
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), var(--scroll-shade-0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 20px 100%, 20px 100%, 8px 100%, 8px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.chips--tabs .chip { flex: 0 0 auto; height: 26px; padding: 0 9px; }

/* --- Строка фильтров: компактно, в одну строку (UX 4.7.1) --- */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.filters .field { margin-bottom: 0; }
.filters .checkbox, .chips .checkbox { margin: 0; white-space: nowrap; }
.filters .field__input, .filters select,
.chips .field__input, .chips select, .filter-select {
  width: auto; min-width: 132px; max-width: 240px; height: 28px; padding: 2px 8px; font-size: 13px;
}
.chips > .segment { align-self: center; }
.filters input[type="search"] { min-width: 240px; max-width: 360px; }

/* --- Формы --- */
.field { margin-bottom: 12px; }
.field__label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.field--required .field__label::before { content: "● "; color: var(--accent); font-size: 10px; vertical-align: middle; }
.field__input, input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%; min-height: 32px; padding: 5px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-field);
  background: var(--field-bg); color: var(--text); font: inherit;
}
textarea.field__input { min-height: 64px; }
/* Поле во всю ширину монитора неудобно: глаз теряет, где начинается значение.
   Ограничиваем длину строки, как у текста (DESIGN.md §2.3). Строка фильтров
   над таблицей живёт по своим ширинам — она ниже по файлу и специфичнее. */
.card .field > .field__input, .card .field > input, .card .field > select { max-width: 560px; }
.card .field > textarea.field__input { max-width: 720px; }
.card .filters .field > .field__input, .card .filters .field > select { max-width: 240px; }
.field__input:focus { border-color: var(--accent); }
.field__input.is-error, .field.is-error .field__input { border-color: var(--danger); }
.field__hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; max-width: 72ch; }
.field__error { font-size: 13px; color: var(--danger-ink); margin: 4px 0 0; }
.checkbox { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.checkbox input { width: auto; min-height: auto; }
/* Длинный список галочек — в колонки: сплошным текстом он не читается. */
.checklist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; min-width: 0;
}
.checklist legend { padding: 0 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.checklist__item { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; min-width: 0; }
.checklist__item input { flex: 0 0 auto; width: auto; min-height: auto; }
.segment { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segment button { height: 30px; padding: 0 12px; border: 0; background: var(--surface); font: inherit; cursor: pointer; }
.segment button.is-active { background: var(--text); color: var(--invert-text); }

.form-errors {
  border: 1px solid var(--danger); border-left-width: 4px; border-radius: var(--radius);
  background: var(--danger-wash); padding: 8px 12px; margin-bottom: 12px;
}
.form-errors__item { margin: 0; color: var(--danger-ink); font-size: 13px; }

/* --- Форма заявки: одна колонка 760px, короткие поля парами (UX 4.4) --- */
.form--narrow { max-width: 760px; }
.form fieldset.card { margin-bottom: 16px; }
.form legend { padding: 0 6px; font-size: 16px; font-weight: 600; }
/* Короткие поля в ряд: сумма, валюта, вид суммы; дата и приоритет; ЦФО и проект. */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 12px; }
.field-row .field { min-width: 0; }
/* Панель действий формы. На компьютере она стоит там, где и должна, — после
   последнего поля: липкая панель поперёк экрана закрывала поле «За что»
   (ревизия 16.09, снимок new-request). На телефоне она закреплена внизу над
   вкладками — там до кнопки иначе не дотянуться (UX §6); и тогда у неё своя
   поверхность, линия и тень, как у всего, что всплывает над страницей. */
.form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.form__foot > a:first-child { margin-right: auto; }

/* --- Своя кнопка выбора файла вместо системной «Choose File» --- */
.filepick { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filepick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filepick > label.btn { cursor: pointer; }
.filepick__name { font-size: 13px; color: var(--muted); }

/* --- Списки-«карточки» в блоках главной --- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.list > li:last-child { border-bottom: 0; }
.list > li .btn { margin-left: auto; }

/* --- Раскрывающаяся форма прямо в строке таблицы --- */
.rowform { display: inline-block; }
.rowform > summary { cursor: pointer; list-style: none; }
.rowform > summary::-webkit-details-marker { display: none; }
.rowform form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.rowform .field__input { width: auto; min-width: 110px; }

/* --- Подсказки поиска контрагента --- */
.suggest { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.suggest:empty { display: none; }
.suggest > li { padding: 0; }
/* Кнопка подсказки в две строки: колоночный flex со СВОЕЙ высотой — у `.btn`
   она фиксированная (32px), и вторая строка схлопывалась в ноль. */
.suggest__item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; height: auto; min-height: 32px; padding: 6px 8px; text-align: left;
  border: 0; background: none; font: inherit; line-height: 1.35; white-space: normal; cursor: pointer; }
.suggest__item > * { flex: 0 0 auto; }
.suggest__item:hover { background: var(--bg); }
.suggest__item .cell-sub { display: block; align-self: stretch; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Платёжные лица группы (DECISIONS §2.3f): чипы под именем лица, той же строкой. */
.suggest__payees { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; padding: 0 8px 6px 8px; }
.suggest__payees-title { font-size: 12px; color: var(--muted); }
.suggest__payee { display: inline-block; width: auto; max-width: 100%; padding: 1px 10px; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer; }
.suggest__payee:hover { background: var(--bg); border-color: var(--line-strong); }

/* --- Колокольчик --- */
.menu-pop--bell { width: 320px; padding: 8px; }
.menu-pop__head { font-size: 13px; font-weight: 600; color: var(--muted); padding: 4px 6px; }
.bell-list { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.bell-list__item { padding: 6px; border-top: 1px solid var(--line); }
.bell-list__item.is-unread { background: var(--accent-wash); }
.dot-unread { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.code-block { display: block; padding: 8px; background: var(--bg); border-radius: var(--radius-sm); overflow-x: auto; }

/* --- Полосы состояния --- */
.banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-left: 4px solid var(--muted);
  background: var(--surface); border-radius: var(--radius); margin-bottom: 12px; }
.banner--ok { border-left-color: var(--ok); }
.banner--warn { border-left-color: var(--warn); background: var(--warn-wash); }
.banner--danger { border-left-color: var(--danger); background: var(--danger-wash); }
.banner--note { border-left-color: var(--note); background: var(--note-bg); }
.banner--muted { border-left-color: var(--line); }
.banner { flex-wrap: wrap; }
.banner .btn { margin-left: auto; }
.banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; }
.banner__actions .field__input { width: auto; min-width: 220px; flex: 1 1 220px; }
.banner__actions .btn { margin-left: 0; }

/* --- Лента --- */
.timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
/* Длинная причина не должна растягивать страницу вбок (телефон). */
.timeline__item { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.timeline__item > * { min-width: 0; overflow-wrap: anywhere; }
.timeline__time { flex: 0 0 96px; color: var(--muted); }
.timeline__icon { flex: 0 0 20px; }
.timeline__channel { margin-left: auto; color: var(--muted); font-size: 12px; }
.timeline__what { color: var(--muted); }
/* Лента событий заявки: когда, значок, что случилось, откуда. Длинный текст
   переносится внутри своей колонки и не роняет канал на отдельную строку. */
.timeline--events .timeline__item {
  display: grid; grid-template-columns: 96px 20px minmax(0, 1fr) max-content;
  align-items: baseline; gap: 0 8px;
}
.timeline__text { min-width: 0; overflow-wrap: anywhere; }
.timeline--events .timeline__channel { margin-left: 0; }

/* --- Тосты --- */
.toasts { position: fixed; top: calc(var(--topbar-h) + 8px); right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 12px; min-width: 240px; max-width: 420px;
  padding: 10px 12px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--ok);
  box-shadow: var(--shadow-pop); font-size: 14px;
}
.toast--danger { border-left-color: var(--danger); }
.toast__close { height: 20px; padding: 0 4px; color: var(--muted); }

/* --- Модалка --- */
.modal-host:empty { display: none; }
.modal-host {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: var(--overlay);
}
.modal {
  width: 480px; max-width: calc(100vw - 32px); background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.modal__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal__title { font-size: 15px; }
.modal__head .btn { margin-left: auto; }
.modal__body { padding: 16px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

/* --- Боковая панель --- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; z-index: 65;
  background: var(--surface); border-left: 1px solid var(--line); padding: 16px; overflow-y: auto;
  box-shadow: var(--shadow-drawer); }

/* --- Пустое состояние: приглашение к действию, а не картинка --- */
.empty { text-align: center; padding: 32px 16px; }
/* Страница ошибки: короткая фраза не растягивается на весь монитор. Без меню
   и шапки (гость, неизвестный адрес) коробка стояла в углу — ставим её по
   центру страницы (ревизия критика, п. 9). */
.card.empty { max-width: 560px; }
.content--bare .card.empty { margin: 15vh auto 0; }
.empty__icon { font-size: 28px; color: var(--muted); }
.empty__text { font-size: 14px; color: var(--muted); margin: 8px 0 16px; }

/* --- Вход --- */
.page-login { background: var(--bg); }
.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.login__card { width: 380px; max-width: 100%; margin: 0; padding: 24px; }
/* Тот же словесный знак, что в шапке: имя бренда и под ним название системы. */
.login__brand { margin-bottom: 20px; }
.login__word { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.login__sub { display: block; font-size: 13px; color: var(--muted); }
.login__submit { width: 100%; margin-top: 8px; }
.login__hint { margin-top: 16px; font-size: 13px; }
.link-code .code { font-size: 16px; font-weight: 600; letter-spacing: .06em; }

/* --- Нижняя панель телефона --- */
.tabbar { display: none; }

/* --- Индикатор HTMX --- */
.hx-indicator { position: fixed; top: var(--topbar-h); left: 0; height: 2px; width: 0; background: var(--accent);
  transition: width .2s ease; z-index: 50; }
body.htmx-request .hx-indicator { width: 70%; }

/* --- Календарная сетка (даты в столбцах, показатели в строках, UX 4.7.2) ---
   Это обычная таблица: колонки дней одинаковой ширины, таблица на всю ширину
   обёртки, на узком экране включается горизонтальная прокрутка. */
.cal { table-layout: fixed; width: 100%; min-width: 900px; }
.cal th:first-child, .cal td:first-child {
  width: 132px; max-width: 132px; white-space: normal; overflow: hidden;
}
.cal th, .cal td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal tbody th[scope="row"] { font-weight: 600; font-size: 13px; color: var(--text); }
.cal td { text-align: right; }
.cal td .btn { height: 22px; padding: 0 4px; font-size: 13px; }
.cal__day { background: var(--surface); padding: 6px 8px; text-align: right; }
.cal__day--today { box-shadow: inset 0 3px 0 var(--accent); }
.cal__day--weekend { background: var(--bg); }
.cal__day--gap { background: var(--danger-wash); }
.cal__day--gap .num { color: var(--danger); }
.cal__gap-note { display: block; font-size: 11px; color: var(--danger); }
.cal__cell--f { color: var(--info-plan); }
.cal__cell--c { color: var(--ok); }
.cal__cell--r { color: var(--info-flow); }
.cal__cell--a { color: var(--ok); font-weight: 600; }

/* --- Планшет --- */
@media (max-width: 1199px) {
  :root { --sidebar-w: 180px; }
  .topbar__search { max-width: 240px; }
}

/* --- Телефон (< 720px). Таблицы остаются таблицами! --- */
@media (max-width: 719px) {
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar__burger { display: inline-flex; }
  .topbar__brand { max-width: 42vw; overflow: hidden; }
  .topbar__word { font-size: 14px; }
  .topbar__sub { font-size: 11px; }
  .topbar__search { display: none; }
  .topbar__search.is-open { display: block; position: absolute; top: var(--topbar-h); left: 0; right: 0;
    max-width: none; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }

  .layout { display: block; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: 80vw; max-width: 300px;
    transform: translateX(-100%); transition: transform .2s ease; z-index: 45;
    box-shadow: var(--shadow-drawer);
  }
  .sidebar.is-open { transform: translateX(0); }
  .content { padding: 12px 12px 72px; }
  .content__head { flex-wrap: wrap; gap: 8px; }

  .table { font-size: 13px; }
  .table tbody tr { height: 40px; }
  .table th:first-child, .table td:first-child,
  .table th.col-sticky, .table td.col-sticky { max-width: 150px; width: 150px; }
  .cal th:first-child, .cal td:first-child { width: 118px; max-width: 118px; }
  .table [data-mobile="hide"] { display: none; }
  .table [data-mobile="only"] { display: block; }
  .table-wrap, .table__wrap { max-height: none; }

  .summary { grid-template-columns: 1fr; }
  .summary dt { line-height: 20px; margin-top: 8px; }
  .summary dd { line-height: 20px; }

  /* Верхний блок: подписи над значениями (UX §6). */
  .top-block__rows { grid-template-columns: 1fr; }
  .top-block__rows dt { padding: 6px 0 0; line-height: 16px; }
  .top-block__rows dd { padding: 0 0 4px; }

  /* Кнопки решения — крупные (UX §6, чеклист 44). */
  .rowactions { flex-wrap: wrap; white-space: normal; }
  .rowactions .btn { height: 44px; flex: 1 1 100%; font-size: 14px; }
  .rowactions .field__input { flex: 1 1 100%; height: 40px; }
  /* Широкие рабочие таблицы не сжимаем в ширину экрана — они прокручиваются. */
  .table--queue, .table--docs { min-width: 900px; }
  .table--queue .rowactions .btn, .table--docs .rowactions .btn {
    height: 28px; flex: 0 0 auto; font-size: 13px;
  }
  /* Колонка решения в «Мне на согласование» приклеена к правому краю:
     кнопки видны, пока таблицу листают вбок. */
  .table th.col-actions, .table td.col-actions {
    position: sticky; right: 0; z-index: 1; width: 132px; max-width: 132px;
    background: var(--surface); box-shadow: -2px 0 0 var(--line);
  }
  .table thead th.col-actions { z-index: 3; background: var(--surface); }
  .table tbody tr:hover td.col-actions { background: var(--row-hover); }
  /* Панель второстепенных кнопок карточки просто стоит в потоке: липкой она
     всё равно не была (прокрутка идёт у страницы), а место занимала. Решение
     согласующего живёт в блоке «Ваше решение» выше. */
  .page-actions--card .btn { flex: 1 1 140px; height: 48px; }
  .form__foot {
    position: sticky; bottom: 56px; z-index: 5;
    box-shadow: var(--shadow-bar);
  }
  .form__foot .btn { flex: 1 1 140px; height: 44px; }
  /* Под липкой панелью не должно оставаться спрятанного текста. */
  .form { padding-bottom: 8px; }
  .bulkbar { bottom: 56px; }
  .bulkbar .btn { flex: 1 1 100%; height: 48px; }

  .tiles { grid-template-columns: 1fr; }
  .toasts { top: calc(var(--topbar-h) + 8px); left: 12px; right: 12px; align-items: stretch; }
  .modal--sheet { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: none;
    border-radius: var(--radius) var(--radius) 0 0; }
  .drawer { width: 100vw; }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    display: flex; height: 56px; background: var(--surface); border-top: 1px solid var(--line);
  }
  .tabbar__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); font-size: 11px; position: relative;
  }
  .tabbar__item.is-active { color: var(--accent); }
  .tabbar__badge {
    position: absolute; top: 6px; right: 22%; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--danger); color: var(--accent-text); font-size: 11px; line-height: 16px;
  }
  .btn--mobile-wide { width: 100%; height: 48px; }
}

/* --- Зона файлов (UX 5.10) --- */
/* Одна большая кнопка и список файлов, где у каждой строки видно состояние:
   загружаем → распознаём → распознано / не счёт / не удалось. */
.dropzone {
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px;
  background: var(--surface);
}
.dropzone.is-over { border-color: var(--accent); border-style: solid; background: var(--accent-wash); }
.dropzone--invoice {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent-wash) 60%, var(--surface));
}
.dropzone__title { font-weight: 600; margin-bottom: 6px; }
.dropzone__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dropzone__big {
  min-height: 48px; padding: 0 20px; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone__camera { display: none; cursor: pointer; color: var(--accent); font-size: 14px; }
.dropzone__hint { font-size: 13px; margin: 8px 0 0; }
.dropzone__error { margin: 8px 0 0; font-size: 13px; }
.dropzone__progress { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.filelist { list-style: none; margin: 10px 0 0; padding: 0; }
.filelist__item {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.filelist__name { flex: 1 1 200px; min-width: 0; word-break: break-word; }
.filelist__size { white-space: nowrap; font-size: 13px; }
.filelist__remove { margin-left: auto; }
.filelist__select {
  padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius-field);
  background: var(--field-bg); font: inherit; color: var(--muted);
}
.filelist__status {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 2px 0 0; font-size: 13px; color: var(--muted);
}
.filelist__item--failed .filelist__name { color: var(--danger); }
.filelist__item--uploading { opacity: .75; }
.filelist__empty:has(~ .filelist__item) { display: none; }
@media (max-width: 720px) {
  .dropzone__big { width: 100%; justify-content: center; text-align: center; white-space: normal; height: auto; padding: 12px 16px; }
  .dropzone__camera { display: inline-block; }
}

/* --- Распознавание счёта (DECISIONS 2.3b, UX 4.4) --- */
/* Цвет состояния на белом пишем «чернилами»: чистый `--warn` — 4,24:1. */
.recog--ok { color: var(--ok-ink); }
.recog--warn { color: var(--warn-ink); }
.recog--fail { color: var(--danger-ink); }
.recog-warnings { display: block; margin: 2px 0 0; padding: 0 0 0 18px; color: var(--warn-ink); font-size: 13px; }
.recog-warnings li { list-style: none; margin: 2px 0; }
.recog__again { padding: 0 4px; min-height: 24px; font-size: 13px; text-decoration: underline; }
.recog-hint { color: var(--muted); font-size: 12px; margin-top: 2px; }
.recog-hint--low { color: var(--warn-ink); }
.quick__nowait { text-decoration: underline; }

/* --- Движение: только ответ на действие ----------------------------------
   Ничего не выезжает само; кому мешает и это — выключаем совсем. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Печать --- */
@media print {
  .topbar, .sidebar, .tabbar, .page-actions, .toasts, .hx-indicator, .btn,
  .form__foot, .bulkbar, .viewer, .decision__comment { display: none !important; }
  .content { padding: 0; }
  .card, .table-wrap { border: 0; }
  .table-wrap { overflow: visible; max-height: none; }
  /* Штамп на бумаге — ровно то, ради чего он придуман: печатается. */
  .stamp { opacity: 1; }
}

/* --- Строка показателей над доской (главная, DECISIONS §9.4 п. 1) --------- */
/* Прежние плитки главной свёрнуты в одну строку: она не должна отодвигать
   доску вниз, поэтому компактная и переносится на телефоне. */
/* Показатели над доской — одна строка словами: в рамках они были
   неотличимы от чипов фильтров ниже (ревизия критика, п. 4). */
.summary {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.summary--lazy { min-height: 0; }

.summary__item { white-space: nowrap; }

.summary__title { color: var(--muted); }

.summary__value { font-weight: 600; }

/* Строка действий под таблицей (пакет платежей). */
.actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* Подпись «моей» доски и строка денег на карточке (DECISIONS §9.4 п. 2, 5а).
   Правила лежат здесь, а не в board.css: тот файл описывает раскладку доски,
   а это оформление текста, общее с остальными страницами. */
.board-total__caption { margin-right: 4px; }

.bcard__line--money { font-weight: 600; }