/* ============================================================
   ЭКРАНЫ И ПЕРЕХОДЫ
   ============================================================ */
.section { display: none; }
.section.active {
    display: block;
    animation: md-screen-in var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
}
@keyframes md-screen-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
#lessonSection .section.active { animation: md-tab-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); }
@keyframes md-tab-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   УТИЛИТЫ
   ============================================================ */
.hidden { display: none !important; }
.center { text-align: center; }
.mt-12 { margin-top: 12px; }
.mb-12 { margin-bottom: 12px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.back-btn { display: none; }
.md-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 600px) {
    :root { --app-bar-height: 56px; --nav-bar-height: 72px; }
    .app { padding: 8px 12px 0; }
    .md-top-app-bar__title { font-size: 1.125rem; }
    .menu-grid { grid-template-columns: 1fr; }
    .options { grid-template-columns: 1fr; }
    .card { padding: 16px; border-radius: var(--md-sys-shape-corner-large); }
    /* Кегль карточки на узком экране. Множитель ползунка обязателен и здесь,
       причём по двум причинам сразу: без него на телефоне не работала бы
       настройка размера текста — именно там места и не хватает больше всего.
       Правило перебивает базовое из styles/screens.css (блок идёт позже
       и медиазапрос весит больше), поэтому кегль здесь выписан целиком. */
    .flashcard-word { font-size: calc(2.375rem * var(--md-ref-script-scale)); line-height: 2.875rem; }
    /* У иврита свой кегль и здесь; правило нужно именно тут: ветка иврита из
       screens.css специфичнее базового .flashcard-word и без этого правила
       перебила бы мобильный кегль. */
    :root[data-script="hebrew"] .flashcard-word {
        font-size: calc(2.5rem * var(--md-ref-script-scale));
        /* Множитель — как и в кегле: коробка строки обязана быть не меньше
           букв с огласовкой, иначе чтение под словом липнет к никуду. */
        line-height: calc(3rem * var(--md-ref-script-scale));
    }
    .flashcard-translation { font-size: 1.25rem; line-height: 1.75rem; }
    .question { font-size: 1.125rem; line-height: 1.5rem; }
    /* Кегль условия на узком экране — 1.125rem строки вопроса, с теми же
       двумя множителями, что и в базовом правиле (styles/screens.css).
       Без них здесь терялся языковой шаг: на телефоне условие иврита
       совпадало с греческим — ровно там, где огласовку разглядеть труднее
       всего. */
    .md-prompt-strong { font-size: calc(1.125rem * var(--md-ref-script-size) * var(--md-ref-script-scale)); line-height: 1.3; }
    .md-fab { right: 12px; }
    .md-fab .md-fab__label { display: none; }
    .md-fab { padding: 0 16px; width: 56px; justify-content: center; }
    /* Колонки не ужимаем до нечитаемого: если не влезает — таблица прокручивается */
    .word-details td, .word-details th,
    .grammar-text td, .grammar-text th { padding: 8px 10px; font-size: 0.8125rem; }
    .grammar-h { margin-top: 24px; }
    /* Потолок кегля повторён и здесь: это правило перебивает базовое, и без
       min() подписи снова слипаются на большом общем масштабе (см. базовое
       .md-nav-item__label в styles/base.css). Экран тут уже, потому и
       потолок ниже. */
    .md-nav-item__label { font-size: min(0.6875rem, 12px); letter-spacing: 0.0125rem; }
    .md-nav-item__indicator { width: 56px; }
    .tab-bar { margin: 0 -12px 16px; }
    .chip-set { margin: 0 -12px 8px; padding: 0 12px; }
}