/* Таблица объекта с переключением ролей. Задача 395.

   ВИД — ПРОДУКТОВЫЙ. Решение владельца 23.08.2026: «пусть будет в нашем
   стиле». Сама таблица — `table.table` из `app.css`, та же, что во всех
   реестрах кабинета; цифры — `.u-num`, акцент — `.u-danger`. Копий здесь
   нет ни одной: копия разошлась бы с продуктом при первой его правке, и
   разошлась бы молча.

   Ниже — только то, чего в кабинете нет по устройству: переключатель
   ролей, карточка для телефона и подпись под таблицей.

   ЦВЕТА ЧИСЛАМИ, А НЕ ПЕРЕМЕННЫМИ. Сторож оформления берёт объявления
   переменных из двух файлов и не видит токенов, объявленных в самом
   блоке. Он прав по существу: необъявленная переменная не ломает
   страницу, а молча отбрасывает свойство целиком. */

.rsw{
  font-family:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  color:#55515F;
}

.rsw *{box-sizing:border-box}

.rsw__tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}

/* РАМКА ПРОКРУЧИВАЕТСЯ, А НЕ РЕЖЕТ (#406).

   Стояло `overflow: hidden`, и у директора девять колонок — 1447
   пикселей — обрезались рамкой в 1100 без всякого признака, что справа
   что-то есть. «Остаток материала» и «Маржа» просто отсутствовали.

   В кабинете у той же таблицы прокрутка есть: `.card:has(.table-wide)`
   в app.css задаёт `overflow: auto`. То есть витрина отняла у таблицы
   то, что в продукте у неё было, — и показала обрезанный продукт.

   Полоса нужна не только на широком экране: с 768 до 1140 пикселей —
   планшет в альбоме — таблица шире рамки всегда, а карточки вместо неё
   включаются только ниже 768.

   У ролей с закрытыми колонками таблица сужается сама и полоса
   пропадает: прокрутка появляется там, где ей есть что показать. */
.rsw__frame{
  border:1px solid #DBDADE;
  background:#FFFFFF;
  overflow:auto;
}

.rsw__foot{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:12px;
  font-size:13px;
  line-height:1.6;
}

.rsw__note{color:#55515F;max-width:70ch}
.rsw__note b{color:#131747}

.rsw__count{
  white-space:nowrap;
  color:#6F6B7D;
  font-variant-numeric:tabular-nums;
}

.rsw__sr{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Карточка вместо таблицы — только на телефоне. */
.rsw__card{display:none}

/* Телефон: девять колонок не помещаются, и горизонтальной прокрутки быть
   не должно.

   ПОЛЯ ИСЧЕЗАЮТ ФИЗИЧЕСКИ, А НЕ БЛЕДНЕЮТ. Прозрачное поле на месте
   оставляет дыру, а дыра читается как «сломалось». Пустое место должно
   схлопнуться: у прораба карточка просто короче, и это ровно то, что
   говорит блок. */
/* ПОРОГ 768, А НЕ 767, И ЭТО НЕ ПРИДИРКА (#406).

   Продукт прячет полотно графика на `max-width: 768px` — правило в
   app.css. Здесь стояло 767, и ровно на 768 пикселях получалась
   бессмыслица: график уже мобильный, а таблица ещё настольная,
   девятиколонная, в окне 768. Один пиксель ширины разводил два блока
   одной страницы по разным устройствам.

   Порог берём у продукта, а не заводим свой: там, где витрина повторяет
   поведение кабинета, она обязана ломаться в той же точке. */
@media (max-width:768px){
  .rsw__frame{display:none}
  .rsw__card{
    display:block;
    border:1px solid #DBDADE;
    background:#FFFFFF;
  }
  .rsw__card-h{
    padding:11px 12px;
    border-bottom:1px solid #DBDADE;
    background:#F5F4FA;
    font-size:13px;
    font-weight:600;
    color:#131747;
  }
  .rsw__field{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 12px;
    border-bottom:1px solid #DBDADE;
    font-size:12.5px;
  }
  /* ПОЛЕ КАРТОЧКИ, ЗАКРЫТОЕ ДЛЯ РОЛИ, ОБЯЗАНО ИСЧЕЗНУТЬ (#410).
     Скрипт ставит полю `hidden`, когда роль колонку не видит. Но
     `.rsw__field{display:flex}` — авторское правило, а `[hidden]` браузера
     — стилевое по умолчанию, и авторское его перебивает: поле оставалось
     на экране, и на телефоне таблица не менялась от смены роли вовсе.
     `.rsw__field[hidden]` бьёт по специфичности собственный `.rsw__field`,
     и поле уходит из потока целиком, как и задумано. */
  .rsw__field[hidden]{display:none}
  .rsw__field:last-child{border-bottom:0}
  .rsw__field dt{color:#6F6B7D;margin:0}
  .rsw__field dd{margin:0;font-variant-numeric:tabular-nums;text-align:right}
  .rsw__foot{flex-direction:column;gap:8px}
  .rsw__tabs .btn{flex:1 1 auto}
}

/* Схлопывание колонок при смене роли.

   ЗАЧЕМ ЗДЕСЬ ДВИЖЕНИЕ, ЕСЛИ ВЕЗДЕ ОНО ЛИШНЕЕ. Весь блок держится на
   одном впечатлении: колонки НЕ пропали, а УБРАЛИСЬ, и соседи заняли их
   место. Мгновенная перерисовка читается как «страница перезагрузилась»
   — человек не связывает её с кнопкой, которую нажал. Движение здесь
   несёт смысл, а не украшает.

   ЯЧЕЙКА СХЛОПЫВАЕТСЯ, А НЕ ПРЯЧЕТСЯ. `display:none` мгновенен и
   анимации не поддаётся вовсе; `hidden` — то же самое. Поэтому ширина
   уходит в ноль через max-width и отступы, а содержимое гаснет. Итог тот
   же — ячейки на экране нет, — но виден путь.

   ДОСТУПНОСТЬ ОТДЕЛЬНО ОТ ВИДА: закрытая ячейка получает aria-hidden,
   иначе читалка прочитает вслух то, чего на экране нет.

   ГАСНЕТ СОДЕРЖИМОЕ, А НЕ ЯЧЕЙКА, И ЭТО ИСПРАВЛЕНИЕ, А НЕ ВКУС (#406).

   Первая редакция снимала ширину у самой ячейки — `max-width: 0` на
   `th`/`td`. Приём выглядел разумным и не работал: у таблиц влияние
   `min-width` и `max-width` на ячейки в CSS 2.2 (§10.4) объявлено
   НЕОПРЕДЕЛЁННЫМ, и Chrome его не слушает вовсе. Класс вставал, отступы
   уходили, содержимое гасло до прозрачности — а колонка держала свои
   восемьдесят девять пикселей пустого места.

   Отсюда и жалоба владельца «у разных ролей одинаковые данные»: строки
   схлопывались исправно (там `line-height` и `padding` — свойства, к
   таблицам применимые), а колонки не двигались. Роли, различающиеся
   только колонками, выглядели одинаково.

   В таблице с автоматической раскладкой ширину колонки задаёт
   СОДЕРЖИМОЕ. Значит гасить надо его: у `span` внутри ячейки `max-width`
   работает как у обычного блока, нулевое содержимое схлопывает колонку
   само, и движение при этом сохраняется.

   И ВТОРАЯ ПОЛОВИНА ТОЙ ЖЕ БЕДЫ — строчная ширина в разметке. Пока на
   `th` стояло `style="width: N%"`, колонка держала свои проценты
   независимо от содержимого: строчное объявление сильнее правила из
   файла. Ширины убраны из разметки — раскладка считает их по
   содержимому сама, ровно как и задумывалось. Разбор — в самом виде. */

.rsw table.table th,
.rsw table.table td{
  overflow:hidden;
  white-space:nowrap;
  transition:padding .32s cubic-bezier(.4,0,.2,1),
             opacity .2s linear;
}

.rsw__v{
  display:block;
  max-width:40em;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width .32s cubic-bezier(.4,0,.2,1);
}

.rsw table.table th.is-off,
.rsw table.table td.is-off{
  width:0;
  padding-left:0;
  padding-right:0;
  opacity:0;
}

.rsw table.table th.is-off .rsw__v,
.rsw table.table td.is-off .rsw__v{max-width:0}

/* Строка уходит так же — высотой, а не исчезновением. У соисполнителя
   пропадают четыре работы из шести, и мгновенный скачок таблицы на
   четыре строки вверх выглядит сбоем, а не ответом на нажатие. */
.rsw table.table tbody tr td{
  transition:max-width .32s cubic-bezier(.4,0,.2,1),
             padding .32s cubic-bezier(.4,0,.2,1),
             line-height .32s cubic-bezier(.4,0,.2,1),
             opacity .2s linear;
}

.rsw table.table tbody tr.is-gone td{
  padding-top:0;
  padding-bottom:0;
  line-height:0;
  opacity:0;
  border-bottom-width:0;
}

/* Движение отключается целиком у того, кто просил его отключить.

   Требование владельца отдельной строкой, и оно не про вкус: у человека
   с вестибулярным расстройством или мигренью с аурой движение на экране
   вызывает не раздражение, а приступ. Переключение при этом остаётся
   мгновенным и полностью рабочим. */
@media (prefers-reduced-motion:reduce){
  .rsw table.table th,
  .rsw table.table td,
  .rsw table.table tbody tr td,
  .rsw__v{transition:none}
}