/* Тёмная тема prokrastik — тема «Разбор» (тёплый ink на глубоком нейтрале, терракотовый акцент).
   ВНИМАНИЕ: у этого файла НЕТ гейта. Светлые значения токенов живут в :root каждой поверхности
   (13 шаблонов + PAGE_CSS/ADMIN_CSS в auth.py); здесь — только тёмные переопределения. Набор
   переменных ОБЯЗАН совпадать со светлым :root, иначе тёмная тема молча отрендерится светлой.
   Проверка: src/lib/theme_parity.py */

/* Системное предпочтение (работает без JS, без мигания) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #161412;
    --surface:     #1E1B18;
    --elev:        #242019;
    --ink:         #EDE7DE;
    --ink-2:       #B7ADA0;
    --ink-3:       #8C8377;
    --line:        #2A2620;
    --line-2:      #38332B;
    --accent:      #E0764F;
    --accent-ink:  #E88A66;
    --accent-wash: #2A1A13;
    --ok:          #5EB06A;
    --ok-wash:     #182218;
    --ok-line:     #2E4530;
    --warn:        #D69A46;
    --warn-wash:   #241C11;
    --warn-line:   #453922;
    --err:         #E9836F;
    --err-wash:    #241512;
    --err-line:    #492A22;
    --shadow:      0 1px 2px rgba(0,0,0,.5), 0 12px 30px -14px rgba(0,0,0,.66);
    --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  }
}

/* Ручное переключение через JS (dark-mode.js ставит html[data-theme]) */
html[data-theme="dark"] {
  --bg:          #161412;
  --surface:     #1E1B18;
  --elev:        #242019;
  --ink:         #EDE7DE;
  --ink-2:       #B7ADA0;
  --ink-3:       #8C8377;
  --line:        #2A2620;
  --line-2:      #38332B;
  --accent:      #E0764F;
  --accent-ink:  #E88A66;
  --accent-wash: #2A1A13;
  --ok:          #5EB06A;
  --ok-wash:     #182218;
  --ok-line:     #2E4530;
  --warn:        #D69A46;
  --warn-wash:   #241C11;
  --warn-line:   #453922;
  --err:         #E9836F;
  --err-wash:    #241512;
  --err-line:    #492A22;
  --shadow:      0 1px 2px rgba(0,0,0,.5), 0 12px 30px -14px rgba(0,0,0,.66);
  --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
}

/* Скриншоты продукта на лендингах (up_v1, zempr_v1).
   Двумя блоками, как и токены: <picture media="(prefers-color-scheme:dark)"> слушал бы ТОЛЬКО ОС,
   а тема сайта переключается тумблером через html[data-theme]. У пользователя со светлой ОС,
   нажавшего «луну», на тёмной странице загорался белый скрин — и наоборот. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-light { display: none; }
  :root:not([data-theme="light"]) .shot-dark  { display: block; }
}
html[data-theme="dark"] .shot-light { display: none; }
html[data-theme="dark"] .shot-dark  { display: block; }
html[data-theme="light"] .shot-light { display: block; }
html[data-theme="light"] .shot-dark  { display: none; }

/* Кнопка переключателя темы (создаёт dark-mode.js) */
#dark-toggle {
  position: fixed;
  /* env(safe-area-inset-top) сдвигает кнопку из-под чёлки/статус-бара (iOS, viewport-fit=cover);
     на вебе без чёлки env=0 → остаются прежние 12px, регрессии нет. */
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 9999;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2, #D5D0C7);
  border-radius: 99px;
  background: var(--surface, #FBFAF8);
  color: var(--ink-2, #575049);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(32,28,23,.05));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s, border-color 0.18s;
  user-select: none;
  -webkit-user-select: none;
  /* Промоушен в свой слой — убирает дрейф фикс-кнопки при инерц. скролле iOS */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
#dark-toggle:hover {
  color: var(--ink, #201C17);
  border-color: var(--accent, #A8442A);
}

/* Брендовый префикс «prokrastik /» в шапке теста.
   На десктопе: «prokrastik / земельное право». На мобилке прячем префикс,
   остаётся только название теста — экономим место на узком экране. */
@media (max-width: 600px) {
  .logo-brand { display: none; }
}

/* Плавающая кнопка «Все тесты» — фиксированная, только на мобилке.
   Левый нижний угол: не пересекается с переключателем темы (правый верх)
   и с навигацией по вопросам .nav-float (низ по центру). */
#pk-home { display: none; }
@media (max-width: 600px) {
  #pk-home {
    position: fixed;
    left: 10px;
    bottom: 12px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border: 1px solid var(--line-2, #D5D0C7);
    border-radius: 99px;
    background: var(--surface, #FBFAF8);
    color: var(--ink-2, #575049);
    font-family: var(--sans, 'Onest', system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(32,28,23,.05));
    -webkit-user-select: none;
    user-select: none;
  }
  #pk-home:hover {
    color: var(--ink, #201C17);
    border-color: var(--accent, #A8442A);
  }
}

/* ── Доступность: видимый фокус с клавиатуры (WCAG 2.4.7) ──
   :focus-visible срабатывает только при навигации с клавиатуры,
   поэтому мышиный клик рамку не показывает — визуальной регрессии нет. */
:focus-visible {
  outline: 2px solid var(--accent, #A8442A);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Уважение к prefers-reduced-motion: гасим анимации/переходы ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}