/**
 * Общий десктоп (браузер + 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).
 */

/* Колонка контента: max-width без width сжимает блок до ширины детей (капсулы остаются «мобильными») */
html.englee-desktop-nav .content,
html.englee-desktop-nav .page-body {
  width: 100%;
  max-width: var(--englee-col-max, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* TV-shell: fixed scrollport — ширина из inset, не width:100% + left */
html.englee-desktop-nav body.englee-tv-shell > .content,
html.englee-desktop-nav body.englee-tv-shell > .page {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ── Стеки упражнений (.screen как в grammar/quiz/listening/…) ─────────── */
html.englee-desktop-nav .screen.active > * {
  width: 100%;
  max-width: var(--englee-col-max, 100%);
  box-sizing: border-box;
}

/* ld.html */
html.englee-desktop-nav .app {
  max-width: var(--englee-col-max, 100%);
  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, var(--englee-col-max, 100%));
}

/* Тьютор */
html.englee-desktop-nav .home-wrap,
html.englee-desktop-nav .result-wrap,
html.englee-desktop-nav .done-wrap {
  max-width: min(420px, var(--englee-col-max, 100%));
}

/* Тарифы */
html.englee-desktop-nav .page {
  max-width: min(480px, var(--englee-col-max, 100%));
}

/* Admin-панели (светлая и тёмная общая сетка) */
html.englee-desktop-nav #header,
html.englee-desktop-nav #tabs,
html.englee-desktop-nav .tab-panel.active {
  max-width: min(960px, var(--englee-col-max, 100%));
  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, var(--englee-col-max, 100%));
}

/* Простые текстовые страницы (brainstorm-admin и т.п.) */
html.englee-desktop-nav body.englee-static-page {
  max-width: min(720px, var(--englee-col-max, 100%));
  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: var(--englee-col-max, 100%);
  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, var(--englee-col-max, 100%));
}
html.englee-desktop-nav #view-library {
  max-width: min(680px, var(--englee-col-max, 100%));
  margin-left: auto;
  margin-right: auto;
}
html.englee-desktop-nav .lib-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* speaking_dialogue / speaking_roleplay / speaking_monologue —
   разговорные экраны: уже колонка, как мобильная,
   чтобы реплики не разъезжались на всю ширину десктопа */
html.englee-desktop-nav body.speaking-page .screen.active > * {
  max-width: min(560px, var(--englee-col-max, 100%));
}

/* cinema.html — внутри TV-рамки; детали в static/cinema.css */
html.englee-desktop-nav body.cinema-page .screen.active > * {
  max-width: 100%;
}

/* home.html — bento-сетка главной внутри колонки --englee-col-max (TV-bezel + rail) */
html.englee-desktop-nav #tab-home.englee-home-bento .body-wrap {
  width: 100%;
  max-width: var(--englee-col-max, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

html.englee-desktop-nav #tab-home.englee-home-bento .home-feed {
  width: 100%;
  max-width: var(--englee-col-max, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

html.englee-desktop-nav #tab-home.englee-home-bento .tasks-widget {
  min-height: 160px;
}

html.englee-desktop-nav #tab-home.englee-home-bento #hw-widget {
  min-height: 88px;
}