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

/* Уведомления (ritm#196): строка вида — переключатель с названием, время
   справа, дни чипами под ними. Выключенный вид приглушён, но раскрыт: искать,
   где включить, дольше, чем прочитать восемь строк. */
.ntf-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

/* Тумблер — свой, один на приложение (ritm#266). Родная галка выглядела
   элементом браузера, а не приложения: у каждой системы своя форма, свой
   синий и своя анимация. Слов «вкл/выкл» рядом нет — положение и есть слово. */
.switch {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  /* Общее правило полей задаёт `min-height: 44px` (app.css) — без этой строки
     тумблер вырастал в круг 44×44. Зону нажатия держит подпись `.ntf-on`. */
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background var(--dur-fast, 140ms) ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  transition: transform var(--dur-fast, 140ms) ease;
}

.switch:checked {
  background: var(--accent);
}

.switch:checked::after {
  transform: translateX(18px);
}

.switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Выключенная строка приглушена целиком — и время, и дни: включённая и
   выключенная выглядели одинаково, кроме самой галки (ritm#266). Прятать их
   нельзя: значения сохраняются и возвращаются при включении. */
.ntf-row.is-off .row-title,
.ntf-row:not(:has(.switch:checked)) .row-title {
  color: var(--text-muted);
}

.ntf-row:not(:has(.switch:checked)) .ntf-days .chip-pick,
.ntf-row:not(:has(.switch:checked)) .ntf-at,
.ntf-row:not(:has(.switch:checked)) .ntf-min {
  opacity: 0.55;
}

.ntf-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

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

.ntf-on {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px; /* зона нажатия из макета: тумблер и подпись целиком */
  cursor: pointer;
}

.ntf-days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

/* «Прислать пробное» идёт в одной строке с днями: восемь видов и так делают
   экран длинным, лишняя строка на каждую кнопку удлиняла его вдвое. Кнопки
   «Сохранить» здесь нет — правка уходит сама (ritm#265). Чипы дней — до 36 px,
   кнопка — значок 44 px в конце ряда (аудит 23.09, B16). Ряд — одной строкой:
   в карточке на 360 px остаётся 296 px, и чипы делят то, что осталось после
   значка, — там они по 32 px. */
.ntf-days {
  flex-wrap: nowrap;
}

.ntf-days .chip {
  flex: 1 1 0;
  min-width: 0;
  max-width: 36px;
  padding: 0;
  justify-content: center;
}

.ntf-days .ntf-test {
  margin-left: auto;
}

.ntf-at,
/* Два действия демо рядом: завести и убрать (ritm#259). */
.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.demo-actions form {
  margin: 0;
}

.emptyday-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.emptyday-form input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* Вид кнопок выбора времени и минут — в lists.css: today.css подключается
   раньше picker.css, и базовое правило `.pick-btn` перебивало бы их
   (ritm#266). */
.ntf-at input[type="time"],
.ntf-min select {
  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);
}

.ntf-quiet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

/* Предпросмотр сообщения (ritm#274): ровно то, что получит человек. Моноширины
   не нужно — это чат, а не код; переносы сохраняем, чтобы чек-лист читался
   списком. */
.share-what {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.share-preview {
  margin: 0;
  padding: var(--space-3);
  max-height: 40vh;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  background: var(--surface-sunken);
  background-attachment: local; /* ritm#374, см. .sheet */
  border-radius: var(--radius-sm);
}

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

.share-url {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 var(--space-3);
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 0;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
}

.share-done {
  padding: 0 var(--space-4) var(--space-2);
}

/* Переключатель пространства на «Ещё» (ritm#49, ritm#50): строки-кнопки,
   у владельца доски — ссылка на участников, ниже — поле новой доски. */
.space-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

/* Имя доски занимает строку, участники и пометка жмутся к правому краю
   (ritm#267): раньше там стояли два слова-ссылки, и строка читалась как
   набор кнопок, а не как доска. */
.space-row .space-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Линия между строками, у первой — нет (аудит 23.09, B10), как у .rows .mrow.
   Раньше было :first-of-type: строки-ссылки и строки-блоки — разные теги, и
   у первой строки-блока линия оставалась. */
.rows > .space-row:first-child {
  border-top: 0;
}

/* «Выбрано» галочкой (D1) — цветом акцента, как отмеченное в списке выбора. */
.chosen {
  display: inline-flex;
  flex: none;
  color: var(--accent);
}

/* Кнопка переключения и слово-ссылка «участники» ушли из строки доски
   (ritm#267): доску переключает шапка, а строка ведёт к её участникам. */

.space-new,
.member-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.space-new-input,
.member-add select {
  flex: 1;
  min-width: 0;
  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);
}

.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}

/* Линия между строками, у первой — нет (аудит 23.09, B10). :first-of-type
   не срабатывал: первым div карточки идёт её шапка. */
.card-head + .member-row {
  border-top: 0;
}

/* Имя доски и «В архив» — одной строкой (аудит 23.09, C7): кнопка той же
   высоты, что поле (B3). */
.space-edit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.space-edit form {
  margin: 0;
}

.space-edit .space-rename {
  display: flex;
  flex: 1;
  min-width: 0;
}

.space-edit .button {
  min-height: 44px;
}

/* «Позвать» (аудит 23.09, B6): строки «Кого ›», «Роль ›», как поля карточки,
   под ними кнопка во всю ширину. */
.member-invite {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.member-invite > .button {
  width: 100%;
  margin-top: var(--space-3);
}

.member-row form {
  margin: 0 0 0 auto;
}

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

.space-on .space-name {
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

a.tday-space {
  color: inherit;
  text-decoration: none;
}

/* Экран «Ещё» (ritm#16). */
.card-row,
.mrow {
  display: flex;
  /* Направление задаётся явно: .card — колонка, и без этого строка с шевроном
     складывалась в столбик, а шеврон уезжал под подпись. */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.card-row {
  padding: var(--space-3) var(--space-4);
}

.rows {
  display: flex;
  flex-direction: column;
}

.mrow {
  min-height: 44px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}

.rows .mrow:first-child {
  border-top: none;
}

/* Раздела ещё нет: строка приглушена и не нажимается. Прятать её значит каждый
   раз заново гадать, забыли раздел или он не сделан. */
.mrow-off .row-title {
  color: var(--text-muted);
}

.row-title {
  display: block;
}

/* Строка меню: название забирает свободное место, подпись и число — у правого
   края перед стрелкой. С `space-between` на три элемента подпись вставала
   посередине, и у каждой строки на своём месте (аудит 23.09). */
.mrow > .row-title {
  flex: 1 1 auto;
  min-width: 0;
}

.mrow > .muted {
  text-align: right;
}

/* Строка без стрелки в списке со стрелками держит под неё место: числа
   встают одной колонкой. */
.mrow-nochev::after {
  content: "";
  flex: none;
  width: 16px; /* стрелка строки — .ic-sm */
}

.card-note {
  border: 1px solid var(--line-strong);
  border-style: dashed;
}

/* Телефон в другом поясе (ritm#532, 2А): факт и два действия в одной карточке
   над днём и над списком поясов. Место под строку коробки не даёт — пустое
   не добавляет промежутка в колонку экрана. Текст забирает ширину, кнопки
   стоят справа и уходят на вторую строку, когда рядом не помещаются. */
.tzline-slot {
  display: contents;
}

.tzline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.tzline-text {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}

.tzline-zone {
  white-space: nowrap;
}

.tzline-acts {
  display: inline-flex;
  flex: none;
  gap: var(--space-2);
}

.seg-form {
  margin: 0;
  border: none;
}

.seg-form .seg-item {
  font: inherit;
  font-size: var(--text-sm);
  border: none;
  cursor: pointer;
  background: none;
}

.seg-form .seg-on {
  background: var(--surface-raised);
}

.center-text {
  text-align: center;
}

/* Строка-действие в «Ещё» (ritm#282): выглядит как соседние строки-переходы,
   но это кнопка формы — сброс отметки обучения. */
.mrow-form {
  margin: 0;
}

.mrow-btn {
  width: 100%;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
}