/* Переключатель языка: кнопка справа сверху и список под ней.

   Список висит поверх содержимого, а не раздвигает его: экран входа
   помещается ровно, и подвинуть его на четыре строки значит выдавить
   низ за край. */

.lang {
  position: relative;
  z-index: 20;
}

.lang__now {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100cqw;
  color: var(--accent-text);
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.lang__now:active { background: var(--surface-2); }

.lang.is-open .lang__now { border-color: var(--accent-dim); }

.lang__short {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
}

/* Стрелка вниз: значок повёрнут, потому что своей стрелки «вниз»
   у нас нет, а заводить ради одного места лишний значок незачем. */
.lang__now .icon:last-child {
  width: var(--fs-md);
  height: var(--fs-md);
  color: var(--text-dim);
  transform: rotate(90deg);
  transition: transform var(--fast) var(--ease);
}

.lang.is-open .lang__now .icon:last-child { transform: rotate(-90deg); }

/* Список переносится в каркас и ставится по месту кнопки скриптом:
   внутри экрана его подрезала бы прокрутка. Слой выше шторки не нужен —
   выше содержимого достаточно. */
.lang__list {
  position: absolute;
  z-index: 30;
  min-width: 42cqw;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px var(--sheet-shadow);
  animation: lang-in var(--fast) var(--ease);
}

.lang__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.lang__row:hover { background: var(--surface-2); }

.lang__row.is-on .lang__name { color: var(--accent-text); font-weight: 650; }

.lang__name {
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.flag {
  flex: none;
  width: 6.7cqw;
  height: 4.5cqw;
  display: block;
}

@keyframes lang-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Наведение только там, где есть мышь: на телефоне hover залипает
   после касания и оставляет кнопку подсвеченной. */
@media (hover: hover) {
  .lang__now:hover {
    background: var(--surface-2);
    border-color: var(--accent-dim);
  }
}