@layer ui {
/* Экран «Задачи» по горизонтам (ritm#383).

   Группы — карточки «Дня», строки — строки дня (`.task` из today.css):
   полоса категории у края карточки, кружок, название, срок. Своего здесь —
   раскладка группы, чип «Сегодня» и переключатель «Список / Доска». */

/* Группа без дел спрятана сервером: у карточки свой `display`, и без этого
   правила `hidden` её бы не прятал. */
.hz[hidden] {
  display: none;
}

/* Шапка группы одного роста у сворачиваемых и остальных: у `summary` зона
   нажатия 44 px, и та же высота у простых шапок — иначе группы разной высоты
   читались бы как разные виды. Поля съедают отступ карточки, а не добавляются
   к нему. */
.hz-top {
  align-items: center;
  min-height: 44px;
  margin: calc(-1 * var(--space-3)) 0;
}

.hz-end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hz-list {
  display: flex;
  flex-direction: column;
}

/* Строка — во всю ширину карточки, как строка плана дня: полоса у края
   карточки, поля до её края. */
.hz-list .hz-row {
  min-height: 56px;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

/* Строка в полёте (ritm#460) — копия поверх экрана из группы в группу: поля
   те же, что у строки в группе, и своя подложка группы — сама строка
   прозрачна, и над чужими строками копия без подложки читалась бы кашей. */
.flip-ghost.hz-row {
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

/* Просрочка — охрой, как в блоке «Не сделано в срок» на «Дне». */
.hz-late .meta-text {
  color: var(--status-warn);
}

/* Чип «Сегодня» — `.mini` с зоной нажатия 44 px. Не сжимается: название
   уступает ему место. Вид — тот же тонированный чип, что «На сегодня» у
   несделанного на «Дне» (владелец 30.09): одно правило в today.css
   (`.late-today .mini, .hz-today .mini`), здесь своего нет. */
.hz-today {
  display: flex;
  flex: none;
  margin: 0;
}

/* Дорога в «Регулярные» — последней строкой раскрытой группы. */
.hz-more {
  margin-top: 0;
}

.hz-archive {
  margin: var(--space-1) var(--space-1) 0;
}

/* «Список / Доска» в шапке — пилюлей по содержимому, не на всю ширину.
   Селектор с шапкой: desktop.css идёт позже и даёт любому `.seg` поля 24 px. */
.board-head .view-seg {
  flex: none;
  margin: 0;
}

.view-seg .seg-item {
  flex: none;
  padding: 0 var(--space-3);
}

/* Стрелка ссылок группы и архива — вправо, как у строк «Ещё». Правило
   `.thoughts-archive .ic` поворачивает её на четверть: оно писалось под
   стрелку вниз, а шаблон с тех пор ставит стрелку вправо. */
.hz-more .ic,
.hz-archive .ic {
  transform: none;
}

@media (min-width: 1000px) {
  /* Заголовок «Задачи» на широком экране — по тексту, а не пилюлей даты в
     140 px: иначе «Список / Доска» отъезжал от него в пустоту. */
  .board-head .board-title {
    min-width: 0;
    margin-right: var(--space-3);
  }
}
}