/* T-3279: свой выпадающий список — CSS макета docs/review/dropdown_2026-10-22/style.css КАК ЕСТЬ (разделы 5–10, 15–18:
   правила компонента). Внутри .dd-scope (хост страницы с токенами Главной обеих тем: #home-v3 и его [data-theme]);
   слой списка и затемнение лежат внутри хоста — токены наследуются. Из макета не переносятся: токены Главной (у хоста
   свои, те же), правила стенда/галереи/таблиц. Без скрипта — системный <select> (класс .dd-native не ставится). */
.dd-native { display: none !important; }
:root.dd-lock { overflow: hidden; }

/* T-3281: хост Главной — #home-v3; его общее «#home-v3 button { background:none; border:0; padding:0 }» (1,0,1)
   перебивало правила списка — у блока компонента специфичность id (значения макета не меняются) */
#home-v3.dd-scope, .dd-scope {
/* ---------- 1. Токены, новые для списка (остальные — Главной) ---------- */
& {
  --backdrop: rgba(1, 7, 21, 0.62);
  --handle: rgba(148, 163, 184, 0.4);
  --radius-opt: 8px;
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-pop-in: 160ms;
  --t-pop-out: 110ms;
  --t-sheet-in: 260ms;
  --t-sheet-out: 200ms;
}
&[data-theme="light"] {
  --backdrop: rgba(15, 23, 42, 0.32);
  --handle: #cbd3dd;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 5. Кнопка списка ---------- */
.dd { position: relative; display: inline-flex; min-width: 0; }
.dd--store { --dd-w: 200px; }
.dd--period { --dd-w: 136px; }

.dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* ширина постоянная: при смене выбора строка не прыгает */
  width: var(--dd-w, 180px);
  max-width: 100%;
  height: 40px;
  padding: 0 10px 0 12px;
  background: var(--control-bg);
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-control);
  font-size: 13px;
  line-height: 18px;
  color: var(--text);
  text-align: left;
  transition: border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}

.dd-lead { width: 16px; height: 16px; flex-basis: 16px; color: var(--text-muted); }
.dd-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-value .skel { width: 84px; }
.dd-chev { width: 16px; height: 16px; flex-basis: 16px; color: var(--accent-ink); transition: transform var(--t-pop-in) var(--ease-out); }

.dd-trigger[aria-expanded="true"] { border-color: var(--live-edge); }
.dd-trigger[aria-expanded="true"] .dd-chev { transform: rotate(180deg); }
.dd-trigger:active:not(:disabled) { transform: scale(0.97); }
.dd-trigger:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* ---------- 6. Панель списка (ПК и планшет: под кнопкой) ---------- */
.dd-layer { position: relative; z-index: 30; }

.dd-pop {
  position: fixed;
  z-index: 31;
  display: flex;
  flex-direction: column;
  max-height: var(--pop-max, 360px);
  padding: 4px;
  background: var(--raised);
  border-radius: var(--radius-inner);
  /* тень без рамки: всплывающее — единственное, у чего есть тень */
  box-shadow: var(--shadow-float);
  color: var(--text);
  transform-origin: var(--origin, top left);
  transition: opacity var(--t-pop-in) var(--ease-out), transform var(--t-pop-in) var(--ease-out);
}

.dd-pop[hidden] { display: none; }

/* появление от кнопки: не из нуля, а с 0.96 и прозрачности */
.dd-pop.is-enter { opacity: 0; transform: scale(0.96); }
/* уход быстрее появления и без сдвига */
.dd-pop.is-leave { opacity: 0; transition: opacity var(--t-pop-out) var(--ease-out); }

/* ---------- 7. Поиск (с 8 пунктов) ---------- */
.dd-search { position: relative; flex: none; margin: 4px 4px 6px; }

.dd-search > .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--text-muted);
  pointer-events: none;
}

.dd-search input {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 34px;
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-opt);
  background: var(--control-bg);
  font-size: 13px;
  color: var(--text);
  caret-color: var(--accent-ink);
  outline: none;
  appearance: none;
  transition: border-color var(--t-hover) ease;
}

.dd-search input::placeholder { color: var(--text-muted); opacity: 1; }
.dd-search input::-webkit-search-cancel-button { appearance: none; display: none; }
.dd-search input:focus { border-color: var(--accent-ink); }

.dd-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 6px;
  color: var(--text-muted);
}

.dd-clear .icon { width: 14px; height: 14px; flex-basis: 14px; }
.dd-clear[hidden] { display: none; }

/* ---------- 8. Пункты ---------- */
.dd-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
  outline: none;
}

.dd-list[hidden] { display: none; }

/* края гаснут, только когда есть что прокрутить */
.dd-list.can-down { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.dd-list.can-up { -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
.dd-list.can-up.can-down {
  -webkit-mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.dd-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: var(--radius-opt);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* «Все …» отделены тонкой линией от конкретных */
.dd-opt--all { position: relative; margin-bottom: 5px; }
.dd-opt--all::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -3px;
  height: 1px;
  background: var(--divider);
}

/* под мышью или стрелками — нейтральная подложка, без цвета */
.dd-opt.is-active { background: var(--nav-active-bg); color: var(--text); }
/* с клавиатуры подсвеченный пункт ещё и обведён — видно, где фокус */
.dd-pop[data-input="keyboard"] .dd-opt.is-active { box-shadow: inset 0 0 0 1px var(--live-edge); }

.dd-opt[aria-selected="true"] { color: var(--text); font-weight: 500; }

.dd-text { display: flex; flex-direction: column; min-width: 0; }
.dd-name { overflow-wrap: anywhere; }
.dd-sub { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-muted); }

.dd-check {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  margin-left: auto;
  stroke-width: 2;
  color: var(--accent-ink);
  visibility: hidden;
}

.dd-opt[aria-selected="true"] .dd-check { visibility: visible; }

/* отключённый: серый, причина под названием, выбрать нельзя */
.dd-opt[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.dd-opt[aria-disabled="true"].is-active { background: var(--soft-bg); color: var(--text-muted); }

/* совпадение в поиске — подчёркиванием, без жёлтой заливки */
.dd-opt mark {
  background: none;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- 9. Пусто, загрузка, ошибка ---------- */
.dd-note { padding: 10px 10px 6px; font-size: 13px; line-height: 19px; }
.dd-note p + p { margin-top: 2px; }
.dd-note .text-link { margin-top: 4px; }
.dd-note[hidden] { display: none; }

.dd-skel-row { display: flex; align-items: center; min-height: 36px; padding: 0 10px; }

.dot-bad {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--bad-ink);
}

/* ---------- 10. Телефон: лист снизу ---------- */
.dd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--backdrop);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity var(--t-sheet-out) var(--ease-out);
}

.dd-backdrop.is-on { opacity: 1; pointer-events: auto; transition-duration: var(--t-sheet-in); }
.dd-backdrop.is-dragging { transition: none; }

.dd-pop[data-mode="sheet"] {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: auto;
  max-height: min(80vh, 640px);
  max-height: min(80dvh, 640px);
  padding: 0 8px calc(8px + env(safe-area-inset-bottom));
  border-radius: var(--radius-block) var(--radius-block) 0 0;
  transition: transform var(--t-sheet-in) var(--ease-drawer);
}

.dd-pop[data-mode="sheet"].is-enter { opacity: 1; transform: translateY(100%); }
.dd-pop[data-mode="sheet"].is-leave { opacity: 1; transform: translateY(100%); transition: transform var(--t-sheet-out) var(--ease-out); }
/* пока палец на листе — лист идёт за пальцем без задержки */
.dd-pop[data-mode="sheet"].is-dragging { transition: none; }

.dd-head { flex: none; touch-action: none; cursor: grab; }
.dd-grab { display: flex; justify-content: center; padding: 8px 0 2px; }
.dd-grab span { width: 36px; height: 4px; border-radius: 2px; background: var(--handle); }

.dd-sheet-bar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 0 0 12px; }
.dd-sheet-title { font-size: 17px; line-height: 24px; font-weight: 600; }

.dd-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  color: var(--text-muted);
}

.dd-pop[data-mode="sheet"] .dd-search { margin: 0 4px 8px; }
/* 16 px: iPhone не увеличивает страницу при вводе */
.dd-pop[data-mode="sheet"] .dd-search input { height: 44px; font-size: 16px; }
.dd-pop[data-mode="sheet"] .dd-clear,
.dd-pop[data-mode="sheet"] .dd-close { width: 44px; height: 44px; }
.dd-pop[data-mode="sheet"] .dd-clear { right: 0; margin-top: -22px; }
.dd-pop[data-mode="sheet"] .dd-opt { min-height: 48px; padding: 12px; font-size: 15px; line-height: 22px; }
.dd-pop[data-mode="sheet"] .dd-opt--all::after { left: 12px; right: 12px; }
.dd-pop[data-mode="sheet"] .dd-check { width: 20px; height: 20px; flex-basis: 20px; }
.dd-pop[data-mode="sheet"] .dd-sub { font-size: 13px; line-height: 18px; }
.dd-pop[data-mode="sheet"] .dd-skel-row { min-height: 48px; padding: 0 12px; }

/* ---------- 15. Наведение — только у мыши (на телефоне касание не «залипает») ---------- */
@media (hover: hover) and (pointer: fine) {
  .dd-trigger:hover:not(:disabled) { border-color: var(--live-edge); }
  .dd-clear:hover, .dd-close:hover { color: var(--text); background: var(--tint-hover); }
}

/* ---------- 16. Планшет и касание: строки 44 px ---------- */
@media (max-width: 1199px), (pointer: coarse) {
  .dd-trigger { height: 44px; font-size: 14px; }
  .dd-opt { min-height: 44px; padding: 10px 12px; font-size: 15px; line-height: 22px; }
  .dd-opt--all::after { left: 12px; right: 12px; }
  .dd-skel-row { min-height: 44px; padding: 0 12px; }
  .dd-search input { height: 44px; font-size: 16px; }
  .dd-clear { width: 40px; height: 40px; right: 2px; margin-top: -20px; }
}

/* ---------- 17. Телефон 390 ---------- */
@media (max-width: 560px) {
  .site-bar .dd-lead { display: none; }
  .site-bar .dd--store { flex: 1 1 auto; }
  .site-bar .dd--store .dd-trigger { width: 100%; }
  .site-bar .dd--period { flex: none; }
  .site-bar .dd--period .dd-trigger { width: 108px; }
  .site-bar .dd-trigger { padding: 0 8px 0 10px; gap: 6px; }
}

/* ---------- 18. Меньше движения: без сдвигов и масштаба, только прозрачность ---------- */
@media (prefers-reduced-motion: reduce) {
  .dd-pop,
  .dd-pop[data-mode="sheet"],
  .dd-pop[data-mode="sheet"].is-leave { transition: opacity 150ms ease; }
  .dd-pop.is-enter,
  .dd-pop[data-mode="sheet"].is-enter,
  .dd-pop[data-mode="sheet"].is-leave { opacity: 0; transform: none; }
  .dd-chev { transition: none; }
  .dd-trigger:active:not(:disabled) { transform: none; }
}
}