/* Веб-оболочка тренажёра.
   Тот же тренажёр открывается в двух местах: внутри приложения (WebView) и на
   сайте по адресу /app. В приложении правильная раскладка мобильная, с нижним
   меню; на большом экране она выглядит растянутым телефоном, поэтому здесь
   лежит раскладка для веба: верхнее меню, широкий дашборд и многоколоночные
   списки. Все правила включаются только при классе web-shell (его ставит
   app.js, когда моста PovorotNative нет, то есть мы не внутри приложения) и
   только начиная с ширины планшета в альбомной ориентации. Мобильный вид и
   приложение этот файл не трогает. */
/* «Дашборд» это веб-слово: в приложении вкладка называется «Главная». */
.nav-label-web { display: none; }
@media (min-width: 900px) {
  body.web-shell #app {
    max-width: 1320px; padding: 0 40px 48px;
    display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "nav" "main";
  }
  body.web-shell .header { grid-area: head; height: 88px; margin: 0; border-bottom: 1px solid #dce4d8; }
  body.web-shell #main { grid-area: main; min-width: 0; padding-top: 32px; }
  body.web-shell .footer, body.web-shell.immersive .footer { display: none; }
  body.web-shell .navigation {
    grid-area: nav; position: sticky; top: 0; left: auto; bottom: auto; transform: none;
    z-index: 5; width: 100%; max-width: none; flex-direction: row; justify-content: flex-start;
    gap: 6px; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid #dce4d8;
    border-radius: 0; background: #f7f6f0f5; box-shadow: none; backdrop-filter: blur(12px);
  }
  body.web-shell .navigation > button {
    flex: 0 1 auto; flex-direction: row; gap: 9px; min-height: 46px;
    padding: 12px 22px; border-radius: 12px; font-size: 15px; font-weight: 700;
  }
  body.web-shell .navigation > button:hover { background: #eaf0e5; }
  body.web-shell .navigation > button.active { background: #173e34; color: #fff; }
  body.web-shell .navigation > button.active:before { display: none; }
  body.web-shell .navigation > button .ui-icon { width: 20px; height: 20px; }
  body.web-shell .navigation > button.active .ui-icon { filter: brightness(0) invert(1); opacity: 1; }
  body.web-shell .nav-label { display: none; }
  body.web-shell .nav-label-web { display: inline; }
  body.web-shell.immersive #app { padding: 0 40px 48px; max-width: 1320px; }
  body.web-shell.immersive .header, body.web-shell.immersive .navigation { display: flex; }
  body.web-shell #modal { background: #f8f9f3; width: min(760px, calc(100vw - 80px)); border-radius: 24px; margin: auto; max-height: min(880px, 88dvh); box-shadow: 0 32px 100px #132f3840; }
  body.web-shell #modal[data-presentation="full"] { width: min(820px, calc(100vw - 80px)); height: min(880px, 88dvh); }
  body.web-shell #modal .sheet-handle { display: none; }
  body.web-shell #modal .modal-head { padding: 24px 28px 20px; border-bottom: 1px solid #dce4d8; }
  body.web-shell #modal-body { padding: 24px 28px 28px; }
  body.web-shell #modal[open] { animation: web-dialog-in .18s ease-out; }
  body.web-shell #modal::backdrop { background: #13352d66; backdrop-filter: blur(4px); }
  body.web-shell #modal .close-modal:hover { background: #d6e2d0; }
  body.web-shell .dashboard-summary { grid-column: 1 / -1; }
  body.web-shell .dashboard-focus, body.web-shell .dashboard-pro { margin: 0; }
  /* Списки становятся многоколоночными: на широком экране колонка в одну
     карточку оставляет половину страницы пустой. */
  body.web-shell .mode-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
  body.web-shell .action-group.wide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.web-shell .intro { max-width: 720px; }
  body.web-shell .panel { margin: 22px 0; }
  body.web-shell .profile-card { max-width: none; }

  /* Вопрос без иллюстрации: на телефоне пустая панель просто скрыта, на
     широком экране она занимала бы половину страницы. */
  body.web-shell .question-layout.without-picture {
    grid-template-columns: minmax(0, 1fr);
    max-width: 860px;
    margin-inline: auto;
  }
  body.web-shell .question-layout.without-picture .visual-column { display: none; }
}

/* Две колонки внутри раздела появляются, когда для них хватает места:
   на узком окне дашборд и прогресс остаются одной колонкой. */
@media (min-width: 1120px) {
  /* Прогресс: сводка во всю ширину, под ней два столбца разборов. */
  body.web-shell[data-page="progress"] #main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 22px;
    row-gap: 20px;
  }
  body.web-shell[data-page="progress"] .progress-intro,
  body.web-shell[data-page="progress"] .learning-overview { grid-column: 1 / -1; max-width: none; }
  body.web-shell[data-page="progress"] .progress-mentor,
  body.web-shell[data-page="progress"] .progress-actions,
  body.web-shell[data-page="progress"] .panel { margin: 0; max-width: none; }
  body.web-shell[data-page="progress"] .progress-mentor { grid-column: 1; grid-row: 3; }
  body.web-shell[data-page="progress"] .progress-actions { grid-column: 2; grid-row: 3; display: grid; align-content: start; gap: 12px; }
  body.web-shell[data-page="progress"] .topic-overview { grid-column: 1; grid-row: 4; }
  body.web-shell[data-page="progress"] .exam-history { grid-column: 2; grid-row: 4; }
  body.web-shell[data-page="progress"] > .text-button,
  body.web-shell[data-page="progress"] #reset-progress { grid-column: 1 / -1; justify-self: start; }

  /* Профиль: слева аккаунт, справа настройки и разделы. */
  body.web-shell[data-page="profile"] #main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    column-gap: 22px;
    row-gap: 18px;
  }
  body.web-shell[data-page="profile"] .intro { grid-column: 1 / -1; }
  body.web-shell[data-page="profile"] .profile-card { grid-column: 1; grid-row: 2; margin: 0; }
  body.web-shell[data-page="profile"] .page-mentor { grid-column: 1; grid-row: 3; margin: 0; align-self: start; }
  body.web-shell[data-page="profile"] .action-group { grid-column: 2; grid-row: 2 / span 2; display: grid; align-content: start; gap: 12px; }
  body.web-shell[data-page="profile"] .profile-exit { grid-column: 1 / -1; }
}


@media (prefers-reduced-motion: reduce) { body.web-shell #modal[open] { animation: none; } }