/* =========================================================================
   Wortly 2.0 — сброс, типографика, каркас
   Требует core/tokens.css
   ========================================================================= */

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

/* Атрибут hidden обязан побеждать display из компонента.
   [hidden]{display:none} живёт в стилях браузера, а любое авторское
   правило вида .sheet{display:flex} их перебивает независимо от
   специфичности — и «скрытая» шторка остаётся раскрытой на экране.
   Правило стоит в сбросе, а не на странице: иначе каждый новый шаблон
   с hidden обязан помнить про эту ловушку, и однажды кто-то забудет. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Полоса прокрутки резервируется всегда: без этого переход со страницы
     без скролла на страницу со скроллом дёргает вёрстку на 15px. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--surface-sunken);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overscroll-behavior-y: none; /* убирает «резинку» в установленной PWA */
}

/* ===== Типографика ====================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance; /* не оставляет одно слово на последней строке */
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-sm); }

p {
  text-wrap: pretty;
}

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

/* Кнопки-ссылки из-под этого правила исключены.
 *
 * `a:hover` специфичнее, чем `.btn--primary`, и перекрашивал надпись кнопки
 * в акцентный цвет — то есть в цвет её же фона: при наведении на «Навчання»
 * текст пропадал. Цвет кнопки задаёт её вариант, ссылка она или <button>. */
a:hover:not(.btn) {
  color: var(--accent-hover);
}

small {
  font-size: var(--text-xs);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

ul, ol {
  list-style: none;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Фокус ============================================================ */

/* Кольцо фокуса показываем только при навигации с клавиатуры: мышью
   кликать по кнопке и видеть рамку — визуальный шум. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ===== Утилиты ========================================================== */

.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--sm { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }
.container--xl { max-width: var(--container-xl); }

/* Колонка вкладки приложения: ставится на всех экранах под навигацией,
   чтобы контент не менял ширину и положение при переходе между ними.
   Экран занятия — не вкладка и живёт со своей шириной карточки. */
.container--app { max-width: var(--container-app); }

.stack > * + * {
  margin-top: var(--stack-gap, var(--space-4));
}

.row {
  display: flex;
  align-items: center;
  gap: var(--row-gap, var(--space-3));
}

.row--between { justify-content: space-between; }
.row--center { justify-content: center; }
.row--wrap { flex-wrap: wrap; }

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-3));
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 160px), 1fr));
}

.spacer { flex: 1 1 auto; }

/* Доступно скринридеру, невидимо глазом */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Текстовые роли =================================================== */

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent-text); }
.text-success { color: var(--success-text); }
.text-danger { color: var(--danger-text); }

.label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Цифры статистики: табличные цифры не дёргают вёрстку при изменении */
.numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ===== Каркас приложения ================================================ */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-top: var(--safe-top);
}

.app-main {
  flex: 1;
  padding-block: var(--space-4) calc(var(--nav-height) + var(--safe-bottom) + var(--space-6));
}

@media (min-width: 900px) {
  .app-main {
    padding-bottom: var(--space-8);
  }
}

/* ===== Прокрутка ======================================================== */

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--radius-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    background-clip: padding-box;
  }
}

/* Горизонтальная лента карточек, без видимой полосы.
 *
 * Только для коротких наборов в два-три элемента. Всё, что может не
 * поместиться в строку, выбирается селектом с поиском (.select) —
 * прокрутка там прячет варианты, до которых никто не доскроллит.
 *
 * Снап proximity, а не mandatory: mandatory на элементах разной ширины
 * перехватывает любую прокрутку и дотягивает ленту до ближайшего края,
 * даже когда пользователь остановил её осознанно. */
.scroll-x {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-inline: var(--space-4);
  margin-inline: calc(var(--space-4) * -1);
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

.scroll-x > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* ===== Выделение ======================================================== */

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

/* ===== Печать =========================================================== */

@media print {
  .app-nav,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}