/* ==========================================================================
   Директор зоопарка — детский интерфейс.

   Мобильный первым: один столбец, max-width 40rem, базовый шрифт 18px,
   кнопки не ниже 44px, высокий контраст (все пары текст/фон проверены на WCAG AA).
   Никаких внешних ресурсов: шрифты системные, картинок нет, всё рисуется CSS.
   Анимации не длиннее 200мс и полностью отключаются по prefers-reduced-motion.
   ========================================================================== */

/* -------------------------------------------------------------- токены */

:root {
  /* Тёплая «бумажная» палитра зоопарка. */
  --c-bg: #f7efe1;          /* фон страницы — светлый песок */
  --c-paper: #fffdf8;       /* бумага письма и карточек */
  --c-ink: #241c14;         /* основной текст, контраст к --c-bg ≈ 14.6:1 */
  --c-ink-soft: #5c4c3b;    /* второстепенный текст, контраст ≈ 7.3:1 */
  --c-muted: #6b5b4a;       /* подписи, контраст ≈ 6:1 */
  --c-line: #e0d3bd;        /* границы */
  --c-line-strong: #c2ae90;

  --c-accent: #2f6b46;      /* зелёный, белый текст сверху ≈ 6.3:1 */
  --c-accent-dark: #235235;
  --c-accent-soft: #e4f0e6;

  --c-warm: #a35a12;        /* охра для акцентов и ссылок */
  --c-warm-soft: #fbeed6;

  --c-ok: #1f6b3f;
  --c-ok-soft: #e2f1e6;
  --c-warn: #8a5a00;
  --c-warn-soft: #fbeecb;
  --c-danger: #a03616;
  --c-danger-soft: #fbe4dc;
  --c-info: #1b5673;
  --c-info-soft: #e0eef5;

  --c-focus: #1b5673;

  /* Размеры. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size: 18px;
  --measure: 40rem;
  --tap: 44px;
  --radius: 14px;
  --radius-sm: 8px;
  --gap: 1rem;
  --gap-lg: 1.5rem;
  --shadow: 0 2px 0 rgba(36, 28, 20, 0.06), 0 8px 20px rgba(36, 28, 20, 0.08);
  --speed: 160ms;
}

/* ---------------------------------------------------------------- сброс */

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

html {
  font-size: var(--font-size);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
}

img, svg { max-width: 100%; }
svg { height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 0.8em; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-accent-dark); }
a:hover { color: var(--c-accent); }

ul, ol { margin: 0 0 0.8em; padding-left: 1.4em; }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 20;
  padding: 0.7rem 1rem;
  background: var(--c-paper);
  border: 2px solid var(--c-accent);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

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

.site-header {
  background: var(--c-paper);
  border-bottom: 2px solid var(--c-line);
}

.site-header__bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.6rem var(--gap);
  display: flex;
  align-items: center;
  gap: var(--gap);
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  min-height: var(--tap);
}

.brand__mark { font-size: 1.8rem; line-height: 1; }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-weight: 700; font-size: 1.05rem; }
.brand__role { font-size: 0.8rem; color: var(--c-muted); }

.site-header__leave { margin: 0; }

.nav {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 0.5rem 0.5rem;
  display: flex;
  gap: 0.25rem;
}

.nav__item {
  flex: 1 1 0;
  min-height: var(--tap);
  padding: 0.35rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--c-ink-soft);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
}

.nav__item:hover { background: var(--c-warm-soft); color: var(--c-ink); }

.nav__item.is-active {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  color: var(--c-accent-dark);
}

.nav__icon { font-size: 1.2rem; line-height: 1; }

.page {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--gap-lg) var(--gap) 3rem;
}

.page > * + * { margin-top: var(--gap-lg); }

.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gap) 1.5rem;
  color: var(--c-muted);
  font-size: 0.8rem;
  text-align: center;
}

.hx-result:empty { display: none; }

/* --------------------------------------------------------------- секции */

.card {
  background: var(--c-paper);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--gap);
  box-shadow: var(--shadow);
}

.card + .card { margin-top: var(--gap); }

.section__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.stack > * + * { margin-top: var(--gap); }
.stack-sm > * + * { margin-top: 0.5rem; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.muted { color: var(--c-muted); }
.center { text-align: center; }
.lead { font-size: 1.1rem; }

.empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--c-ink-soft);
  background: var(--c-paper);
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------- кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0.6rem 1.2rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed) ease, border-color var(--speed) ease,
              transform var(--speed) ease;
}

.btn--lg { min-height: 52px; font-size: 1.1rem; padding: 0.75rem 1.5rem; width: 100%; }
.btn--sm { min-height: 36px; padding: 0.3rem 0.7rem; font-size: 0.85rem; font-weight: 600; }

/* В детском интерфейсе даже «мелкая» кнопка обязана быть не ниже 44px под палец. */
body.child .btn--sm { min-height: var(--tap); padding: 0.45rem 0.9rem; font-size: 0.9rem; }

.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-dark); color: #fff; }
.btn--primary:active { transform: translateY(1px); }

.btn--secondary {
  background: var(--c-paper);
  color: var(--c-accent-dark);
  border-color: var(--c-accent);
}
.btn--secondary:hover { background: var(--c-accent-soft); }

.btn--quiet {
  background: transparent;
  color: var(--c-ink-soft);
  border-color: var(--c-line-strong);
}
.btn--quiet:hover { background: var(--c-warm-soft); color: var(--c-ink); }

.btn--danger { background: var(--c-danger); color: #fff; }
.btn--danger:hover { background: #8a2d11; color: #fff; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.htmx-request { opacity: 0.7; pointer-events: none; }

/* --------------------------------------------------------------- плашки */

.flash:empty { display: none; }
.flash > * + * { margin-top: 0.5rem; }

.note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  border: 2px solid;
  font-size: 0.95rem;
}

.note__icon { flex: 0 0 auto; line-height: 1.4; }
.note__title { display: block; }

.note--info    { background: var(--c-info-soft);   border-color: #a8cadd; color: var(--c-info); }
.note--success { background: var(--c-ok-soft);     border-color: #a9d3b7; color: var(--c-ok); }
.note--warning { background: var(--c-warn-soft);   border-color: #dfc07a; color: var(--c-warn); }
.note--error   { background: var(--c-danger-soft); border-color: #e0a793; color: var(--c-danger); }

/* --------------------------------------------------------- бейджи и чипы */

.badge,
.chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid;
}

.badge--muted,  .chip--muted   { background: #efe6d6; border-color: var(--c-line-strong); color: var(--c-ink-soft); }
.badge--ok,     .chip--ok      { background: var(--c-ok-soft);     border-color: #a9d3b7; color: var(--c-ok); }
.badge--warning,.chip--warning { background: var(--c-warn-soft);   border-color: #dfc07a; color: var(--c-warn); }
.badge--danger, .chip--danger  { background: var(--c-danger-soft); border-color: #e0a793; color: var(--c-danger); }
.badge--info,   .chip--info    { background: var(--c-info-soft);   border-color: #a8cadd; color: var(--c-info); }

/* -------------------------------------------------------------- аватары */

.avatar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  --avatar-size: 2.6rem;
}

.avatar--sm { --avatar-size: 2.2rem; }
.avatar--lg { --avatar-size: 3.4rem; }

.avatar__mark {
  flex: 0 0 auto;
  width: var(--avatar-size);
  height: var(--avatar-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--avatar-size) * 0.55);
  line-height: 1;
  border-radius: 50%;
  background: var(--c-paper);
  border: 2px solid var(--avatar-color, var(--c-line-strong));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6);
}

.avatar__text { display: flex; flex-direction: column; min-width: 0; }
.avatar__name { font-weight: 700; }
.avatar__role { font-size: 0.8rem; color: var(--c-muted); }
.avatar--lg .avatar__name { font-size: 1.05rem; }

/* ------------------------------------------------------ конверт и письмо */

.envelope {
  --accent: var(--c-line-strong);
  position: relative;
  background: var(--c-paper);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.envelope + .envelope { margin-top: var(--gap); }

.envelope__link {
  display: block;
  padding: 0.9rem 1rem 1rem;
  min-height: var(--tap);
  text-decoration: none;
  color: inherit;
}

.envelope__link:hover { background: var(--c-warm-soft); }

/* «Клапан» конверта — чистая геометрия, без картинок. */
.envelope__flap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--accent);
}

.envelope__body { display: flex; flex-direction: column; gap: 0.4rem; }
.envelope__title { font-size: 1.15rem; font-weight: 700; }
.envelope__meta { font-size: 0.85rem; color: var(--c-muted); }

.envelope__tag {
  align-self: flex-start;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--c-info-soft);
  color: var(--c-info);
}

.envelope__tag--overdue { background: var(--c-warn-soft); color: var(--c-warn); }

.envelope__action {
  margin-top: 0.2rem;
  font-weight: 700;
  color: var(--c-accent-dark);
}

.envelope.is-unread { border-color: var(--accent); }

.envelope.is-unread .envelope__title::after {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--c-warm);
  vertical-align: middle;
}

.envelope.is-overdue { border-style: dashed; }

/* Лист письма: «бумага» с полями и линией сгиба сверху. */
.letter {
  background: var(--c-paper);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--gap-lg) var(--gap);
}

.letter__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
  border-bottom: 2px dashed var(--c-line);
}

.letter__title { font-size: 1.35rem; margin: 0; }

.letter__body {
  font-size: 1.05rem;
  line-height: 1.7;
  white-space: pre-line;
}

.letter__question {
  margin-top: var(--gap-lg);
  padding: var(--gap);
  background: var(--c-accent-soft);
  border-left: 6px solid var(--c-accent);
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  font-weight: 600;
}

.letter__signature {
  margin-top: var(--gap-lg);
  color: var(--c-ink-soft);
}

/* --------------------------------------------------------------- формы */

.field { margin: 0 0 var(--gap); }

.field__label {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.field__required { color: var(--c-danger); }

.field__input {
  width: 100%;
  min-height: var(--tap);
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--c-ink);
  background: #fff;
  border: 2px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
}

.field__input::placeholder { color: #7f6d56; }
.field__input:hover { border-color: var(--c-muted); }
.field__textarea { min-height: 8rem; line-height: 1.6; resize: vertical; }

.field__check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap);
  cursor: pointer;
}

.field__checkbox { width: 1.4rem; height: 1.4rem; accent-color: var(--c-accent); }

.field__hint { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--c-muted); }

.field__error {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-danger);
}

.field.has-error .field__input { border-color: var(--c-danger); background: #fffaf8; }

/* Крупные варианты ответа: радио/чекбоксы как карточки под палец. */
.options { display: flex; flex-direction: column; gap: 0.6rem; }

.option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--tap);
  padding: 0.7rem 0.9rem;
  background: var(--c-paper);
  border: 2px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.05rem;
}

.option:hover { background: var(--c-warm-soft); }
.option input { width: 1.4rem; height: 1.4rem; accent-color: var(--c-accent); }

.option:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  font-weight: 700;
}

/* --------------------------------------------------- «найди ошибки» */

.words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.1rem;
  padding: var(--gap);
  background: var(--c-paper);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  font-size: 1.15rem;
  line-height: 2.2;
}

.word {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;   /* вместе с line-height даёт зону нажатия ≥44px */
  margin: 0;
  cursor: pointer;
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
}

/*
 * Сам флажок не показываем, но и не выключаем: он остаётся в потоке, ловит Tab и
 * пробел и уезжает в форму. `display: none` отобрал бы у слова и клавиатуру, и
 * отправку — а без JavaScript это единственный способ ответить на задание.
 */
.word__box {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Клавиатурный фокус живёт на скрытом флажке — рамку рисуем вокруг слова. */
.word:has(.word__box:focus-visible) {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

/*
 * Знак препинания — такая же кнопка, как слово (на лишнюю запятую тоже нужно уметь
 * нажать), но прижатая к предыдущему слову: иначе предложение читается как
 * «скамейка .», а проверяем мы как раз пунктуацию. Отрицательный отступ съедает
 * gap флекса, поэтому знак не отрывается и не уезжает один на новую строку.
 */
.word--punct {
  padding: 0.35rem 0.2rem;
  margin-left: -0.45rem;
}

.word:hover { background: var(--c-warm-soft); }

/* Состояние «выбрано» показано не только цветом: рамка + подчёркивание + галочка. */
.word:has(.word__box:checked) {
  background: var(--c-warn-soft);
  border-color: var(--c-warn);
  color: var(--c-warn);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.word:has(.word__box:checked)::after {
  content: "✓";
  margin-left: 0.25rem;
  font-size: 0.8em;
}

.words.is-locked .word { cursor: default; }
.words.is-locked .word:hover { background: transparent; }

/* Разбор после проверки. */
.word--hit   { background: var(--c-ok-soft);     border-color: var(--c-ok);     color: var(--c-ok); }
.word--miss  { background: var(--c-warn-soft);   border-color: var(--c-warn);   color: var(--c-warn); border-style: dashed; }
.word--false { background: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger); }

.words__counter {
  flex: 1 0 100%;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--c-muted);
}

/* ------------------------------------------------------------ подсказка */

.hint {
  background: var(--c-warm-soft);
  border: 2px solid #e2c98f;
  border-radius: var(--radius);
  padding: 0.6rem var(--gap);
}

.hint__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  font-weight: 700;
  cursor: pointer;
  color: #6f4a05;
}

.hint__body { padding-top: 0.6rem; }
.hint__svg { background: #fff; border-radius: var(--radius-sm); padding: 0.5rem; }
.hint__svg svg { width: 100%; display: block; }
.hint__text { margin-top: 0.6rem; font-size: 1rem; }

/* ------------------------------------------------ результат проверки */

.result {
  border-radius: var(--radius);
  border: 2px solid;
  padding: var(--gap);
}

.result__title { margin: 0 0 0.4rem; font-size: 1.25rem; }
.result--correct   { background: var(--c-ok-soft);     border-color: var(--c-ok);     color: var(--c-ok); }
.result--partial   { background: var(--c-warn-soft);   border-color: var(--c-warn);   color: var(--c-warn); }
.result--incorrect { background: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger); }
.result__body { color: var(--c-ink); margin: 0 0 0.4rem; }
.result__body:last-child { margin-bottom: 0; }

/* Список правок из `explain()`: по строке на ошибку, а не сплошным абзацем. */
.result__list {
  color: var(--c-ink);
  margin: 0;
  padding-left: 1.2rem;
}

.result__list li { margin-bottom: 0.3rem; }
.result__list li:last-child { margin-bottom: 0; }

/* --------------------------------------------------- прогресс и коллекция */

.progress { display: block; }

.progress__label {
  display: block;
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-bottom: 0.25rem;
}

.progress__track {
  display: block;
  height: 0.8rem;
  background: #e7dcc8;
  border-radius: 999px;
  overflow: hidden;
}

.progress__fill {
  display: block;
  height: 100%;
  background: var(--c-accent);
  border-radius: 999px;
  transition: width 200ms ease;
}

.zone {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: var(--gap);
  background: var(--c-paper);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
}

.zone + .zone { margin-top: 0.8rem; }
.zone__icon { font-size: 2rem; line-height: 1; }
.zone__text { flex: 1 1 auto; min-width: 0; }
.zone__name { margin: 0 0 0.15rem; font-size: 1.1rem; }
.zone__state { margin: 0; font-size: 0.9rem; color: var(--c-muted); }
.zone__hint { margin: 0.2rem 0 0.5rem; font-size: 0.9rem; color: var(--c-ink-soft); }
.zone.is-open { border-color: var(--c-accent); }
.zone.is-locked { background: #f3ece0; }
.zone.is-locked .zone__icon { filter: grayscale(1); opacity: 0.6; }

.collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.7rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.8rem 0.5rem;
  text-align: center;
  background: var(--c-paper);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
}

.item__mark { font-size: 2.2rem; line-height: 1.1; }
.item__name { font-weight: 700; font-size: 0.95rem; }
.item__fact { font-size: 0.8rem; color: var(--c-muted); }
.item__date { font-size: 0.75rem; color: var(--c-muted); }
.item.is-locked { background: #f3ece0; color: var(--c-muted); border-style: dashed; }
.item.is-obtained { border-color: var(--c-accent); }

/* ------------------------------------------------------------ пагинация */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pagination__link {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  color: var(--c-accent-dark);
}

.pagination__link:hover { background: var(--c-warm-soft); }
.pagination__link.is-disabled { opacity: 0.45; pointer-events: none; }
.pagination__state { font-size: 0.9rem; color: var(--c-muted); }

/* ------------------------------------------------------------ экран PIN */

.pin { max-width: 22rem; margin: 2rem auto; text-align: center; }
.pin__mark { font-size: 4rem; line-height: 1; }

.pin__input {
  width: 100%;
  min-height: 60px;
  font-size: 2rem;
  letter-spacing: 0.5rem;
  text-align: center;
  padding: 0.5rem;
  border: 3px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: #fff;
}

/* --------------------------------------------------------- HTMX-индикатор */

.htmx-indicator { opacity: 0; transition: opacity var(--speed) ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ------------------------------------------------------------- адаптив */

/*
 * От 320px всё уже работает; на широких экранах чуть свободнее.
 * На узком экране ужимаются только отступы: базовый шрифт остаётся 18px, как
 * требует §9.3, — мелкий текст на телефоне бьёт ровно по тому ребёнку, ради
 * которого сайт написан.
 */
@media (max-width: 22.5rem) {
  :root { --gap: 0.75rem; --gap-lg: 1rem; }
  .nav__label { font-size: 0.85rem; }
  .collection { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
}

@media (min-width: 45rem) {
  :root { --gap: 1.2rem; --gap-lg: 2rem; }
  .btn--lg { width: auto; min-width: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .nav, .btn { display: none; }
  body { background: #fff; }
}