/* Свой селект и общая оболочка всплывающих слоёв (.ui-pop) — ею же пользуется календарь
   (date.css). Цвета, шрифты и ритм — только из токенов app.css. Без JS этих классов нет:
   нативные поля остаются как есть. */

/* ---------- Обёртка поля ---------- */

/* Поле может стоять внутри <label> с капителями — возвращаем рабочий текст. */
.ui-select,
.ui-date {
  position: relative;
  min-width: 0;
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--text-m);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
}

/* Исходное поле остаётся в форме под своим двойником: значение уходит с формой, а
   подсказка браузера о пустом обязательном поле встаёт на нужное место.
   Правило привязано к обёртке: во время замены htmx новое (ещё не собранное) поле с тем же
   id на миг получает классы старого — без обёртки оно должно оставаться видимым. */
.ui-select > select.ui-native,
.ui-date-control > input.ui-native {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
/* Под селектом может появиться ошибка — исходное поле закрывает только кнопку. */
.ui-select > select.ui-native { bottom: auto; height: var(--control-h); }

/* ---------- Кнопка селекта ---------- */

.ui-select-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}
@media (pointer: coarse) {
  .ui-select-btn { min-height: 2.75rem; }
}
.ui-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select.is-empty .ui-select-value { color: var(--muted); }
.ui-select-chev {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: -0.25rem;
  transition: transform var(--dur-2) var(--ease-out);
}
.ui-select.is-open .ui-select-chev { transform: rotate(180deg); }
.ui-select-btn:hover { border-color: var(--muted); }
.ui-select-btn:focus,
.ui-select.is-open .ui-select-btn { border-color: var(--paper); }
.ui-select-btn:focus-visible { outline-offset: 1px; }
.ui-select.is-invalid .ui-select-btn { border-color: var(--bad); }
.ui-select-btn:disabled {
  border-color: var(--line-soft);
  color: var(--muted);
  cursor: not-allowed;
}

/* Ошибка под полем — словами, с иконкой. Абзац всегда в документе (живая область),
   пустой и без отступа, пока ошибки нет. Класс свой, не .field-error: app.js ищет
   .field-error, чтобы поставить фокус и объявить ошибки после замены. */
.ui-field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--bad);
  font-size: var(--text-s);
  line-height: 1.35;
}
.ui-field-error.is-shown { margin-top: var(--space-2); }
.ui-field-error .icon { width: 1rem; height: 1rem; margin-top: 0.05em; }
.ui-field-error:not(.is-shown) .icon { display: none; }

/* ---------- Оболочка всплывающего слоя ---------- */

/* ПК и планшет: слой под полем, белый волосок по периметру, без тени и скруглений. */
.ui-pop {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-width: calc(100vw - 1rem);
  border: 1px solid var(--paper);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--text-m);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  cursor: auto;
}
.ui-pop-head { display: none; }

/* Телефон: лист снизу во всю ширину — единственное движение, лист поднимается. */
.ui-pop.is-sheet {
  inset: auto 0 0 0;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: min(78dvh, 100% - 3rem);
  border: 0;
  border-top: 1px solid var(--paper);
  padding-bottom: env(safe-area-inset-bottom);
  animation: ui-sheet-up var(--dur-3) var(--ease-out);
}
.ui-pop.is-sheet .ui-pop-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--gutter) var(--space-2) var(--gutter);
  border-bottom: 1px solid var(--line-soft);
}
.ui-pop-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-l);
  font-weight: 500;
  line-height: 1.3;
}
.ui-pop-close { --control-h: 2.75rem; margin-right: calc(-1 * var(--space-2)); border-color: transparent; }
.ui-pop-close:hover { border-color: var(--line); }

.ui-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0, 0, 0, 0.72);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  animation: ui-fade var(--dur-2) var(--ease-out);
}

@keyframes ui-sheet-up { from { transform: translateY(1.5rem); } }
@keyframes ui-fade { from { opacity: 0; } }

/* ---------- Список ---------- */

.ui-select-pop { max-height: 20rem; }

.ui-select-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1) 0;
}
.ui-select-list:focus { outline: none; }

.ui-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  color: var(--paper);
  cursor: pointer;
  user-select: none;
}
.ui-option + .ui-option { border-top: 1px solid var(--line-soft); }
.ui-option-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.ui-option-check { width: 1.125rem; height: 1.125rem; visibility: hidden; }
.ui-option[aria-selected="true"] { font-weight: 600; }
.ui-option[aria-selected="true"] .ui-option-check { visibility: visible; }
/* Под указателем — чуть светлее; активный с клавиатуры — в белой рамке, как своя строка
   в рейтинге. */
@media (hover: hover) {
  .ui-option.is-active { background: var(--ink-raised); }
}
.ui-select.is-kbd .ui-option.is-active { outline: 1px solid var(--paper); outline-offset: -1px; }
.ui-option[aria-disabled="true"] { color: var(--line); cursor: not-allowed; }
.ui-option-none { padding: var(--space-3); color: var(--muted); }

/* Касание на планшете и ПК с сенсором: пункты не меньше 44px. */
@media (pointer: coarse) {
  .ui-option { min-height: 2.75rem; }
}
.ui-pop.is-sheet .ui-select-list { padding: 0 0 var(--space-2); }
.ui-pop.is-sheet .ui-option { min-height: 3rem; padding-left: var(--gutter); padding-right: var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  .ui-pop.is-sheet, .ui-backdrop { animation: none; }
  .ui-select-chev { transition: none; }
}