@layer ui {
/* Экран «День» (ritm#11, до ritm#384 — «Сегодня»): план дня, «Без времени»,
   строка задачи, победа дня, карусель дней, дневник прошедшего дня. Строка
   задачи — та же на «Задачах» и в архиве. Общее для всех экранов — в shell.css.
   Все значения — из tokens.css, ни одного цвета мимо переменных: тёмная тема
   переопределяет только значения, и мимо переменной она не сработает. */

/* «Без времени» — тише плана дня: подложка обычной поверхности и мелкий
   заголовок. Эти задачи в знаменатель дня не входят и не должны спорить с ним. */
.card-extra,
.card-closed,
.card-quiet {
  background: var(--surface);
  /* Под последним чекбоксом отступ меньше обычного (ritm#91): закрытое
     смотрят списком, и воздух под ним читался как пустая карточка. */
  padding-bottom: var(--space-2);
}

/* Просроченное (ritm#190, ritm#378): дата охрой — не тревога, а факт, что день
   прошёл. Красного нет намеренно: просроченная задача — обычное дело. Селектор
   двойной: `.bcard-meta` ниже по файлу красит подпись в серый и перебивал
   одиночный класс — охры на доске не было видно вовсе (ritm#378). */
.bcard-meta.bcard-late {
  color: var(--status-warn);
}

/* Несделанное в срок наверху «Дня» (ritm#378). Строка — та же строка дня
   (замечание владельца 30.09 к ряду из трёх кнопок): полоска категории у края
   карточки, круг-галка слева, как в плане дня, «⋯» справа в строке названия.
   «На сегодня» (у дела без часа) — тонированный чип справа в строке подписи,
   под «⋯» (владелец 30.09: обводная кнопка третьей строкой — «стиль не
   нравится»): название идёт до «⋯», над чипом, строка остаётся в две линии,
   а длинная подпись обрезается многоточием, как в «Задачах». В строке
   названия чип зажимал название на телефоне до переноса. Сетка одна на все
   ширины: название и подпись — свои ячейки (тело строки — `display:
   contents`), колонка чипа под названием общая с ним. */
.card-late .late-when {
  color: var(--status-warn);
}

.late-list .late-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "tick title title menu"
    "tick meta today today";
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  min-height: 56px;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-2) var(--space-4);
}

/* У дела со временем «На сегодня» нет — подпись идёт до правого края. */
.late-list .late-row:not(:has(> .late-today)) {
  grid-template-areas:
    "tick title title menu"
    "tick meta meta meta";
  row-gap: 2px; /* как у строк плана: чипа нет — подпись у названия */
}

.late-row > .close-form {
  grid-area: tick;
}

.late-row > .task-body {
  display: contents;
}

.late-row .task-title {
  grid-area: title;
}

.late-row .task-meta {
  grid-area: meta;
  overflow: hidden;
}

.late-row > .late-today {
  grid-area: today;
  justify-self: end;
  display: flex;
  margin: 0;
}

/* Меню строки дня (ritm#90) висит поверх строки у правого края — здесь «⋯»
   видно всегда, и оно стоит в своей ячейке сетки. */
.late-list .late-row > .rowmenu {
  grid-area: menu;
  justify-self: end;
  position: relative;
  top: auto;
  right: auto;
}

/* Тонированный чип: акцентный текст на мягкой акцентной подложке, без рамки.
   Основа — `.mini`: её прозрачная зона нажатия 44 px остаётся. Одно правило
   на одно действие «на сегодня»: «На сегодня» у несделанного на «Дне» и
   «Сегодня» у строк «Задач» (владелец 30.09). */
.late-today .mini,
.hz-today .mini {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
  border-radius: 999px;
}

/* «⋯» — у правого поля строки, по центру строки названия; высоту строки не
   раздувает: зона 44 набирается отрицательными полями. Под «⋯» стоит чип, и
   зона растёт вверх, к полю строки (16 px), а вниз — только до чипа (4 px,
   зазор строк); значок по центру строки названия держит верхнее поле кнопки. */
.late-row .rowmenu-more {
  box-sizing: border-box;
  margin: -16px calc(-1 * var(--space-3)) -4px 0;
  padding: 12px 0 0;
}

/* Без скрипта меню не раскрыть — его действия стоят под строкой списком. */
html:not(.has-js) .late-row .rowmenu {
  grid-column: 2 / -1;
  grid-row: auto;
  justify-self: start;
}

html:not(.has-js) .late-row .rowmenu-more {
  display: none;
}

html:not(.has-js) .late-row .rowmenu-list {
  position: static;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  animation: none;
}

html:not(.has-js) .late-row .rowmenu-item {
  width: auto;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Строка уходит после действия (ritm#378): складывается на месте, как мысль,
   а не пропадает рывком. Высоту до нуля ведёт скрипт — ему нужен min-height 0. */
.late-list .late-row.is-leaving {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: opacity var(--dur-2) var(--ease), height var(--dur-2) var(--ease),
    padding var(--dur-2) var(--ease);
}

/* Числа регулярной в строке дня (ritm#346): значок повтора и подпись — одной
   группой. Узко группа уходит второй строкой целиком, а не режет категорию
   многоточием и не отрывает подпись от значка; строка метаданных у такой
   строки переносится, у остальных — нет (SPEC.md §3). */
.rep-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.task-meta.has-mark {
  flex-wrap: wrap;
  row-gap: 2px;
}

/* Дневник дня (ritm#384): «Сделано», «Перенесено», «Не сделано» у прошедшего
   дня и «Ещё сделано» у сегодняшнего. Строка — та же строка дня с полями до
   края карточки, но без действий: вместо кружка закрытия — знак того, что с
   делом стало. Сделано — залитый кружок с галочкой, перенесено — стрелка, не
   сделано — пунктирный кружок. Зелёной подложки закрытой строки нет: в блоке
   «Сделано» закрыто всё, и различать ей нечего. */
.diary-list .diary-row {
  min-height: 56px;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-2) var(--space-4);
}

/* Кружок-знак не кнопка: курсор обычный, наведение его не красит. Селектор
   двойной: `.tick` и его наведение описаны ниже по файлу и иначе перебили бы. */
.tick.tick-still {
  cursor: default;
}

.tick.tick-still:hover::before {
  border-color: var(--line-strong);
}

.tick.tick-still.tick-on:hover::before {
  border-color: var(--accent);
}

.diary-moved .tick.tick-still::before,
.diary-moved .tick.tick-still:hover::before {
  border-color: transparent;
}

.diary-moved .tick .ic {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

/* Пунктир — «не случилось»: пропущенный день регулярной, незакрытое дело. И
   день регулярной на будущем дне — показ по правилу, а не карточка. */
.diary-missed .tick::before,
.task-occ .tick::before {
  border-style: dashed;
}

/* «В план» стоит у правого края строки и не растягивает её по высоте. */
.toplan-form {
  margin: 0;
  flex: none;
}

.toplan {
  white-space: nowrap;
}

.card-empty,
.card-done {
  border-style: dashed;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Число и кнопка справа в шапке — вместе: при `space-between` на три элемента
   число вставало бы посередине (аудит 23.09). */
.card-head-end {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}

.card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* Порядок дня (ritm#231). Ручка стоит в шапке «Плана дня»: она про этот список,
   и место ей рядом с его заголовком, а не в общих настройках экрана.

   В обычном порядке видна одна иконка — подписывать «по плану дня» незачем, это
   и есть день. Как только порядок другой, рядом появляется его название: по
   одному значку не понять, каким правилом сейчас сложен список, а молчаливо
   переставленные строки читаются как сбой. */
/* Селектор длиннее обычного намеренно: picker.css подключается после этого
   файла и своим `.pick-field` задаёт поле формы — рамку снизу, высоту 48px и
   разгон по краям. В шапке это читается как лишняя полоса под иконкой, а сама
   иконка уезжает на середину строки. */
.card-head .dayorder.pick-field {
  flex: none;
  gap: var(--space-2);
  min-height: 0;
  margin-left: auto;
  align-self: center;
  border-bottom: 0;
}

.card-head .dayorder .pick-btn {
  min-height: 32px;
  max-width: none;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.dayorder .pick-btn .ic {
  width: 18px;
  height: 18px;
}

.dayorder[data-order="plan"] .pick-value {
  display: none;
}

/* Полоса дня. Заполнение задаётся data-fill, а ширину ставит скрипт: инлайновый
   style в разметке не применился бы (`style-src 'self'` на живом адресе), а сотня
   классов под проценты хуже одной строчки в скрипте. Присваивание через CSSOM
   политика не запрещает — она про разметку. Без скрипта полоса просто пустая. */
.bar {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}

/* Полоса плана дня — 3px, как в макете 14.09. */
.plan-bar {
  height: 3px;
}

/* Порядок дня — одна иконка 44px без подписи (макет 14.09): подпись правила
   стояла между заголовком и счётчиком и не помещалась. */
.dayorder .pick-btn .pick-value {
  display: none;
}

.dayorder .pick-btn {
  width: 44px;
  min-height: 44px;
  justify-content: center;
  margin: -10px -10px -10px 0;
  padding: 0;
}

.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-2) var(--ease);
}

.win,
/* Удержание строки задачи — свой жест: меню строки и перетаскивание в плане
   дня. Поэтому выделение текста и браузерное меню по удержанию выключены, как у
   карточек доски (владелец 12.09: на телефоне вылезало меню браузера). */
/* Строка по центру, а не по верху (макет 14.09, SPEC.md §3): заголовок в две
   строки растит строку, кружок и кнопка справа остаются посередине. Поля по
   бокам с отрицательным внешним отступом — под подложку закрытой строки. */
.task {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-2);
  border-radius: var(--radius-md);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Строки дня — во всю ширину карточки со своими полями, как в макете: карточка
   отступает на 16px, строка выходит за её поле и возвращает те же 16px себе.
   Числа сняты с `Сегодня.dc.html` на 430px: высота строки 72, поля 8/16, зазор
   12, полоска у самого края карточки, кружок центром на 29, текст с 63. */
.plan-list .task,
.plan-list .win {
  min-height: 56px;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-2) var(--space-4);
}

/* Закрытая задача остаётся на месте (владелец 14.09): галочка и зелёная
   подложка, без переезда в отдельный список. */
.task.task-is-done {
  background: var(--accent-soft);
}

/* Полоска категории 3px у левого края строки (SPEC.md §3): цвет приходит
   переменной --cat, без категории полоска прозрачна. Стоит внутри строки, у
   самого её края: снаружи она висела отдельно от подложки закрытой строки и не
   сходилась с полоской победы дня (замечание владельца 14.09). */
.task::before {
  content: "";
  position: absolute;
  left: 0;
  /* у строк дня поле 16px, а полоска стоит у самого края карточки */
  top: var(--space-2);
  bottom: var(--space-2);
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--cat, transparent);
  pointer-events: none;
}

/* Меню задачи открывается удержанием и места в строке не занимает (ritm#90):
   свёрнутое оно ничего не показывает, раскрытое — висит у правого края. */
.task > .rowmenu,
.win > .rowmenu {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
}

/* «⋯» переноса у строк «Дня» и «Задач» (ritm#514) — последним в строке, по её
   центру, как у несделанного в срок. Высоту строки не раздувает: зона 44 px
   набирается отрицательными полями сверху и снизу, справа — до поля строки
   (значок встаёт на ту же вертикаль, что «⋯» несделанного), слева — в зазор
   строки: названию остаётся на 8 px больше. */
.task > .rowmenu.row-move,
.win > .rowmenu.row-move {
  position: relative;
  top: auto;
  right: auto;
  flex: none;
}

.row-move .rowmenu-more {
  margin: -8px calc(-1 * var(--space-3)) -8px calc(-1 * var(--space-2));
}

/* У нижней строки — вверх от «⋯» (today.js ставит is-up по месту). */
.row-move.is-up .rowmenu-list {
  top: auto;
  bottom: 36px;
}

/* Без скрипта меню не раскрыть; перенос остаётся в карточке по ссылке строки. */
html:not(.has-js) .row-move {
  display: none;
}

/* Победа дня — единственное место экрана с акцентной подложкой: она и есть то,
   ради чего день считается удавшимся. */
/* Победа дня — та же строка, только с подложкой и подписью: поля, кружок и
   полоска берутся из общего правила выше. Своё `padding` сдвигало её кружок и
   заголовок на 4px правее соседних строк (замечание владельца 14.09). */
.win {
  background: var(--accent-soft);
}

/* Взятая победа — подложка гуще: у победы она зелёная и так, и без разницы в
   плотности закрытая победа выглядела как открытая, а снятая галка читалась
   как «фон не убрался» (замечание владельца 14.09). */
.win.task-is-done {
  background: color-mix(in srgb, var(--accent) 26%, var(--surface-raised));
}

/* Полоска победы дня — та же самая: правило одно на обе строки. */
.win::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--cat, transparent);
  pointer-events: none;
}

/* Две закрытые строки подряд — с зазором: их скруглённые подложки сходились
   углами, и стык читался как наложение (замечание владельца 14.09). */
.task-is-done + .task-is-done,
.win + .task-is-done {
  margin-top: 4px;
}

.win-body,
.task-body {
  /* Во всю оставшуюся ширину: без этого колонка мерилась по содержимому, и поле
     названия в карточке получало свою «родную» ширину около 235px — длинное
     название обрывалось на полуслове, а после перевода поля в многострочное
     стало переноситься на треть раньше края (ritm#136). */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.win-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.task-title {
  color: inherit;
  text-decoration: none;
  font-size: var(--text-md);
  line-height: 22px;
}

/* В строке дня заголовок живёт по макету: межстрочное 1.35, чтобы вторая
   строка не разъезжала. Кружок и кнопка стоят по центру строки, поэтому
   равнять заголовок по высоте отметки больше не нужно. */
.task .task-title,
.win .task-title {
  line-height: 1.35;
}

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

/* Одна строка метаданных (SPEC.md §3): не переносится, длинная обрезается
   многоточием, значки стоят рядом и не уезжают на вторую строку. Цифры —
   табличные, иначе время дёргает строку при обновлении. */
.task-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Важность — словом, а не чипом, и не акцентом: акцент занят смыслами
   «сделано» и «главное действие» (SPEC.md §1). */
.meta-crit {
  flex: none;
  color: var(--status-warn);
}

.meta-crit + .meta-text::before {
  content: "· ";
  color: var(--text-muted);
}

.task-meta .dot {
  color: var(--text-muted);
}

/* Строка едина во всех блоках (SPEC.md §3): «Без времени» больше не мельче. */

/* Закрытая задача: приглушена, но не зачёркнута — заголовок должен читаться и
   после закрытия (владелец 06.09); состояние показывают галочка и цвет. */
.task-is-done .task-title {
  color: var(--text-muted);
}

/* Форма вокруг кружка — flex, а не блок: inline-кнопка внутри блока садится на
   базовую линию, и кружок вставал на 4px выше центра строки (замечание
   владельца 14.09 про «едет вёрстка чекбоксов»). */
.close-form {
  display: flex;
  align-items: center;
  margin: 0;
  flex: none;
}

/* Кружок закрытия. Видимый диаметр 22px, зона нажатия 44 — набирается полями,
   как в макете: палец попадает, а кружок не выглядит кнопкой-переростком. */
/* Отметка-кружок: `flex: none` обязателен — в узкой строке flex сжимал ширину,
   а высоту оставлял, и круг становился овалом (замечание владельца 10.09). */
.tick {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin: -10px 0 -10px -10px;
  padding: 10px;
  box-sizing: content-box;
  background: none;
  border: none;
  cursor: pointer;
}

.tick::before {
  content: "";
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1.7px solid var(--line-strong);
  border-radius: 50%;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.tick:hover::before {
  border-color: var(--accent);
}

.tick-on::before,
.tick.is-closing::before {
  background: var(--accent);
  border-color: var(--accent);
}

/* Снятие галки (ritm#459): кружок пустеет сразу, до ответа сервера, — как
   закрытие заливает его заранее. Вес выше .tick-on::before. */
.tick.tick-on.is-opening::before {
  background: none;
  border-color: var(--line-strong);
}

.tick.is-opening .ic {
  visibility: hidden;
}


/* Закрытие задачи: 120 мс, заливка галочки, строка уезжает вниз списка. Победа
   дня закрывается иначе — 260 мс с однократным расширением карточки. */
/* Закрытие: строка никуда не едет (владелец 14.09) — заливается кружок, после
   ответа сервера строка получает зелёную подложку. */
.task.is-closing {
  transition: background var(--dur-1) var(--ease);
}

/* Победа дня закрывается как любая строка (замечание владельца 14.09):
   однократное расширение карточки на 260 мс на фоне спокойного закрытия
   соседей читалось как сбой. */
.win.is-closing {
  transition: background var(--dur-1) var(--ease);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-h-xs);
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

/* Метка сегодняшнего дня: стоит у сегодня, а не у остальных дней (ritm#133). */
.chip-today {
  min-height: 24px;
  padding: 0 var(--space-2);
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
  font-size: var(--text-xs);
}

/* Серия под угрозой: пунктир и охра. Ни красного, ни счётчика «осталось N часов» —
   ничего страшного не произошло, а тревожить цветом не за что. */
.chip-risk {
  border-style: dashed;
  color: var(--status-warn);
}

.chip-streak {
  cursor: default;
}

.chip-on {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

/* Карусель дней (ritm#133) — та же механика, что у периодов на «Прогрессе»:
   три панели в ряд, привязка по краю. Прокрутку вбок отдаём только полосе:
   внутри дня листать нечего, и жест не должен спорить с содержимым. */
.tday-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.tday-track::-webkit-scrollbar {
  display: none;
}

.screen::-webkit-scrollbar,
.sheet-page::-webkit-scrollbar {
  display: none;
}

.sheet-page {
  scrollbar-width: none;
}

@media (prefers-reduced-motion: reduce) {

  .bar-fill,
  .task,
  .win,
  .tick::before {
    transition: none;
  }
}

/* Порядок плана дня и область победы (замечание владельца 10.09).

   Жест такой же, как на доске: за указателем едет призрак строки, соседи
   расступаются плавно, а область победы появляется только на время
   перетаскивания — постоянная рамка в начале списка занимала бы место каждый
   день ради действия, которое делают изредка. */
.plan-list {
  display: flex;
  flex-direction: column;
}

.winzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 0;
  margin-bottom: 0;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line-strong));
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(-4px);
  transition: min-height .16s var(--ease), margin .16s var(--ease),
    opacity .16s var(--ease), transform .16s var(--ease),
    background .16s var(--ease), border-color .16s var(--ease);
  overflow: hidden;
}

.winzone.is-shown {
  min-height: 48px;
  margin-bottom: var(--space-2);
  opacity: 1;
  transform: none;
}

.winzone.is-over {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.winzone.is-over .winzone-text {
  color: var(--accent);
}

/* Пустой «Без времени» показывается только на время жеста: секция с заголовком и
   нулём строк — это мусор на экране, но бросать строку должно быть куда
   (ritm#227). Появление — как у области победы дня, чтобы жест читался одним
   языком. */
.card-extra.is-empty {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}

.card-extra.is-empty.is-shown {
  opacity: 1;
  transform: none;
}

/* Пустой список должен быть высотой с строку: иначе в него некуда целиться. */
.card-extra.is-empty .extra-list {
  min-height: 44px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line-strong));
  border-radius: var(--radius-md);
}

/* Дело, которому назначили время, уезжает в план дня — экран показывает это
   переездом, а не подменой содержимого (замечание владельца 11.09). */
@keyframes task-to-plan {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.plan-list .task.is-arrived {
  animation: task-to-plan .28s var(--ease);
}

/* Перелёт из «Без времени» после «Подтвердить» (ritm#252): строка уже стоит на
   новом месте, а на экране доезжает туда со старого — FLIP в today.js. */
.plan-list .task.is-flying {
  animation: none;
  position: relative;
  z-index: 5;
  transition: transform var(--dur-2) var(--ease);
}

/* «+» справа в строке «Без времени» — плюс 44px вместо кнопки с текстом: шесть
   «В план» подряд читались как забор из кнопок (DEV-комментарий макета).
   Тем же приёмом — все значки-кнопки в строках (аудит 23.09, D4–D7): «В архив»,
   «Добавить», «Прислать пробное». .row-icon — head-icon без поля шапки. */
.toplan,
.row-icon {
  flex: none;
  margin: 0;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
}

.toplan:hover,
.toplan:focus-visible,
.row-icon:hover,
.row-icon:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

.toplan-form {
  display: flex;
  align-items: center;
  margin: 0;
}

/* Взятая строка гаснет на месте: видно, что она «в руке», а не потерялась. */
.task.is-dragging,
.win.is-dragging {
  opacity: 0.35;
}

/* Призрак — та же строка, поднятая над экраном и чуть увеличенная. */
.task-ghost {
  position: fixed;
  z-index: 40;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2, 0 12px 28px rgba(0, 0, 0, 0.28));
  pointer-events: none;
  transform: scale(1.02);
  opacity: 0.96;
}

.task-ghost .rowmenu,
.task-ghost .toplan-form {
  display: none;
}

.plan-list.is-ordering {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .winzone,
  .task-ghost {
    transition: none;
    transform: none;
  }
}
}