/* ============================================================
   БАЗА + ТИПОГРАФИЧЕСКАЯ ШКАЛА M3
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Общий масштаб текста берётся здесь, у корня, а не у body — и это
   принципиально: вся шкала типографики M3 ниже задана в rem, а rem считается
   от html. Масштаб на body не дошёл бы ни до одного её класса, и «общий
   размер» двигал бы только те редкие места, где кегль наследуется.
   100% — размер шрифта по умолчанию в браузере, то есть настройка самого
   пользователя; мы её множим, а не заменяем. Ползунок ставит --app-font-scale
   (js/fontscale.js), по умолчанию 1 — тогда правило ничего не меняет. */
html {
    -webkit-text-size-adjust: 100%;
    font-size: calc(100% * var(--app-font-scale));
    /* Страница не «пружинит» на iOS: упругий откат сдвигает вниз весь интерфейс
       вместе с fixed-элементами (app bar, nav bar), и на упражнении «Написание
       буквы» поле уезжает вниз прямо под рукой. none у корня гасит откат и
       pull-to-refresh, обычную прокрутку не трогая. */
    overscroll-behavior: none;
}

body {
    /* Шрифт интерфейса и русского текста выбирается в настройках: выбор кладёт
       --font-ru на <html> (js/fontpicker.js), по умолчанию это прежний стек.
       Текст изучаемого языка этот токен не трогает — у него своя гарнитура и
       правила .script/.greek/.hebrew ниже. */
    font-family: var(--font-ru);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    /* body-large */
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.03125rem;
    min-height: 100vh;
    min-height: 100dvh;
    /* Вбок не ездит вся страница — ездит только то, что для этого сделано
       (.md-table-scroll, .tab-bar, .chip-set). clip, а не hidden: hidden сделал
       бы body контейнером прокрутки и сломал бы window.scrollY у app bar. */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* --- Material Symbols --- */
.msym {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
    user-select: none;
}
.msym.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.msym.sm { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.msym.lg { font-size: 32px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; }

/* --- текст изучаемого языка --- */
/* .script — язык текущего курса: и шрифт, и направление письма приходят
   токенами, которые переключает <html data-script data-script-dir>. Этим
   классом размечает свои строки JS, поэтому одно и то же место разметки
   годится обоим курсам и не приходится плодить ветки по курсу.

   Явные метки языка (.greek, .hebrew, lang=) сильнее токенов: греческое
   слово внутри еврейского материала остаётся греческим. Так же размечается
   ячейка таблицы в data/*.js — <td lang="he">.

   isolate, а не просто direction: еврейское слово внутри русской фразы —
   это вставка, и её знаки препинания принадлежат фразе, а не вставке.
   Без изоляции точка в конце предложения уезжает к левому краю слова.

   Кегль: em, а не rem — вставка живёт внутри чужой строки и должна остаться
   с ней соразмерной, а ползунок языка только добавляет к этому множитель.
   Шага кегля (--md-ref-script-size) здесь нет намеренно: он нужен там, где
   текст изучаемого языка — сам предмет, и задают его себе правила по месту
   (.grammar-p/.grammar-h/.grammar-list .script и .md-prompt-strong
   в styles/screens.css). Внутри прозы материала обёртку ставит
   wrapScriptRuns() (js/lesson.js).

   Комментарий обязан остаться одним: лишний закрывающий маркер обрывает его
   раньше времени, и следующее правило браузер съедает целиком вместе
   с селектором. Именно так однажды исчезло правило ниже. Следит за этим
   проверка «в стилях нет закрывающего маркера вне комментария»
   в tests/static.test.js. */
.script {
    font-family: var(--md-ref-typeface-script);
    direction: var(--md-ref-script-direction);
    unicode-bidi: isolate;
    font-size: calc(1em * var(--md-ref-script-scale));
}
/* Курсив в упражнении письма: тот же текст изучаемого языка, но рукописной
   гарнитурой. Класс
   составной — .script.script--cursive, — а не одиночный, и это не украшение:
   правила компонентов сами объявляют гарнитуру (.letter-write-reveal__forms
   в styles/screens.css) и лежат в файле, который подключается позже. При равной
   специфичности одиночный класс им проигрывает молча, и курсив остался бы
   печатным начертанием — ровно та ловушка, что описана у кеглей ниже.
   Кегль здесь не задаётся: он уже с множителем ползунка на самом элементе. */
.script.script--cursive {
    font-family: var(--md-ref-typeface-cursive-hebrew);
}
/* Здесь язык задан содержимым, а не курсом, — значит и множитель берётся
   именной, а не «текущего курса». Иначе греческая строка в еврейской главе
   поехала бы за еврейским ползунком. */
.greek, .grammar-text table td:lang(el), [lang="grc"] {
    font-family: var(--md-ref-typeface-greek);
    direction: ltr;
    unicode-bidi: isolate;
    font-size: calc(1em * var(--app-greek-scale));
}
.hebrew, .grammar-text table td:lang(he), [lang="he"] {
    font-family: var(--md-ref-typeface-hebrew);
    direction: rtl;
    unicode-bidi: isolate;
    font-size: calc(1em * var(--app-hebrew-scale));
}

/* --- шкала типографики --- */
.md-display-large   { font-size: 3.5625rem; line-height: 4rem;     font-weight: 400; letter-spacing: -0.015625rem; }
.md-display-medium  { font-size: 2.8125rem; line-height: 3.25rem;  font-weight: 400; letter-spacing: 0; }
.md-display-small   { font-size: 2.25rem;   line-height: 2.75rem;  font-weight: 400; letter-spacing: 0; }
.md-headline-large  { font-size: 2rem;      line-height: 2.5rem;   font-weight: 400; letter-spacing: 0; }
.md-headline-medium { font-size: 1.75rem;   line-height: 2.25rem;  font-weight: 400; letter-spacing: 0; }
.md-headline-small  { font-size: 1.5rem;    line-height: 2rem;     font-weight: 400; letter-spacing: 0; }
.md-title-large     { font-size: 1.375rem;  line-height: 1.75rem;  font-weight: 400; letter-spacing: 0; }
.md-title-medium    { font-size: 1rem;      line-height: 1.5rem;   font-weight: 500; letter-spacing: 0.009375rem; }
.md-title-small     { font-size: 0.875rem;  line-height: 1.25rem;  font-weight: 500; letter-spacing: 0.00625rem; }
.md-body-large      { font-size: 1rem;      line-height: 1.5rem;   font-weight: 400; letter-spacing: 0.03125rem; }
.md-body-medium     { font-size: 0.875rem;  line-height: 1.25rem;  font-weight: 400; letter-spacing: 0.015625rem; }
.md-body-small      { font-size: 0.75rem;   line-height: 1rem;     font-weight: 400; letter-spacing: 0.025rem; }
.md-label-large     { font-size: 0.875rem;  line-height: 1.25rem;  font-weight: 500; letter-spacing: 0.00625rem; }
.md-label-medium    { font-size: 0.75rem;   line-height: 1rem;     font-weight: 500; letter-spacing: 0.03125rem; }
.md-label-small     { font-size: 0.6875rem; line-height: 1rem;     font-weight: 500; letter-spacing: 0.03125rem; }

h1, h2, h3, h4 { font-weight: 400; color: var(--md-sys-color-on-surface); }
h2 { font-size: 1.75rem; line-height: 2.25rem; letter-spacing: 0; }
h3 { font-size: 1.375rem; line-height: 1.75rem; letter-spacing: 0; }
h4 { font-size: 1rem; line-height: 1.5rem; font-weight: 500; letter-spacing: 0.009375rem; }
b, strong { font-weight: 600; }

a { color: var(--md-sys-color-primary); }

::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

/* --- фокус: видимое кольцо по спецификации M3 --- */
:focus-visible {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: 2px;
}

/* ============================================================
   КАРКАС ПРИЛОЖЕНИЯ
   ============================================================ */
:root {
    --app-bar-height: 64px;
    --nav-bar-height: 80px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

.md-content {
    padding-top: calc(var(--app-bar-height) + var(--safe-top));
    /* +88px — запас, чтобы последний элемент списка не оказался под FAB */
    padding-bottom: calc(var(--nav-bar-height) + var(--safe-bottom) + 88px);
    min-height: 100dvh;
}

.app {
    max-width: 840px;
    margin: 0 auto;
    padding: 8px 16px 0;
}

/* ============================================================
   TOP APP BAR (small)
   ============================================================ */
.md-top-app-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: calc(var(--app-bar-height) + var(--safe-top));
    padding: var(--safe-top) 4px 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
/* on-scroll: контейнерный тон + тень (поведение M3 «scrolled») */
.md-top-app-bar.scrolled {
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--md-sys-elevation-level2);
}
.md-top-app-bar__title {
    flex: 1;
    min-width: 0;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 400;
    letter-spacing: 0;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.md-top-app-bar__leading { width: 48px; display: flex; justify-content: center; }
.md-top-app-bar__leading:empty { width: 12px; }

/* ============================================================
   ICON BUTTON (standard / filled tonal)
   ============================================================ */
.md-icon-button {
    position: relative;
    isolation: isolate;
    width: 48px;
    height: 48px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-icon-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    z-index: -1;
}
.md-icon-button:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.md-icon-button:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); }
.md-icon-button:active::before { opacity: var(--md-sys-state-pressed-opacity); }
.md-icon-button--tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* ============================================================
   NAVIGATION BAR (bottom)
   ============================================================ */
.md-nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    height: calc(var(--nav-bar-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--md-sys-color-surface-container);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    box-shadow: var(--md-sys-elevation-level2);
    transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}
.md-nav-item {
    flex: 1;
    /* Без этого flex-элемент не ужимается ниже ширины своего содержимого,
       и многоточие на подписи никогда не сработает. */
    min-width: 0;
    max-width: 160px;
    height: var(--nav-bar-height);
    padding: 12px 0 16px;
    border: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.md-nav-item__indicator {
    position: relative;
    isolation: isolate;
    width: 64px;
    height: 32px;
    border-radius: var(--md-sys-shape-corner-full);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}
.md-nav-item__indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    z-index: -1;
}
.md-nav-item:hover .md-nav-item__indicator::before { opacity: var(--md-sys-state-hover-opacity); }
.md-nav-item:active .md-nav-item__indicator::before { opacity: var(--md-sys-state-pressed-opacity); }
/* Подпись назначения растёт вместе с интерфейсом, но не безгранично: ряд
   имеет фиксированную высоту по M3 (--nav-bar-height), а назначений в нём
   пять — максимум, который спецификация допускает. На общем масштабе 160%
   пять подписей перестают помещаться в ширину телефона и слипаются в одну
   строку. Потолок задан в px нарочно: он не должен ехать за тем же
   масштабом, который и ограничивает. Многоточие — страховка на узких
   экранах и для длинных слов. */
.md-nav-item__label {
    font-size: min(0.75rem, 14px);
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-nav-item.active { color: var(--md-sys-color-on-surface); }
.md-nav-item.active .md-nav-item__indicator {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.md-nav-item.active .msym { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ============================================================
   FAB (extended, контекстный)
   ============================================================ */
.md-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--nav-bar-height) + var(--safe-bottom) + 16px);
    z-index: 19;
    min-height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: var(--md-sys-elevation-level3);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.00625rem;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
                opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
    z-index: -1;
}
.md-fab:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.md-fab:active::before { opacity: var(--md-sys-state-pressed-opacity); }
.md-fab:hover { box-shadow: var(--md-sys-elevation-level4); }
.md-fab.hidden-fab {
    transform: scale(0.6);
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   RIPPLE (state layer + всплеск нажатия)
   ============================================================ */
.md-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: 0.12;
    pointer-events: none;
    animation: md-ripple-in var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}
@keyframes md-ripple-in {
    to { transform: scale(1); opacity: 0; }
}