/* ============================================================================================
   UMEY — общие элементы управления: выпадающие списки, галочки, ползунок, нажатие кнопок.

   Подключается на всех страницах с формами после их собственных стилей. Геометрию поля (высоту,
   ширину, рамку, радиус) задаёт страница — здесь только то, что должно быть одинаковым везде:
   вид закрытого списка со своей стрелкой, панель раскрытого списка (assets/ui-select.js),
   акцентный цвет отметок, ползунок и отклик на нажатие.

   Цвета — светлая тема кабинетов по умолчанию; публичные тёмные страницы (body.pub,
   body.pub-canvas) переопределяют токены ниже.
   ============================================================================================ */

:root {
  --ux-accent: #6251d9;
  --ux-accent-soft: rgba(98, 81, 217, .14);
  --ux-panel: #fff;
  --ux-panel-line: #dde1ee;
  --ux-text: #1b2030;
  --ux-text-2: #5d667a;
  --ux-hover: #f3f2fe;
  --ux-selected: #ecebff;
  --ux-shadow: 0 1px 2px rgba(20, 26, 48, .06), 0 22px 54px rgba(20, 26, 48, .18);
  --ux-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23687188' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ux-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.4' stroke='%236251d9' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.pub, body.pub-canvas {
  --ux-accent: #8a6cff;
  --ux-accent-soft: rgba(138, 108, 255, .22);
  --ux-panel: #141b30;
  --ux-panel-line: rgba(255, 255, 255, .14);
  --ux-text: #f2f4ff;
  --ux-text-2: rgba(222, 228, 250, .62);
  --ux-hover: rgba(255, 255, 255, .07);
  --ux-selected: rgba(138, 108, 255, .22);
  --ux-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .55);
  --ux-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23c9cdea' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ux-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.4' stroke='%23b9acff' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- закрытый список ------------------------------------------------------------------------
   Специфичность выше страничных правил вида `.field select { background: #fff }`: сокращённое
   `background` там стирает картинку, а стрелка должна остаться. Цвет фона страница задаёт сама. */
html select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: var(--ux-chevron);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
html select:not([multiple]):not([size]):hover:not(:disabled) { border-color: var(--ux-accent); }
html select:not([multiple]):not([size]).ux-open {
  border-color: var(--ux-accent);
  box-shadow: 0 0 0 4px var(--ux-accent-soft);
}
html select:disabled { cursor: not-allowed; opacity: .6; }
/* Системный список на телефоне берёт цвета отсюда; в тёмной теме без них он приходил белым. */
body.pub option, body.pub-canvas option { color: #f2f4ff; background: #141b30; }

/* --- панель раскрытого списка ------------------------------------------------------------- */
.ux-panel {
  position: fixed; z-index: 1000;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ux-panel-line);
  border-radius: 14px;
  background: var(--ux-panel);
  box-shadow: var(--ux-shadow);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transform-origin: top center;
  transition: opacity 140ms ease, transform 160ms cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
.ux-panel.is-up { transform: translateY(4px) scale(.98); transform-origin: bottom center; }
.ux-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* Колонка, а не сетка: у пункта задана min-height, и сетка в ограниченной по высоте панели
   сжимала строки до неё — двухстрочные названия наезжали друг на друга. */
.ux-list {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0;
  padding: 6px;
  overflow-y: auto; overscroll-behavior: contain;
  outline: none;
  scrollbar-width: thin;
}
.ux-group {
  padding: 10px 12px 4px;
  color: var(--ux-text-2);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ux-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--ux-panel-line); padding-top: 12px; }
.ux-option {
  flex: 0 0 auto;
  position: relative;
  display: grid; gap: 2px;
  min-height: 40px;
  padding: 9px 36px 9px 12px;
  border-radius: 9px;
  color: var(--ux-text);
  font-size: 15px; font-weight: 500; line-height: 1.35;
  cursor: pointer;
  user-select: none;
  transition: background-color 100ms ease;
}
.ux-option-hint { color: var(--ux-text-2); font-size: 13px; font-weight: 400; }
.ux-option.is-active { background: var(--ux-hover); }
.ux-option[aria-selected="true"] { background: var(--ux-selected); font-weight: 650; }
.ux-option[aria-selected="true"]::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  background: var(--ux-check) no-repeat center / 14px 14px;
}
.ux-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ux-list:focus-visible .ux-option.is-active { box-shadow: inset 0 0 0 2px var(--ux-accent); }

/* --- отметки: системный вид, но в цветах UMEY ----------------------------------------------
   Форму галочек и переключателей страницы уже задают сами (размер, отступы); здесь только цвет
   и курсор, чтобы отметка на любой странице была одного фиолетового. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ux-accent); cursor: pointer; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; }

/* --- ползунок ------------------------------------------------------------------------------ */
html input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 28px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  --ux-fill: 0%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ux-accent) var(--ux-fill), var(--ux-panel-line) var(--ux-fill));
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ux-panel-line); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ux-accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px;
  border: 3px solid var(--ux-accent); border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(20, 26, 48, .25);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border: 3px solid var(--ux-accent); border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(20, 26, 48, .25);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 6px var(--ux-accent-soft); }
input[type="range"]:focus-visible { outline: 3px solid var(--ux-accent); outline-offset: 2px; border-radius: 8px; }

/* --- нажатие ------------------------------------------------------------------------------- */
:where(button, .button, .pub-btn, a.button):not(:disabled):active { transform: translateY(1px); }
:where(button, .button):disabled, .button[aria-disabled="true"] { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .ux-panel, .ux-option, html select:not([multiple]):not([size]) { transition: none; }
  .ux-panel, .ux-panel.is-up { transform: none; }
}