/* Колонка содержимого: сама область прокрутки и вертикальный ритм.

   Вынесено из base.css, когда тот перерос двести строк: там страница
   и оболочка приложения, здесь — экран, в котором живёт всё остальное.

   Ритм один на весь продукт (решение №98): от шапки до первого блока
   столько же, сколько между блоками. Пока каждый экран называл свой
   отступ — 24, 16, 8, ноль, — переход между разделами читался
   как переезд в другую программу. */

.screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Вертикаль и щипок оставляем браузеру, горизонталь забираем себе:
     свайп вправо у нас означает «назад», и браузер не должен трактовать
     его по-своему. Без pinch-zoom в списке пропала бы возможность
     приблизить текст. */
  touch-action: pan-y pinch-zoom;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  /* По бокам поля узкие: колонка и так неширокая, а её ширина —
     это ширина списков, карточек и кнопок. Но вплотную к краю
     содержимое липнет к рамке колонки и читается как обрезанное.

     Девять пикселей — величина, названная глазами: пять — карточки
     касались рамки, десять — края съедали пятую часть строки.
     Пересчёт тот же: 9 ÷ 390 × 100.

     Сверху поля нет: его даёт первый блок отступом (правило ниже).
     Полю мешает липкая полка — sticky держит её внутри поля
     родителя, и полка вставала не под шапкой, а ниже. */
  padding: 0 2.31cqw var(--sp-4);
  animation: screen-in var(--base) var(--ease);
}

.screen::-webkit-scrollbar { display: none; }

/* Блоки экрана не липнут: расстояние задаёт экран, а не каждый блок.
   Поимённые списки отступов ломались на первом же новом блоке.
   Правило слабое нарочно — свой ритм экрана его перевесит. */
.screen > * + *,
.screen > [data-role] > * + * { margin-top: var(--sp-4); }

/* От шапки до первого блока — тот же шаг, что и между блоками: один
   ритм на весь продукт. Прежде каждый экран называл свой — 24, 16,
   8, ноль (решение №98). Липкая полка — исключение: она продолжение
   шапки, а отступ переезжает под неё. */
.screen > *:first-child { margin-top: var(--sp-4); }

/* Внутри колонки расстояние держит её собственный gap. Общее правило
   выше добавляло к нему свой шаг, и между блоками выходило двадцать
   восемь пикселей вместо шестнадцати — заметнее всего под полкой
   поиска, где к этому прибавлялась ещё и её тень. */
.screen > .plain > * + * { margin-top: 0; }

.screen > .searchbar:first-child,
.screen > .salebar:first-child,
.screen > :first-child:has(> .searchbar:first-child),
.screen > :first-child:has(> .salebar:first-child) { margin-top: 0; }

/* Заголовок экрана. Раньше он жил в шапке, теперь там кружок роли
   и номер аккаунта: место одно, и знать, каким аккаунтом смотришь,
   важнее. */
.screen__title {
  margin: 0 0 var(--sp-4);
  padding-inline: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 750;
  letter-spacing: -.01em;
}

/* Шапка и меню скрываются атрибутом hidden — тогда отступ и безопасную
   зону берёт на себя сам экран, иначе содержимое прилипнет к краю. */
.layout:not(:has(.appbar:not([hidden]))) .screen {
  padding-top: calc(var(--sp-8) + env(safe-area-inset-top));
}

.layout:not(:has(.tabbar:not([hidden]))) .screen {
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

/* Только прозрачностью: transform делает элемент точкой отсчёта для
   absolute внутри, и круглая кнопка прыгала в конце анимации. */
@keyframes screen-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}