/* ОБОЛОЧКА: как устроен экран целиком и как экраны сменяют друг друга.
   Задача этого файла — чтобы приложение не выглядело сайтом в рамке:
   содержимое прижато к безопасным зонам телефона, экраны въезжают
   сбоку, страница не прокручивается вбок. */

.оболочка{
  /* Приложение открывают только с телефона: 320–430px.
     Предел в 430px держит строку читаемой, если открыли с планшета. */
  max-width:430px;
  margin:0 auto;
  padding:
    calc(var(--поле) + env(safe-area-inset-top))
    var(--поле)
    calc(var(--поле) + 24px + env(safe-area-inset-bottom));
  /* Шапка стоит над содержимым и уже отделяет его от края экрана */
  padding-top:var(--поле);
  /* Вырез и скруглённые углы телефона: содержимое не должно под них уезжать */
  padding-left:max(var(--поле), env(safe-area-inset-left));
  padding-right:max(var(--поле), env(safe-area-inset-right));
}

/* Когда снизу стоит таб-бар, под него нужно освободить место:
   иначе последняя кнопка экрана уезжает под панель. */
[data-с-панелью] .оболочка{
  padding-bottom:calc(var(--высота-таба) + 24px + env(safe-area-inset-bottom));
}

.экран{display:none}
.экран[data-видно]{display:block}

/* --- Смена экранов ---
   Въезжает только тот экран, который открывается: анимировать оба сразу
   значит держать в потоке два экрана разной высоты, и страница прыгает.
   Направление ставит экраны.js: вперёд — справа, назад — слева. */
.экран[data-видно]{animation:въехать-справа var(--переход) var(--плавно) both}
[data-ход="назад"] .экран[data-видно]{animation-name:въехать-слева}

@keyframes въехать-справа{
  from{opacity:0;transform:translateX(24px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes въехать-слева{
  from{opacity:0;transform:translateX(-24px)}
  to{opacity:1;transform:translateX(0)}
}

/* Первый экран при запуске проявляется без сдвига: приложение только
   что открылось, «назад» и «вперёд» ещё не было. */
[data-запуск] .экран[data-видно]{animation-name:проявиться}
@keyframes проявиться{from{opacity:0}to{opacity:1}}

/* Внутри теста меняется не экран, а вопрос: он сменяется тем же
   движением, иначе переход между вопросами выглядит рывком. */
.смена{animation:въехать-справа var(--переход) var(--плавно) both}
.смена[data-ход="назад"]{animation-name:въехать-слева}

/* Кому анимация мешает — тот её выключил в настройках телефона.
   Показываем без движения, но показываем. */
@media (prefers-reduced-motion:reduce){
  .экран[data-видно],.смена{animation:проявиться 1ms both}
}

/* Полоса под меткой экрана: отделяет «где я» от заголовка */
.экран > .метка:first-child{
  padding-bottom:12px;
  border-bottom:1px solid var(--нить-едва);
}

hr{border:none;border-top:1px solid var(--нить-едва);margin:24px 0}