@layer ui {
/* Конструктор карточки (ritm#28, ritm#33): название, описание и поля списком
   «ключ — значение ›». Каждое поле открывает выбор в своём интерфейсе
   (picker.css); без скрипта видны обычные поля формы. Значения — из tokens.css. */

/* Ручка и закрытие жестом — общие для всех шторок, в today.css. */

.ctor-title {
  width: 100%;
  min-height: 48px;
  padding: 0;
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

/* Фокус — подчёркиванием, а не рамкой: общий стиль полей на автофокусе
   рисует вокруг заголовка коробку. */
.ctor-title:focus,
.ctor-title:focus-visible,
.ctor-note:focus,
.ctor-note:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
}

.ctor-title::placeholder,
.ctor-note::placeholder {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

.ctor-note {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) 0;
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  resize: none; /* высоту поле берёт по тексту, а не угловым хватом браузера (ritm#266) */
}

.ctor-fields {
  display: flex;
  flex-direction: column;
}

.ctor-done {
  margin-top: var(--space-2);
}

/* --- шторка правила (ritm#347) ----------------------------------------------
   Одна на карточку и конструктор (rulesheet.html). Сетка строк — в today.css
   (.rule-sheet .rule-row); здесь то, что шторка получила сверх неё. Поля
   выбора в ней (.pick-*: время, пауза) — в lists.css: перебивать picker.css
   можно только оттуда (docs/CSS.md, ritm#406). */

/* Графы шторки — одной колонкой с тем же шагом, что у самой шторки: общий
   шаблон кладёт их одной обёрткой, и шаг `gap` шторки до них не доходит. */
.rule-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Ближайшие дни под правилом — тихая строка факта. */
.rule-near {
  margin: 0;
  line-height: var(--leading-normal);
}

/* Пауза — выбором дня, как время правила: поле — в lists.css, рядом с
   временем правила (.pick-* перебиваются только оттуда). «Снять паузу» —
   справа той же строкой. */
.rule-sheet .rule-pause {
  flex-wrap: nowrap;
}

.rule-unpause {
  flex: none;
}

/* Конструктор: шторка правила — поверх него, открывается строкой «Повтор» и до
   этого закрыта атрибутом `hidden`. Без скрипта открыть её некому, поэтому
   графы правила лежат прямо в конструкторе обычными полями: ни затемнения,
   ни своей полоски и кнопок. `!important` — против общего правила `[hidden]`
   (app.css), оно тоже важное; сильнее его здесь делает специфичность. */
html:not(.has-js) .rule-back[hidden] {
  position: static;
  display: block !important;
  padding: 0;
  background: none;
  animation: none;
}

html:not(.has-js) .rule-back > .rule-sheet {
  width: auto;
  max-height: none;
  padding: 0;
  overflow: visible;
  background: none;
  border-radius: 0;
  animation: none;
}

html:not(.has-js) .rule-back .sheet-handle,
html:not(.has-js) .rule-back .sheet-title,
html:not(.has-js) .rule-back .sheet-actions {
  display: none;
}
}