@layer ui {
/* Экраны списков: категории, проекты, привычки (ritm#22).

   Отдельный файл, а не хвост today.css: там живут экраны макета, а это служебные
   экраны заведения, которых в макете нет. Словарь тот же — карточка, строки, поля,
   кнопки, — новые только правила раскладки строки со вводом.

   Значения — только из tokens.css. */

/* Строка списка: имя правится прямо в ней, поэтому это форма, а не ссылка.
   На узком экране всё складывается в столбик — иначе поле ввода в 390 px
   сжимается до нечитаемого. */
.lrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.lrow:last-child {
  border-bottom: 0;
}

/* Поля ввода раздела — одного вида (ritm#266): рост 44px из макета, рамка и
   радиус из токенов. Раньше у каждого экрана были свои: где 36px и утопленный
   фон, где 44px и другая рамка, и на одном экране они стояли рядом. */
.setup-input,
.lrow-name,
.lrow-goal input,
.space-new-input,
.emptyday-form input[type="text"],
.calhour-input,
.member-add input[type="text"] {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* Название забирает то, что осталось в строке, а не просит 10rem: с такой
   основой строка переносилась уже на 390 px, и значок архива уезжал под неё
   (аудит 23.09, B15). 6rem — меньше поле уже не читается, тогда строка
   переносится, как раньше. */
.lrow-name {
  flex: 1 1 0;
  min-width: 6rem;
}

/* Цвет — кружок, за которым лежит родное поле выбора (ritm#75): у него
   системный редактор RGB, а пятёрка из макета подсказкой в списке. Красить сам
   `input[type=color]` нельзя: браузеры рисуют его по-своему и кружка из него не
   выходит — поэтому цвет носит метка, а поле поверх неё прозрачное. */
.lrow-color {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--cat, var(--line-strong));
  cursor: pointer;
  overflow: hidden;
}

.lrow-color input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.lrow-goal {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
}

.lrow-goal input {
  width: 3.25rem;
  text-align: center;
}

.lrow-count {
  flex: none;
}

/* Кнопки строки — тихие: главное на этих экранах не действия, а то, что
   написано в полях. Кнопки «Сохранить» нет: строка сохраняется сама
   (`data-save="auto"`, ritm#75, ritm#265). Обе — значками 44×44 в конце
   строки (аудит 23.09, B15, D4, D7): «В архив» словом не помещалось и
   уходило строкой под каждую категорию. «+» — тихая кнопка той же высоты,
   что поле (B3). */
.lrow-arch,
.lrow-add {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}

/* Строка заведения отделена от списка: она последняя и без разделителя. */
.lrow-new {
  border-bottom: 0;
  padding-top: var(--space-4);
}

.lrow-defaults {
  margin-top: var(--space-2);
}

.lrow .dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--cat, var(--line-strong));
  flex: none;
}

/* Раскрывающийся раздел — один на всё приложение (ritm#266): архивы, решённые
   заявки, инструкции календаря. Раньше правила для `summary` были написаны
   трижды и расходились: где-то стрелка стояла после текста, где-то у правого
   края, размер у них был разный. Стрелка — из набора иконок, а не символом:
   системный маркер `details` в Safari и Chrome разного размера и в разных
   местах. Все разделы при открытии экрана свёрнуты. */
.fold > summary {
  cursor: pointer;
  list-style: none;
}

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

.fold-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
}

.fold-head .ic {
  flex: none;
  color: var(--text-muted);
  transition: transform var(--dur-fast, 140ms) ease;
}

.fold[open] > .fold-head .ic {
  transform: rotate(90deg);
}

.form-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.form-grid input,
.form-grid select,
.lrow input,
.lrow select {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--status-bad-soft);
  color: var(--status-bad);
}

.center-text a {
  color: var(--accent);
}

/* Единая шапка экранов настроек (ritm#83): назад, заголовок, пометка админа. */
.setup-head {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-2);
  /* Одна высота у «Ещё» и разделов (аудит 23.09, B9): у разделов строку
     выше делает кнопка «назад», у «Ещё» её нет — при переходе прямым
     адресом шапка прыгала на 4 px. */
  box-sizing: border-box;
  min-height: 48px;
}

/* Заголовок настроек — свой, а не пилюля даты (ritm#264). Пилюля `.tday-date`
   шириной 140px обрезала «Категории и проекты» до «тегории и проек»: она
   выравнивает шапки «Дня», календаря и «Прогресса» между собой, и
   заголовку раздела там делать нечего. Этот занимает всю оставшуюся ширину и
   прячет хвост многоточием. */
.setup-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.setup-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* В колонке с подписью заголовок не тянется по высоте: растягивать его там
   нечем и незачем. */
.setup-titles .setup-title {
  flex: none;
}

/* Подпись раздела — второй строкой и мельче. В одну строку с названием она
   отъедала у него место, и у общей доски оставалось полслова. */
.setup-note {
  display: block;
  line-height: 1.2;
}

.pill-admin {
  margin-left: auto;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

/* Привычка: строка правки и под ней своя неделя. Неделя — не украшение: по ней
   видно, что привычка про повторение, и ею же отмечают. */
.hrow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

/* Первая строка карточки без заголовка (аудит 23.09, B11): её верхний
   отступ складывался с полем карточки. */
.card > .rows:first-child > .hrow:first-child {
  padding-top: 0;
}

.hrow:last-child {
  border-bottom: 0;
}

/* Строка правила открывает карточку целиком, а не синей ссылкой на названии
   (ritm#266): подчёркнутый синий текст — это веб-страница, а не приложение. */
.hrow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.hrow-head .row-title {
  font-weight: var(--weight-semibold);
}

.hweek {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
}

/* Каждый день — своя форма (отметка без скрипта), поэтому ширину делят формы,
   а не кнопки внутри них. */
.hweek form {
  flex: 1;
  min-width: 0;
  display: flex;
}

.hday {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 44px;
  padding: var(--space-1) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

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

.hday-today {
  outline: 1px solid var(--line-strong);
  outline-offset: -3px;
}

.hday[disabled] {
  opacity: 0.4;
  cursor: default;
}

.hday-num {
  font-variant-numeric: tabular-nums;
}

.hweek-score {
  flex: none;
  align-self: center;
  min-width: 3rem;
  text-align: right;
}

/* Заявка: кто написал и два решения рядом. */
.rrow {
  gap: var(--space-2);
}

.rrow-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* Время и «за сколько минут» в уведомлениях — кнопкой своего выбора, а не
   родным полем с часиками браузера (ritm#266). Правила стоят здесь, а не рядом
   с остальными правилами уведомлений: lists.css подключается после picker.css,
   и только отсюда они перебивают базовую кнопку выбора (у неё `max-width: 70%`
   и растягивающееся значение — от этого «09:00» ужималось до «0…»). */
.ntf-at,
.ntf-min {
  flex: none;
  min-height: 44px;
  border-bottom: 0;
}

.ntf-at .pick-btn,
.ntf-min .pick-btn {
  flex: none;
  max-width: none;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.ntf-at .pick-value,
.ntf-min .pick-value {
  flex: none;
  overflow: visible;
}

/* Высота часа в календаре (ritm#281): подпись, узкое поле и единица в одну
   строку; пояснение под ней мельче. */
.calhour-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.calhour-row > span:first-child {
  flex: 1;
}

.calhour-input {
  width: 5rem;
  text-align: center;
}

.calhour-hint {
  margin: var(--space-2) 0 0;
}

/* Время и пауза правила регулярной — выбором времени и дня, как в
   «Уведомлениях» (аудит 23.09, C15), но в сетке шторки правила: значение
   сразу за подписью, без линии и роста строки поля карточки. Здесь, а не в
   today.css или constructor.css: .pick-* перебиваются только из lists.css
   (docs/CSS.md; пауза жила в constructor.css до ritm#406). */
.rule-sheet .rule-time.pick-field,
.rule-sheet .rule-until.pick-field,
.rule-sheet .rule-pause-pick.pick-field {
  justify-content: flex-start;
  min-height: 44px;
  border-bottom: 0;
}

/* Пауза делит строку с «Снять паузу»: поле тянется, шаг — как у строк
   шторки, значение встаёт под значением времени. */
.rule-sheet .rule-pause-pick.pick-field {
  flex: 1 1 auto;
  gap: var(--space-2);
}

/* Подзадачи дня (ritm#517): два тумблера под правилом — строка во всю ширину,
   подпись слева, тумблер у правого края, как «Показывать содержимое карточек»
   в настройках доски. Без линии и роста строки поля карточки — как время и
   пауза выше. */
.rule-sheet .rule-switch .pick-field {
  flex: 1 1 auto;
  min-height: 44px;
  border-bottom: 0;
}

.rule-sheet .rule-switch .pick-key {
  flex: 1 1 auto;
}
}