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

/* Правило регулярной задачи в карточке (ritm#192) — подписью под названием,
   внутри шапки (ritm#367, замечание владельца 30.09): отдельной строкой под
   блоком оно висело само по себе. Цвет — подписи, а не ссылки. */
.task-sub {
  margin-top: var(--space-1);
  line-height: var(--leading-normal);
}

.task-sub .task-rule {
  color: inherit;
  text-decoration: none;
}

.task-sub-day {
  color: var(--text-secondary);
}

/* Круг-галка в шапке карточки (ritm#367): тот же `.tick`, что в строках
   списков, у первой строки названия — круг 24 px на строке названия
   21 × 1,15 ≈ 24 px, центр в центр. Зона нажатия 44 набирается полями кружка. */
.card-tick {
  display: flex;
  flex: none;
}

/* День регулярной, который ещё не наступил, — пунктир, как день по правилу
   на «Дне» (ritm#384): отмечать его нечего. Так же и пункты этого дня у
   регулярной «заново» (ritm#517). */
.card-tick .tick-still::before,
.check-item .tick-still::before {
  border-style: dashed;
}

/* Строка «Регулярная» (переделано 10.09) — такая же строка поля, как остальные,
   только ведёт в шторку, а не в список. Раскрытая на месте анкета из семи строк
   ломала спокойный ряд полей карточки: половина граф была не про эту задачу, а
   высота прыгала на каждое переключение вида. */
/* Строка «Регулярная» — ссылка, но выглядит как остальные поля: цвет текста
   свой, а не браузерный для ссылок, шеврон приглушён, рост тот же. */
.prop-link,
.prop-link:visited {
  color: var(--text);
  text-decoration: none;
}

.prop-link .pick-value {
  margin-left: auto;
  text-align: right;
  color: var(--text);
}

.prop-link .pick-chevron {
  flex: none;
  color: var(--text-muted);
}

/* Шторка правила: строки одной сетки — подпись слева, поле справа, ничего не
   плавает. Поля вида показываются только своему виду, иначе форма выглядит
   анкетой, где половина граф не про тебя. Показывает их сам CSS по выбранному
   пункту списка — без скрипта форма остаётся рабочей. */
.rule-sheet .rule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.rule-sheet .rule-row .field-label {
  flex: 0 0 7rem;
  margin: 0;
}

/* Дни недели: подпись над чипами, между ними воздух — иначе строка выглядит
   слипшейся (замечание владельца 10.09). */
.rule-sheet .rule-days {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.rule-sheet .rule-days .field-label {
  display: block;
  margin-bottom: var(--space-2);
}

.rule-sheet .rule-kind select {
  width: 100%;
  min-height: var(--control-h);
  /* Справа больше: стрелка списка иначе упирается в рамку (замечание
     владельца 10.09). */
  padding: 0 var(--space-4) 0 var(--space-3);
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.rule-sheet input[inputmode="numeric"] {
  width: 4rem;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-2);
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}



/* Дни (ritm#192, месяцем — ritm#247): сетка месяца, день кружком. Сделано —
   акцентом, пропущено — приглушённой подложкой, назначено — жирным кружком,
   чужой день — просто числом. Тап по дню выбирает его, второй тап ставит.

   Месяц вместо восьми недель подряд: подписи недель ушли, вместо них шапка
   пн…вс и заголовок с листанием — владелец 12.09 назвал ленту пустой простынёй,
   и так оно и было. */
.days-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2);
}

.days-month-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.days-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.days-nav .ic {
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
}

.days-nav-next .ic {
  transform: rotate(-90deg);
}

.days-wd {
  text-align: center;
  padding-bottom: 2px;
}

/* Клетка чужого месяца: место держит, дня в ней нет. */
.dcell-blank {
  min-height: 44px;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  /* По вертикали зазора нет: он был мёртвой полосой между рядами, и палец,
     попавший между двумя днями, не нажимал ни один (ritm#228). Высота ленты
     та же — зазор ушёл в высоту самих клеток. */
  column-gap: var(--space-1);
  row-gap: 0;
}

/* Клетка целиком — зона нажатия (замечание владельца 11.09: «дни по клику не
   нажимаются»). Кружок остаётся 32 px, иначе лента расползётся на восемь
   колонок, но попадать надо пальцем, а не курсором: промах между кружками
   читался как «тап не сработал». */
.days-grid form {
  position: relative;
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.days-grid .dcell::after {
  content: '';
  position: absolute;
  inset: 0;
}

.dcell {
  flex: none;
  aspect-ratio: 1;
  width: var(--control-h-xs);
  height: var(--control-h-xs);
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.dcell.is-done {
  color: var(--on-accent);
  background: var(--accent);
}

.dcell.is-missed {
  color: var(--text-muted);
  background: var(--surface-sunken);
}

/* Проставленный день — жирный зелёный кружок (замечание владельца 11.09): за
   ним стоит решение человека, и отличаться от дня по расписанию он обязан
   сразу, а не при разглядывании. Залитый кружок занят сделанным днём, поэтому
   здесь плотная кайма акцентом и число тем же цветом. */
.dcell.is-planned {
  color: var(--accent);
  border-style: solid;
  border-color: var(--accent);
  border-width: 2px;
  font-weight: var(--weight-medium);
}

.dcell.is-off {
  color: var(--text-muted);
}

.dcell.is-today {
  border-color: var(--accent);
  border-style: solid;
  border-width: 2px;
}

.dcell.is-picked {
  box-shadow: var(--shadow-1);
  border-color: var(--line-accent);
}

/* Выбранный кружок держит свой цвет: подсветка выбора не должна перебивать
   ни сделанный день, ни проставленный. */
.dcell.is-planned.is-picked {
  border-color: var(--accent);
}

.dcell:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Строка выбранного дня — столбцом (замечание владельца 11.09): подпись дня,
   одна строка «когда и сколько» и действие во всю ширину. Раньше здесь стояли в
   ряд кнопка выбора, поле минут и кнопка «Выполнить» — три разных вида в одной
   строке, и на узком экране они наезжали друг на друга. */
.dayrow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Своего вида у поля дня нет: оно такое же, как «Когда» у самой задачи —
   подпись слева, значение справа (замечание владельца 11.09). Здесь только
   снимаем разделитель: строка дня стоит одна, а не в общей панели полей. */
.dayrow-slot {
  border-bottom: 0;
}

/* Действие занимает всю ширину: это главное, что делают на этой строке. */
.dayrow-act {
  display: flex;
}

.dayrow-act .dayrow-do {
  flex: 1;
  justify-content: center;
}

/* История задачи (ritm#181): строка — время, кто и что. Время моноширинными
   цифрами и первым столбцом, чтобы список читался сверху вниз одним взглядом;
   свёрнутая секция открывается тапом по шапке, стрелку рисует сам браузер. */
.card-history > summary {
  cursor: pointer;
  list-style: none;
}

.card-history > summary::-webkit-details-marker {
  display: none;
}

.card-history > summary::after {
  content: "›";
  margin-left: var(--space-2);
  color: var(--text-muted);
  transform: rotate(90deg);
}

.card-history[open] > summary::after {
  transform: rotate(-90deg);
}

.events {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

.event-when {
  flex: none;
}

.event-what {
  color: var(--text);
}

.event-more {
  display: inline-block;
  margin-top: var(--space-3);
  text-decoration: none;
}

/* Подсказка под шапкой карточки (ritm#187): правило блока написано словами,
   а не подразумевается. Отступ снизу — как у строки, чтобы список не липнул. */
.card-hint {
  margin: 0 0 var(--space-2);
}

/* Карточка задачи (ritm#12). */
.task-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

.task-big {
  align-items: flex-start;
  padding-top: 0;
}

.task-h1 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: 0;
}

.task-h1-done,
.task-title-done {
  color: var(--text-muted);
}

.task-note {
  margin: 0;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

/* Панель полей (замечание владельца 10.09): строки одного роста, одна тонкая
   линия между ними и никакого второго отступа сверху. Раньше расстояние
   держали и `gap`, и рамка соседней строки — ряд выглядел разнобоем, а
   «Регулярная» выбивалась сильнее всех, потому что была ссылкой. */
.props {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.prop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--line);
}

/* Линия между строками полей, у первой — нет (аудит 23.09, B10), как у
   .rows .mrow. Раньше черту снизу рисовали только «Регулярная», теги и «Из
   мысли», а строки выбора — нет (.prop.pick-field), и в середине списка
   стояла одна случайная линия над «Проектом». */
.props > .prop {
  border-bottom: 0;
}

.props > .prop ~ .prop {
  border-top: 1px solid var(--line);
}

/* Первая строка карточки без заголовка (аудит 23.09, B11): строка поля
   стоит по центру своих 44 px, и её верхние 12 px складывались с полем
   карточки — сверху выходило вдвое больше воздуха, чем сбоку. */
.card > .props:first-child {
  margin-top: calc(-1 * var(--space-3));
}

.props .pick-field {
  min-height: 40px;
  font-size: var(--text-sm);
}

/* Значение поля — всегда одного размера (замечание владельца 10.09). Раньше
   его задавали три разных правила: кнопка выбора, поле ввода и строка-ссылка,
   и в одном столбце соседствовали три кегля. */
.props .pick-value,
.props .prop-input,
.props .prop-link .pick-value,
.props .prop > span:last-child,
.props .prop > .num {
  font-size: var(--text-sm);
}

.props .pick-btn {
  min-height: 36px;
}

.prop-key {
  color: var(--text-secondary);
}

/* Правка на месте (ritm#33): поля карточки — маленькие формы. Со скриптом
   кнопка «Сохранить» спрятана, поле само уходит по Enter или потере фокуса. */
.field-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.field-form.is-js .prop-save {
  display: none;
}

/* Заголовок — многострочное поле, а не строка: название длиннее ширины
   карточки обрывалось на полуслове, и увидеть его целиком было нельзя
   (ritm#133). Высоту под текст ставит fields.js — до четырёх строк, дальше
   поле прокручивается. */
.task-h1-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  resize: none;
  overflow-y: auto;
  white-space: pre-wrap;
}

.task-h1-input:focus,
.task-h1-input:focus-visible,
.task-note-input:focus,
.task-note-input:focus-visible,
.prop-input:focus,
.prop-input:focus-visible,
.check-add-input:focus,
.check-add-input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}

.task-note-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  resize: none;
  white-space: pre-wrap;
}

.task-note-input::placeholder,
.prop-input::placeholder,
.check-add-input::placeholder {
  color: var(--text-muted);
}

.prop.field-form {
  min-height: 44px;
}

.prop-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  text-align: right;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}

.prop.pick-field {
  align-items: center;
  min-height: 44px;
  border-bottom: 0;
}

.prop-inputs {
  display: inline-flex;
  gap: var(--space-1);
}

.prop-save {
  flex: none;
}

.mini {
  position: relative; /* под зону нажатия ниже */
  min-height: var(--control-h-xs);
  padding: 0 var(--space-2);
  white-space: nowrap; /* «В архив» ломалось на «В / архив» (ritm#267) */
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* Зона нажатия 44 px у мелкой кнопки (макет: «мелкие визуальные элементы
   обёрнуты прозрачной зоной 44»): вид прежний, промахнуться труднее. Только по
   вертикали — соседние кнопки в ряду зонами не перекрываются. */
.mini::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Правила агента и словарь поправок (ritm#42): моноширинный словарь читается
   строками, а правила — обычный текст. */
/* Подпись поля и пояснение — одной колонкой: рядом они ломались в две на
   390px (ritm#266). */
.hint-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.hint-input {
  width: 100%;
  box-sizing: border-box;
  /* Без ползунка размера: высоту поле берёт по тексту (fields.js), а угловой
     хват браузера — деталь страницы, а не приложения (ritm#266). */
  resize: none;
  padding: var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}

.hint-fixes {
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

/* Обсуждение (ritm#38): лента «кто · когда» и текст. Переносы строк сохраняем —
   человек пишет абзацами, а не одной лентой. */
.comment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.comment:last-of-type {
  border-bottom: 0;
}

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

.comment-who {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.comment-drop {
  margin-left: auto;
}

.comment-drop .head-icon {
  min-width: 32px;
  min-height: 32px;
  margin: -6px 0;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* Поле обсуждения ростом со строку (замечание владельца 10.09): было 40 px
   плюс отступы при строке в 20 px, и кнопка отправки уезжала вниз от текста.
   Растёт поле по содержимому — тем же fit(), что и остальные поля карточки. */
.comment-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.comment-input {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  line-height: 20px;
  padding: 6px 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  resize: none;
}

.comment-input:focus,
.comment-input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}

.comment-input::placeholder {
  color: var(--text-muted);
}

/* Счётчик сообщений на карточке доски и в строке дня. */
.chat-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
}

.chat-count .ic {
  width: 13px;
  height: 13px;
}

/* Чек-лист: отметить, добавить, убрать. */
/* Подзадачи (замечание владельца 10.09): строки плотнее и выровнены по
   отметке. Общий `.task` даёт отступ в расчёте на две строки с подписью, а у
   подзадачи строка одна — от этого ряд «плыл». */
.check-item {
  align-items: center;
  gap: var(--space-2);
  padding: 3px 0;
}

/* Пункт чек-листа в одну строку: колонка с выключкой по левому краю. Было
   `align-items: center`, а в колонке это центрирует по горизонтали — текст
   пунктов стоял посередине строки (замечено 15.09). */
.check-item .task-body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 24px;
}

.check-delete {
  margin: 0 0 0 auto;
}

.check-delete .head-icon {
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.check-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-height: 44px;
}

.check-add-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.move {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
}

.move-reason {
  color: var(--text);
}

/* Два действия внизу карточки — равной ширины и в одну строку. «Закрыть задачу»
   в две строки делало кнопку выше соседней, и ряд разъезжался. */
.task-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.task-actions > * {
  flex: 1 1 0;
  margin: 0;
}

.task-actions .button {
  width: 100%;
  min-height: var(--control-h);
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* Выбор в шторке переноса: чипы-радиокнопки. Сама радиокнопка спрятана, но
   остаётся в разметке — иначе выбор перестал бы работать без скрипта и с
   клавиатуры. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: none;
}

.chips .field-label {
  flex: 1 1 100%;
  padding: 0;
}

.chip-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.chip-pick:has(input:checked) {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

.chip-pick:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Разговор с агентом у карточки (ritm#234). Чип рядом с полем, а не отдельной
   строкой: он про это сообщение, а не про режим обсуждения. Выключен по
   умолчанию — обсуждение остаётся местом для людей. */
.comment-agent {
  flex: none;
  align-self: flex-end;
  white-space: nowrap;
}

/* Значком (аудит 23.09, D8): круг той же величины, что «отправить» рядом,
   зона нажатия — 44 px прозрачным полем вокруг. Включён — заливкой чипа. */
.chip.comment-agent {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}

.chip.comment-agent::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.comment-agent .ic {
  width: 20px;
  height: 20px;
}

/* Сообщение агента отбито слева, как карточка от агента отбита пунктиром:
   видно, что это не человек, и не приходится читать подпись. */
.comment-agent-said {
  padding-left: var(--space-3);
  border-left: 2px solid var(--line-strong);
}

.button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Верхняя строка карточки (ritm#104, ritm#151): колонка слева, «поделиться»
   справа. Отдельной строкой значок висел над пустотой — теперь он держит правый
   край того же ряда. */
.task-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.task-top > .prop-column {
  flex: 1;
  min-width: 0;
}

.task-share {
  flex: none;
  margin-right: calc(var(--space-2) * -1);
}

/* Скопировано: кнопка на секунду зеленеет — слова здесь не нужны. */
.share-copy.is-done {
  color: var(--accent);
}

/* Окно «Поделиться» (ritm#94): люди списком, ссылка отдельной строкой. */
.share-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.share-row {
  margin: 0;
}

.share-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-2);
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.share-person:hover {
  background: var(--surface-sunken);
}

.share-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  font-size: var(--text-sm);
}

.share-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-send {
  flex: none;
}

/* Подзадачи и обсуждение (ritm#177): форма ввода стоит в разметке первой, а
   рисуется последней. Сверка экрана идёт по порядку узлов: добавленный пункт
   сдвигал форму, её узел заменялся новым — поле теряло фокус; а первое
   сообщение, наоборот, оставалось в поле, потому что заняло место заглушки по
   тому же индексу. Форма на своём месте переживает сверку. */
.card-check .check-add,
.card-talk .comment-form {
  order: 99;
}

/* Кнопка «Загрузить» при скрипте не нужна: снимок уходит по выбору файла.
   Признак скрипта — класс на форме, а не атрибут hidden: сверка экрана классы
   ставит заново при каждой привязке, а атрибут снимала. */
.file-form.is-js .file-send {
  display: none;
}

.mini[hidden] {
  display: none;
}

/* Обсуждение (ritm#177): сообщения — тихие пузыри на подложке, время мельче
   автора, крестик прижат к правому краю; поле ввода — такая же подложка,
   отправка — круглая кнопка акцентом со стрелкой. */
.comment {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-bottom: 0;
  border-radius: var(--radius-md);
}

.comment-head {
  align-items: center;
}

.comment-when {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.comment-drop .head-icon {
  min-width: 28px;
  min-height: 28px;
  margin: -4px -6px -4px 0;
}

.comment-text {
  font-size: var(--text-md);
  line-height: 1.45;
}

.comment-form {
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.comment-input {
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.comment-input:focus,
.comment-input:focus-visible {
  border-color: var(--accent);
}

.comment-send {
  flex: none;
  align-self: flex-end;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--accent);
  cursor: pointer;
}

.comment-send .ic {
  width: 18px;
  height: 18px;
}

/* Шапка и стрелка — общей секцией `.fold` (ritm#266): своих правил у этих
   разделов больше нет. */

/* История: строка в карточке и панель поверх (замечание владельца 10.09).
   Строка — тот же рост и та же тишина, что у прочих строк карточки: журнал
   нужен редко, и место он занимать не должен. */
.card-history-row {
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.card-history-key,
.card-history-val {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.card-history-row .ic {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.sheet-history {
  max-height: 80vh;
  overflow-y: auto;
}

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

.sheet-history .events {
  margin-top: var(--space-2);
}

.dayrow-do {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: 0 var(--space-3);
}

.dayrow-do .ic {
  width: 16px;
  height: 16px;
}

/* «Выполнено» — состояние, а не призыв (замечание владельца 11.09). «Выполнить»
   зовёт и потому залито акцентом; сделанный день звать уже некуда, поэтому он
   тише: мягкая подложка, акцентная подпись и галочка. Разница видна сразу, но
   кнопка не спорит с лентой за внимание. */
.dayrow-do.is-done {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
  font-weight: var(--weight-medium);
}

/* Смена состояния — переходом: день закрывают и открывают прямо здесь, и
   мгновенная подмена читается как перерисовка. */
.dayrow-do {
  transition: color .18s var(--ease), background .18s var(--ease),
    border-color .18s var(--ease);
}

/* Пока запрос в пути, нажатая кнопка приглушена: видно, что тап услышан. Тем же
   приглушается поле чек-листа, пока заводятся вставленные пункты (ritm#276). */
.dcell.is-busy,
.dayrow-do.is-busy,
.check-add-input.is-busy {
  opacity: 0.6;
}



.dayrow-do:disabled {
  opacity: 0.5;
  cursor: default;
}
}