/* СОБРАНО из engine/src/ui-select.js — правьте там, затем
   node tools/build-select-static.mjs. Руками не редактировать. */

  /* Обёртка нужна, чтобы кнопка и спрятанный селект были одним полем в
     сетке родителя: и .inbox-control, и .focus__field — это grid. */
  .uisel { position:relative; display:block; min-width:0; width:100%; }

  /* Настоящий селект: доступен скриптам, недоступен глазу и мыши.
     !important — потому что экраны задают своим select высоту, фон и
     тень, а порядок подключения стилей у трёх страниц разный. Спорить с
     каждым правилом по отдельности дороже, чем один раз сказать прямо. */
  .uisel > select.uisel__native {
    position:absolute !important; left:0 !important; top:0 !important;
    width:1px !important; height:1px !important; min-height:0 !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    opacity:0 !important; pointer-events:none !important;
    box-shadow:none !important; background:none !important;
    clip-path:inset(50%); overflow:hidden; appearance:none; -webkit-appearance:none;
  }

  /* Кнопка-триггер — утопленное поле: тот же рельеф, что у полей ввода и
     поиска рядом, иначе фильтр читается как кнопка действия. */
  .uisel__t {
    display:flex; align-items:center; gap:10px;
    width:100%; min-width:0; min-height:var(--tap);
    padding:0 12px; border:0; border-radius:var(--r-md);
    background:var(--bg); box-shadow:var(--press-2);
    color:var(--txt); font-family:var(--font-text); font-size:var(--fs-sm);
    font-weight:400; letter-spacing:0; text-transform:none; text-align:left;
    cursor:pointer; -webkit-appearance:none; appearance:none;
    transition:box-shadow var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .uisel__t:hover { color:var(--acc-txt); }
  .uisel__t:focus-visible { outline:2px solid var(--acc-txt); outline-offset:2px; }
  .uisel__t[disabled] { opacity:.5; cursor:default; }
  /* Значение — одной строкой с многоточием. Без min-width:0 flex-элемент
     отказывается сжиматься по содержимому, и длинное название аккаунта
     раздвигает сайдбар вместо того, чтобы обрезаться. */
  .uisel__v { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .uisel__n {
    flex:0 0 auto; font-family:var(--font-mono); font-size:10px;
    letter-spacing:.02em; color:var(--fnt); font-variant-numeric:tabular-nums;
  }
  .uisel__n[hidden] { display:none; }
  /* Контракт MOBILE-SPEC §3: на телефоне ничего мельче 13px. Моношрифт при
     10px там читается как рябь, а не как цифры. */
  @media (max-width:719px) { .uisel__n { font-size:13px; } }
  /* Мягкая стрелка: скруглённые концы, тонкая линия, поворот при раскрытии. */
  .uisel__c {
    flex:0 0 auto; width:12px; height:12px; color:var(--fnt);
    transition:transform var(--dur-2) var(--ease);
  }
  .uisel__t[aria-expanded="true"] { box-shadow:var(--press-2), 0 0 0 2px var(--acc-line); }
  .uisel__t[aria-expanded="true"] .uisel__c { transform:rotate(180deg); }

  /* ── раскрытая панель ────────────────────────────────────────────────
     Приподнята над поверхностью, а не врезана в неё: это единственный
     элемент интерфейса, который перекрывает соседей, и он обязан читаться
     как отдельный лист. Волосяная обводка поверх мягкой тени — ради
     тёмной темы, где панель и фон одного тона. */
  .uisel-pop {
    position:fixed; left:0; top:-9999px; z-index:2147482800;
    box-sizing:border-box; padding:6px; margin:0;
    max-height:320px; overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:var(--raise-2); border:0; border-radius:var(--r-lg);
    box-shadow:var(--lift), 0 0 0 1px var(--hair);
    color:var(--txt); font-family:var(--font-text); font-size:var(--fs-sm);
    scrollbar-width:thin; scrollbar-color:var(--hair-2) transparent;
    outline:none;
  }
  .uisel-pop::-webkit-scrollbar { width:8px; }
  .uisel-pop::-webkit-scrollbar-thumb { background:var(--hair-2); border-radius:4px; }
  .uisel-pop::-webkit-scrollbar-track { background:transparent; }

  /* Заголовок группы — та же микротипографика, что у подписей полей. */
  .uisel-pop__g {
    padding:10px 12px 6px; font-family:var(--font-mono); font-size:9px;
    font-weight:400; letter-spacing:.13em; text-transform:uppercase; color:var(--fnt);
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .uisel-pop__g + .uisel-pop__o { margin-top:0; }

  .uisel-pop__o {
    display:flex; align-items:center; gap:12px;
    min-height:var(--tap); padding:6px 12px;
    border-radius:var(--r-md); cursor:pointer; color:var(--txt);
    transition:box-shadow var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .uisel-pop__o + .uisel-pop__o { margin-top:2px; }
  .uisel-pop__o:hover, .uisel-pop__o[data-cur] {
    box-shadow:2px 2px 6px var(--nm-d), -2px -2px 6px var(--nm-l);
  }
  /* Выбранная строка утоплена и подписана медовым — ровно как отмеченный
     раздел в боковом меню. Одна пластика на весь кабинет. */
  .uisel-pop__o[aria-selected="true"] {
    background:var(--bg); box-shadow:var(--press-2); color:var(--acc-txt); font-weight:600;
  }
  .uisel-pop__o[aria-disabled="true"] { opacity:.45; cursor:default; box-shadow:none; }

  .uisel-pop__l { flex:1 1 auto; min-width:0; display:grid; gap:2px; }
  .uisel-pop__nm { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  /* Приписка. Частей может быть несколько, разделитель рисует CSS: будь он
     текстом, подметатель языка получил бы «менеджер 2 · на паузе» одним
     узлом и не перевёл бы ни половины. */
  .uisel-pop__sub {
    display:block; font-size:var(--fs-xs); line-height:1.4; color:var(--mut);
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .uisel-pop__sub i { font-style:normal; }
  .uisel-pop__sub i + i::before { content:" · "; color:var(--fnt); }
  .uisel-pop__aux {
    flex:0 0 auto; font-family:var(--font-mono); font-size:10px;
    letter-spacing:.02em; color:var(--fnt); font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .uisel-pop__o[aria-selected="true"] .uisel-pop__aux { color:var(--mut); }

  @media (max-width:719px) {
    /* Палец: та же высота, что у полей на телефоне, и кегль 16px — меньше
       Safari считает поводом зазумить экран. */
    .uisel__t { min-height:46px; font-size:16px; }
    .uisel-pop { font-size:15px; }
    .uisel-pop__o { min-height:46px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .uisel__t, .uisel__c, .uisel-pop__o { transition:none; }
  }