/* ═══════════════════════════════════════════════════════════════
   Оболочка приложения: экраны, шапка, нижнее меню, переходы
   ═══════════════════════════════════════════════════════════════ */

.app {
  min-height: 100dvh;
  position: relative;
}

/* Колонка контента одна и та же везде: на телефоне она во всю ширину,
   на широком экране упирается в --app-w и встаёт по центру. Так десктоп
   показывает ровно ту же вёрстку, что и телефон, и правка, сделанная
   один раз, видна в обеих версиях. */
.screens {
  position: relative;
  min-height: 100dvh;
  max-width: var(--app-w);
  margin-inline: auto;
}

/* Экран вкладки. Активный — в потоке, уходящий — абсолютом поверх,
   чтобы обе анимации шли одновременно без «прыжка» layout. */
/* will-change здесь нельзя: он создаёт containing block и ломает
   position:fixed у панели оформления заказа. Включаем только на время анимации. */
.screen {
  position: relative;
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 26px);
}
.screen.leaving {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.pad { padding-inline: var(--gutter); }
/* minmax(0,1fr) обязателен: иначе колонка грид-контейнера растягивается
   под max-content широких детей (ленты чипов) и страница едет вбок */
.stack { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ── шапка ─────────────────────────────────────────────────────
   Прилипает на каждом экране. Пока страница вверху — растворяется
   в фоне; как только контент уезжает под неё, включается стекло,
   иначе текст экрана просвечивает сквозь заголовок.
   ─────────────────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(var(--safe-top) + 10px) var(--gutter) 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  background: linear-gradient(to bottom, var(--bg) 42%, transparent);
  transition: box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
/* Тонировка и линия отделения проявляются плавно, отдельным слоем:
   так шапка не перекрашивается целиком и не дёргает раскладку. */
.header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass);
  border-bottom: 0.5px solid var(--hair);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
  z-index: -1;
}
.header.stuck {
  background: transparent;
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(var(--glass-bright));
  backdrop-filter: blur(24px) saturate(180%) brightness(var(--glass-bright));
}
.header.stuck::after { opacity: 1; }
.header > * { min-width: 0; }
.header h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.1;
}
.header .brand-sub {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── нижнее меню ─────────────────────────────────────────────────
   Центрируем через left/right + auto-поля, а не transform:
   transform на позиционирование конфликтует с любой анимацией,
   которая тоже пишет в transform.
   ─────────────────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 10px);
  margin-inline: auto;
  /* сначала берём ширину колонки, потом отступаем 12px с каждой стороны —
     иначе на широком экране панель вставала вровень с краями колонки,
     а на телефоне отступала, и пропорции у двух версий расходились */
  width: calc(min(100%, var(--app-w)) - 24px);
  height: var(--tabbar-h);
  display: grid;
  grid-auto-flow: column;
  /* minmax(0,1fr) — чтобы 5 вкладок влезали даже на 320px */
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  padding: 6px;
  border-radius: var(--r-xl);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(var(--glass-bright));
  backdrop-filter: blur(34px) saturate(190%) brightness(var(--glass-bright));
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--inner-top);
  transition: transform var(--t-slow) var(--out-expo), opacity var(--t) var(--ease);
}
.tabbar.hidden {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

/* «капля», которая перетекает под активную вкладку */
.tab-pill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  border-radius: calc(var(--r-xl) - 8px);
  background: var(--glass-strong);
  border: 0.5px solid var(--glass-stroke);
  box-shadow: 0 4px 14px -6px rgba(11, 11, 12, 0.36), inset 0 1px 0 var(--spec);
  /* только transform: ширина у всех вкладок одинаковая, а анимация
     ширины дёргала раскладку на каждом кадре перехода */
  transform: translate3d(0, 0, 0);
  transition: transform var(--t-slow) var(--out-expo);
  will-change: transform;
  z-index: 0;
}
.tab-pill.instant { transition: none; }
:root[data-theme='dark'] .tab-pill { background: rgba(255, 255, 255, 0.1); }

.tab {
  position: relative;
  z-index: 3; /* выше бликов .glass::before/::after */
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  height: 100%;
  min-width: 0;
  padding-inline: 2px;
  border-radius: calc(var(--r-xl) - 8px);
  color: var(--ink-3);
  transition: color var(--t) var(--ease);
}
.tab .ic { transition: transform var(--t-slow) var(--out-expo); }
.tab span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
  transition: opacity var(--t) var(--ease);
}
.tab.on { color: var(--ink); }
.tab.on .ic { transform: translateY(-1px) scale(1.06); }
.tab.on span { opacity: 1; }
.tab:active .ic { transform: scale(0.88); }

.tab-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--solid);
  color: var(--solid-ink);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: badge-pop 0.42s var(--out-expo);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.45);
}
@keyframes badge-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ── переходы между вкладками ────────────────────────────────────
   Короткие и только по transform/opacity: переход должен успевать
   закончиться до того, как палец дойдёт до следующей вкладки.
   ─────────────────────────────────────────────────────────────── */
@keyframes screen-in-right {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes screen-in-left {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes screen-out-left {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(-12px, 0, 0); }
}
@keyframes screen-out-right {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(12px, 0, 0); }
}
.anim-in-right { animation: screen-in-right 0.34s var(--out-expo) both; will-change: transform, opacity; }
.anim-in-left { animation: screen-in-left 0.34s var(--out-expo) both; will-change: transform, opacity; }
.anim-out-left { animation: screen-out-left 0.2s var(--ease) both; will-change: transform, opacity; }
.anim-out-right { animation: screen-out-right 0.2s var(--ease) both; will-change: transform, opacity; }

/* появление содержимого «лесенкой» — только на первой отрисовке экрана */
.rise > * {
  animation: rise 0.42s var(--out-expo) both;
}
.rise > *:nth-child(1) { animation-delay: 0.01s; }
.rise > *:nth-child(2) { animation-delay: 0.04s; }
.rise > *:nth-child(3) { animation-delay: 0.07s; }
.rise > *:nth-child(4) { animation-delay: 0.1s; }
.rise > *:nth-child(5) { animation-delay: 0.13s; }
.rise > *:nth-child(n + 6) { animation-delay: 0.16s; }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}

/* горизонтальные ленты */
.hscroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  /* лента прокручивается сама и не тянет за собой всю страницу */
  overscroll-behavior-x: contain;
}
.hscroll > * { scroll-snap-align: start; }