/* Движок «Выбор варианта»: вопрос читается вслух по нажатию. */

.question {
  cursor: pointer;
}

/* Ряд предметов для счёта: знак от знака отстоит на пятую часть кегля,
   и длинный ряд переносится между знаками, а не посреди склейки. */
.question--predmety {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.12em 0.22em;
}

.question--stroka {
  display: block;
  letter-spacing: 0.22em;
}

/* ---------- клетчатый узор ---------- */

/*
 * Симметрия: слева половина узора, справа пустое поле, а варианты второй
 * половины стоят кнопками (docs/28-vpr.md). Клетка задана в `vmin`, доле
 * меньшей стороны экрана: тренажёр открывается и в колонке страницы, и во
 * весь экран, и узор в обоих случаях должен читаться целиком.
 */

.uzor-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
}

.uzor {
  display: grid;
  grid-template-columns: repeat(
    var(--uzor-w, 4),
    var(--kletka, clamp(12px, 3.1vmin, 26px))
  );
  gap: 2px;
}

.uzor-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(46, 42, 79, 0.18);
  border-radius: 3px;
  background: var(--card);
}

.uzor-cell.is-on {
  border-color: transparent;
  background: var(--theme-accent);
}

/* Ось складывания: по ней узор и зеркалят. */
.uzor-os {
  align-self: stretch;
  width: 3px;
  margin: 0 8px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(46, 42, 79, 0.45) 0 8px,
    transparent 8px 14px
  );
}

.uzor--empty .uzor-cell {
  border-style: dashed;
}

/*
 * На кнопке клетка меньше, чем в задании: четыре узора в две строки должны
 * помещаться в окно вместе с самим заданием. Высота окна 720 — рабочий
 * случай, а не край: варианты, ушедшие под сгиб, ребёнок не ищет.
 */
.option--uzor {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.option--uzor .uzor {
  --kletka: clamp(10px, 2.2vmin, 18px);
}

/*
 * Таблица наблюдений: дневник погоды, как в тетради (docs/28-vpr.md).
 * Первый столбец — тоже шапка: в нём стоит, что именно измеряли, и без
 * выделения строка «Осадки» читается такой же клеткой, как «дождь».
 */
.tablica {
  margin: 0 auto 16px;
  border-collapse: collapse;
  font-size: clamp(13px, 2.6vmin, 17px);
}

.tablica th,
.tablica td {
  padding: 6px clamp(6px, 1.8vmin, 14px);
  border: 1px solid rgba(46, 42, 79, 0.22);
  text-align: center;
}

.tablica thead th,
.tablica tbody th {
  background: rgba(46, 42, 79, 0.06);
  font-weight: 600;
}

/*
 * Контурная карта мира: буквы на материках, а не подписи под ними.
 *
 * Ширина мерится и от высоты окна: карта вдвое шире, чем выше, и в окне
 * 720 (рабочий случай, а не край) карта в 520 пикселей вместе с вопросом
 * в три строки уводила варианты под сгиб — нажать их можно было только
 * прокруткой, а прокручивать ребёнок не догадывается.
 */
.karta {
  display: block;
  width: min(100%, 520px, 39vh);
  height: auto;
  margin: 0 auto 16px;
  border-radius: 10px;
}