/* ============================================================
   base — сброс, каркас, типографика
   Правило проекта: НИКАКИХ border/outline на элементах UI.
   Разделение — только заливками и волосяными линиями внутри
   списков (как в референсе).
   ============================================================ */

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

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  background: var(--bg);
}

body {
  font: var(--t-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1, "cv11" 1;
  overscroll-behavior: none;
  overflow: hidden;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
  appearance: none;
}

button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: rgba(95, 227, 180, 0.28); }

:focus-visible {
  box-shadow: 0 0 0 3px rgba(95, 227, 180, 0.5);
  border-radius: var(--r-sm);
}

/* ---- Каркас приложения ---------------------------------- */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  isolation: isolate;
}

.shell {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

/* Фоновая «атмосфера»: живой градиент + плёночное зерно.

   Первая версия строилась на трёх слоях с filter: blur(58px) и
   mix-blend-mode: screen. Выглядело хорошо, но на телефоне это
   худшее, что можно сделать: размытие такого радиуса по области в
   пол-экрана перерисовывается каждый кадр, а режим наложения
   заставляет композитор считывать уже отрисованное. На S20+
   интерфейс лагал ещё до включения записи.

   Сути размытие тут и не добавляло: радиальный градиент сам по
   себе мягкий. Поэтому blur убран совсем, наложение — тоже (на
   чёрном фоне screen для тёмных цветов почти неотличим от
   обычного смешивания), а в профиле lite выключается и движение. */
.ambient {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-6) var(--e-out);
}
.ambient.is-on { opacity: 1; }

.ambient__blob {
  position: absolute;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .5;
  will-change: transform;
}
.ambient__blob--a {
  left: -26%; top: -14%;
  background: radial-gradient(closest-side, rgba(30, 76, 107, .85), rgba(30, 76, 107, 0) 72%);
  animation: drift-a 34s var(--e-in-out) infinite;
}
.ambient__blob--b {
  right: -30%; top: 12%;
  background: radial-gradient(closest-side, rgba(44, 95, 83, .8), rgba(44, 95, 83, 0) 72%);
  animation: drift-b 42s var(--e-in-out) infinite;
}
.ambient__blob--c {
  left: 2%; bottom: -24%;
  background: radial-gradient(closest-side, rgba(74, 53, 80, .8), rgba(74, 53, 80, 0) 72%);
  animation: drift-c 38s var(--e-in-out) infinite;
}

.ambient__grain {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: var(--grain-url);
  background-size: 180px 180px;
}

/* Облегчённый профиль: фон остаётся, движение и зерно уходят.
   Статичный градиент композитор растрирует один раз. */
:root[data-perf="lite"] .ambient__blob {
  animation: none;
  opacity: .42;
}
:root[data-perf="lite"] .ambient__grain { display: none; }

/* ---- Верхняя навигация (как в референсе — сверху) -------- */

.topnav {
  position: absolute;
  top: calc(var(--safe-t) + 10px);
  left: 0; right: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 46px;
  pointer-events: auto;
}

.topnav__btn {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition: color var(--d-3) var(--e-out);
  will-change: transform;
}
.topnav__btn svg { width: 22px; height: 22px; }
.topnav__btn.is-active { color: var(--ink); }

.topnav__rail {
  position: absolute;
  /* left: 0 обязателен. Без него абсолютный элемент внутри
     flex-контейнера с justify-content: center получает статическую
     позицию по центру, и transform из JS (абсолютная координата)
     складывается с ней — ползунок уезжает за край экрана. */
  left: 0;
  bottom: 4px;
  height: 2px;
  width: 26px;
  border-radius: 2px;
  background: var(--ink);
  opacity: .92;
  will-change: transform;
  box-shadow: 0 0 14px rgba(255, 255, 255, .45);
}

/* ---- Слои экранов ---------------------------------------- */

.screens {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  will-change: transform, opacity, filter;
}
.screen.is-mounted { display: flex; }

.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  padding: calc(var(--safe-t) + var(--nav-h) + 18px) var(--gutter)
           calc(var(--dock-h) + var(--safe-b));
}
.scroll::-webkit-scrollbar { width: 0; height: 0; }
.scroll--flush { padding-left: 0; padding-right: 0; }

/* ---- Типографические утилиты ---------------------------- */

.micro {
  font: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.display {
  font: var(--t-display);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.t1 { font: var(--t-title-1); letter-spacing: -0.026em; }
.t2 { font: var(--t-title-2); letter-spacing: -0.02em; }
.t3 { font: var(--t-title-3); letter-spacing: -0.014em; }
.body { font: var(--t-body); }
.body-sm { font: var(--t-body-sm); }
.dim { color: var(--ink-2); }
.dim-2 { color: var(--ink-3); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; } .gap-28 { gap: 28px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }