/* Свой выпадающий список (`select.js`) — общий для сводки и чата.
   Жил в admin.css; с семнадцатой ночи выбор отрасли стоит и в чате, а два
   одинаковых блока стилей — это два места, где их потом чинить. */


/* Раскрытый `<select>` рисует браузер, и в тёмной теме он остаётся белым окном
   посреди тёмной страницы. Красить там нечего — элемент заменён своим. Родной
   при этом остался в разметке и остался значением: отбор, адрес страницы и
   выгрузка CSV о подмене не знают. */
.список { position: relative; display: inline-block; }
.список-родной {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; margin: 0; padding: 0; border: 0;
}
.список-кнопка {
  display: inline-flex; align-items: center; gap: 8px; width: 100%;
  min-width: 150px; justify-content: space-between;
  font: inherit; font-size: var(--размер-кнопка); cursor: pointer; text-align: left;
  color: var(--текст); background: var(--карточка);
  border: 1px solid var(--граница); border-radius: var(--r);
  padding: 6px 9px;
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.список-кнопка:hover { border-color: var(--граница-ярче); }
.список-кнопка:focus-visible,
.список[aria-expanded] .список-кнопка { outline: none; }
.список-кнопка[aria-expanded="true"] {
  border-color: var(--основной); box-shadow: 0 0 0 3px var(--кольцо);
}
.список-кнопка:focus-visible {
  border-color: var(--основной); box-shadow: 0 0 0 3px var(--кольцо);
}
.список-значение { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.список-кнопка svg { flex: none; color: var(--текст-тихий); }

.список-окно {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 4px);
  min-width: 100%; max-width: min(360px, 90vw);
  background: var(--карточка); border: 1px solid var(--граница);
  border-radius: var(--r); box-shadow: var(--тень-3);
  padding: 5px;
  /* Появление 120 мс, сдвигом и прозрачностью: `height` анимировать нельзя —
     он заставляет браузер пересчитывать разметку и даёт рывок. */
  animation: список-вход .12s var(--ease);
}
.список.вверх .список-окно { top: auto; bottom: calc(100% + 4px); }
.список-окно[hidden] { display: none; }
@keyframes список-вход {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.список-поиск {
  width: 100%; font: inherit; font-size: var(--размер-кнопка); margin-bottom: 5px;
  color: var(--текст); background: var(--фон);
  border: 1px solid var(--граница); border-radius: var(--r);
  padding: 6px 8px;
}
.список-поиск[hidden] { display: none; }
.список-поиск:focus { outline: none; border-color: var(--основной); }

.список-лента {
  margin: 0; padding: 0; list-style: none;
  max-height: 260px; overflow-y: auto;
}
.список-пункт {
  padding: 7px 9px; font-size: var(--размер-кнопка); border-radius: var(--r);
  cursor: pointer; color: var(--текст);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.список-пункт:hover, .список-пункт.наведён { background: var(--наведение); }
.список-пункт[aria-selected="true"] {
  color: var(--основной); font-weight: 500;
}
/* Галочка, а не только цвет: выбранный пункт должен быть виден и тем, кто
   цвета не различает. */
.список-пункт[aria-selected="true"]::after { content: " ✓"; }
.список-пусто {
  padding: 9px; font-size: var(--размер-кнопка); color: var(--текст-тихий); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .список-окно { animation: none; }
}