/* ============================================================
   НАСТРОЙКИ: segmented button (выбор темы) и список лицензий
   ============================================================ */
.md-segmented {
    display: flex;
    width: 100%;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    overflow: hidden;
}
.md-segmented button {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    border-left: 1px solid var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.00625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    isolation: isolate;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.md-segmented button:first-child { border-left: 0; }
.md-segmented button { white-space: nowrap; }
.md-segmented button .msym { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
.md-segmented button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--md-sys-color-on-surface);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.md-segmented button:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.md-segmented button:active::before { opacity: var(--md-sys-state-pressed-opacity); }
.md-segmented button[aria-checked="true"] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.md-segmented button[aria-checked="true"] .msym { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; }

.settings-hint {
    margin: 12px 0 0;
    color: var(--md-sys-color-on-surface-variant);
}

/* Буква курса в переключателе «Курс при запуске» — вместо иконки книги.
   Это знак роста самой иконки (.md-segmented button .msym — те же 18px), а не
   текст для чтения: буква стоит рядом с подписью «Греческий», а не вместо неё.
   Поэтому кегль в px и без множителей вообще — иначе на языковом ползунке
   160% буква вырастала до 28.8px и перевешивала подпись, рядом с которой
   стоит. Так же сделан бейдж на стартовом экране (.course-card__glyph,
   styles/screens.css). Исключение из правила «кегль изучаемого языка несёт
   множитель» закреплено в tests/fontscale.test.js. */
.course-glyph.greek,
.course-glyph.hebrew {
    font-size: 18px;
    line-height: 1;
}

/* ============================================================
   РАЗМЕР ТЕКСТА
   ============================================================
   Ползунок — это <input type="range">, а не свой элемент на div'ах: у
   нативного уже есть роль, клавиатура, шаг и перетаскивание, а выглядит он
   по M3 после стилизации псевдоэлементов. Своя реализация всё это повторяла
   бы руками и неизбежно хуже. */
.font-scale {
    margin-top: 20px;
    padding: 16px;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-surface-container-high);
}
.font-scale__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}
.font-scale__label {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.009375rem;
    color: var(--md-sys-color-on-surface);
}
/* «как общий» / «задан отдельно» — состояние, а не значение: оно объясняет,
   почему ползунок стоит именно здесь, поэтому идёт сразу за подписью. */
.font-scale__state {
    flex: 1;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    color: var(--md-sys-color-on-surface-variant);
}
.font-scale__label + .font-scale__value { margin-left: auto; }
.font-scale__value {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.00625rem;
    color: var(--md-sys-color-primary);
    font-variant-numeric: tabular-nums;
}
/* Кнопка возврата к общему. Размер и слой состояния берёт у .md-icon-button —
   там уже 48dp и ::before; здесь только поля, чтобы она не растягивала строку,
   и display при hidden: у .md-icon-button задан inline-flex, а он бьёт hidden. */
.font-scale__reset {
    margin: -12px -12px -12px 0;
}
.font-scale__reset[hidden] { display: none; }

/* --- дорожка и ручка --- */
/* Пройденную часть дорожки в WebKit рисовать нечем: ::-webkit-progress-value
   у range нет. Поэтому заливка — градиент по --slider-fill, его ставит
   syncFontScaleControls(). У Firefox для того же есть ::-moz-range-progress,
   и ему градиент не нужен. */
.md-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    /* Сама дорожка 4dp, но область нажатия — 48dp по M3. */
    height: 48px;
    margin: 4px 0 0;
    background: transparent;
    cursor: pointer;
    --slider-fill: 0%;
}
.md-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--md-sys-shape-corner-full);
    background:
        linear-gradient(to right,
            var(--md-sys-color-primary) var(--slider-fill),
            var(--md-sys-color-surface-container-highest) var(--slider-fill));
}
.md-slider::-moz-range-track {
    height: 4px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-highest);
}
.md-slider::-moz-range-progress {
    height: 4px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-primary);
}
.md-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    /* Дорожка 4dp, ручка 20dp: поднимаем на (20-4)/2, чтобы центры совпали. */
    margin-top: -8px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level1);
    transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level1);
}
/* Слой состояния у ручки: по M3 это ореол вокруг неё, а не смена её цвета.
   Рисуем расплывшейся тенью — отдельного элемента у ручки нет. */
.md-slider:hover::-webkit-slider-thumb { box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.md-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 10px color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }
.md-slider:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }
.md-slider:hover::-moz-range-thumb { box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.md-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 10px color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }
.md-slider:focus { outline: none; }
.md-slider:focus-visible { outline: none; }

/* --- образец --- */
/* Образец берёт размер оттуда же, откуда весь текст: общий масштаб приходит
   от корня, языковой — от .greek/.hebrew (styles/base.css). Ничего пересчитывать
   в JS не нужно, образец меняется вместе с токеном.
   Кегль задан явно и крупнее строки интерфейса: огласовку на 14px не разглядеть,
   а образец — ровно то место, где её и разглядывают. Своим --md-ref-script-min-size
   тут не обойтись: он поднимается только в еврейском курсе, а образец на этом
   экране показывается в обоих. */
.font-scale__preview {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
    font-size: 1rem;
    line-height: 1.5;
    /* Образец растёт вместе с настройкой и не должен тянуть карточку вбок. */
    overflow-wrap: anywhere;
}
/* Множитель приходится повторять здесь. Кегль образца задан явно, а
   .font-scale__sample и .greek/.hebrew (styles/base.css) — одинаковой
   специфичности; settings.css подключается позже, и его font-size молча
   затирает тот, что с множителем. Образец тогда остаётся одного размера при
   любом положении ползунка — то есть перестаёт быть образцом. */
.font-scale__sample { font-size: 1.25rem; line-height: 1.6; }
.font-scale__sample.greek  { font-size: calc(1.25rem * var(--app-greek-scale)); }
.font-scale__sample.hebrew { font-size: calc(1.25rem * var(--app-hebrew-scale)); }

/* --- «Расширенные настройки» --- */
/* Языковые ползунки убраны под раскрывающийся заголовок: в свёрнутом виде
   карточка вдвое короче. Приём тот же, что у примеров в словаре
   (styles/screens.css, .word-details): тело при max-height: 0, открытое —
   фиксированный максимум. Заголовок — <button>, поэтому у него уже есть
   клавиатура и состояние; слой состояния рисует ::before, как у кнопок. */
.settings-disclosure {
    margin-top: 8px;
}
.settings-disclosure__head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    /* Область нажатия 48dp по M3, как у остальных кнопок экрана. */
    min-height: 48px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    color: var(--md-sys-color-primary);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.00625rem;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.settings-disclosure__head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    z-index: -1;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.settings-disclosure__head:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.settings-disclosure__head:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); }
.settings-disclosure__head:active::before { opacity: var(--md-sys-state-pressed-opacity); }
.settings-disclosure__chevron {
    margin-left: auto;
    font-size: 20px;
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}
.settings-disclosure__head[aria-expanded="true"] .settings-disclosure__chevron { transform: rotate(180deg); }
.settings-disclosure__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized);
}
/* С запасом на два языковых блока при максимальном размере текста (1.6):
   у transition по max-height видимая часть растёт, пока он меньше содержимого,
   поэтому запас не влияет на плавность — только на отсутствие обрезки. */
.settings-disclosure__body.open { max-height: 640px; }

/* Языковой ползунок под «Расширенными настройками» — плотнее общего:
   меньше поля блока и образца, отступ между ползунком и образцом короче.
   Кегль образца не уменьшаем: 1.25rem — минимум, на котором огласовка
   ещё различима, и он не зависит от курса (образцы видны в обоих). */
.font-scale--compact {
    margin-top: 12px;
    padding: 12px;
}
.font-scale--compact .font-scale__preview {
    margin-top: 4px;
    padding: 8px 12px;
}

/* Какой курс открыт сейчас — над кнопкой «Сменить курс». */
.settings-course {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-surface-container-high);
}
.settings-course__name {
    display: block;
    font-size: 1.375rem;
    line-height: 1.75rem;
    color: var(--md-sys-color-on-surface);
}
.settings-course__tagline {
    display: block;
    margin-top: 4px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.015625rem;
    color: var(--md-sys-color-on-surface-variant);
}

.license-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.license-item:last-child { border-bottom: 0; }
.license-item__name { font-weight: 500; color: var(--md-sys-color-on-surface); }
.license-item__terms {
    margin-top: 2px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--md-sys-color-on-surface-variant);
}
.license-item a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.license-item a:hover { text-decoration: underline; }
.license-item a .msym { font-size: 16px; }

/* ============================================================
   ШРИФТ ИНТЕРФЕЙСА И РУССКОГО ТЕКСТА
   ============================================================
   Список — та же форма, что у списка лицензий: строки-кнопки, разделённые
   линией. Своя гарнитура ставится не на строку, а на её подпись
   (.font-option__name), и это важно: строка задала бы шрифт и галочке
   .msym — при равной специфичности и более позднем файле она перебила бы
   саму 'Material Symbols Rounded', и вместо знака на экране оказалось бы
   слово «check». Поэтому семейства касаются только подписи. */
.font-list {
    margin-top: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
}
.font-option {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* M3-минимум строки списка: подпись в ней одна. */
    min-height: 48px;
    padding: 8px 16px;
    border: 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: var(--md-sys-color-on-surface);
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.font-option:first-child { border-top: 0; }
.font-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    z-index: -1;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.font-option:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.font-option:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); }
.font-option:active::before { opacity: var(--md-sys-state-pressed-opacity); }
.font-option:focus-visible { outline: none; }
.font-option[aria-checked="true"] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.font-option__name {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.009375rem;
}
/* Отметка выбранного: появляется только у него, как у чипа-фильтра. */
.font-option__check {
    margin-left: auto;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
                transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.font-option[aria-checked="true"] .font-option__check {
    opacity: 1;
    transform: scale(1);
}

/* Каждый вариант подписан собственной гарнитурой, включая «системный»: по
   этой подписи и видно, чем один отличается от другого, а остальное на
   экране меняется сразу после нажатия. Имена семейств стоят в
   styles/tokens.css рядом с @font-face, здесь только токены. */
.font-option[data-font="system"] .font-option__name { font-family: var(--font-ru-system); }
.font-option[data-font="pt-sans"] .font-option__name { font-family: var(--font-ru-pt-sans); }
.font-option[data-font="noto-sans"] .font-option__name { font-family: var(--font-ru-noto-sans); }
.font-option[data-font="inter"] .font-option__name { font-family: var(--font-ru-inter); }
.font-option[data-font="pt-serif"] .font-option__name { font-family: var(--font-ru-pt-serif); }
.font-option[data-font="literata"] .font-option__name { font-family: var(--font-ru-literata); }
.font-option[data-font="source-serif-4"] .font-option__name { font-family: var(--font-ru-source-serif-4); }

/* Мобильные экраны: 4 пункта (Системная/Светлая/Тёмная/Сепия) не
   помещаются с подписями — прячем текст, оставляем только иконки.
   Текст остаётся в разметке и слышен скринридерам — font-size: 0
   убирает подпись только визуально, а не из DOM. */
@media (max-width: 420px) {
    .md-segmented button {
        gap: 0;
        padding: 0 4px;
        font-size: 0;
    }
    .md-segmented button .msym {
        font-size: 20px;
    }
    /* Буква курса — тоже знак, поэтому растёт вместе с иконкой рядом (20px).
       Своё значение здесь обязательно: font-size: 0 у кнопки её не прячет,
       кегль задан явно, и буква остаётся единственной меткой курса, когда
       подписи спрятаны. */
    .course-glyph.greek,
    .course-glyph.hebrew {
        font-size: 20px;
    }
}

/* Широкое окно (expanded): navigation bar превращается в navigation rail */
@media (min-width: 905px) {
    :root { --nav-bar-height: 0px; --rail-width: 88px; }
    .app { padding: 16px 24px 0; }
    .md-content { padding-left: var(--rail-width); padding-bottom: 88px; }
    .md-top-app-bar { left: var(--rail-width); }
    .md-nav-bar {
        top: 0;
        bottom: 0;
        right: auto;
        width: var(--rail-width);
        height: 100%;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        background: var(--md-sys-color-surface);
        box-shadow: none;
        z-index: 25;
    }
    .md-nav-item {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: auto;
        padding: 0;
    }
    .md-snackbar { left: calc(50% + var(--rail-width) / 2); bottom: 24px; }
    .md-fab { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}