/* ============================================================
   Khan SAT-1600 · Верхняя панель — пересборка (v75)
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов

   ── ПОЧЕМУ ПЕРЕСБОРКА, А НЕ ПОДГОНКА ────────────────────────

   В верхнюю панель на 390–430 px пытались уместиться сразу пять
   групп управления:

     логотип · предмет · навигация по разделам ·
     режимы · Next · Настройки · Ещё · профиль · выход

   Это не помещается ни при каких размерах шрифта. Отсюда всё
   остальное: навигация уезжала вбок, «Ещё» пропадала за экраном,
   кнопка предмета налезала на закреплённую «Ещё», а при каждой
   перерисовке элементы прыгали, потому что их суммарная ширина
   менялась.

   Подгонять было бессмысленно. Нужна другая схема.

   ── НОВАЯ СХЕМА ─────────────────────────────────────────────

   ТЕЛЕФОН
     Верхняя панель — жёсткая сетка из четырёх колонок с
     фиксированными ширинами. Ничего не прокручивается, ничего
     не может сместиться:

        [логотип 38] [предмет 56] [───── гибкая ─────] [Ещё 40]

     Разделы переезжают ВНИЗ, в панель под большим пальцем.
     Это стандартная схема мобильных приложений: до нижней
     панели дотянуться легче, чем до верхнего края экрана.

   ШИРОКИЙ ЭКРАН
     Всё как было: полная навигация в строке, нижней панели нет.

   Ключевое свойство: на телефоне ширина всех элементов верхней
   панели ФИКСИРОВАНА. Она не зависит ни от языка, ни от длины
   названия предмета, ни от роли пользователя. Значит смещаться
   там больше нечему.
   ============================================================ */

/* ============================================================
   1. ВЕРХНЯЯ ПАНЕЛЬ НА ТЕЛЕФОНЕ
   ============================================================ */
@media (max-width: 899px) {

  .topbar {
    display: grid !important;
    grid-template-columns: 38px 56px 1fr 40px;
    align-items: center;
    gap: 8px;
    height: 54px;
    min-height: 54px;
    padding: 0 10px;
    padding-top: env(safe-area-inset-top);
    /* Высота задана числом, а не содержимым: даже если внутрь
       попадёт что-то новое, панель не станет выше и страница
       не подпрыгнет. */
    box-sizing: content-box;
    overflow: visible;
  }

  /* --- колонка 1: значок --- */
  .topbar .brand {
    grid-column: 1;
    display: flex; align-items: center;
    min-width: 0; margin: 0; padding: 0;
  }
  .topbar .brand .mark { width: 34px; height: 34px; font-size: 17px; }
  /* Текст «Khan SAT-1600» на телефоне не нужен: он всё равно
     обрезался до «Kha…», а место занимал. Название видно в
     заголовке страницы. */
  .topbar .brand .titles { display: none !important; }

  /* --- колонка 2: предмет --- */
  .topbar > .subj-btn-wrap {
    grid-column: 2;
    display: inline-flex !important;
    align-items: center;
    margin: 0; padding: 0; border: 0;
  position: relative; /* <-- ДОБАВИТЬ ЭТУ СТРОКУ */
}





  /* --- колонка 3: контекст страницы --- */
  @media (max-width: 899px) {
  /* Убедись, что колонка с заголовком раздела имеет внутренний отступ */
  .topbar .topnav {
    display: flex !important;
    align-items: center;
    gap: 8px !important; /* Добавляем воздух между текстом и кнопкой Ещё */
    overflow: hidden;
    min-width: 0;
    padding: 0 4px !important;
  }
}
  /* Ссылки разделов переехали вниз — здесь их быть не должно */
  .topbar .topnav > a { display: none !important; }

  /* Вместо них — название текущего раздела. Это единственное,
     что меняется в панели, и меняется только текст. */
  .topbar .topnav::before {
    content: attr(data-title);
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .95;
  }

  /* --- колонка 4: «Ещё» --- */
  .topbar .ext-more {
    /* В styles.css она была position:fixed в правом верхнем углу —
       именно поэтому налезала на кнопку предмета. Возвращаем в
       сетку, где у неё своя колонка. */
    position: relative !important;
    grid-column: 4;
    top: auto !important; right: auto !important;
    display: flex; align-items: center; justify-content: center;
    margin: 0;
  }
  .topbar .ext-more-btn {
    width: 40px; height: 38px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    border-radius: 10px;
  }
  /* Подпись «Ещё» рядом со значком не нужна: значок понятен,
     а ширина колонки фиксирована. */
  .topbar .ext-more-btn > span:not(.ext-more-ico) { display: none; }

  /* --- всё остальное уходит в меню «Ещё» --- */
  .topbar .spacer,
  .topbar .wx-chip,
  .topbar .theme-toggle,
  .topbar .lang-switch,
  .topbar .badge-mode,
  .topbar .userchip,
  .topbar .btn-ghost-light { display: none !important; }
}

/* ============================================================
   2. НИЖНЯЯ ПАНЕЛЬ РАЗДЕЛОВ
   Разделы переехали сюда: до нижнего края дотянуться большим
   пальцем легче, чем до верхнего, и панель никогда не
   прокручивается.
   ============================================================ */
.ksat-bottomnav { display: none; }

@media (max-width: 899px) {
  .ksat-bottomnav {
    display: grid;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid var(--line, #D8E0D8);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .06);
  }

  .ksat-bn__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 7px 2px;
    border: 0;
    background: transparent;
    color: #5A6B5A;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ksat-bn__ico { font-size: 19px; line-height: 1; }
  .ksat-bn__t {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ksat-bn__item--on { color: var(--subj-color, #1B5E20); }
  .ksat-bn__item--on .ksat-bn__ico { transform: scale(1.08); }
  .ksat-bn__item:active { background: #F2F7F2; }

  /* Полоска сверху у активного — видно, где находишься */
  .ksat-bn__item--on::before {
    content: '';
    position: absolute;
    top: 0; height: 3px; width: 34px;
    border-radius: 0 0 3px 3px;
    background: var(--subj-color, #1B5E20);
  }
  .ksat-bn__item { position: relative; }

  /* Освобождаем место под панель, чтобы она не закрывала контент */
  .main, .app-shell > .main {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
  /* Закреплённые кнопки прохождения поднимаются над панелью */
  .ir-nav { bottom: calc(58px + env(safe-area-inset-bottom)); }
  /* Питомец тоже */
  .ext-pet-float, #ext-pet-float, .ds-pet, .nx-pet {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================================
   3. ШИРОКИЙ ЭКРАН — как было
   ============================================================ */
@media (min-width: 900px) {
  .topbar .topnav::before { content: none; }
  .topbar > .subj-btn-wrap {
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, .22);
    margin-right: 4px;
  }

}

/* ============================================================
   4. ТЁМНАЯ ТЕМА
   ============================================================ */
html[data-theme="dark"] .ksat-bottomnav,
body.theme-dark .ksat-bottomnav {
  background: #16211A;
  border-top-color: #2A3A2E;
}
html[data-theme="dark"] .ksat-bn__item,
body.theme-dark .ksat-bn__item { color: #9FB09F; }
html[data-theme="dark"] .ksat-bn__item:active,
body.theme-dark .ksat-bn__item:active { background: #1E2C22; }
/* --- колонка 2: предмет --- */
.topbar > .subj-btn-wrap {
  grid-column: 2;
  display: inline-flex !important;
  align-items: center;
  margin: 0; padding: 0; border: 0;
  position: relative; /* <-- Добавлено для фикса выпадающего списка */
}

/* Стили для кнопки предмета */
.topbar > .subj-btn-wrap .subj-btn {
  width: 56px; height: 36px;
  padding: 0; gap: 3px;
  justify-content: center;
  border-radius: 10px;
}
.topbar > .subj-btn-wrap .subj-btn__name { display: none !important; }
.topbar > .subj-btn-wrap .subj-btn__ico { font-size: 17px; }
.topbar > .subj-btn-wrap .subj-btn__caret { font-size: 9px; }

/* <-- НОВЫЙ БЛОК: Заставляем само выпадающее меню парить поверх сайта --> */
.topbar > .subj-btn-wrap > .ext-menu,
.topbar > .subj-btn-wrap > ul,
.topbar > .subj-btn-wrap > div:not(.subj-btn) {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  z-index: 200 !important;
  min-width: 180px;
}
/* ============================================================
   Универсальная защита шапки от перелома (Мертвая зона 900-1200px)
   ============================================================ */

/* 1. Запрещаем самой шапке и навигации ломаться на несколько строк */
.topbar, 
.topnav {
    flex-wrap: nowrap !important;
}

/* 2. Если ссылки не влезают — делаем красивый горизонтальный свайп */
.topnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Прячем ползунок в Firefox */
}
.topnav::-webkit-scrollbar {
    display: none; /* Прячем ползунок в Chrome/Safari */
}

/* 3. Жестко запрещаем тексту ссылок и названию предмета падать в столбик */
.subj-btn__name, 
.topnav a {
    white-space: nowrap !important;
}

/* ============================================================
   Липкая шапка: body не должен быть контейнером прокрутки
   ------------------------------------------------------------
   По спецификации, если по одной оси стоит clip, а по другой auto,
   то clip ведёт себя как hidden — и body превращается в область
   прокрутки. Sticky-потомки в такой области прилипают к ней, а не
   к окну, поэтому шапка уезжала вверх. Прокрутку страницы ведёт
   html, значит у body она должна остаться обычной.
   ============================================================ */
body { overflow-y: visible; }
.topbar { position: sticky; top: 0; z-index: var(--z-sticky, 50); }

/* ============================================================
   ШАПКА НА ПК: ровный ряд без наездов
   ------------------------------------------------------------
   На широком экране пункты меню, переключатели темы и языка
   и кнопка «Ещё» стояли в общем потоке и переносились на вторую
   строку, наезжая друг на друга. Теперь ряд один: название слева,
   навигация посередине с прокруткой при нехватке места,
   переключатели справа и не сжимаются.
   ============================================================ */
@media (min-width: 821px) {
  .topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    padding: 8px 18px;
    min-height: 58px;
  }
  .topbar > .brand { flex: 0 0 auto; }
  .topbar .topnav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topbar .topnav::-webkit-scrollbar { display: none; }
  .topbar .topnav > * { flex: 0 0 auto; }
  /* правый блок: тема, язык, сеть, «Ещё» — всегда в одну строку */
  .topbar > .ext-more,
  .topbar > .theme-toggle,
  .topbar > .lang-switch,
  .topbar > .net-chip,
  .topbar > .bell,
  .topbar > .subj-btn-wrap { flex: 0 0 auto; }
  .topbar .ext-more { position: relative; }
  .topbar .ext-more__btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
}

/* На очень широких экранах названию предмета есть место */
@media (min-width: 1200px) {
  .topbar .brand .sub { display: block; }
}

/* Все элементы шапки выравниваются по центру ряда, а подпись «Ещё»
   с треугольником не разрывается на две строки. */
@media (min-width: 821px) {
  .topbar > * { align-self: center; }
  .topbar .userchip { line-height: 1.25; }
  .topbar .ext-more, .topbar .ext-more * { white-space: nowrap; }
  .topbar .spacer { flex: 1 1 auto; }
}