@layer ui {
/* Доска (ritm#14, ritm#340 — нарезано из today.css): колонки, карточки,
   перенос и переезд карточек, архив полосой, критичная важность.
   Все значения — из tokens.css, ни одного цвета мимо переменных: тёмная тема
   переопределяет только значения, и мимо переменной она не сработает. */

/* Группы колонки «Позже» (ritm#378): «Просрочено» сверху, «Впереди» — остальное
   по дате. Подпись мелкая и тихая, как у победы дня; «Просрочено» — охрой, как
   дата просрочки на карточке. */
.col-group {
  margin: var(--space-2) var(--space-1) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.col-group:first-child {
  margin-top: 0;
}

.col-group-late {
  color: var(--status-warn);
}

/* Доска (ritm#14). Пять колонок листаются вбок с привязкой: в 390 px пять колонок
   рядом дали бы по 70 px, а это не колонка, а полоска. */
.screen-wide {
  max-width: none;
}

.board-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.head-icon-on {
  color: var(--accent);
}

.projects {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) var(--space-4);
  scrollbar-width: none;
}

.projects::-webkit-scrollbar {
  display: none;
}

/* Строка отбора в шторке: поле ввода и галочка в той же сетке, что поля. */
.pick-field-text .prop-input,
.pick-field-check input[type="checkbox"] {
  flex: none;
}

.pick-field-text .prop-input {
  flex: 1;
  text-align: right;
}


.filter-note {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Полоса колонок — ростом по самой высокой колонке, но не выше оставшейся
   высоты экрана (ritm#286): колонки выравниваются по самой высокой из непустых,
   длинная прокручивается внутри и уходит под панель захвата. Во всю высоту
   экрана при любом числе карточек пустые колонки были прямоугольниками по
   1400 px — первое, что видел новичок. */
.cols {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) 0;
  overflow-x: auto;
  /* mandatory, а не proximity: с proximity полоса замирала между колонками, и
     на экране оказывались две половинки (замечание владельца 06.09). Отступ
     прокрутки равен полю контейнера, иначе колонка встаёт впритык к краю. */
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-4);
  /* Не выше оставшейся высоты экрана, а не по формуле от высоты окна (ritm#146). */
  flex: 0 1 auto;
  min-height: 0;
}

/* Во время перетаскивания привязка снята: она мешает вести карточку к краю. */
.col {
  flex: none;
  width: 318px;
  max-width: 86vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
}

/* Полоса архива в конце ряда колонок (ritm#91): узкая, с текстом снизу вверх —
   занимает ширину кнопки, а не колонки. */
.col-arch {
  flex: none;
  width: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) 0;
  color: var(--text-muted);
  text-decoration: none;
}

.col-arch-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.col-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.col-title {
  font-weight: var(--weight-semibold);
}

.col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Снизу — поле под панель захвата: колонка идёт до низа экрана, панель лежит
     поверх неё, а последняя карточка докручивается из-под панели. Раньше поле
     давал контейнер колонок, и доска просто заканчивалась выше панели пустой
     полосой (замечание владельца 10.09). */
  padding: 0 var(--space-2) var(--cmp-room);
  overflow-y: auto;
}

.col-empty {
  padding: var(--space-2) var(--space-2) 0;
}

/* Совсем пустая доска (ritm#286): колонки — заголовок, счётчик и «пусто», без
   поля под панель захвата — его ждёт последняя карточка, а карточек нет. */
.cols:not(:has(.bcard)) .col-body {
  padding-bottom: var(--space-3);
}

/* Карточка доски: полоса цвета категории слева на всю высоту.

   Одна сетка (ritm#420): в левом поле карточки — колонка кружка закрытия
   фиксированной ширины, а заголовок и все строки под ним (подпись, числа
   регулярной, метки, миниатюры, описание, пункты) начинаются от одной линии —
   края поля. Кружок стоит в своей колонке по центру первой строки заголовка.
   Раньше он стоял в строке заголовка, и подписи начинались от края карточки
   под ним, а у закрытой карточки без кружка заголовок уезжал к краю. Колонка
   у закрытой та же: в «Готово» заголовок стоит там же, где в соседних. */
.bcard {
  --bcard-tick: 24px; /* кружок */
  --bcard-line: calc(var(--text-md) * var(--leading-normal)); /* строка заголовка */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  /* Слева: полоса категории 4, поле 12, кружок, зазор до текста 18 — заголовок
     остался там, где стоял рядом с кружком. */
  padding: var(--space-3) var(--space-3) var(--space-2) calc(4px + var(--space-3) + var(--bcard-tick) + 18px);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* Перетаскивание (board.js): призрак под пальцем, исходник гаснет, колонка
   под указателем подсвечивается, приземлившаяся карточка вспыхивает на 1.6 с.
   Выделение текста и меню по удержанию выключены — удержание здесь жест. */
.bcard {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.bcard.is-dragging {
  opacity: 0.35;
}

/* Ширина призрака — ширина карточки с полями: карточка считает ширину без
   полей, и призрак выходил на 70 px шире неё, а садясь на место (ritm#460),
   сжимался рывком. */
.bcard-ghost {
  position: fixed;
  z-index: 20;
  box-sizing: border-box;
  margin: 0;
  pointer-events: none;
  box-shadow: var(--shadow-2);
  transform: scale(1.03);
  opacity: 0.95;
}

/* Переезд карточки (ritm#460): копия карточки доски или строки «Задач» летит
   поверх экрана из колонки в колонку, из группы в группу; ушедшая тает там,
   где стояла. Ставит и убирает её nav.js. Слой — как у призрака переноса
   (20): над колонками и панелью захвата и выше шторок (10–12). Под шторкой
   копия не летит: пока открыто модальное окно (body.modal-open), nav.js держит
   переезд и пускает его после закрытия. */
.flip-ghost {
  position: fixed;
  z-index: 20;
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
  will-change: transform;
}

/* Летящая копия приподнята, как призрак переноса; тень гаснет к посадке. */
.flip-ghost[data-ghost-of] {
  box-shadow: var(--shadow-2);
}

.cols.is-dragging {
  scroll-snap-type: none;
}

.col.is-over {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.bcard.is-landed {
  animation: bcard-land 1.6s var(--ease);
}

@keyframes bcard-land {
  0% { background: var(--status-good-soft); border-color: var(--accent); }
  100% { background: var(--surface-raised); border-color: var(--line); }
}

.bcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--line-strong);
}

/* Цвет категории приходит данными и красит через переменную (ritm#75):
   произвольный оттенок классом не выразить. Переменную ставит colors.js. */
.bcard[data-color]::before {
  background: var(--cat, var(--line-strong));
}

.bcard-title {
  color: inherit;
  text-decoration: none;
}

/* Заголовок карточки доски с кружком закрытия (ritm#367): кружок — тот же, что
   у строки на «Дне». В разметке он в строке заголовка, а стоит в колонке
   кружка (ritm#420): от поля карточки слева и по центру первой строки — на
   высоте строки заголовка, а не на глаз. Зона нажатия 44 набирается полями
   самого кружка и остаётся в левом поле, на заголовок не заходит. У закрытой
   карточки на том же месте та же форма, отмеченная (ritm#459): зелёная галка —
   заливка акцентом, тем же, каким «День» отмечает сделанное, — и нажатие её
   снимает. Карточке, перенесённой в «Готово» жестом, галку отмечает board.js,
   не дожидаясь перечитывания. */
.bcard-head {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  min-width: 0;
  line-height: var(--bcard-line);
}

.bcard-head > .close-form {
  position: absolute;
  left: calc(4px + var(--space-3));
  top: calc(var(--space-3) + (var(--bcard-line) - var(--bcard-tick)) / 2);
}

.bcard-title:hover {
  text-decoration: underline;
}

.bcard-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Строка людей карточки общей доски (ritm#335): кто завёл → кто делает.
   Кружки — те же, что у досок в шапке (ritm#251), только мельче: имя рядом
   говорит главное, кружок помогает найти человека глазом. */
.bcard-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Фон кружка — утопленный, а не мягкий акцентный, как в шапке: на карточке
   тёмной темы мягкий акцент почти сливается с её фоном (#1c2a23 на #222528). */
.bcard-people .avatar {
  width: 18px;
  height: 18px;
  font-size: 10px;
  background: var(--surface-sunken);
  box-shadow: none;
}

.bcard-people-to {
  padding: 0 2px;
  color: var(--text-muted);
}

.bcard-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: 2px;
}

/* Содержимое карточки на доске: описание и чек-лист под тумблером настроек.
   Пункты стоят просторнее и по ним можно попасть пальцем, не открывая карточку
   (замечание владельца 06.09). */
.bcard-check {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.bcard-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-xs);
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.bcard-check-item.is-done {
  color: var(--text-muted);
  text-decoration: line-through;
}

.bcard-check-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border: 1.4px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
}

.bcard-check-item.is-done .bcard-check-mark {
  border-color: var(--accent);
}

.bcard-check-mark .ic {
  width: 10px;
  height: 10px;
}

.bcard-check-count {
  color: var(--text-muted);
}

/* Поиск по архиву — общая строка поиска (ritm#324, аудит 23.09 — B4) по
   краю карточек, как в «Файлах»: строка под шапкой экрана отступает внутрь,
   а здесь она в теле шторки рядом с карточками. */
.arch-search .findrow {
  padding: 0;
}

.arch-search .findrow-box {
  max-width: none;
}

.bcard-note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.pill {
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.pill-agent {
  border: 1px dashed var(--line-strong);
  background: none;
}

/* Критичная важность (ritm#185) — чип. Охрой, как слово «критично» на
   «Дне» (ritm#258; решение владельца 23.09, B2): зелёная заливка на доске
   говорила то же другим цветом. Обычную и пустую не показываем вовсе: подпись
   у каждой задачи только шумела. Низкая идёт словами в подписи. */
.pill-crit {
  color: var(--status-warn);
  background: var(--status-warn-soft);
}

.bcard-move {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  width: 100%;
}

.bcard-move select {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
}

.bcard-move select:focus {
  color: var(--text);
}

.bcard-move button {
  min-width: 32px;
  min-height: 32px;
  color: var(--text-muted);
}

.bcard-move button:hover {
  color: var(--accent);
}

/* Ни ссылки, ни миниатюры на доске не тянутся браузерным переносом: он
   перехватывал наш жест, и карточка оставалась висеть на курсоре (ritm#153). */
.bcard a,
.bcard img {
  -webkit-user-drag: none;
}
}