/* ============================================================
   Khan SAT-1600 · АДАПТИВНЫЙ СЛОЙ v4.2
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов
   ------------------------------------------------------------
   Загружается ПОСЛЕДНИМ, после ds.css.

   В проекте брейкпоинты были расставлены стихийно:
   560 / 600 / 620 / 640 / 700 / 720 / 760 / 820 / 860 / 900 / 1100.
   Компоненты ломались на разной ширине — интерфейс «рассыпался»
   не целиком, а кусками. Здесь введена единая сетка и починены
   места, где содержимое не помещалось на экран.
   ============================================================ */

/* ---------------------------------------------------------------
   1. БЛОКИРОВКА ПРОКРУТКИ

   body{overflow:hidden} игнорируется Safari на iOS — поэтому
   зависший замок убивал прокрутку везде, КРОМЕ iPhone.
   Класс ставит только менеджер замков из ds.js, у которого есть
   сторож: если ничего не открыто, замок снимается сам.
   --------------------------------------------------------------- */
html.ds-scroll-locked,
html.ds-scroll-locked body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.ds-scroll-locked body {
  padding-right: var(--ds-sbw, 0px);
}
/* На iOS overflow не держит — не даём прокручивать фон через подложку */
.ds-overlay,
.ds-palette-overlay {
  overscroll-behavior: contain;
  touch-action: none;
}
/* но внутри окна прокрутка нужна */
.ds-modal__body,
.ds-palette__list {
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Страховка от следов прежней блокировки.

   ВАЖНО, ЧТО ЗДЕСЬ НЕТ overflow-y: auto.
   Раньше стояло `html:not(...), html:not(...) body { overflow-y: auto }`,
   и это ломало прокрутку на iOS Safari: контейнерами прокрутки
   становились И html, И body. У body высота по содержимому, значит
   переполнения нет и прокручивать нечего — страница замирала.
   Документ должен прокручиваться сам, поэтому overflow не трогаем,
   а только снимаем возможный position:fixed. */
html:not(.ds-scroll-locked) body {
  position: static;
}

/* ---------------------------------------------------------------
   2. ЕДИНАЯ СЕТКА БРЕЙКПОИНТОВ

   xs  ≤ 380   компактные      (Galaxy Fold закрыт 344, Galaxy S23 360, iPhone SE 375)
   sm  ≤ 600   телефоны        (iPhone 15 393, Pixel 8 412, iPhone 15 Pro Max 430)
   md  ≤ 900   планшеты книжно, фолды    (iPad mini, Galaxy Tab)
   lg  ≤ 1280  планшеты альбомно, ноуты  (iPad Pro, MacBook Air)
   xl  ≥ 1281  десктоп
   --------------------------------------------------------------- */
:root {
  --ds-bp-xs: 380px;
  --ds-bp-sm: 600px;
  --ds-bp-md: 900px;
  --ds-bp-lg: 1280px;

  /* Реальная высота экрана: 100vh на мобильных считает панель браузера,
     из-за чего низ страницы уходит под адресную строку. */
  --ds-vh: 100vh;
  --ds-gutter: 16px;
  --ds-content-max: 1180px;
}
@supports (height: 100dvh) {
  :root { --ds-vh: 100dvh; }
}

/* ---------------------------------------------------------------
   3. НИЧТО НЕ ВЫЕЗЖАЕТ ЗА ЭКРАН

   Главная причина горизонтальной прокрутки на телефонах:
   фиксированные ширины и длинные неразрывные строки (формулы,
   логины, ссылки).
   --------------------------------------------------------------- */
html {
  /* overflow-x здесь НЕ задаём: правило уже есть в styles.css, а лишнее
     объявление на корневом элементе делает его контейнером прокрутки,
     что на iOS Safari ломает жест прокрутки страницы. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  max-width: 100%;
  /* overflow-x здесь НЕ задаём. По спецификации, если одна ось hidden,
     то visible на второй превращается в auto — body становится
     контейнером прокрутки. Высота у body по содержимому, переполнения
     нет, прокручивать нечего: на iOS Safari страница замирает.
     Горизонтальный выезд уже отсекает html{overflow-x:hidden}
     в styles.css:506 — этого достаточно. */
}

/* Длинные слова и формулы переносятся, а не растягивают страницу */
p, li, td, th, dd, dt, figcaption,
.card, .panel, .stat, .choice, .q-text,
.ds-card, .ds-modal__body, .ds-toast__body {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
/* но не в коде и не в формулах — там перенос ломает смысл */
pre, code, kbd, samp, .ds-kbd, .formula, .katex {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
pre, .formula, .katex-display {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Медиа никогда не шире контейнера */
img, svg, video, canvas, iframe, table {
  max-width: 100%;
}
/* Исключение: внутри прокручиваемой обёртки таблица должна мочь
   быть шире экрана — иначе колонки сплющиваются в нечитаемую кашу
   и горизонтальная прокрутка не включается. */
.ds-tablewrap > table,
.table-scroll > table {
  max-width: none;
  min-width: 100%;
}
img, svg, video, canvas {
  height: auto;
}

/* Фиксированные ширины из старых стилей делаем податливыми */
[style*="width:"][style*="px"] {
  max-width: 100%;
}
/* но не внутри контейнеров с собственной горизонтальной прокруткой */
.ds-tablewrap [style*="width:"],
.table-scroll [style*="width:"],
[style*="overflow-x"] [style*="width:"] {
  max-width: none;
}

/* ---------------------------------------------------------------
   4. ОГРАНИЧЕНИЯ ЭКРАНА И БЕЗОПАСНЫЕ ЗОНЫ
   Вырезы, скруглённые углы, жестовые панели.
   --------------------------------------------------------------- */
.app-shell {
  min-height: var(--ds-vh);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.ext-tabs,
footer,
.ext-menu-sheet {
  padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------
   5. ШТОРКА СНИЗУ — прокручиваемая и не выше экрана
   Меню «Ещё» содержит 33 пункта: без ограничения высоты
   нижние пункты уходили за край без возможности докрутить.
   --------------------------------------------------------------- */
.ext-menu-sheet {
  max-height: min(80vh, calc(var(--ds-vh) - 64px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
#ext-sheet-bg {
  touch-action: none;
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------
   6. КОМПОНЕНТЫ ПО БРЕЙКПОИНТАМ
   --------------------------------------------------------------- */

/* --- lg: планшет альбомно / небольшой ноутбук --- */
@media (max-width: 1280px) {
  :root { --ds-content-max: 100%; }
  .wrap, .container, .page { padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }
}

/* --- md: планшет книжно, складные --- */
@media (max-width: 900px) {


  .topbar { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .brand .t2 { display: none; }

  /* сетки схлопываются в одну–две колонки */
  .grid, .cards, .sm-grid, .stats-row {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)) !important;
  }

  .ds-modal { width: min(640px, 100%); }
}

/* --- sm: телефоны --- */
@media (max-width: 820px) {
  /* НАЛОЖЕНИЕ НАДПИСЕЙ В ШАПКЕ — причина и лечение.

     styles.css:740 задаёт .topbar{flex-wrap:nowrap !important}, поэтому
     переносить строку нельзя: всё обязано уместиться в одну.
     При этом .brand .t1 имеет white-space:nowrap БЕЗ overflow:hidden —
     такой элемент не может сжаться меньше своего текста, распирает
     контейнер и наезжает на навигацию.

     Лечим не борьбой с !important, а тем, что даём названию
     сжиматься с многоточием. */
  .brand { min-width: 0; }
  .brand .titles { min-width: 0; overflow: hidden; }
  .brand .t1 {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* каждому элементу шапки — право сжиматься */
  .topbar > * { min-width: 0; }
  /* было max-width: calc(100% - 96px) — при nowrap это позволяло
     одному элементу занять почти всю строку и вытолкнуть остальные */
  .topbar > *:not(.ext-more) { max-width: 100%; }
  /* навигация прокручивается пальцем, а не растёт вширь */
  .topnav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  /* кнопка «Ещё» не сжимается: она нужна всегда */
  .ext-more { flex: 0 0 auto; }
}

@media (max-width: 600px) {


  /* размер шрифта не меньше 16px в полях — иначе iOS зумит страницу
     при фокусе и вёрстка «уезжает» */
  input, select, textarea,
  .ds-input, .ds-select, .ds-textarea {
    font-size: 16px;
  }

  /* .topbar НЕ переносим: styles.css:740 задаёт nowrap через !important,
     и спорить с ним значит получить разное поведение на разных сборках.
     Вместо этого выше дали элементам сжиматься. */
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { white-space: nowrap; flex: 0 0 auto; }

  /* всё, что было в строку, — в колонку */
  .toolbar, .row, .ds-card__head, .actions {
    flex-wrap: wrap;
  }

  /* сетки — одна колонка */
  .grid, .cards, .sm-grid, .stats-row {
    grid-template-columns: 1fr !important;
  }

  /* панель инструментов таблицы */
  .ds-tabletools { flex-direction: column; align-items: stretch; }
  .ds-tabletools .ds-input { max-width: none; }
  .ds-tabletools__count { margin-left: 0; text-align: right; }

  /* модальные окна — лист снизу */
  .ds-modal__head { padding: 16px 16px 8px; }
  .ds-modal__body { padding: 0 16px 16px; }
  .ds-modal__foot { padding: 12px 16px; }
  .ds-modal__title { font-size: var(--ds-fs-lg); }
}

/* --- xs: компактные телефоны (320–380) --- */
@media (max-width: 380px) {
  :root { --ds-gutter: 10px; }

  .brand .t1 { font-size: 15px; }
  .brand .mark { width: 32px; height: 32px; flex-basis: 32px; font-size: 16px; }

  .ds-btn { padding: 0 12px; font-size: var(--ds-fs-xs); }
  .ds-card { padding: 14px; }

  /* кнопки в подвале окна — в столбик и на всю ширину */
  .ds-modal__foot { flex-direction: column-reverse; }
  .ds-modal__foot .ds-btn { width: 100%; }

  /* таблицы всегда карточками — по-другому не помещаются */
  .ds-table--stack thead { display: none; }
}

/* --- Альбомная ориентация на планшете: две колонки вместо одной --- */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1280px) {
  .grid, .cards, .sm-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }
}

/* --- Альбомная ориентация на телефоне: высоты мало, ширины много --- */
@media (max-height: 560px) and (orientation: landscape) {
  /* шапка не должна съедать треть экрана */
  .topbar { height: auto; padding-top: 6px; padding-bottom: 6px; }
  /* окна и шторки прокручиваются, содержимое достижимо целиком */
  .ds-modal__body { max-height: 62vh; }

  /* картинка задания не занимает весь экран, оставляя варианты за краем */
  .q-img, .task-image, #root img { max-height: 56vh; object-fit: contain; }
}

/* --- Очень низкий экран --- */
@media (max-height: 480px) and (orientation: landscape) {
  .ds-overlay { align-items: flex-start; padding: 8px; }
  .ds-modal { max-height: 94vh; }
  .ds-modal__head { padding: 10px 16px 6px; }
  .ext-menu-sheet { max-height: 88vh; }
  .topbar { height: auto; padding-top: 6px; padding-bottom: 6px; }
}

/* --- Очень широкие экраны: содержимое не растягивается в строку --- */
@media (min-width: 1600px) {
  .wrap, .container, .page {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------------------------------------------------------------
   7. СЕНСОРНЫЕ УСТРОЙСТВА
   --------------------------------------------------------------- */
@media (pointer: coarse) {
  /* цель нажатия не меньше 44px — рекомендация и Apple, и Google */
  button, .btn, .btn-sm, .nav-tab, .topnav a,
  .ds-btn, .ds-chip, [role="button"], input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
  }
  .ds-btn--sm { min-height: 36px; }

  /* подсказки при наведении на сенсоре бесполезны */
  .ds-tip::after { display: none; }

  /* горизонтальные ленты прокручиваются пальцем с прилипанием */
  .topnav, .ext-chips, .ds-tablewrap {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------
   8. ПЕЧАТЬ И ЭКСПОРТ
   --------------------------------------------------------------- */
@media print {
  html.ds-scroll-locked, html.ds-scroll-locked body { overflow: visible; }
  .ext-menu-sheet, #ext-sheet-bg { display: none !important; }
}

/* ---------------------------------------------------------------
   9. МЕНЮ «ЕЩЁ» — ОДИНАКОВО НА ВСЕХ ПЛАТФОРМАХ

   Меню всегда живёт в <body>, поэтому backdrop-filter шапки на него
   не влияет: он создаёт содержащий блок и контекст наложения только
   для своих потомков.
   --------------------------------------------------------------- */
body > .ext-menu.ds-menu-out {
  display: block;
  z-index: var(--ds-z-dropdown, 400);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* широкий экран — выпадающее меню, координаты ставит ds-menu.js */
body > .ext-menu.ds-menu-drop {
  z-index: 999;
  position: fixed;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
  border-radius: var(--ds-r-md, 12px);
  box-shadow: var(--ds-e3);
  animation: ds-rise var(--ds-dur-2, 190ms) var(--ds-ease-out, ease-out);
}

/* узкий экран — шторка снизу */
body > .ext-menu.ext-menu-sheet {
  z-index: 999;              /* строго выше подложки (998) */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: none;
  border-radius: var(--ds-r-xl, 20px) var(--ds-r-xl, 20px) 0 0;
  box-shadow: var(--ds-e4);
}

#ext-sheet-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 36, 12, .5);
  /* ext.css:438 задаёт шторке z-index:999 !important. Раньше здесь
     стояло calc(1000 - 1) — ТЕ ЖЕ 999. При равном уровне сверху
     оказывается тот, кто позже в разметке, то есть подложка. Она
     ложилась ПОВЕРХ шторки и размывала её своим backdrop-filter:
     blur(3px) — шторка выглядела замыленной.
     Держим подложку строго ниже шторки. */
  z-index: 998;
}

/* пункты меню: в шторке переносятся, в выпадающем — нет */
body > .ext-menu.ext-menu-sheet a { white-space: normal; }

/* ---------------------------------------------------------------
   10. РЕЖИМ ПРОКРУТКИ ОБОЛОЧКИ  (?scroll=container)

   Тот же приём, что работает в шторке «Ещё» на всех платформах:
   документ не прокручивается, прокручивается фиксированный
   контейнер со своим overflow. Включается только классом на <html>,
   поэтому обычный режим остаётся нетронутым.
   --------------------------------------------------------------- */
html.ds-scroll-container,
html.ds-scroll-container body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
@supports (height: 100dvh) {
  html.ds-scroll-container,
  html.ds-scroll-container body { height: 100dvh; }
}

/* Между body и оболочкой стоит #root, а на него next-core вешает
   класс nx-pagein для анимации перехода. У #root высота по
   содержимому, поэтому height:100% у оболочки не разрешался:
   процент от неопределённой высоты даёт auto. Оболочка росла
   вместе с содержимым, своей прокрутки не получала, а body с
   overflow:hidden обрезал всё ниже экрана — страница не
   прокручивалась вообще.

   Поэтому высота задаётся от окна напрямую, а не процентом:
   цепочка родителей больше не важна. */
html.ds-scroll-container #root,
html.ds-scroll-container .nx-pagein {
  height: 100%;
  min-height: 0;
}

html.ds-scroll-container .app-shell {
  height: 100vh;
  /* styles.css задаёт .app-shell{min-height:100vh}. На iOS 100vh —
     это высота с учётом скрытой строки браузера, она БОЛЬШЕ
     видимой. Оболочка получалась выше окна, и нижняя часть
     уходила под обрез. Снимаем ограничение снизу. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}
@supports (height: 100dvh) {
  /* dvh учитывает свёрнутую строку браузера — именно та высота,
     которую видит пользователь на iPhone. */
  html.ds-scroll-container .app-shell { height: 100dvh; }
}

/* Шапка внутри контейнера: sticky работает относительно него */
html.ds-scroll-container .topbar { position: sticky; top: 0; }

/* Полоса прокрутки контейнера — незаметная, как у шторки */
html.ds-scroll-container .app-shell::-webkit-scrollbar { width: 6px; }
html.ds-scroll-container .app-shell::-webkit-scrollbar-thumb {
  background: var(--ds-green-300); border-radius: 3px;
}