/* ═══ QamistoSelect · кастомный dropdown (паттерн 13.5) ═══
   Нативный <select> рисует список системным стилем (не стилизуется).
   Компонент: кнопка-триггер + панель-лист. Desktop (>768): popover
   под триггером (surface, radius-md, flat без тени, divider); ≤768:
   bottom-sheet (scrim + safe-area). Правила: только токены, Rubik,
   без тени/градиентов, скролл-бары скрыты. ─────────────────────── */

.qsel-root{position:relative;min-width:0}

.qsel{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-width:0;box-sizing:border-box;font:400 14px/18px var(--font-ui);color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer;text-align:left;appearance:none}
.qsel:hover{border-color:var(--color-ink-3)}
.qsel:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}
.qsel--disabled{opacity:.5;cursor:not-allowed}
.qsel__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsel__caret{flex:0 0 auto;font-size:16px;color:var(--color-ink-3)}
.qsel[aria-expanded="true"] .qsel__caret{transform:rotate(180deg)}

.qsel-scrim{display:none;position:fixed;inset:0;z-index:59;background:var(--color-ink);opacity:.4}

/* Десктоп (>768): попап прикрепляем к триггеру через JS (position:fixed),
   иначе любой overflow:hidden предок (карточка/скролл-контейнер) обрезает
   его по краю. Позиция left/top/width задаются из getBoundingClientRect(). */
.qsel-menu{position:fixed;z-index:60;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md);overflow:hidden;max-height:280px;display:none}
.qsel-menu--open{display:block}
.qsel-menu__list{max-height:280px;overflow-y:auto;scrollbar-width:none}
.qsel-menu__list::-webkit-scrollbar{display:none}

.qsel-sheet__head{display:none}

.qsel-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--color-divider);font:400 14px/18px var(--font-ui);color:var(--color-ink);cursor:pointer;min-width:0}
.qsel-item:last-child{border-bottom:0}
.qsel-item:hover{background:var(--color-page)}
.qsel-item[aria-selected="true"]{background:var(--color-success-bg);color:var(--color-success-fg);font-weight:500}
.qsel-item[aria-disabled="true"]{color:var(--color-muted-fg);cursor:not-allowed;background:transparent}
.qsel-item[aria-disabled="true"]:hover{background:transparent}
.qsel-item__main{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsel-item__note{flex:0 0 auto;color:var(--color-ink-3);font-size:12px;white-space:nowrap}
.qsel-item__check{flex:0 0 auto;font-size:15px;color:var(--color-success-fg)}

@media (max-width: 768px) {
  .qsel-scrim.qsel-scrim--show{display:block}
  .qsel-menu{position:fixed;left:0;right:0;top:auto;bottom:0;border:0;border-top:1px solid var(--color-divider);border-radius:14px 14px 0 0;max-height:86%;display:none;flex-direction:column;z-index:60;padding-bottom:env(safe-area-inset-bottom,0px)}
  .qsel-menu--open{display:flex}
  .qsel-sheet__head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--color-divider)}
  .qsel-sheet__title{flex:1;font:600 16px/22px var(--font-ui);color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qsel-sheet__close{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:var(--radius-sm);color:var(--color-ink);cursor:pointer;flex:0 0 36px}
  .qsel-sheet__close:hover{background:var(--color-page)}
  .qsel-item{padding:14px 16px}
}