/* Сброс, документ, каркас страницы и служебные классы доступности.
   Всё, что относится к конкретным элементам интерфейса, — в components.css. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Атрибут hidden обязан побеждать всегда, даже на элементах вроде .btn
   или .btn-row, чьи собственные правила задают display — иначе у обеих
   объявлений одинаковая специфичность (0,1,0), и порядок в каскаде решает
   спор в пользу авторского класса, а не встроенного [hidden] (см. фикс-раунд
   src/ui/screens/card-check.js: без этого правила кнопки «Ещё раз»/
   «К карточке» были видны ещё до первой проверки). */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4,
p, figure, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

body {
  /* 100vh — запасной вариант для браузеров без svh (iOS до 15.4). */
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  /* Подсветка тапа своя — у кнопок есть :active-состояние. */
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1, h2, h3 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* Видимый фокус — обязателен: приложение работает и с клавиатуры.
   Обводка снаружи элемента, чтобы не съедать его собственную рамку. */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Каркас --------------------------------------------------------- */

/* Прокрутка — у документа: вложенный скролл на iOS ведёт себя хуже
   (инерция, прячущийся адресный бар). Панель вкладок висит поверх,
   поэтому экран резервирует под неё место снизу. */
.app__screen {
  display: block;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  padding-inline: max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-5));
}

.app__screen:focus {
  outline: none;
}

/* Экраны без нижней панели (тренировка, «Смена») забирают всю высоту. */
body[data-nav="hidden"] .app__screen {
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--sp-5));
}

body[data-nav="hidden"] .tabbar {
  display: none;
}

/* --- Доступность ---------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ссылка «к содержимому» прячется обрезкой, а не уводом за край экрана:
   так вместе с ней уходит и её тень (иначе она подсвечивает верх страницы). */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: calc(env(safe-area-inset-top) + var(--sp-2));
  z-index: 10;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  clip-path: inset(50%);
}

.skip-link:focus-visible {
  clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
  /* .timerbar__fill исключён: это не декоративная анимация, а единственный
     видимый отсчёт десяти секунд на timed-вопросах (см. components.css) —
     настоящий таймер держит setTimeout в session.js независимо от CSS, но
     без своей transition-duration полоска схлопывалась бы мгновенно, и
     человек с reduced-motion не видел бы, что время вообще идёт. Финальное
     ревью, minor: раньше правило ниже глушило её наравне со всем остальным,
     хотя соседний комментарий в components.css уже обещал обратное. */
  *:not(.timerbar__fill),
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}