/* ============================================================
   English from Zero — мобильный слой
   Нижнее меню, компактная шапка и поправки страниц под узкий экран.
   Подключается последним: точечно переопределяет каркас и компоненты.
   ============================================================ */

/* Нижнее меню — только мобильная навигация, на широком экране его нет. */
.mobbar { display: none; }

@media (max-width: 720px) {

  /* ---------- Шапка: верхнее меню переехало вниз ---------- */
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .topnav { display: none; }
  .stats { display: flex; gap: 12px; }
  .stat .stat-unit { display: none; }
  body { font-size: 17px; }

  /* ---------- Нижнее меню ---------- */
  /* Высота меню — токеном: от неё отсчитывает отступ закреплённая панель
     действий урока (css/lesson-workspace.css). */
  :root { --mobbar-h: 62px; }
  .mobbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(20, 17, 28, .96);
    backdrop-filter: saturate(150%) blur(12px);
    border-top: 1px solid var(--line);
  }
  .mobbar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 6px 2px;
    border-radius: var(--r-md);
    color: var(--text-3);
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s;
  }
  .mobbar a .ph { font-size: 1.35rem; }
  .mobbar a:hover { color: var(--text-1); text-decoration: none; }
  .mobbar a.active { color: var(--accent-ink); background: var(--tint-accent); }
  .mobbar-dot {
    position: absolute;
    top: 3px; left: 50%;
    margin-left: 6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--err);
    color: #fff;
    font-size: .66rem; font-weight: 800; line-height: 16px;
    text-align: center;
  }
  .mobbar-dot[hidden] { display: none; }

  /* Место под фиксированное меню, иначе оно закрывает низ страницы. */
  .app { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Главная ---------- */
  .hero { padding: 24px 18px; }
  .hero h1 { font-size: 1.5rem; line-height: 1.22; }
  .hero p { font-size: .98rem; }

  /* ---------- Курс ---------- */
  .unit-card { padding: 14px; }
  .lesson-row { padding: 11px; gap: 11px; }
  .lesson-title { font-size: .97rem; }
  .lesson-meta { font-size: .78rem; }

  /* ---------- Вход, профиль, итоги ---------- */
  .auth-wrap { margin-top: 12px; }
  .auth-card { padding: 22px 18px; }
  .complete-banner { padding: 28px 18px; }
  .empty { padding: 34px 16px; }
  .profile-head { gap: 14px; }
  .profile-ava .ph-fill { font-size: 3rem; }
  .profile-main h1 { font-size: 1.35rem; }

  /* ---------- Урок ---------- */
  .gloss-tip { max-width: calc(100vw - 24px); }
  .exercise-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 560px) {
  /* Словарь: слово и перевод в две строки вместо тесной полосы. */
  .dict-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: baseline;
  }
  .dict-row .d-en { grid-column: 1; grid-row: 1; width: auto; font-size: 1.15rem; }
  .dict-row .d-learned { grid-column: 2; grid-row: 1; width: auto; justify-self: end; }
  .dict-row .d-ru { grid-column: 1; grid-row: 2; font-size: .95rem; }
  .dict-row .d-pos { grid-column: 2; grid-row: 2; width: auto; text-align: right; }

  /* Шапка: остаются иконки, названия разделов живут в нижнем меню. */
  .brand-name { display: none; }
  .user-area .btn-label,
  .user-link span { display: none; }
  .user-area .btn-sm { padding: 8px 11px; }

  /* Плитки статистики: 2×2 вместо трёх в ряд. */
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile { padding: 14px 10px; }
  .stat-tile .num { font-size: 1.45rem; }
  .stat-tile .lbl { font-size: .78rem; }

  .achieve-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .sum-row { font-size: .88rem; }
  .method-card h3 { font-size: .96rem; }
  .method-card p { font-size: .86rem; }
}

@media (max-width: 400px) {
  .mobbar a { font-size: .62rem; }
  .mobbar a .ph { font-size: 1.25rem; }
  .brand-mark { width: 34px; height: 34px; }
  .lesson-xp { display: none; }
}

@media (min-width: 721px) and (max-width: 980px) {
  /* Планшет: верхнее меню остаётся, но без подписей — иначе шапка
     вылезает за экран и появляется горизонтальная прокрутка. */
  .topbar { gap: 10px; padding: 10px 14px; }
  .topnav a span { display: none; }
  .topnav a { padding: 9px 11px; }
  .stats { gap: 10px; }
  .stat .stat-unit { display: none; }
}

@media print {
  .mobbar { display: none !important; }
  .app { padding-bottom: 0; }
}