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

/* --- поле ------------------------------------------------------------------ */

.pick-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-md);
}

.pick-field:last-child {
  border-bottom: 0;
}

.pick-key,
.pick-field legend,
.pick-field .prop-key {
  flex: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.pick-field legend {
  float: left; /* legend в flex-контейнере иначе выпадает из потока */
  padding: 0;
}

/* Родные поля остаются в форме, но со скриптом их не видно: значение
   показывает кнопка. Решает это класс на документе, который ставит theme.js
   до первой отрисовки, — иначе страница мигает системными полями и прыгает,
   когда скрипт их заменяет (замечание владельца 06.09).

   Без скрипта класса нет: видны обычные select / date / time, а наша кнопка
   спрятана — нажимать на неё было бы некому. */
.pick-btn {
  display: none;
}

.has-js .pick-btn {
  display: inline-flex;
}

.has-js .pick-field select,
.has-js .pick-field input[type="date"],
.has-js .pick-field input[type="time"],
.has-js .pick-field .prop-inputs,
.has-js .pick-field .pick-native-list,
.pick-field.is-js .pick-native,
.pick-field.is-js .prop-save {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

/* Без скрипта список галочек виден обычными чипами и переносится по строкам. */
.pick-native-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Строка целиком ведёт себя как кнопка (замечание 06.09). */
.pick-field.is-js {
  cursor: pointer;
}

.pick-field select,
.pick-field input[type="date"],
.pick-field input[type="time"] {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
}

.pick-btn {
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  max-width: 70%;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-md);
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: right;
}

.pick-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pick-dot,
.pick-row .dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  /* Цвет — переменной категории: правило из today.css (.dot[data-color])
     этот файл перебивал, и все точки в списке были серыми. */
  background: var(--cat, var(--line-strong));
}

.pick-dot.is-hidden {
  display: none;
}

.pick-chevron {
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: 1;
}

/* --- панель ---------------------------------------------------------------- */

.pick-back {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(12, 16, 12, 0.32);
  animation: sheet-fade var(--dur-1) var(--ease);
}

.pick-back.is-fading {
  transition: opacity var(--dur-1) var(--ease);
  opacity: 0;
}

/* Меню у поля (E5, ritm#315): на широком экране мышью списки открываются у
   самого поля, место ставит picker.js по кнопке поля. Фон не затемняется — это
   меню, а не шторка: мимо него щёлкают, чтобы закрыть. Заголовка и полоски
   нет — поле с подписью рядом, тянуть меню некуда. */
.pick-back.is-pop {
  display: block;
  padding: 0;
  background: transparent;
  animation: none;
}

.pick-back.is-pop .pick {
  position: fixed;
  width: auto;
  min-width: 15rem;
  max-width: min(26rem, calc(100vw - 16px));
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  animation: pick-pop var(--dur-1) var(--ease);
}

.pick-back.is-pop .pick-grip,
.pick-back.is-pop .pick-head {
  display: none;
}

/* Поля шторки под безопасную зону снизу меню не нужны, а подвал тянется на
   ширину меню, а не шторки. */
.pick-back.is-pop .pick > :last-child:not(.pick-foot) {
  margin-bottom: 0;
}

.pick-back.is-pop .pick-foot {
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-2);
}

@keyframes pick-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.pick {
  box-sizing: border-box;
  width: min(26rem, 100%);
  /* Три блока «Когда» на телефоне почти целиком: низ панели прилипает, но
     лучше, когда прокручивать почти нечего. На весь экран в Telegram верх — не
     выше кнопок Telegram (ritm#482): 92dvh заводили «Когда» под них, на iPhone
     SE — и под строку состояния. Вне Telegram `--tg-top` нет, и меньшим
     остаётся 92dvh. */
  max-height: min(92dvh, calc(100dvh - var(--tg-top, 0px) - var(--space-3)));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
  background: var(--surface-raised);
  /* Фон — частью прокручиваемого содержимого (ritm#374): иначе WebView
     Telegram на Android может его не нарисовать, см. .sheet в today.css. */
  background-attachment: local;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-2);
  overflow-y: auto;
  animation: sheet-up var(--dur-2) var(--ease);
}

.pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.pick-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* Полоска-ручка вместо крестика (замечание владельца 11.09): шторка
   закрывается свайпом вниз и тапом по фону, а полоска говорит, что её можно
   тянуть. Липкая — при прокрученном содержимом остаётся видна и остаётся тем,
   за что берутся. */
.pick-grip {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: none;
  box-sizing: border-box;
  height: 20px;
  /* Во всю ширину панели, включая боковые поля: иначе содержимое видно по краям
     полоски, когда проезжает под ней. */
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-4)) 0;
  padding-top: 8px;
  background: var(--surface-raised);
}

.pick-grip::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto;
  background: var(--line-strong);
  border-radius: 999px;
}

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

.pick-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-1);
  font: inherit;
  font-size: var(--text-md);
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.pick-row:last-child {
  border-bottom: 0;
}

.pick-label {
  flex: 1;
}

.pick-check {
  visibility: hidden;
  color: var(--accent);
}

.pick-row.is-on {
  color: var(--accent);
}

.pick-row.is-on .pick-check {
  visibility: visible;
}

/* Низ панели прилипает: «Готово» с итогом виден и когда панель длиннее экрана
   (ritm#167). Нижний отступ панели живёт здесь; у панели без низа — у последнего
   блока. */
.pick-foot {
  position: sticky;
  bottom: 0;
  /* Выше крутилок: у них `z-index: 1`, а их нижняя часть скрыта только маской —
     на попадание курсора маска не влияет, и невидимый край крутилки перехватывал
     клик по «Готово» (замечание владельца 15.09). */
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-raised);
  box-shadow: 0 -1px 0 var(--line);
}

.pick > :last-child:not(.pick-foot) {
  margin-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

/* Кнопка тянется на всю ширину панели, поэтому подпись центрируем: у `.button`
   выключка по левому краю, и растянутая кнопка держала текст сбоку. */
.pick-foot .button {
  flex: 1;
  justify-content: center;
}

/* --- дата, время, длительность ---------------------------------------------
   Панель «Когда» (ritm#167): три блока одной формы — подпись и значение слева,
   тихая кнопка справа, содержимое ниже. Дата — месяц сеткой, время — две
   крутилки, длительность — ряд значений. Три состояния тремя средствами:
   выбранное залито акцентом, сегодня обведено, невыбранное — на тихой
   подложке. */

.pick .chip {
  min-height: 36px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.pick .chip:hover {
  background: var(--surface);
}

.pick .chip.is-on {
  color: var(--on-accent);
  background: var(--accent);
}

.pick-sect {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

/* Приглушённых блоков без даты больше нет (ritm#481): время и длительность
   отвечают и без дня, а тронутые ставят сегодня — это делает picker.js. */

.pick-sect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 32px;
}

.pick-sect-lead {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.pick-sect-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.pick-sect-value {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* «без даты», «без времени» — тихие кнопки в шапке блока; в силе — акцентом. */
.pick .pick-sect-act {
  flex: none;
  min-height: 32px;
  color: var(--text-secondary);
  background: none;
  border-color: transparent;
}

.pick .pick-sect-act.is-on {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Длительность — поле со стрелками (ritm#169): пустое, пока конца нет, по
   нажатию вписывается своё; стрелки — четверть часа, в тех же кругах, что
   стрелки месяца. */
.pick-durrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.pick-step:disabled {
  opacity: 0.35;
  cursor: default;
}

.pick-durval {
  box-sizing: border-box;
  width: 10rem;
  height: 44px;
  padding: 0 var(--space-3);
  text-align: center;
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-raised);
  border: 0;
  border-radius: var(--radius-md);
}

.pick-durval::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

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

/* --- быстрые даты (ritm#514) ---
   Одна строка над календарём: «Сегодня · Завтра · В субботу · Без даты».
   Ряд не переносится: чипы делят ширину блока, поля у них уже обычных — так
   четыре входят целиком и на 360 px; текущий день — тихим акцентом, как «без
   даты» в шапке блока, а не заливкой: залит выбранный день сетки ниже, и два
   залитых пятна спорили бы. */
.pick-quick {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.pick .pick-quick-day {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  padding: 0 var(--space-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick .pick-quick-day.is-on {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Самые узкие телефоны (320 px): поля и зазоры чипов — впритык к тексту,
   иначе «В субботу» обрезалась бы многоточием. */
@media (max-width: 340px) {
  .pick-quick {
    gap: var(--space-1);
  }

  .pick .pick-quick-day {
    padding: 0 var(--space-1);
  }
}

/* --- месяц --- */

.pick-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.pick-month-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-transform: capitalize;
}

/* Стрелки месяца — те же шевроны, что в шапках экранов, в круге на подложке
   блока (ritm#167): текстовые «‹ ›» сидели криво и рвали строку. */
.pick-nav {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.pick-nav .ic {
  width: 20px;
  height: 20px;
}

.pick-nav:hover {
  color: var(--text);
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.pick-wd {
  padding-bottom: var(--space-1);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.pick-day {
  min-height: 36px;
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.pick-day:hover {
  background: var(--surface-raised);
}

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

/* Дни между началом и концом. */
.pick-day.is-span {
  background: var(--accent-soft);
}

/* Сегодня обведено, выбранное залито. */
.pick-day.is-today {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.pick-day.is-on {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: none;
}

/* --- время --- */

/* Крутилки часов и минут (ritm#149): два столбца, выбранное — в центральной
   полосе, края уходят в прозрачность. Полоса нарисована фоном обоймы и не
   мешает нажатиям. */
.pick-wheels {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

/* Центральная полоса — по обойме (132px), а не по всему блоку: подписи «часы» и
   «минуты» в него входят, и от `top: 50%` полоса уезжала на десяток пикселей
   ниже выбранного значения (ritm#173). Раньше правил было два, и позднее
   `top: 50%` перебивало нужное — теперь оно одно. */
.pick-wheels::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--space-1) + 66px);
  height: 44px;
  transform: translateY(-50%);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
  pointer-events: none;
}

.pick-wheel {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 132px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

.pick-wheel::-webkit-scrollbar {
  display: none;
}

/* Пока крутилку тянут мышью, привязка снята: с ней каждый шаг прыгал бы к
   ближайшему значению (ritm#157). */
.pick-wheel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* Значение стоит по центру своей ячейки, а не по межстрочному расстоянию:
   выбранное крупнее соседних, и при разметке блоком оно уезжало от середины
   серой полосы (ritm#173). */
.pick-wheel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  scroll-snap-align: center;
  font: inherit;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}

.pick-wheel-item.is-on {
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

/* Времени нет — колёса стоят на подсказке приглушёнными: тронул — поставилось. */
.pick-wheels.is-idle .pick-wheel-item.is-on {
  color: var(--text-muted);
  font-weight: 400;
}

.pick-wheels.is-idle .pick-wheel-colon {
  color: var(--text-muted);
}

/* Двоеточие стоит по центру обоймы, а не по центру колонки с подписью. */
.pick-wheel-colon {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: flex;
  align-items: center;
  height: 132px;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

/* Подпись под крутилкой: что это за столбец. */
.pick-wheel-cap {
  display: block;
  margin-top: 2px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.pick-wheel-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .pick-back,
  .pick {
    animation: none;
  }
}

/* Точки дня в выборе даты (замечание владельца 10.09) — тот же язык, что в
   месячном календаре: до трёх цветов категорий под числом. Числу они не мешают:
   кнопка дня и так выше строки, точки садятся в её нижние 6 px. */
.pick-day {
  position: relative;
}

.pick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  display: flex;
  gap: 2px;
  justify-content: center;
  pointer-events: none;
}

.pick-dots .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cat, var(--text-muted));
}
}