/* Меню шапки на телефоне.

   На узком экране кнопки языка, темы, стиля и входа не помещаются в строку и
   уезжают под бренд, съедая пол-экрана. Поэтому они прячутся за кнопку справа
   и выезжают сверху одной панелью. */

.burger { display: none; }

@media (max-width: 760px) {
  .top { position: relative; }
  .top-in { gap: 12px; }

  .burger {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    flex: none;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--tx2);
    transition: color .2s, border-color .2s, background .2s;
  }
  .burger:hover, .burger[aria-expanded="true"] { color: var(--tx); border-color: var(--a); background: var(--a-fog); }
  .burger svg { width: 18px; height: 18px; }
  .burger .cross { display: none; }
  .burger[aria-expanded="true"] .cross { display: block; }
  .burger[aria-expanded="true"] .bars { display: none; }

  .top-ctl {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 14px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--line2);
    box-shadow: var(--shadow);
    transform: translateY(-130%);
    opacity: 0;
    visibility: hidden;
    transition: transform .26s ease, opacity .2s ease, visibility .26s;
    z-index: 45;
  }
  .top-ctl.open { transform: translateY(0); opacity: 1; visibility: visible; }

  /* выпадашки в панели прижимаем к левому краю: у правого края списки уезжали за экран */
  .top-ctl .menu { position: absolute; left: 0; right: auto; max-width: calc(100vw - 48px); }
  .top-ctl .dd:last-of-type .menu { left: auto; right: 0; }
  .login { margin-left: auto; }
}

@media (max-width: 420px) {
  .top-ctl { padding: 12px 16px; }
  .brand-tx { font-size: 19px; letter-spacing: .12em; }
}