/* Каркас приложения /app: сброс, текст, загрузка, шапка, экран, движение.
   Цвета и размеры берутся только из tokens.css, здесь ни одного своего цвета. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink);
  font: var(--fs-text)/var(--lh-text) var(--font-ui);
  overflow-wrap: break-word; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--accent-text); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 8px; }
body.lock { overflow: hidden; }
.noscript { padding: var(--sp-6); text-align: center; color: var(--ink-2); }

/* Мелкие подписи: моно, капсом */
.mono-label {
  font: 500 var(--fs-mono) var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Загрузка: знак и название, без движения */
.boot {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-3); background: var(--bg);
}
.boot-logo { display: grid; color: var(--accent); }
.boot-name { font: 600 15px var(--font-display); letter-spacing: -.01em; color: var(--ink-2); }

/* Каркас */
.app { display: flex; min-height: 100dvh; flex-direction: column; }
.views { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; }
.view {
  padding: var(--sp-3) var(--pad-screen) calc(var(--tabbar-h) + 48px + env(safe-area-inset-bottom));
  animation: viewIn var(--t-screen) var(--ease) both;
}
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Шапка: название экрана, «назад», индикатор сохранения, статус */
.topbar {
  position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top);
  background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent; transition: border-color var(--t-screen) linear;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar-in {
  display: flex; align-items: center; gap: var(--sp-2);
  max-width: 560px; margin: 0 auto; min-height: var(--topbar-h); padding: 0 var(--sp-3);
}
.top-title {
  flex: 1; min-width: 0; margin: 0; padding: 0 var(--sp-1);
  font: 600 var(--fs-screen) var(--font-display); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-title.swap { animation: titleIn var(--t-screen) var(--ease) both; }
@keyframes titleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Нижние вкладки: капсула, активная шире и с подписью, индикатор переезжает */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; pointer-events: none;
  padding: 0 var(--tabbar-gap) calc(var(--tabbar-gap) + env(safe-area-inset-bottom));
}
.tabbar-in {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 2px;
  height: var(--tabbar-h); max-width: 560px; margin: 0 auto; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lift); pointer-events: auto;
}
.tab-ind {
  position: absolute; top: 8px; left: 0; width: var(--ind-w, 48px); height: 48px;
  border-radius: var(--r-pill); background: var(--accent-dim);
  transform: translateX(var(--ind-x, 0px));
  transition: transform var(--t-sheet) var(--ease), width var(--t-sheet) var(--ease);
}
.tab {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: none; min-width: var(--tap); height: 48px; padding: 0 12px;
  border-radius: var(--r-pill); text-decoration: none; color: var(--ink-3);
  font: 600 13px var(--font-ui);
  transition: color var(--t-press) linear, padding var(--t-sheet) var(--ease);
}
.tab:active { transform: scale(.97); }
.tab[aria-current="page"] { color: var(--accent-text); padding: 0 16px; }
.tab-l {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width var(--t-sheet) var(--ease), opacity var(--t-screen) linear;
}
.tab[aria-current="page"] .tab-l { max-width: 120px; opacity: 1; }
.tab svg { flex: none; }

/* Общая типографика экранов */
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.screen-lead { color: var(--ink-2); font-size: 14.5px; }
.section-title { padding: var(--sp-2) var(--sp-1) 0; }
.foot { padding: var(--sp-5) var(--sp-2) 0; color: var(--ink-3); font-size: 12px; line-height: 1.6; text-align: center; }
.divider { height: 1px; margin: var(--sp-1) 0; border: 0; background: var(--line); }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Меньше движения: остаётся только прозрачность */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}