/* Каркас нового вида. Приложение равно видимой области экрана: корень (#phone) закреплён, его высота и сдвиг ставит 084-viewport.js
   (--vv-h, --vv-top), поэтому при открытой клавиатуре iPhone поле ввода не уезжает. html и body не прокручиваются никогда;
   прокручивается только то, что для этого сделано (лента, листы, настройки).
   Сверху «Разговор · Задачи» и шестерёнка; внизу три раздела «Ассистент · Заметки · Бизнес».
   Только токены из 10-tokens.css: цветов, радиусов и размеров текста числами здесь нет (проверяет tests/web-tokens.test.ts). */

html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0; width: 100%;
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-ui); font-size: var(--fs-strong); line-height: var(--lh-strong); font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}

.stage { height: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-24); }
.phone {
  position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100%);
  display: flex; flex-direction: column; overflow: hidden; overflow: clip;
  background: var(--c-bg); color: var(--c-text);
  --dock-h: var(--nav-h);   /* листы «над полем» (линейка времени) встают над нижними разделами; точную высоту ставит 130-boot.js */
}
@media (min-width: 900px) {
  .stage { padding: var(--sp-24); }
  .phone {
    position: relative; left: auto; right: auto; top: auto; flex: none; width: 400px; height: min(820px, 100%);
    border-radius: var(--r-sheet); border: 1px solid var(--c-line); box-shadow: var(--shadow-pop);
  }
}

/* ---------- верх: переключатель «Разговор · Задачи» и шестерёнка ---------- */
.top {
  flex: none; display: flex; align-items: center; gap: var(--sp-8);
  min-height: calc(var(--tap) + var(--sp-8) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--sp-8) var(--sp-8) var(--gutter);
}
.frame-seg { flex: 1; min-width: 0; display: flex; padding: var(--sp-4); border-radius: var(--r-seg); background: var(--c-field); }
.frame-seg button {
  flex: 1; min-height: var(--seg-h); border-radius: var(--r-seg-in);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium); color: var(--c-text-2);
}
.frame-seg button[aria-selected="true"] {
  background: var(--c-raised); color: var(--c-text); font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-shade) var(--shade-weak), transparent);
}
.top-title { flex: 1; min-width: 0; padding: 0 var(--sp-4); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.icon-btn { flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: var(--r-round); color: var(--c-text-2); }
.icon-btn:active { background: var(--c-field); }

/* ---------- разделы ---------- */
.screens { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* место для блока «Сегодня» (его наполняет следующий этап): пока пусто и без высоты */
.today-slot { flex: none; }
.today-slot:empty { display: none; }

/* заглушка «Скоро»: «Задачи», «Заметки», «Бизнес» */
.stub { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-8); padding: var(--sp-24); text-align: center; }
.stub h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }
.stub p { max-width: 20em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-2); }

/* ---------- внизу три раздела ---------- */
.nav {
  flex: none; display: flex;
  padding: var(--sp-2) 0 env(safe-area-inset-bottom, 0px);
  background: var(--c-surface); border-top: 1px solid var(--c-line);
}
.nav-btn {
  flex: 1; min-height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: var(--fw-medium); color: var(--c-text-2);
}
.nav-btn .ico { width: 23px; height: 23px; stroke-width: 1.9; }
.nav-btn[aria-selected="true"] { color: var(--c-accent); font-weight: var(--fw-semibold); }

/* клавиатура открыта (класс .kb ставит 084-viewport.js): нижние разделы убраны, всё место — ленте и полю */
.phone.kb .nav { display: none; }