/* @boog-ui-start */
/* @kit Список кабинета (поверхность)
   @group Поверхности
   @about Каталог предметов кабинета: все чертежи, все мероприятия, все сезоны.
     Заголовок с главным действием, строка отбора, таблица со строками-предметами.
     Клик по строке ведёт в карточку предмета (поверхность «Карточка предмета
     кабинета»), поэтому строка кликабельна целиком.
   @do Одни и те же колонки-роли во всех каталогах: имя, состояние, объём,
     использование, готовность, ограничение — так каталоги узнают друг друга
   @do Первую колонку давать двумя ярусами: название и подпись мелким
   @do Числа — моноширинными цифрами, иначе столбец «прыгает» при сравнении
   @dont Ставить кнопку «Открыть» в строку: строка и так кликабельна, кнопка
     съедает колонку и спорит с главным действием страницы
   @dont Красить состояние тревожным тоном, если это не поломка: «закрыт для
     правки» — нормальная жизнь предмета, а не ошибка
   @sample <div class="clist"><div class="clist__head"><div><h1 class="clist__title">Чертежи</h1><p class="clist__lead">Что собрано и что ушло в игры.</p></div><button class="btn btn--primary">Новый чертёж</button></div><div class="clist__tools"><div class="search"><input placeholder="Поиск" /></div></div><div class="clist__wrap"><table class="clist__t"><thead><tr><th>Чертёж</th></tr></thead><tbody><tr class="clist__row"><td><div class="clist__nm">СДВИГ</div><div class="clist__sub">оценочная игра</div></td></tr></tbody></table></div></div>

   Опирается только на токены: метки, кнопки и поиск внутри — примитивы. */

.clist{display:flex;flex-direction:column;gap:var(--space-5);}

/* ── Заголовок и отбор ─────────────────────────────────────────── */
.clist__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;}
/* База 0 обязательна: при базе по содержимому длинный подзаголовок переносит
   кнопку под заголовок раньше, чем текст успевает сжаться. */
.clist__head > div{flex:1 1 0;min-width:16rem;}
.clist__title{margin:0;font:900 var(--text-2xl)/1.05 var(--font-display);color:var(--color-text);}
.clist__lead{margin:var(--space-1) 0 0;font:var(--text-md)/1.4 var(--font-body);color:var(--color-muted);}
.clist__tools{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.clist__tools .search{min-width:15rem;}
.clist__spacer{flex:1;}

/* ── Таблица ───────────────────────────────────────────────────── */
.clist__wrap{overflow-x:auto;}
.clist__t{width:100%;border-collapse:collapse;table-layout:fixed;min-width:48rem;}
.clist__t th{text-align:left;white-space:nowrap;cursor:pointer;user-select:none;
  padding:var(--space-3);border-bottom:1px solid var(--color-border);
  font:700 var(--text-xs)/1 var(--font-body);color:var(--color-muted);
  text-transform:uppercase;letter-spacing:.04em;}
.clist__t th:last-child{cursor:default;}
.clist__t th.is-sorted{color:var(--color-accent-active);}
.clist__srt{--size-icon:var(--text-sm);color:var(--color-border);vertical-align:middle;margin-left:var(--space-05);}
.clist__t th.is-sorted .clist__srt{color:var(--color-accent);}
.clist__t td{padding:var(--space-3);border-bottom:1px solid var(--color-border);vertical-align:middle;}
.clist__t tbody tr:last-child td{border-bottom:0;}
.clist__t .chip{white-space:nowrap;}

/* Строка кликабельна целиком — кнопки «Открыть» в каталоге нет. Шеврон
   справа оживает при наведении: подсказывает, что строка ведёт дальше. */
.clist__row{cursor:pointer;}
.clist__row:hover{background:var(--state-hover);}
.clist__row:focus-visible{outline:none;box-shadow:inset var(--focus-ring);}
.clist__go .icon{color:var(--color-border);
  transition:color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard);}
.clist__row:hover .clist__go .icon{color:var(--color-accent);transform:translateX(2px);}

/* ── Ячейки ────────────────────────────────────────────────────── */
/* Знак перед именем не сжимается и не отрывается от строки: он говорит, к
   какому слою относится предмет, и без имени бессмыслен. */
.clist__nm{display:flex;align-items:center;gap:var(--space-2);
  font:700 var(--text-md)/1.25 var(--font-body);color:var(--color-text);}
.clist__sub{margin-top:var(--space-05);font:var(--text-xs)/1.3 var(--font-body);color:var(--color-muted);}
/* Столбец фактов: по строке на факт, иконка приглушена — считывается
   вертикально, не мешая сравнивать соседние строки. */
.clist__facts{display:flex;flex-direction:column;gap:var(--space-1);
  font:var(--text-xs)/1.2 var(--font-body);color:var(--color-muted);}
.clist__facts span{display:inline-flex;align-items:center;gap:var(--space-1);}
/* Значок на ступень крупнее подписи: при равном размере он читается мельче
   текста. Ступень шкалы, а не число - поедет вместе с текстом, если шкала
   поменяется. --text-sm равен прежним 13, облик не меняется. */
.clist__facts .icon{--size-icon:var(--text-sm);}
.clist__num{font:700 var(--text-sm)/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--color-text);}
.clist__num--off{color:var(--color-muted);font-weight:400;}
.clist__cap{font:var(--text-xs)/1.2 var(--font-body);color:var(--color-muted);white-space:nowrap;}
/* Дата не переносится: «10–11 сентября», разорванное пополам, читается как
   две разные даты. Приписка про срок идёт отдельной строкой под ней. */
.clist__date{white-space:nowrap;font:700 var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.clist__stack{display:flex;flex-direction:column;gap:var(--space-1);}
/* Готовность долей: число сверху, полоса снизу. Не статусный цвет — это
   объём работы, а не «успех»/«ошибка». */
.clist__ratio{display:inline-flex;align-items:center;gap:var(--space-1);
  font:700 var(--text-sm)/1 var(--font-body);font-variant-numeric:tabular-nums;}
.clist__ratio .icon{--size-icon:var(--text-lg);color:var(--color-muted);}
/* Незаполненная часть — голубая, а не серая: в этом каталоге незанятое место
   в сетке тоже голубое, и остаток работы обязан читаться той же краской.
   Серый трек кита говорит «пусто», голубой — «ещё предстоит», и для доли
   готовности верно второе. */
.clist__stack .progress{background:var(--color-accent-weak);}
.clist__ratio small{font:400 var(--text-xs)/1 var(--font-body);color:var(--color-muted);}
/* Статус там, где нет хода: точка и слово. Плашками столбец рябил — четыре
   заливки в шести строках спорили за внимание, хотя статус в списке чертежей
   почти всегда один и тот же. Цвет ушёл в точку 8 пикселей, слово осталось
   обычным текстом: пестрота исчезла, а читается статус по-прежнему словом,
   не кодом. Точка сама по себе безадресна — потому и не бывает без слова. */
.clist__status{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;
  font:var(--text-sm)/1.2 var(--font-body);color:var(--color-text);}
.clist__status .status-dot{flex:none;}
.clist__status--ok .status-dot{background:var(--color-success);}
/* Черновик — пустой контур, а не залитая точка: в нём ещё нечего показывать,
   и точка повторяет это формой. Тот же приём, что в ленте стадий, где ещё не
   наступивший шаг тоже контур без заливки, — черновик в списке чертежей и
   черновик в списке мероприятий читаются как одно и то же состояние. */
.clist__status--draft .status-dot{background:transparent;
  border:var(--border-thick) solid var(--color-track);}
.clist__status--off .status-dot{background:var(--color-track);}
.clist__status--gone .status-dot{background:var(--color-danger);}

/* Приоритет намерения — номер в кружке. Не метка со статусом: это порядок,
   заданный самим человеком, и читается он как «первое, второе, третье». */
.clist__pri{display:inline-grid;place-items:center;cursor:default;
  width:var(--space-6);height:var(--space-6);border-radius:var(--radius-pill);
  background:var(--color-accent-weak);color:var(--color-accent-active);
  font:800 var(--text-sm)/1 var(--font-body);font-variant-numeric:tabular-nums;}

/* Ограничение предмета — спокойным тоном: закрытый для правки чертёж или
   завершённое мероприятие нормальны, тревожить ими незачем. */
.clist__note{display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap;
  font:600 var(--text-xs)/1.2 var(--font-body);color:var(--color-muted);cursor:default;}
.clist__note .icon{--size-icon:var(--text-sm);}

/* Люди роли: иконка кита × количество. Иконка приглушена — она подпись к
   числу, а не самостоятельный знак. */
.clist__role{display:inline-flex;align-items:center;gap:var(--space-1);
  font:700 var(--text-sm)/1 var(--font-body);font-variant-numeric:tabular-nums;
  color:var(--color-text);}
.clist__role .icon{--size-icon:var(--text-lg);color:var(--color-muted);}

/* Сетка мест и подпись под ней — колонкой по центру ячейки. Блок с числом
   вдвое уже сетки, и прижатый влево он висел не на оси столбца: подпись под
   ним оказывалась шире самого блока и тянула взгляд в сторону. Центр держит
   и мелкую сетку, и блок на одной вертикали. */
.clist__seats{align-items:center;width:max-content;margin-inline:auto;}
.clist__seats .clist__cap{text-align:center;}

.clist__empty{padding:var(--space-12) var(--space-6);text-align:center;color:var(--color-muted);}

/* ── Телефон: строка становится карточкой ────────────────────────
   Своя ширина таблицы - 48rem, и на экране в 375 точек каталог просто уезжал
   вбок: шесть-восемь столбцов там не читаются никак. Разметка остаётся ТОЙ ЖЕ,
   меняется только раскладка - отдельного построителя карточек нет, иначе два
   вида строки разошлись бы при первой же правке колонок.
   Порог 930 - общий порог платформы (мобильный слой в primitives.css). */
@media (max-width: 930px){
  .clist__wrap{overflow-x:visible;}
  .clist__t{min-width:0;display:block;}
  .clist__t colgroup,.clist__t thead{display:none;}
  .clist__t tbody,.clist__t tbody tr{display:block;}
  .clist__row{border:1px solid var(--color-border);border-radius:var(--radius-md);
    padding:var(--space-4);}
  .clist__row + .clist__row{margin-top:var(--space-3);}
  .clist__t td{display:block;padding:0;border-bottom:0;}
  .clist__t td + td{margin-top:var(--space-2);}
  /* Шеврон убран: карточка нажимается целиком, и стрелка у края обещала бы
     отдельную цель, которой нет. */
  .clist__go{display:none;}
  /* Места прижаты влево, как всё остальное в карточке. Центр осмыслен только
     в таблице, где блок стоит на оси своего столбца; в карточке столбца нет,
     и центрированная сетка выпадала из общего левого края. */
  .clist__seats{margin-inline:0;align-items:flex-start;width:auto;}
  .clist__seats .clist__cap{text-align:left;}
}
/* @boog-ui-end */