/* ============================================================
   Khan SAT-1600 · Исправления интерфейса по аудиту (v74)
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов

   Каждый блок — конкретная претензия из разбора. Порядок по
   влиянию на пользователя: сначала то, из-за чего данные
   нечитаемы, потом то, что мешает, потом то, что раздражает.
   ============================================================ */

/* ============================================================
   1. ТАБЛИЦЫ НА ТЕЛЕФОНЕ
   Самая тяжёлая проблема: колонки схлопывались так, что имя
   «Sana» вытягивалось в столбик по одной букве. Данные было
   физически не прочитать.

   Причина: table пытается уместить 6–8 колонок в 390 px и
   переносит по символам.

   Решение: на узком экране таблица перестаёт быть таблицей и
   становится списком карточек. Каждая строка — карточка, каждая
   ячейка — пара «заголовок: значение». Заголовок берётся из
   data-label, который проставляет js/ksat-ui-fix.js.
   ============================================================ */

@media (max-width: 720px) {
  .ext-tbl, .ds-tablewrap > table {
    display: block;
    border-collapse: separate;
    border-spacing: 0;
  }
  .ext-tbl thead, .ds-tablewrap > table thead {
    /* Заголовки не прячем визуально в никуда: они переезжают
       в каждую ячейку через data-label. */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ext-tbl tbody, .ds-tablewrap > table tbody { display: block; }

  .ext-tbl tbody tr, .ds-tablewrap > table tbody tr {
    display: block;
    border: 1px solid var(--line, #D8E0D8);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .ext-tbl tbody tr:last-child,
  .ds-tablewrap > table tbody tr:last-child { margin-bottom: 0; }

  .ext-tbl td, .ds-tablewrap > table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #F0F4F0;
    padding: 7px 0;
    font-size: 14.5px;
    text-align: right;
    /* Длинные значения переносим по словам, а не по буквам —
       именно посимвольный перенос и превращал «Sana» в столбик. */
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .ext-tbl td:last-child, .ds-tablewrap > table td:last-child {
    border-bottom: 0; padding-bottom: 0;
  }
  .ext-tbl td::before, .ds-tablewrap > table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #5A6B5A;
    text-align: left;
  }
  /* Ячейка без заголовка занимает всю ширину */
  .ext-tbl td:not([data-label])::before,
  .ds-tablewrap > table td:not([data-label])::before { content: none; }

  .ds-tablewrap { border: 0; background: transparent; overflow: visible; }
}

/* ============================================================
   2. ВОДЯНОЙ ЗНАК
   Метка «Khan SAT-1600 · guest · дата» читалась поверх текста
   и мешала. Защита нужна, но не ценой разборчивости.
   Оставляем еле заметной, а на телефоне убираем совсем: там
   каждый пиксель на счету, а скриншот всё равно палится по
   содержимому.
   ============================================================ */
#ksat-wm { opacity: .018 !important; }
@media (max-width: 720px) { #ksat-wm { display: none !important; } }
@media print { #ksat-wm { opacity: .05 !important; display: block !important; } }

/* ============================================================
   3. ПОЛЯ ВВОДА И ВЫПАДАЮЩИЕ СПИСКИ
   Жёсткие чёрные рамки выбивались из карточного оформления,
   а select выглядел системным элементом из другой эпохи.
   ============================================================ */
/* Мягкие рамки вместо жёстких. Без !important: иначе перебиваются
   частные стили компактных форм в админке, и они разъезжаются. */
input[type="text"], input[type="number"], input[type="password"],
input[type="email"], input[type="search"], textarea, select,
.ext-inp, .ir-input, .iel-essay, .ks-num {
  border: 1px solid var(--line, #D8E0D8);
  border-radius: 10px;
  background: #fff;
  color: #1A1A1A;
  font-family: inherit;
  transition: border-color .14s, box-shadow .14s;
}

@media (max-width: 899px) {
  /* 16px и крупные отступы нужны только на телефоне: при меньшем
     размере iOS увеличивает страницу при фокусе и вёрстка съезжает.
     На ПК это ломало бы компактные формы. */
  input[type="text"], input[type="number"], input[type="password"],
  input[type="email"], input[type="search"], textarea, select,
  .ext-inp, .ir-input, .ks-num {
    font-size: 16px;
    padding: 11px 13px;
  }
}
input:focus, textarea:focus, select:focus,
.ext-inp:focus, .ir-input:focus {
  border-color: var(--green-900, #1B5E20) !important;
  box-shadow: 0 0 0 3px rgba(27, 94, 32, .12);
  outline: none;
}

select, .ext-inp select {
  /* Свой значок вместо системного: системный на iOS и Android
     выглядит по-разному и ломает единый вид. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%231B5E20' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}

/* ============================================================
   4. ПЛАВАЮЩИЙ ВИДЖЕТ
   Питомец перекрывал кнопки и текст в правом нижнем углу.
   Отодвигаем его от края, поднимаем над безопасной зоной и
   делаем полупрозрачным, пока на него не навели.
   ============================================================ */
.ext-pet-float, #ext-pet-float, .ds-pet, .nx-pet {
  z-index: 30 !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  opacity: .55;
  transition: opacity .18s;
}
.ext-pet-float:hover, .ext-pet-float:active,
#ext-pet-float:hover, .ds-pet:hover, .nx-pet:hover { opacity: 1; }

@media (max-width: 899px) {
  /* Точное положение над нижней панелью задаётся в
     css/ksat-topbar.css — там же, где сама панель. */
  .ext-pet-float, #ext-pet-float, .ds-pet, .nx-pet {
    transform: scale(.82);
    transform-origin: bottom right;
  }
}

/* ============================================================
   5. БЕЗОПАСНЫЕ ЗОНЫ iPhone
   Контент уходил под «чёлку» сверху и под полосу жеста снизу.
   ============================================================ */
@media (max-width: 899px) {
  /* Безопасные зоны есть только у телефонов. На ПК эти правила
     перебивали собственные отступы шапки. */
  .topbar {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}
@media (max-width: 899px) {
  .main, .app-shell > .main {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    /* Отступ снизу задаётся в ksat-topbar.css: он зависит от того,
       показана ли нижняя панель разделов. */
  }
}
.ir-nav { padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom))); }

/* ============================================================
   6. ОТКЛИК НА НАЖАТИЕ
   Кнопки никак не реагировали на палец: непонятно, попал или
   нет, и человек жмёт второй раз.
   ============================================================ */
button, .btn, .ir-opt, .eco-mode, .iel-card, .subj-card,
.ks-chip, .iel-type, .calc-range::-webkit-slider-thumb {
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
  /* Сжатие при нажатии — приём для пальца. На ПК есть наведение,
     и подпрыгивание кнопок под мышью только раздражает. */
  button:active, .btn:active, .ir-opt:active, .eco-mode:active,
  .iel-card:active, .subj-card:active, .ks-chip:active, .iel-type:active {
    transform: scale(.975);
    transition: transform .06s;
  }
}
@media (prefers-reduced-motion: reduce) {
  button:active, .btn:active, .ir-opt:active { transform: none; }
}

/* Зона нажатия под палец нужна на сенсорном экране. На ПК
   мышью попадают и в мелкое, а принудительные 44 px разносят
   компактные панели, таблицы и формы — поэтому только телефон. */
@media (max-width: 899px) {
  button, .btn, .ks-chip, .ext-menu a, .ir-opt, .iel-type {
    min-height: 44px;
  }
  .btn-sm, .ks-chip { min-height: 38px; }
}

/* ============================================================
   7. КАРТОЧКИ «СКОРО»
   Предметы без контента выглядели как рабочие: тот же цвет,
   та же рамка. Человек жал и попадал в заглушку.
   ============================================================ */
.subj-card--empty {
  filter: grayscale(.85);
  opacity: .5;
  cursor: default;
}
.subj-card--empty:hover { transform: none; border-color: var(--line, #D8E0D8); }
.subj-card--empty .subj-card__ico { filter: grayscale(1); }
.iel-card:disabled { filter: grayscale(.8); opacity: .5; }

/* ============================================================
   8. ПУСТЫЕ СОСТОЯНИЯ
   «Ничего нет» без единой кнопки — тупик. Добавляем отступ под
   действие, которое подставляет js/ksat-ui-fix.js.
   ============================================================ */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: #5A6B5A;
  font-size: 15px;
  line-height: 1.6;
}
.empty .big { font-size: 46px; line-height: 1; margin-bottom: 12px; }
.empty__cta { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   9. СКЕЛЕТОНЫ ЗАГРУЗКИ
   Пустой экран во время ожидания выглядит как поломка.
   ============================================================ */
.skel {
  background: linear-gradient(90deg, #EEF2EE 25%, #F6F9F6 50%, #EEF2EE 75%);
  background-size: 200% 100%;
  animation: skelShine 1.2s linear infinite;
  border-radius: 10px;
}
@keyframes skelShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-row { height: 16px; margin-bottom: 10px; }
.skel-row:nth-child(2n) { width: 82%; }
.skel-row:nth-child(3n) { width: 64%; }
.skel-card { height: 92px; margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ============================================================
   10. СМЕНА КОНТЕКСТА
   Переход между разделами и предметами происходил незаметно:
   человек не понимал, что экран сменился.
   ============================================================ */
.nx-pagein { animation: pageIn .22s ease-out; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-pagein { animation: none; }
}

/* Цвет предмета на заголовке страницы — видно, где находишься */
.page-head { border-left: 3px solid var(--subj-accent, #C9A227); padding-left: 14px; }

/* ============================================================
   11. БОКОВОЕ И ВЫПАДАЮЩЕЕ МЕНЮ
   Пункты стояли слишком плотно, попадать пальцем неудобно.
   ============================================================ */
@media (hover: none) {
  /* Крупные пункты меню нужны под палец. На ПК мышью попадают и в
     компактные, а 46 px на пункт растягивают выпадающее меню на
     половину экрана. */
  .ext-menu a, .ext-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 15px;
  }
}
.ext-menu a:active, .ext-menu button:active { background: rgba(255, 255, 255, .12); }
.ext-menu hr { margin: 8px 0; opacity: .25; }

/* ============================================================
   12. КНОПКА ЭКСПОРТА
   Выглядела как обычный текст, никто не понимал, что это кнопка.
   ============================================================ */
/* Только явный класс: выборка по onclick цепляла посторонние
   элементы, у которых в обработчике случайно встречалось «export». */
.btn-csv, button[onclick*="downloadCSV"], a[onclick*="downloadCSV"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--green-900, #1B5E20);
  border-radius: 999px;
  background: #fff;
  color: var(--green-900, #1B5E20);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ============================================================
   13. ГОРИЗОНТАЛЬНОЕ ПЕРЕПОЛНЕНИЕ
   Длинные слова и широкие блоки растягивали страницу вбок.
   ============================================================ */
/* НЕ overflow-x: hidden на html и body.

   Это выглядит безобидно, но overflow:hidden у предка превращает
   его в контейнер прокрутки, а это ЛОМАЕТ position:sticky у всех
   потомков. Верхняя панель именно sticky — с таким правилом она
   переставала прилипать и уезжала вверх при прокрутке. На телефоне
   это было незаметно из-за режима прокрутки оболочки, а на ПК
   ломалось сразу.

   overflow-x: clip обрезает так же, но контейнер прокрутки не
   создаёт, поэтому sticky продолжает работать. Там, где clip не
   поддерживается, лучше не обрезать вовсе, чем сломать панель. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
.main, .panel, .card, .ir-q, .empty { min-width: 0; }
pre, code, .ir-q__txt, .ir-passage { overflow-wrap: anywhere; }
img, video, canvas, svg { max-width: 100%; }
/* Таблицы не ограничиваем шириной на ПК: там они прокручиваются
   по горизонтали внутри своей обёртки, и max-width их сплющивал. */
@media (max-width: 899px) { table { max-width: 100%; } }