/**
 * Общий десктоп (браузер + Telegram WebApp): компактная колонка ~16:9.
 * Требует класс html.englee-desktop-nav (navbar.js или desktop-shell.js).
 * Условие класса: ширина≥900 и высота≥520, либо ширина≥900 и высота≥440 при (hover:hover) и (pointer:fine).
 * Не задаёт padding-left под rail — это делает navbar.js (englee-desktop-nav-pad) или страница (teacher).
 */

/* ── Стеки упражнений (.screen как в grammar/quiz/listening/…) ─────────── */
html.englee-desktop-nav .screen.active > * {
  width: 100%;
  max-width: min(100vw - 24px, calc((100dvh - 56px) * 16 / 9));
  box-sizing: border-box;
}

/* ld.html */
html.englee-desktop-nav .app {
  max-width: min(100vw - 24px, calc((100dvh - 56px) * 16 / 9));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Онбординг / логин */
html.englee-desktop-nav .wrap,
html.englee-desktop-nav .login-wrap {
  max-width: min(420px, calc((100dvh - 56px) * 16 / 9));
}

/* Тьютор */
html.englee-desktop-nav .home-wrap,
html.englee-desktop-nav .result-wrap,
html.englee-desktop-nav .done-wrap {
  max-width: min(420px, calc((100dvh - 56px) * 16 / 9));
}

/* Тарифы */
html.englee-desktop-nav .page {
  max-width: min(480px, calc((100dvh - 56px) * 16 / 9));
}

/* Admin-панели (светлая и тёмная общая сетка) */
html.englee-desktop-nav #header,
html.englee-desktop-nav #tabs,
html.englee-desktop-nav .tab-panel.active {
  max-width: min(960px, calc((100dvh - 56px) * 16 / 9));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

html.englee-desktop-nav .stats-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

html.englee-desktop-nav .filter-bar {
  flex-wrap: wrap;
}

/* Расширение: класс на body в subtly_extension_connect.html */
html.englee-desktop-nav body.subtly-connect-body {
  max-width: min(440px, calc((100dvh - 56px) * 16 / 9));
}

/* Простые текстовые страницы (brainstorm-admin и т.п.) */
html.englee-desktop-nav body.englee-static-page {
  max-width: min(720px, calc((100dvh - 56px) * 16 / 9));
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* listening: без scale на карточке (FRONTEND) */
html.englee-desktop-nav .mode-card:active {
  transform: none;
  opacity: 0.92;
}

/* listening.html — выбор режима без класса .screen */
html.englee-desktop-nav #screen-mode {
  max-width: min(100vw - 24px, calc((100dvh - 56px) * 16 / 9));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* reader.html — без класса .screen */
html.englee-desktop-nav #view-reading {
  max-width: min(680px, calc((100dvh - 56px) * 16 / 9));
}
html.englee-desktop-nav #view-library {
  max-width: min(680px, calc((100dvh - 56px) * 16 / 9));
  margin-left: auto;
  margin-right: auto;
}
html.englee-desktop-nav .lib-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}