/* ============================================================
   «Остатки» — вкладка «Сводка» (js/ui/ostatki/summary.js + summaryCharts.js).

   Классы — только `os-sm*` (раскладка вкладки), `os-ch__*` (графики) и
   `os-cat--N` (слот цвета источника); модификаторы `is-*` — вплотную к своему
   классу. Токены `--os-*` приходят с корня виджета `.os` (ostatki.css): панель
   «Сводки» живёт внутри него.

   ЦВЕТА ГРАФИКОВ — ТОКЕНЫ `--os-cat-1…8` и `--os-cat-rest`, по одному набору
   на тему. Палитра — эталонная из навыка dataviz, проверена валидатором на
   поверхностях портала (карточка `--page-bg-2`: тёмная #14161a, светлая
   #fbfaf7): полоса светлоты, порог насыщенности, различимость соседей при
   дальтонизме (ΔE ≥ 8) и обычным зрением (ΔE ≥ 15) — всё проходит. В светлой
   теме три слота (бирюза, жёлтый, розовый) ниже 3:1 к фону — поэтому у
   каждого графика рядом таблица с теми же цифрами. Серый «остальные» — 3,8:1
   и 3,2:1. Порядок слотов и есть защита от дальтонизма — не переставлять.

   Слот задаётся КЛАССОМ `os-cat--N`, а не инлайновой переменной: токен,
   поставленный из JS, сторож `css_tokens` не видит объявленным.

   АНИМАЦИЙ ЗДЕСЬ НЕТ: рост графиков идёт Web Animations из `summary.js`
   (css-анимации у владельца выключены системно). Здесь только точки отсчёта
   преобразований (`transform-box: fill-box`) — без них SVG масштабировался бы
   от угла холста, а не от своей оси. И никакой нулевой прозрачности в ожидании
   анимации: итог обязан быть виден и без неё.
   ============================================================ */

.os {
  --os-cat-1: #3987e5;
  --os-cat-2: #d95926;
  --os-cat-3: #199e70;
  --os-cat-4: #c98500;
  --os-cat-5: #d55181;
  --os-cat-6: #008300;
  --os-cat-7: #9085e9;
  --os-cat-8: #e66767;
  --os-cat-rest: #74736d;
  /* Пустое кольцо, сетка и база — на шаг от поверхности, не громче данных. */
  --os-ch-track: #262a31;
  --os-ch-grid: rgba(255, 255, 255, .07);
  --os-ch-base: rgba(255, 255, 255, .2);
}

[data-theme="light"] .os {
  --os-cat-1: #2a78d6;
  --os-cat-2: #eb6834;
  --os-cat-3: #1baf7a;
  --os-cat-4: #eda100;
  --os-cat-5: #e87ba4;
  --os-cat-6: #008300;
  --os-cat-7: #4a3aa7;
  --os-cat-8: #e34948;
  --os-cat-rest: #8f8d86;
  --os-ch-track: #e6e3dc;
  --os-ch-grid: rgba(15, 20, 17, .08);
  --os-ch-base: rgba(15, 20, 17, .24);
}

.os-cat--1 { --os-cat: var(--os-cat-1); }
.os-cat--2 { --os-cat: var(--os-cat-2); }
.os-cat--3 { --os-cat: var(--os-cat-3); }
.os-cat--4 { --os-cat: var(--os-cat-4); }
.os-cat--5 { --os-cat: var(--os-cat-5); }
.os-cat--6 { --os-cat: var(--os-cat-6); }
.os-cat--7 { --os-cat: var(--os-cat-7); }
.os-cat--8 { --os-cat: var(--os-cat-8); }
.os-cat--rest { --os-cat: var(--os-cat-rest); }

.os-sm__settlement-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-block: 16px; }
.os-sm__settlement-form label { display: grid; gap: 6px; flex: 1 1 180px; min-width: 0; }
.os-sm__settlement-form h4, .os-sm__settlement-form p { flex-basis: 100%; margin: 0; }
.os-sm__settlement-form .os-input { width: 100%; min-width: 0; }
.os-sm__panel { overflow: hidden; overflow-anchor: none; scroll-margin-block: 16px; }
.os-sm__panel[hidden] { display: none; }
.os-sm__panel [data-panel-body] { overflow: hidden; }
.os-sm__detail-scope { margin: 0; color: var(--os-fg2); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.os-sm__detail-status { min-height: 16px; margin: 0; font-size: 11px; color: var(--os-fg2); }
.os-sm__detail-totals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 10px 0 14px; font-size: 12px; color: var(--os-fg2); }
.os-sm__detail-totals strong { color: var(--os-fg); font-variant-numeric: tabular-nums; margin-left: 6px; }
.os-sm__detail-totals small { margin-left: auto; }
.os-sm__detail-table .os-sm__scroll { max-height: 360px; overflow: auto; scrollbar-gutter: stable; }
.os-sm__detail-table th { position: sticky; top: 0; background: var(--os-panel); z-index: 1; }
.os-sm__detail-table td:nth-child(3), .os-sm__detail-table td:nth-child(4) { text-align: right; }
.os-sm__detail-table tbody tr:hover { background: color-mix(in srgb, var(--os-accent) 5%, transparent); }
.os-sm__detail-pages { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; font-size: 11px; color: var(--os-fg2); }
.os-sm__detail-pages > div { display: flex; gap: 8px; }
.os-sm__detail-loading { display: grid; place-items: center; color: var(--os-fg2); font-size: 12px; }
.os-sm__chart-hint { margin: 4px 0; color: var(--os-fg2); font-size: 11px; }
.os-ch__row[role="button"], .os-ch__col[role="button"] { cursor: pointer; outline: none; }
.os-ch__row-hit, .os-ch__hit { transition: fill .16s ease, stroke .16s ease; }
.os-ch__row[role="button"]:hover .os-ch__row-hit, .os-ch__col[role="button"]:hover .os-ch__hit { fill: color-mix(in srgb, var(--os-fg) 5%, transparent); }
.os-ch__row.is-selected .os-ch__row-hit, .os-ch__col.is-selected .os-ch__hit { fill: color-mix(in srgb, var(--os-accent) 10%, transparent); stroke: var(--os-accent); stroke-width: 1px; }
.os-ch__row:focus-visible .os-ch__row-hit, .os-ch__col:focus-visible .os-ch__hit { stroke: var(--os-accent); stroke-width: 2px; }
.os-sm .os-btn.is-selected, .os-sm .os-sm__tileBtn.is-selected { box-shadow: inset 0 0 0 1px var(--os-accent); }
.os-sm__panel[aria-busy="true"] [data-panel-body] { opacity: .55; }
.os-sm__panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.os-sm__scope-note { color: var(--os-fg2); font-size: 11px; }
.os-sm__ledger-intro { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin: 16px 0; }
.os-sm__ledger-intro p { margin: 6px 0 0; color: var(--os-fg2); line-height: 1.6; }
.os-sm__eyebrow { color: var(--os-fg2); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.os-sm__help { flex: 0 1 380px; font-size: 12px; line-height: 1.6; }
.os-sm__help summary { cursor: pointer; color: var(--os-accent); text-align: right; }
.os-sm__help ol { padding-left: 20px; }
.os-sm__ledger-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 20px 0 10px; border-block: 1px solid var(--os-line); }
.os-sm__loss-explain { color: var(--os-fg2); font-size: 12px; line-height: 1.6; margin: 0 0 20px; }
.os-sm__entry-switch { display: flex; gap: 6px; margin-bottom: 16px; }
.os-sm__journal-filter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; font-size: 12px; color: var(--os-fg2); }
.os-sm__journal-filter .os-sm__entry-switch { margin-bottom: 0; }
.os-sm__entry-feedback { padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--os-accent) 10%, transparent); color: var(--os-fg); font-size: 12px; line-height: 1.6; }
.os-sm__entry-hint { margin: 0; color: var(--os-amber); font-size: 12px; line-height: 1.6; }
.os-sm__entry-hint:empty { display: none; }
.os-sm__entry-switch [aria-pressed="true"] { background: color-mix(in srgb, var(--os-accent) 12%, transparent); box-shadow: inset 0 0 0 1px var(--os-accent); }
.os-sm__entry-switch [data-entry-kind="loss"][aria-pressed="true"], .os-sm__loss-submit { color: var(--os-amber); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--os-amber) 60%, transparent); }
.os-sm__entry--loss > summary > strong { color: var(--os-amber); }
.os-sm__receipt-form[hidden] { display: none; }
.os-sm__ledger-metric { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px; border-right: 1px solid var(--os-line); }
.os-sm__ledger-metric > span, .os-sm__ledger-metric > small { color: var(--os-fg2); font-size: 12px; }
.os-sm__ledger-metric strong { font-size: clamp(20px, 2.1cqi, 30px); line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.os-sm__ledger-metric strong small { font-size: 11px; color: var(--os-fg2); font-weight: 500; }
.os-sm__ledger-metric.is-total { border-right: 0; padding-left: 24px; background: color-mix(in srgb, var(--os-accent) 5%, transparent); }
.os-sm__ledger-metric.is-total strong { color: var(--os-accent); font-size: clamp(24px, 2.6cqi, 36px); }
.os-sm__ledger-warning { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; border-radius: 10px; color: var(--os-amber); background: color-mix(in srgb, var(--os-amber) 8%, transparent); font-size: 12px; line-height: 1.6; margin-bottom: 20px; }
.os-sm__ledger-work { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 16px; }
.os-sm__ledger-history { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.os-sm__ledger-block { border: 1px solid var(--os-line); border-radius: var(--os-radius); padding: 20px; min-width: 0; }
.os-sm__ledger-block h4 { margin: 0; font-size: 14px; }
.os-sm__section-head { margin-bottom: 18px; }
.os-sm__section-head h4 span { margin-left: 6px; color: var(--os-fg2); font-size: 12px; font-weight: 400; }
.os-sm__section-head p, .os-sm__check-action p { color: var(--os-fg2); font-size: 12px; line-height: 1.7; margin: 6px 0 0; }
.os-sm__receipt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.os-sm__receipt-form label { display: grid; gap: 8px; font-size: 12px; color: var(--os-fg2); min-width: 0; }
.os-sm__receipt-form .os-input { width: 100%; min-width: 0; height: 38px; padding: 8px 12px; color-scheme: dark; }
[data-theme="light"] .os-sm__receipt-form .os-input { color-scheme: light; }
.os-sm__wide, .os-sm__form-footer { grid-column: 1 / -1; }
.os-sm__form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.os-sm__form-footer > span { font-size: 11px; color: var(--os-fg2); }
.os-sm__check-action { display: flex; flex-direction: column; align-items: start; gap: 12px; }
.os-sm__check-action .os-btn { margin-top: auto; }
.os-sm__check-action > small { color: var(--os-fg2); font-size: 11px; }
.os-sm__entry { border-top: 1px solid var(--os-line); padding: 14px 0; font-size: 12px; }
.os-sm__entry > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.os-sm__entry > summary > span { display: grid; gap: 5px; }
.os-sm__entry summary small, .os-sm__entry > p { color: var(--os-fg2); font-size: 11px; }
.os-sm__entry strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.os-sm__entry > summary > strong { margin-left: auto; text-align: right; }
.os-sm__entry summary::after { content: '+'; color: var(--os-fg2); }
.os-sm__entry[open] > summary::after { content: '−'; }
.os-sm__empty { padding: 20px 0; color: var(--os-fg2); font-size: 12px; line-height: 1.6; }
.os-sm__empty strong { color: var(--os-fg); font-weight: 500; }
.os-sm__empty p { margin: 6px 0 0; }
.os-sm__managers { border-top: 1px solid var(--os-line); padding-top: 16px; margin-top: 20px; color: var(--os-fg2); font-size: 12px; }
.os-ch__col[role="button"] { cursor: pointer; }
.os-ch__col[role="button"]:focus-visible { outline: 2px solid currentColor; }

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

/* Раскладка — КОНТЕЙНЕРНЫМИ запросами: вкладка бывает уже окна (сайдбар,
   узкая колонка), и мерить окно было бы неверно. */
.os-sm {
  container-type: inline-size;
  container-name: ossm;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.os-sm__filters {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--os-panel);
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
}

.os-sm__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.os-sm__k {
  flex: 0 0 64px;
  font-size: 11px;
  color: var(--os-fg2);
}

.os-sm__chips {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* Чипы — кнопки. Тач-высота `button` из mobile.css отбита ВНЕ media-запроса:
   специфичность класса выигрывает при любом порядке файлов (ловушка 5). */
.os-sm__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 240px;
  min-height: 0;
  height: 26px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  color: var(--os-fg2);
  background: var(--os-ctl);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.os-sm__chip:hover {
  color: var(--os-fg);
  background: var(--os-hov);
}

.os-sm__chip[aria-pressed="true"] {
  color: var(--os-fg);
  background: color-mix(in srgb, var(--os-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--os-accent) 45%, var(--os-line));
}

/* Тестовая группа (`summary_hidden`): в «все» не входит — пунктир и тише,
   выбранная выглядит как любая. */
.os-sm__chip.is-hiddenSrc:not([aria-pressed="true"]) {
  border-style: dashed;
  border-color: var(--os-line);
  opacity: .6;
}

.os-sm__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--os-cat);
}

/* Название группы пишет чужой человек: длинное обрезается, полное — в title. */
.os-sm__chipText,
.os-sm__gname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-sm .os-seg > button[aria-pressed="true"] {
  color: var(--os-fg);
  background: var(--os-panel);
}

.os-sm__dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--os-fg2);
}

/* Поле даты: `color-scheme` красит встроенный календарь под тему. `min-height`
   из mobile.css (44 px у datetime-local) отбит адресно; крупный шрифт на
   телефоне остаётся — он не даёт iOS увеличивать страницу при фокусе. */
.os-sm .os-sm__date {
  width: 190px;
  min-height: 0;
  height: 28px;
  padding: 0 8px;
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
}

[data-theme="light"] .os-sm .os-sm__date {
  color-scheme: light;
}

.os-sm .os-input {
  min-height: 0;
}

.os-sm .os-input[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--os-amber) 70%, var(--os-line));
}

.os-sm__tz {
  padding: 2px 8px;
  font-size: 11px;
  color: var(--os-fg2);
  background: var(--os-ctl);
  border-radius: 999px;
  white-space: nowrap;
}

.os-sm .os-sm__num {
  width: 96px;
}

.os-sm .os-sm__req {
  width: 180px;
}

.os-sm__dash {
  color: var(--os-fg2);
}

.os-sm__reset {
  margin-left: auto;
}

.os-sm__hint {
  flex: 1 0 100%;
  padding-left: 72px;
  font-size: 11.5px;
  color: var(--os-amber);
}

/* ---------- строка периода, состояние, выгрузка ---------- */

.os-sm__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.os-sm__label {
  font-size: 12px;
  color: var(--os-fg2);
  font-variant-numeric: tabular-nums;
}

.os-sm__state {
  font-size: 11px;
  color: var(--os-fg2);
}

.os-sm__export {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.os-sm__err {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--os-bad);
  border: 1px solid color-mix(in srgb, var(--os-bad) 40%, transparent);
  border-radius: 10px;
}

/* ---------- содержимое ---------- */

/* Перечитка держит прежнюю картину на месте, приглушённой: без скелета и
   прыжка раскладки (правило dataviz «refetch keeps the frame»). */
.os-sm__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  transition: opacity .2s ease;
}

.os-sm.is-busy .os-sm__body {
  opacity: .6;
}

.os-sm__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 10px;
  font-size: 13px;
  color: var(--os-fg2);
}

.os-sm__top,
.os-sm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  align-items: start;
}

.os-sm__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--os-panel);
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
}

/* Главный блок — долг групп в USDT: рамка чуть заметнее остальных. */
.os-sm__card--recv {
  border-color: color-mix(in srgb, var(--os-accent) 35%, var(--os-line));
}

/* Плитки сами — карточки: у их блока своей подложки нет. */
.os-sm__card--kpi {
  padding: 0;
  background: transparent;
  border: 0;
}

.os-sm__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.os-sm__h {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.os-sm__tag {
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--os-amber);
  border: 1px solid color-mix(in srgb, var(--os-amber) 50%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

.os-sm__scroll {
  min-width: 0;
  overflow-x: auto;
}

/* ---------- плитки ---------- */

.os-sm__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  min-width: 0;
}

.os-sm__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px;
  background: var(--os-panel);
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
}

.os-sm__tk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--os-fg2);
}

/* Крупное число — пропорциональными цифрами (табличные нужны только в
   колонках, правило dataviz). */
.os-sm__tv {
  font-size: 18px;
  font-weight: 700;
  /* Переносится, а не режется (проба в браузере 19.09.2026: «5 на 6 400,…» —
     сумма без хвоста в деньгах хуже второй строки). */
  overflow-wrap: anywhere;
}

.os-sm__ts {
  font-size: 11px;
  color: var(--os-fg2);
}

.os-sm__tile.is-warn {
  border-color: color-mix(in srgb, var(--os-amber) 50%, var(--os-line));
}

.os-sm__tile.is-warn .os-sm__tk {
  color: var(--os-amber);
}

.os-sm__ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 14px;
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--os-panel);
  background: var(--os-amber);
  border-radius: 50%;
}

/* Плашка-предупреждение — КНОПКА: раскрывает свои строки (владелец 19.09.2026).
   Сброс кнопки и тач-высота `button` из mobile.css — ВНЕ media-запроса
   (ловушка 5): специфичность класса выигрывает при любом порядке файлов. */
.os-sm__tileBtn {
  appearance: none;
  width: 100%;
  min-height: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.os-sm__tileBtn:hover {
  border-color: color-mix(in srgb, var(--os-amber) 80%, var(--os-line));
}

.os-sm__tileBtn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--os-amber) 80%, transparent);
  outline-offset: 2px;
}

.os-sm__tileBtn[aria-expanded="true"] {
  background-color: color-mix(in srgb, var(--os-amber) 10%, var(--os-panel));
  border-color: var(--os-amber);
}

.os-sm__chev {
  margin-left: auto;
  font-size: 10px;
}

.os-sm__tileBtn[aria-expanded="true"] .os-sm__chev {
  transform: rotate(180deg);
}

/* ---------- строки плашек: что разобрать и правка на месте ---------- */

/* Панель — на всю ширину верхнего блока, под долгом групп и плитками: строкам
   с полями нужна ширина, а в колонке плиток они стояли бы столбиком всегда. */
.os-sm__issues {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--os-amber) 45%, var(--os-line));
}

/* Панель «ручного изменения» — без жёлтой рамки: там не о чем тревожиться. */
.os-sm__issues[data-kind="late"] {
  border-color: var(--os-line);
}
.os-sm__issues[data-kind="excluded"] {
  border-color: var(--os-line);
}

.os-sm__iclose {
  flex: none;
}

.os-sm__inote,
.os-sm__imore {
  margin: 0;
  font-size: 11.5px;
  color: var(--os-fg2);
}

.os-sm__ilist {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Строка: сведения слева, поля и кнопки справа; пояснения и ошибки — во всю
   ширину под ними. Узкая вкладка — в столбик (контейнерный запрос ниже). */
.os-sm__irow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid var(--os-line);
}

.os-sm__irow:first-child {
  border-top: 0;
}

/* Строка принимает фокус, пока её кнопка в полёте (`tabindex="-1"`): рамка —
   только клавиатурному фокусу. */
.os-sm__irow:focus {
  outline: none;
}

.os-sm__irow:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--os-accent) 60%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

.os-sm__icells {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.os-sm__inum {
  font-weight: 700;
}

/* Название группы пишет чужой человек: длинное обрезается, полное — в title. */
.os-sm__isrc {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--os-fg2);
}

/* Номер на площадке: подпись и короткий копируемый номер одной парой. */
.os-sm__iref {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.os-sm__ik {
  font-size: 11px;
  color: var(--os-fg2);
}

.os-sm__iamt {
  font-weight: 600;
  white-space: nowrap;
}

.os-sm__ist {
  padding: 0 8px;
  font-size: 11px;
  color: var(--os-fg2);
  background: var(--os-ctl);
  border-radius: 999px;
  white-space: nowrap;
}

.os-sm__iat,
.os-sm__iord {
  font-size: 11.5px;
  color: var(--os-fg2);
}

.os-sm__iord {
  overflow-wrap: anywhere;
}

.os-sm__iact,
.os-sm__iusdt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 8px;
  min-width: 0;
}

.os-sm__fld {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  color: var(--os-fg2);
}

/* Поля строк: высота и тач-минимум отбиты (у `.os-sm .os-input` — `min-height:
   0`), `color-scheme` красит системные части поля под тему. */
.os-sm .os-sm__iin {
  width: 200px;
  height: 28px;
  font-variant-numeric: tabular-nums;
  color-scheme: dark;
}

.os-sm .os-sm__iin--num {
  width: 120px;
}

[data-theme="light"] .os-sm .os-sm__iin {
  color-scheme: light;
}

.os-sm__iwhy,
.os-sm__iusdt,
.os-sm__ihint,
.os-sm__ierr,
.os-sm__isaved {
  grid-column: 1 / -1;
  font-size: 11.5px;
}

.os-sm__iwhy,
.os-sm__ihint {
  color: var(--os-amber);
}

/* Ручное изменение — сведение, не предупреждение (владелец 19.09.2026). */
.os-sm__iwhy--ok {
  color: var(--os-fg2);
}

.os-sm__inote2 {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--os-fg2);
}

.os-sm__ierr {
  color: var(--os-bad);
}

.os-sm__isaved {
  color: var(--os-ok);
}

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

/* mobile.css на узком экране даёт КАЖДОЙ таблице `min-width: 640px`: легенда
   доната рядом с кольцом вылезала за карточку. Отбито классом вне media —
   специфичность выигрывает при любом порядке файлов. Широким таблицам свой
   минимум задан ниже, и живут они в обёртке с прокруткой. */
.os-sm__tbl,
.os-ch__legend {
  min-width: 0;
}

.os-sm__tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.os-sm__tbl th,
.os-sm__tbl td {
  padding: 6px 8px;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--os-line);
  white-space: nowrap;
}

.os-sm__tbl thead th {
  font-size: 11px;
  font-weight: 500;
  color: var(--os-fg2);
}

.os-sm__tbl tfoot th,
.os-sm__tbl tfoot td {
  font-weight: 700;
  border-bottom: 0;
}

.os-sm__tbl .os-ch__num,
.os-ch__legend .os-ch__num {
  text-align: right;
}

/* Долг групп: имя группы тянется, числа — своими колонками фиксированной
   ширины; на узкой вкладке таблица прокручивается, а не сминается. */
.os-sm__recv {
  table-layout: fixed;
  min-width: 470px;
}

.os-sm__recv thead th:nth-child(2) { width: 84px; }
.os-sm__recv thead th:nth-child(3) { width: 140px; }
.os-sm__recv thead th:nth-child(4) { width: 156px; }

.os-sm__rname .os-sm__gname,
.os-sm__tbl th .os-sm__gname {
  display: inline-block;
  max-width: calc(100% - 18px);
  vertical-align: middle;
}

.os-sm__rsub td {
  padding: 0 8px 6px 26px;
  font-size: 11.5px;
  color: var(--os-fg2);
  white-space: normal;
}

.os-sm__rsub.is-warn td {
  color: var(--os-amber);
}

.os-sm__copy {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.os-sm__recv tfoot .os-sm__copy {
  font-size: 14px;
}

.os-sm__more > summary {
  font-size: 11.5px;
  color: var(--os-fg2);
  cursor: pointer;
}

.os-sm__more[open] > summary {
  margin-bottom: 6px;
}

/* ---------- графики ---------- */

.os-sm__cmp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  min-width: 0;
}

.os-sm__donut {
  flex: 0 0 auto;
}

.os-sm__legend {
  flex: 1 1 240px;
  min-width: 0;
}

.os-sm__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 12px;
}

.os-sm__subm {
  flex: none;
  color: var(--os-fg2);
}

.os-sm__bars,
.os-sm__cols {
  min-width: 0;
}

.os-sm__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--os-fg2);
}

.os-sm__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 220px;
}

.os-ch__svg {
  display: block;
  overflow: visible;
  font-family: inherit;
}

.os-ch__sw {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--os-cat);
  border-radius: 3px;
}

.os-sm__key .os-ch__sw,
.os-sm__sub .os-ch__sw {
  margin-right: 0;
}

.os-ch__legend {
  width: 100%;
  /* `auto`, а не `fixed` (ревью 19.09.2026): при `fixed` ширины колонок брались из
     шапки, колонка значений в 42 % съедала место, и имя источника срезалось до
     ~50 px. Здесь числа берут ровно свою ширину (`nowrap`), имя — остаток. */
  table-layout: auto;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.os-ch__legend th,
.os-ch__legend td {
  padding: 5px 6px;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--os-line);
  white-space: nowrap;
}

.os-ch__legend thead th {
  font-size: 11px;
  font-weight: 500;
  color: var(--os-fg2);
}

.os-ch__legend thead th:nth-child(3) { width: 64px; }

.os-ch__legend tfoot th,
.os-ch__legend tfoot td {
  font-weight: 700;
  border-bottom: 0;
}

/* Ячейка имени забирает всю свободную ширину таблицы: без этого процент у
   имени считался от ячейки, сжатой по содержимому, и название обрезалось до
   ~50 px при пустом месте рядом (проба в браузере 19.09.2026). */
.os-ch__legend .os-ch__who {
  width: 100%;
  max-width: 0;
}

.os-ch__name {
  display: inline-block;
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Метки данных несут цвет слота; текст — только токенами текста. */
.os-ch__seg {
  stroke: var(--os-cat);
  transition: filter .15s ease;
}

.os-ch__seg:hover {
  filter: brightness(1.15);
}

.os-ch__track {
  stroke: var(--os-ch-track);
}

/* Шторка доната — цвета поверхности карточки: в покое ничего не закрывает. */
.os-ch__cover {
  stroke: var(--os-panel);
}

.os-ch__cv {
  fill: var(--os-fg);
  font-size: 15px;
  font-weight: 700;
}

.os-ch__cc,
.os-ch__none {
  fill: var(--os-fg2);
  font-size: 11px;
}

.os-ch__lbl {
  fill: var(--os-fg);
  font-size: 12px;
}

.os-ch__val {
  fill: var(--os-fg2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.os-ch__bar {
  fill: var(--os-cat);
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: filter .15s ease;
}

.os-ch__row:hover .os-ch__bar {
  filter: brightness(1.15);
}

.os-ch__grid,
.os-ch__base {
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.os-ch__grid {
  stroke: var(--os-ch-grid);
}

.os-ch__base {
  stroke: var(--os-ch-base);
}

.os-ch__tick,
.os-ch__xl {
  fill: var(--os-fg2);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.os-ch__col {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.os-ch__stack {
  fill: var(--os-cat);
  transition: filter .15s ease;
}

.os-ch__col:hover .os-ch__stack {
  filter: brightness(1.15);
}

/* ---------- ширина вкладки ---------- */

/* Компактная аналитическая сводка: деньги отдельно от когорты заявок. */
.os-sm__overview { min-width: 0; }
.os-sm__money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--os-line); }
.os-sm__money-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-right: 1px solid var(--os-line); min-width: 0; }
.os-sm__money-item:first-child { padding-left: 0; }
.os-sm__money-item:last-child { border-right: 0; }
.os-sm__money-item > span { font-size: 12px; color: var(--os-fg2); }
.os-sm__money-item > strong { font-size: clamp(20px, 2.1cqw, 29px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.os-sm__money-item strong .os-btn { font-size: inherit; font-weight: inherit; background: transparent; padding: 0; border-radius: 3px; }
.os-sm__money-item small { font-size: 11px; font-weight: 400; color: var(--os-fg2); }
.os-sm__explain { margin: 8px 0; font-size: 11px; color: var(--os-fg2); }
.os-sm__explain summary, .os-sm__warnings summary { cursor: pointer; }
.os-sm__explain p { max-width: 850px; }
.os-sm__operations { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; font-size: 11px; color: var(--os-fg2); padding: 4px 0; }
.os-sm__operations strong, .os-sm__operations .os-btn { color: var(--os-fg); font-size: 12px; }
.os-sm__operations .os-btn { background: transparent; padding: 2px 4px; }
.os-sm__warnings { margin-top: 10px; border: 1px solid color-mix(in srgb, var(--os-amber) 40%, var(--os-line)); border-radius: 8px; font-size: 12px; background: var(--os-panel); }
.os-sm__warnings > summary { padding: 10px 14px; color: var(--os-amber); }
.os-sm__warnings-body { padding: 0 14px 8px; }
.os-sm__warnings-body p { font-size: 11px; color: var(--os-fg2); }
.os-sm__analysis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; align-items: start; }
.os-sm__analysis .os-sm__card--kpi { padding: 12px 14px; border: 1px solid var(--os-line); background: var(--os-panel); }
.os-sm__analysis .os-sm__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.os-sm__analysis .os-sm__tile { padding: 4px 0; border: 0; border-radius: 0; background: transparent; }
.os-sm__analysis .os-sm__tv { font-size: 20px; }
.os-sm__grid .os-sm__card--recv { border-color: var(--os-line); }
.os-sm__cmp { gap: 10px; }
.os-sm__donut .os-ch__svg { width: 120px; height: 120px; }
.os-sm__legend { flex-basis: 190px; }
.os-sm__change { color: var(--os-fg); border: 1px solid var(--os-line); font-size: 11px; }
.os-sm__rname > .os-btn { display: block; margin-top: 4px; }
.os-sm__top:has(> [data-sm-issues][hidden]) { display: none; }

/* Страница 1280 с сайдбаром: долг групп слева, плитки справа в 2–3 колонки;
   графики — рядом. Нет групп в выборке — плитки на всю ширину. */
@container ossm (min-width: 900px) {
  .os-sm__analysis { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
  .os-sm__top {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .os-sm__top:has(> .os-sm__card--recv[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-sm__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  }

  .os-sm__grid:has(> [data-sm-cmp][hidden]):has(> [data-sm-who][hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container ossm (max-width: 560px) {
  .os-sm__money { grid-template-columns: minmax(0, 1fr); }
  .os-sm__money-item, .os-sm__money-item:first-child { padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--os-line); }
  .os-sm__money-item:last-child { border-bottom: 0; }
  .os-sm__k {
    flex-basis: 100%;
  }

  .os-sm__hint {
    padding-left: 0;
  }

  .os-sm__dt {
    flex: 1 1 150px;
  }

  .os-sm .os-sm__date {
    flex: 1 1 auto;
    width: auto;
  }

  .os-sm__reset,
  .os-sm__export {
    margin-left: 0;
  }

  /* Денежные колонки не накладываются: узкая таблица прокручивается внутри карточки. */
  .os-sm__recv {
    min-width: 480px;
    font-size: 12px;
  }

  .os-sm__recv thead th:nth-child(2) { width: 52px; }
  .os-sm__recv thead th:nth-child(3) { width: 108px; }
  .os-sm__recv thead th:nth-child(4) { width: 122px; }

  .os-sm__recv th,
  .os-sm__recv td {
    padding: 6px 4px;
  }

  /* Строки плашек — в столбик: сведения, под ними поля во всю ширину. */
  .os-sm__irow {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-sm__iact,
  .os-sm__iusdt {
    justify-content: flex-start;
  }

  .os-sm__fld {
    flex: 1 1 100%;
  }

  .os-sm .os-sm__iin,
  .os-sm .os-sm__iin--num {
    flex: 1 1 auto;
    width: auto;
  }
}

@container ossm (max-width: 760px) {
  .os-sm__ledger-work, .os-sm__ledger-history { grid-template-columns: minmax(0, 1fr); }
  .os-sm__ledger-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-sm__ledger-metric:nth-child(2) { border-right: 0; }
  .os-sm__ledger-metric:nth-child(-n+2) { border-bottom: 1px solid var(--os-line); }
  .os-sm__ledger-intro { flex-direction: column; gap: 12px; }
  .os-sm__help { flex-basis: auto; }
  .os-sm__help summary { text-align: left; }
}
.os-sm__decision {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--os-line);
  border-radius: 10px;
}
.os-sm__decision p { margin: 0; color: var(--os-fg2); }
.os-sm__decision .os-sm__fld { display: grid; gap: 6px; }
.os-sm__decision > div { display: flex; flex-wrap: wrap; gap: 8px; }
.os-sm__decision .os-input { width: 100%; min-width: 0; }

@container ossm (max-width: 420px) {
  .os-sm__receipt-form { grid-template-columns: minmax(0, 1fr); }
  .os-sm__ledger-metric, .os-sm__ledger-block { padding: 14px; }
  .os-sm__form-footer { flex-direction: column; align-items: stretch; }
}