/*
 * Переопределения покупной темы Echooling.
 *
 * Тема рассчитана на английский интерфейс, и часть её решений на русском
 * выглядит неправильно. Правки собраны здесь, а не в самой теме: её файл
 * минифицирован и будет перезаписан при обновлении.
 *
 * Подключается последним, после style.css.
 *
 * Исходник живёт здесь, а не в public/build: тот каталог в .gitignore
 * и целиком перезаписывается сборкой (vite копирует resources/css →
 * public/build/css). Файл, лежащий только там, пропал бы при первом
 * же npm run build и не попал бы в репозиторий вовсе.
 */

/* --------------------------------------------------------------------------
   Заголовки
   -------------------------------------------------------------------------- */

/*
 * Тема ставит text-transform: capitalize, и заголовок превращается в
 * «Офлайн-Обучение В Центре Underground» — с большой буквы каждое слово.
 * В английском это нормальный стиль заголовка, в русском так не пишут.
 */
.breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .breadcrumbs-title,
.breadcrumbs-title {
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Карточка курса в каталоге
   -------------------------------------------------------------------------- */

/*
 * Кликабельна вся карточка.
 *
 * Не оборачиваем её в <a>: внутри уже есть ссылки — уровень и «Подробнее», —
 * а вложенные ссылки невалидны и ломают переход по Tab. Вместо этого
 * растягиваем ссылку заголовка невидимым слоем на всю карточку, а остальные
 * ссылки поднимаем над ним.
 */
.inner-course {
    position: relative;
}

.inner-course .case-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.inner-course .case-img a,
.inner-course .case-bottom a {
    position: relative;
    z-index: 2;
}

.inner-course:hover {
    box-shadow: 0 6px 24px -12px rgba(22, 35, 44, .35);
}

/* Фокус с клавиатуры должен быть виден на всей карточке */
.inner-course .case-title a:focus-visible::after {
    outline: 2px solid #3270fc;
    outline-offset: 2px;
}

/*
 * Мета-строка карточки свёрстана в теме плавающим списком, из-за чего
 * длинное название программы налезало на число разделов.
 */
.course-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    align-items: baseline;
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
    float: none;
}

.course-meta-row li {
    float: none;
    margin: 0;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Черновики и цена
   -------------------------------------------------------------------------- */

.course-draft-badge {
    display: inline-block;
    margin: 0 0 .5rem;
    padding: .15rem .5rem;
    border: 1px solid #c98a00;
    border-radius: 3px;
    color: #8a5f00;
    background: #fff6e2;
    font-size: .75rem;
    line-height: 1.4;
}

/* Ноль означает «цена не назначена», а не «бесплатно» */
.price-unset {
    color: #5b5f64;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Быстрые переходы на карточке курса в кабинете
   -------------------------------------------------------------------------- */

/*
 * Как на карточке у ERC, но с одной поправкой: там иконки появляются
 * только при наведении, а на телефоне наведения не существует — до них
 * просто не добраться. Поэтому скрываем их лишь там, где есть мышь,
 * и всегда показываем на сенсорных экранах.
 */
.ug-quick-links {
    display: flex;
    gap: .35rem;
}

.ug-quick-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9px;
    color: var(--ug-muted, #5b5f64);
    background: var(--ug-tint, #f2f4f9);
    transition: background-color .15s ease, color .15s ease;
}

.ug-quick-links a:hover,
.ug-quick-links a:focus-visible {
    color: #fff;
    background: var(--ug-accent, #3270fc);
}

.ug-quick-links a:focus-visible {
    outline: 2px solid var(--ug-accent, #3270fc);
    outline-offset: 2px;
}

.ug-quick-links svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

/* Есть мышь — прячем до наведения на карточку */
@media (hover: hover) and (pointer: fine) {
    .ug-quick-links {
        opacity: 0;
        transition: opacity .15s ease;
    }

    .ug-course-card:hover .ug-quick-links,
    .ug-course-card:focus-within .ug-quick-links {
        opacity: 1;
    }
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    .ug-quick-links,
    .ug-quick-links a {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Кабинет: общие детали

   Страницы кабинета собраны из одного набора: панель, список, таблица,
   хлебные крошки, пустое состояние, врезка. Без него каждая страница
   набиралась классами Bootstrap как придётся — .card .shadow-sm тут,
   .list-group там, .alert .alert-info в третьем месте, — и выглядели они
   похоже ровно настолько, насколько совпали привычки того, кто их писал.

   Цвета и форма приходят из токенов на .cabinet-body; литералов здесь нет,
   кроме полупрозрачных наложений.
   -------------------------------------------------------------------------- */

/* ── Заголовок страницы ──────────────────────────────────────────────────── */

.ug-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.ug-page-head__title {
    margin: 0;
    color: var(--ug-ink);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
}

/* ── Хлебные крошки ──────────────────────────────────────────────────────── */

.ug-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    margin-bottom: .9rem;
    font-size: .85rem;
    color: var(--ug-muted);
}

.ug-crumbs a {
    color: var(--ug-muted);
    text-decoration: none;
}

.ug-crumbs a:hover,
.ug-crumbs a:focus-visible {
    color: var(--ug-accent);
    text-decoration: underline;
}

.ug-crumbs [aria-current] {
    color: var(--ug-ink);
    font-weight: 600;
}

.ug-crumbs__sep {
    color: var(--ug-line);
}

/* ── Панель ──────────────────────────────────────────────────────────────── */

.ug-panel {
    margin-bottom: 1.25rem;
    border: 1px solid var(--ug-line);
    border-radius: var(--ug-radius);
    background: var(--ug-surface);
    box-shadow: var(--ug-shadow);
    overflow: hidden;
}

.ug-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .9rem 1.15rem;
    /* Наклонная заливка — приём самой темы. */
    background: linear-gradient(138.95deg, var(--ug-tint), rgba(242, 244, 249, 0) 63.81%);
    border-bottom: 1px solid var(--ug-line);
}

.ug-panel__title {
    margin: 0;
    color: var(--ug-ink);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}

.ug-panel__body {
    padding: 1.15rem;
}

/* ── Список строк ────────────────────────────────────────────────────────── */

.ug-list {
    display: flex;
    flex-direction: column;
}

.ug-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .95rem 1.15rem;
    border-top: 1px solid var(--ug-line);
    color: var(--ug-ink);
    text-decoration: none;
}

.ug-list__item:first-child {
    border-top: 0;
}

a.ug-list__item:hover,
a.ug-list__item:focus-visible {
    background: #f7f9fe;
    color: var(--ug-ink);
    text-decoration: none;
}

.ug-list__item--unread {
    background: #f4f7ff;
}

.ug-list__main {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.ug-list__title {
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ug-list__meta {
    color: var(--ug-muted);
    font-size: .82rem;
    line-height: 1.45;
}

/* ── Таблица ─────────────────────────────────────────────────────────────── */

.ug-table-wrap {
    overflow-x: auto;
}

.ug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.ug-table th {
    padding: .7rem 1.15rem;
    border-bottom: 1px solid var(--ug-line);
    color: var(--ug-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.ug-table td {
    padding: .8rem 1.15rem;
    border-bottom: 1px solid var(--ug-line);
    color: var(--ug-ink);
    vertical-align: middle;
}

.ug-table tr:last-child td {
    border-bottom: 0;
}

.ug-table tbody tr:hover {
    background: #f7f9fe;
}

/* Числа должны стоять в колонку, а не плясать по ширине цифр. */
.ug-table .ug-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* ── Пустое состояние ────────────────────────────────────────────────────── */

.ug-empty {
    margin: 0;
    padding: 1.75rem 1.25rem;
    border: 1px dashed var(--ug-line);
    border-radius: var(--ug-radius);
    background: var(--ug-tint);
    color: var(--ug-muted);
    text-align: center;
}

/* ── Врезка ──────────────────────────────────────────────────────────────── */

.ug-note {
    margin: 0 0 1rem;
    padding: .85rem 1.1rem;
    border-left: 3px solid var(--ug-accent);
    border-radius: 0 8px 8px 0;
    background: #f4f7ff;
    color: var(--ug-ink);
    font-size: .9rem;
    line-height: 1.5;
}

.ug-note--ok {
    border-left-color: #12714a;
    background: #eef8f2;
}

.ug-note--warn {
    border-left-color: var(--ug-crimson);
    background: #fdecef;
}

.ug-note p:last-child,
.ug-note ul:last-child {
    margin-bottom: 0;
}

/* ── Расписание ──────────────────────────────────────────────────────────── */

.ug-schedule {
    margin-bottom: 2rem;
}

.ug-page-head__title--sub {
    font-size: 1.15rem;
    font-weight: 700;
}

.ug-page-head__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    font-size: .85rem;
}

.ug-page-head__aside a {
    color: var(--ug-accent);
    text-decoration: none;
}

.ug-page-head__aside a:hover,
.ug-page-head__aside a:focus-visible {
    text-decoration: underline;
}

.ug-list__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .15rem;
}

/* ── Формы ───────────────────────────────────────────────────────────────── */

.ug-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    margin-top: .75rem;
}

.ug-form:first-child {
    margin-top: 0;
}

.ug-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
}

.ug-field label {
    color: var(--ug-muted);
    font-size: .82rem;
}

.ug-details {
    margin: .75rem 0;
}

.ug-details summary {
    color: var(--ug-muted);
    font-size: .82rem;
    cursor: pointer;
}

.ug-details summary:hover {
    color: var(--ug-accent);
}

.ug-pagination {
    margin-top: 1.25rem;
}

/* ── Лента курса ─────────────────────────────────────────────────────────── */

.ug-post__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.ug-post__marks {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Закреплённый пост помечен полосой слева, а не рамкой целиком: рамка
   спорит с границей самой панели. */
.ug-post--pinned {
    border-left: 3px solid var(--ug-accent);
}

.ug-comments {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--ug-line);
}

.ug-comment {
    padding-left: .85rem;
    border-left: 2px solid var(--ug-line);
}

/* ── Прохождение работы ──────────────────────────────────────────────────── */

/*
 * Шапка держится на виду всё время, пока ученик листает вопросы: таймер,
 * спрятанный вверху страницы, бесполезен ровно тогда, когда он нужен.
 */
.ug-attempt__bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: .9rem 1.15rem;
    border: 1px solid var(--ug-line);
    border-radius: var(--ug-radius);
    background: var(--ug-surface);
    box-shadow: var(--ug-shadow);
}

.ug-attempt__title {
    margin: 0;
    color: var(--ug-ink);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}

.ug-attempt__timer {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: 30px;
    background: var(--ug-tint);
    color: var(--ug-muted);
    font-size: .8rem;
    white-space: nowrap;
}

.ug-attempt__timer b {
    color: var(--ug-ink);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* Последние пять минут: цвет меняется, чтобы это заметили боковым зрением. */
.ug-attempt__timer.is-urgent {
    background: #fdecef;
    color: #b0072f;
}

.ug-attempt__timer.is-urgent b {
    color: var(--ug-crimson);
}

.ug-attempt__submit {
    display: flex;
    justify-content: flex-end;
    margin: 1.5rem 0 2rem;
}

/* ── Варианты ответа ─────────────────────────────────────────────────────── */

.ug-options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/*
 * Вариант целиком — область нажатия. На телефоне попасть по кружку
 * радиокнопки трудно, а по строке — нет.
 */
.ug-option {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0;
    padding: .7rem .9rem;
    border: 1px solid var(--ug-line);
    border-radius: 8px;
    background: var(--ug-surface);
    line-height: 1.45;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.ug-option:hover {
    border-color: #c9d5f8;
    background: #f7f9fe;
}

.ug-option input {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .18rem;
    accent-color: var(--ug-accent);
}

.ug-option:has(input:checked) {
    border-color: var(--ug-accent);
    background: #f0f5ff;
}

.ug-option:focus-within {
    outline: 2px solid var(--ug-accent);
    outline-offset: 2px;
}

/* ── Поля ввода ──────────────────────────────────────────────────────────── */

.ug-input {
    display: block;
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid var(--ug-line);
    border-radius: 8px;
    background: var(--ug-surface);
    color: var(--ug-ink);
    font: inherit;
    font-size: .95rem;
}

.ug-input:focus {
    border-color: var(--ug-accent);
    outline: 2px solid rgba(50, 112, 252, .25);
    outline-offset: 0;
}

.ug-hint {
    margin: .45rem 0 .75rem;
    color: var(--ug-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.ug-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

/* ── Балл за работу ──────────────────────────────────────────────────────── */

.ug-score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.15rem;
}

.ug-score__value {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    color: var(--ug-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ug-score__value b {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
    font-weight: 700;
}

.ug-score__value span {
    color: var(--ug-muted);
    font-size: 1.05rem;
}

.ug-score__side {
    display: flex;
    flex: 1 1 240px;
    flex-direction: column;
    gap: .8rem;
    min-width: 0;
}

.ug-section-title {
    margin: 1.75rem 0 1rem;
    color: var(--ug-ink);
    font-size: 1.15rem;
    font-weight: 700;
}

.ug-question__body {
    margin: 0 0 .85rem;
    color: var(--ug-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

/* Правильный ответ помечен цветом, а не только подписью: глазами его ищут
   быстрее, чем читают. */
.ug-answer--correct {
    color: #12714a;
    font-weight: 600;
}

/* ── Произвольный текст ──────────────────────────────────────────────────── */

/*
 * Инструкции к заданию и содержимое страниц урока пишет преподаватель, и
 * приходят они как текст с переносами. Без этих правил абзацы слипаются,
 * а списки теряют отступ.
 */
.ug-prose {
    color: var(--ug-ink);
    font-size: .95rem;
    line-height: 1.65;
}

.ug-prose > :first-child {
    margin-top: 0;
}

.ug-prose > :last-child {
    margin-bottom: 0;
}

.ug-prose a {
    color: var(--ug-accent);
}

/* ── Пары «подпись — значение» ───────────────────────────────────────────── */

.ug-dl {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: .5rem 1.25rem;
    margin: 0;
}

.ug-dl dt {
    color: var(--ug-muted);
    font-size: .85rem;
    font-weight: 400;
}

.ug-dl dd {
    margin: 0;
    color: var(--ug-ink);
    font-size: .92rem;
}

@media (max-width: 575.98px) {
    .ug-dl {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .ug-dl dd {
        margin-bottom: .6rem;
    }

    .ug-panel__body,
    .ug-list__item {
        padding-inline: .9rem;
    }

    .ug-table th,
    .ug-table td {
        padding-inline: .9rem;
    }
}

/* --------------------------------------------------------------------------
   Кабинет: страница урока
   -------------------------------------------------------------------------- */

.ug-lesson {
    display: grid;
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
}

/*
 * Оглавление держится в поле зрения, пока листаешь длинную страницу: иначе
 * на середине текста непонятно, где ты в уроке и сколько осталось.
 */
.ug-lesson__nav {
    position: sticky;
    top: 1rem;
    margin-bottom: 0;
}

.ug-lesson__counter {
    color: var(--ug-muted);
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ug-lesson__progress {
    padding: .75rem 1.15rem;
    border-bottom: 1px solid var(--ug-line);
}

.ug-lesson__page {
    width: 100%;
    gap: .6rem;
    border-width: 1px 0 0;
    border-style: solid;
    border-color: var(--ug-line);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ug-lesson__page:hover {
    background: #f7f9fe;
}

.ug-lesson__page.is-current {
    background: #f0f5ff;
}

.ug-lesson__page-index {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--ug-tint);
    color: var(--ug-muted);
    font-size: .75rem;
    font-weight: 700;
}

.ug-lesson__page.is-current .ug-lesson__page-index {
    background: var(--ug-accent);
    color: #fff;
}

.ug-lesson__page-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ug-lesson__page.is-current .ug-lesson__page-title {
    font-weight: 600;
}

.ug-lesson__page-done {
    flex: 0 0 auto;
    color: #12714a;
    font-size: .8rem;
}

/*
 * Содержимое прокручивается внутри себя, а не страницей целиком: на этом
 * же элементе висит слушатель scroll, которым отмечается «страница
 * прочитана» (см. lessonPageTracker). Уберёшь прокрутку — отметка
 * перестанет ставиться.
 */
.ug-lesson__content {
    max-height: 70vh;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .ug-lesson {
        grid-template-columns: minmax(0, 1fr);
    }

    .ug-lesson__nav {
        position: static;
    }

    /*
     * Прокрутку внутри содержимого на узком экране НЕ снимаем, хотя соблазн
     * есть. На этом же элементе висит слушатель scroll, которым ставится
     * отметка «страница прочитана»; без переполнения его единственная
     * проверка срабатывает сразу при открытии, и урок считался бы
     * пройденным, не будучи прочитанным.
     */
}

/* --------------------------------------------------------------------------
   Кабинет: список курсов

   Первый экран после входа. Раньше это были карточки Bootstrap как есть:
   .card .shadow-sm, синяя полоса прогресса, жёлтый badge. Рядом со страницей
   курса, переписанной 11.09.2026, они выглядели из другой системы — разные
   скругления, разные цвета состояний, разная типографика.
   -------------------------------------------------------------------------- */

.ug-cabinet-head {
    margin-bottom: 1.5rem;
}

.ug-cabinet-head__title {
    margin: 0;
    color: var(--ug-ink);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
}

.ug-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.ug-course-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ug-line);
    border-radius: var(--ug-radius);
    background: var(--ug-surface);
    box-shadow: var(--ug-shadow);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ug-course-card:hover,
.ug-course-card:focus-within {
    border-color: #d5daf5;
    box-shadow: var(--ug-shadow-hover);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .ug-course-card,
    .ug-course-card:hover,
    .ug-course-card:focus-within {
        transform: none;
        transition: none;
    }
}

/* Курс, за который ещё не заплатили, помечен полосой слева: карточка
   выглядит так же, но видно, что она пока не рабочая. */
.ug-course-card--pending {
    border-left: 3px solid var(--ug-crimson, #d2093c);
}

.ug-course-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .7rem;
    padding: 1.15rem 1.15rem .9rem;
}

.ug-course-card__title {
    margin: 0;
    color: var(--ug-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ug-course-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.ug-course-card__note {
    margin: 0;
    color: var(--ug-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.ug-course-card__progress {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: auto;
}

.ug-course-card__progress-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: var(--ug-muted);
    font-size: .8rem;
}

.ug-course-card__progress-row b {
    color: var(--ug-ink);
    font-variant-numeric: tabular-nums;
}

.ug-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--ug-line);
    overflow: hidden;
}

.ug-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ug-navy) 0%, var(--ug-accent) 100%);
}

.ug-course-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .85rem 1.15rem 1.15rem;
}

.ug-btn--warning {
    background: var(--ug-crimson, #d2093c);
    border-color: var(--ug-crimson, #d2093c);
    color: #fff;
}

.ug-btn--warning:hover,
.ug-btn--warning:focus-visible {
    background: transparent;
    color: var(--ug-crimson, #d2093c);
}

.ug-state--pending {
    background: #fdecef;
    color: #b0072f;
}

@media (max-width: 575.98px) {
    .ug-course-card__foot {
        flex-direction: column;
        align-items: stretch;
    }

    .ug-course-card__foot .ug-btn {
        justify-content: center;
    }

    .ug-quick-links {
        justify-content: space-between;
    }

    .ug-quick-links a {
        flex: 1 1 auto;
    }
}

/* --------------------------------------------------------------------------
   Баннер курса
   -------------------------------------------------------------------------- */

/*
 * У наших баннеров субъект справа, а слева намеренно светлое пустое поле —
 * туда ложится заголовок. Заголовок в теме белый, и на светлом фоне он
 * нечитаем, поэтому кладём затемнение градиентом: плотное слева, где текст,
 * и прозрачное справа, где человек.
 */
/*
 * Баннер курса: картинка — подложка, высоту задаёт текст.
 *
 * У темы наоборот: картинка лежит в потоке и определяет высоту, а текст
 * висит абсолютом по центру. Со штатными баннерами это сходится, с нашими —
 * нет, и ломается сразу с двух сторон:
 *
 *   — если текста больше, чем картинки (телефон: баннер 150px, заголовок
 *     в три строки 215px), лишнее срезается `overflow: hidden`;
 *   — если растянуть блок под текст, не тронув картинку, под ней остаётся
 *     пустота, и сквозь затемняющую подложку видно белый фон страницы —
 *     та самая серая полоса.
 *
 * Поэтому картинку выносим из потока и растягиваем на весь блок
 * (`object-fit: cover`), а высоту оставляем содержимому. Тогда баннер
 * подстраивается под любой заголовок на любой ширине.
 */
.breadcrumbs-wrap.has-course-hero {
    position: relative;
    display: flex;
    align-items: center;

    /*
     * Минимум, а не фиксированная высота: короткому заголовку баннер
     * всё равно нужен заметный, длинный — растянет блок сам. Ступени
     * подобраны так, чтобы на широком экране сохранить пропорцию,
     * близкую к штатным баннерам темы (1920×700).
     */
    min-height: 320px;
}

@media (min-width: 768px) {
    .breadcrumbs-wrap.has-course-hero {
        min-height: 420px;
    }
}

@media (min-width: 992px) {
    .breadcrumbs-wrap.has-course-hero {
        min-height: 520px;
    }
}

.breadcrumbs-wrap.has-course-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.breadcrumbs-wrap.has-course-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(16, 26, 33, .78) 0%,
        rgba(16, 26, 33, .62) 38%,
        rgba(16, 26, 33, .18) 70%,
        rgba(16, 26, 33, .05) 100%
    );
    pointer-events: none;
}

/*
 * Текст должен лежать НАД затемнением.
 *
 * Только z-index. Тема держит .breadcrumbs-inner абсолютно
 * спозиционированным и центрирует по вертикали; своего `position` здесь
 * задавать нельзя. Однажды тут стояло `position: relative` — блок вернулся
 * в поток, высота обёртки стала «картинка + текст» вместо «картинка», и
 * под баннером повисала серая полоса: это белый фон страницы, видимый
 * сквозь затемняющую подложку, которая растянута на всю обёртку.
 *
 * z-index действует и на абсолютном элементе — менять position было незачем.
 */
/*
 * Текст возвращаем в поток: именно он теперь задаёт высоту блока.
 * top и transform сбрасываем — это остатки центрирования темы, при
 * `position: static` они не действуют, но мешают читать правило.
 */
.breadcrumbs-wrap.has-course-hero .breadcrumbs-inner {
    position: relative;
    top: auto;
    transform: none;
    z-index: 1;
    padding: 80px 0;
}

/* На узких экранах текст идёт поверх центра — затемняем равномерно */
@media (max-width: 767px) {
    .breadcrumbs-wrap.has-course-hero::after {
        background: rgba(16, 26, 33, .62);
    }

    /* Отступы темы рассчитаны на широкий экран: на телефоне баннер от них
       занимает пол-экрана и отжимает содержимое курса вниз. */
    .breadcrumbs-wrap.has-course-hero .breadcrumbs-inner {
        padding: 40px 0;
    }
}

/* --------------------------------------------------------------------------
   Шапка сайта
   -------------------------------------------------------------------------- */

/*
 * Тема свёрстана под английские подписи и плавающие пункты. Русские слова
 * длиннее, меню перестаёт помещаться в строку, и блок пользователя уезжает
 * на второй ряд под логотип — выглядит как сломанная вёрстка.
 *
 * Приводим шапку к обычной строке: логотип, меню и пользователь на одной
 * линии, перенос — только когда места действительно нет.
 */
.react-main-menu nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.react-main-menu .menu-toggle {
    flex: 0 0 auto;
    margin: 0;
}

.react-main-menu .logo {
    padding: 0;
    margin: 0;
}

.react-main-menu .react-inner-menus {
    flex: 1 1 auto;
    justify-content: flex-end;
}

/*
 * Пункты меню — гибкая строка вместо float.
 *
 * ⚠️ Только на широком экране, и это не украшательство.
 *
 * На мобильном меню прячет скрипт темы: он вешает на #backmenu класс
 * hide-menu, а тот объявлен как display: none. Но `.react-menus.home` —
 * два класса против одного, специфичность выше, и display: flex
 * побеждал. В итоге бургер показывался, а меню под ним никуда не
 * убиралось и уезжало за край экрана.
 *
 * Порог 992px совпадает с resizeWidth: 991 в resources/js/menus.js.
 * Менять — только вместе с ним, иначе появится полоса ширин, где ни то
 * ни другое не действует.
 */
@media (min-width: 992px) {
    .react-menus.home {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .25rem 1.6rem;
        float: none;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .react-menus.home > li {
        float: none;
        margin: 0;
        padding: 0;
        /* Выпадающие подменю позиционируются относительно пункта */
        position: relative;
    }

    .react-menus.home > li > a {
        padding: .35rem 0;
        white-space: nowrap;
    }
}

/* Шапка стала компактнее — вернём немного воздуха */
.react-main-menu {
    padding: 16px 0;
}

@media (max-width: 991px) {
    .react-main-menu .react-inner-menus {
        justify-content: flex-start;
    }

    /*
     * Бургер — к правому краю, логотип остаётся слева.
     *
     * По умолчанию тема ставит их вплотную, и кнопка прилипает к
     * логотипу, а справа зияет пустота: читается как случайность
     * вёрстки, а не как решение. Логотип слева, управление справа —
     * расклад, которого люди ждут и в котором не ищут кнопку глазами.
     *
     * Разводим по краям в самом .menu-toggle, а не переносом в разметке:
     * порядок элементов в DOM остаётся прежним, и на широком экране,
     * где этот запрос не действует, ничего не меняется.
     */
    .react-main-menu .menu-toggle {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
}

/* Логотип: фиксируем разумную высоту, ширина по пропорции */
.react-main-menu .logo img {
    height: 48px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   Страница курса в кабинете ученика

   Все классы с префиксом ug-. Это не украшательство: тема куплена целиком
   и подключена целиком, а её style.css занимает ходовые имена. Так, у неё
   есть .course-section { background:#262930 } — блок с лендинга. Пока наши
   разделы назывались так же, тёмный фон темы прилипал к заголовку раздела,
   и прочитать его было нельзя.

   Тему не правим, поэтому свои имена держим в своём пространстве.
   -------------------------------------------------------------------------- */

/*
 * Палитра взята у самой темы, а не придумана заново.
 *
 * Кабинет сначала был сделан в бирюзе (#0f6466) — цвете, которого на сайте
 * нет вовсе. Витрина построена на синем #3270fc с тёмно-синим #00306e и
 * малиновым акцентом #d2093c; кнопки у неё скруглены в таблетку, карточки
 * лежат на мягкой размытой тени, заливки — бледный #f2f4f9. Ученик ходит
 * между витриной и кабинетом в один клик, и разнобой там виден сразу.
 *
 * Числа ниже — самые частые цвета в style.css темы, а не подобранные на глаз.
 */
.cabinet-body,
.ug-course-crumbs,
.ug-course-head,
.ug-course-materials {
    --ug-accent: #3270fc;
    --ug-accent-dark: #2a5fd8;
    --ug-navy: #00306e;
    --ug-crimson: #d2093c;
    --ug-ink: #0f1216;
    --ug-muted: #5b5f64;
    --ug-line: #ebebf1;
    --ug-surface: #fff;
    --ug-tint: #f2f4f9;
    --ug-radius: 10px;
    --ug-shadow: 0 20px 60px rgba(0, 15, 56, .08);
    --ug-shadow-hover: 0 24px 70px rgba(0, 15, 56, .14);
}

/* ── Хлебные крошки ──────────────────────────────────────────────────────── */

.ug-course-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-bottom: .9rem;
    font-size: .85rem;
    color: var(--ug-muted);
}

.ug-course-crumbs a {
    color: var(--ug-muted);
    text-decoration: none;
}

.ug-course-crumbs a:hover,
.ug-course-crumbs a:focus-visible {
    color: var(--ug-accent);
    text-decoration: underline;
}

.ug-course-crumbs [aria-current] {
    color: var(--ug-ink);
    font-weight: 600;
}

/* ── Шапка курса ─────────────────────────────────────────────────────────── */

/*
 * Шапка курса — единственное тёмное пятно в кабинете, и это намеренно:
 * страница курса глубже всего в иерархии, и ей нужен якорь, за который
 * цепляется взгляд. Градиент тот же, что у героя витрины: #00306e → #3270fc.
 *
 * Внутри шапки текст белый, поэтому токены цвета там переопределены, а не
 * прописаны литералами — иначе кольцо прогресса и подписи пришлось бы
 * красить каждое по отдельности.
 */
.ug-course-head {
    --ug-ink: #fff;
    --ug-muted: rgba(255, 255, 255, .75);
    --ug-line: rgba(255, 255, 255, .25);
    --ug-surface: transparent;

    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    padding: 1.9rem 1.75rem;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #00306e 0%, #3270fc 100%);
    box-shadow: 0 18px 45px rgba(0, 48, 110, .25);
    overflow: hidden;
}

/* Мягкий световой круг в правом верхнем углу — чтобы плашка не читалась
   как плоский прямоугольник заливки. */
.ug-course-head::after {
    content: "";
    position: absolute;
    top: -55%;
    right: -12%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.ug-course-head > * {
    position: relative;
    z-index: 1;
}

.ug-course-head__text {
    flex: 1 1 320px;
    min-width: 0;
}

.ug-course-head__title {
    margin: 0 0 1.1rem;
    color: var(--ug-ink);
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

.ug-course-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
}

.ug-course-head__done {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border-radius: 10px;
    background: #e7f6ee;
    color: #12714a;
    font-size: .92rem;
    font-weight: 600;
}

/* Кольцо прогресса: conic-gradient вместо картинки и скрипта. */
.ug-course-head__progress {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}

.ug-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: conic-gradient(var(--ug-accent) calc(var(--ug-ring-value, 0) * 1%), var(--ug-line) 0);
}

.ug-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--ug-surface);
}

.ug-ring__value {
    position: relative;
    color: var(--ug-ink);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ug-ring__value small {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ug-muted);
}

.ug-ring__caption {
    color: var(--ug-muted);
    font-size: .8rem;
    text-align: center;
}

.ug-ring__caption b {
    color: var(--ug-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Внутренности шапки на тёмном ─────────────────────────────────────────
   Синяя кнопка на синем градиенте не читается, поэтому внутри шапки главная
   кнопка белая, вторая — прозрачная с белой рамкой, а дуга прогресса белая.
   -------------------------------------------------------------------------- */

.ug-course-head .ug-btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--ug-navy, #00306e);
    box-shadow: 0 8px 20px rgba(0, 15, 56, .2);
}

.ug-course-head .ug-btn--primary:hover,
.ug-course-head .ug-btn--primary:focus-visible {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .88);
    color: var(--ug-navy, #00306e);
}

.ug-course-head .ug-btn--primary small {
    opacity: .7;
}

.ug-course-head .ug-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.ug-course-head .ug-btn--ghost:hover,
.ug-course-head .ug-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

.ug-course-head .ug-ring {
    background: conic-gradient(#fff calc(var(--ug-ring-value, 0) * 1%), rgba(255, 255, 255, .22) 0);
}

/*
 * Сердцевину кольца на градиенте нужно чем-то закрыть, иначе дуга сливается
 * с заливкой и фигура читается как круговая диаграмма, а не как кольцо.
 * Сплошной цвет тут не подходит — под кольцом градиент, и любой литерал
 * совпадёт с ним только в одной точке. Поэтому полупрозрачная тёмная
 * подложка: она темнеет вместе с градиентом и всюду даёт одинаковый контраст
 * белой цифре.
 */
.ug-course-head .ug-ring::before {
    background: rgba(0, 26, 64, .45);
    border: 1px solid rgba(255, 255, 255, .14);
}

.ug-course-head .ug-course-head__done {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */

/*
 * Форма кнопки взята у темы: .react-btn — таблетка со скруглением 30px,
 * рамка в цвет заливки и инверсия при наведении. Повторяем её здесь, а не
 * ссылаемся на класс темы: у него свои отступы под текст в одну строку, а
 * главной кнопке кабинета нужен ещё и подзаголовок.
 */
.ug-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.4rem;
    border: 2px solid transparent;
    border-radius: 30px;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ug-btn:active {
    transform: translateY(1px);
}

.ug-btn--primary {
    background: var(--ug-accent);
    color: #fff;
}

.ug-btn--primary:hover,
.ug-btn--primary:focus-visible {
    background: var(--ug-accent-dark);
    color: #fff;
}

.ug-btn--primary small {
    display: block;
    white-space: normal;
    margin-top: .1rem;
    font-size: .78rem;
    font-weight: 400;
    opacity: .85;
}

.ug-btn--ghost {
    border-color: var(--ug-line);
    background: var(--ug-surface);
    color: var(--ug-ink);
}

.ug-btn--ghost:hover,
.ug-btn--ghost:focus-visible {
    border-color: var(--ug-accent);
    color: var(--ug-accent);
}

.ug-btn--sm {
    padding: .42rem .8rem;
    font-size: .84rem;
}

.ug-btn:focus-visible {
    outline: 2px solid var(--ug-accent);
    outline-offset: 2px;
}

/* ── Панель материалов ───────────────────────────────────────────────────── */

.ug-course-materials [x-cloak] {
    display: none !important;
}

.ug-course-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-bottom: 1rem;
}

.ug-course-toolbar__title {
    margin: 0;
    color: var(--ug-ink);
    font-size: 1.15rem;
    font-weight: 700;
}

.ug-course-toolbar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.ug-segmented {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--ug-line);
    border-radius: 11px;
    background: var(--ug-tint);
}

.ug-segmented button,
.ug-segmented a {
    padding: .4rem .85rem;
    text-decoration: none;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ug-muted);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ug-segmented button.is-active,
.ug-segmented a.is-active {
    background: var(--ug-surface);
    color: var(--ug-ink);
    box-shadow: 0 1px 2px rgba(16, 36, 44, .14);
}

.ug-segmented button:focus-visible,
.ug-segmented a:focus-visible {
    outline: 2px solid var(--ug-accent);
    outline-offset: 1px;
}

/* ── Раздел ──────────────────────────────────────────────────────────────── */

.ug-course-section {
    margin-bottom: 1rem;
    border: 1px solid var(--ug-line);
    border-radius: var(--ug-radius);
    background: var(--ug-surface);
    box-shadow: var(--ug-shadow);
    overflow: hidden;
}

.ug-course-section__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .9rem 1.1rem;
    /* Наклонная заливка — приём самой темы (.react-contact-page .address-sec). */
    background: linear-gradient(138.95deg, var(--ug-tint), rgba(242, 244, 249, 0) 63.81%);
    color: var(--ug-ink);
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.ug-course-section__head--locked {
    cursor: default;
    color: var(--ug-muted);
}

.ug-course-section__head:focus-visible {
    outline: 2px solid var(--ug-accent);
    outline-offset: -2px;
}

.ug-course-section__index {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    background: var(--ug-accent);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.ug-course-section__head--locked .ug-course-section__index {
    background: #dfe3ef;
    color: var(--ug-muted);
}

.ug-course-section__title {
    flex: 1 1 auto;
    min-width: 0;
}

.ug-course-section__count {
    flex: 0 0 auto;
    color: var(--ug-muted);
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ug-course-section__chevron {
    flex: 0 0 auto;
    width: .52rem;
    height: .52rem;
    margin-right: .15rem;
    border-right: 2px solid var(--ug-muted);
    border-bottom: 2px solid var(--ug-muted);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.ug-course-section__chevron.is-collapsed {
    transform: rotate(-45deg);
}

.ug-course-section__reason {
    margin: 0;
    padding: .8rem 1.1rem;
    color: var(--ug-muted);
    font-size: .86rem;
    line-height: 1.45;
}

/* ── Материал раздела ────────────────────────────────────────────────────── */

.ug-course-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon body state";
    align-items: start;
    gap: .25rem .95rem;
    padding: .95rem 1.1rem;
    border-top: 1px solid var(--ug-line);
    color: var(--ug-ink);
    text-decoration: none;
    transition: background-color .15s ease;
}

.ug-course-item:first-child {
    border-top: 0;
}

a.ug-course-item:hover,
a.ug-course-item:focus-visible {
    background: #f7f9fe;
    color: var(--ug-ink);
    text-decoration: none;
}

a.ug-course-item:focus-visible {
    outline: 2px solid var(--ug-accent);
    outline-offset: -2px;
}

.ug-course-item--locked {
    color: var(--ug-muted);
}

.ug-course-item__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--ug-tint);
    color: var(--ug-accent);
    font-size: .95rem;
}

.ug-course-item--assessment .ug-course-item__icon {
    background: #fdf5e7;
    color: #96650a;
}

.ug-course-item--locked .ug-course-item__icon {
    background: #eef2f3;
    color: var(--ug-muted);
}

.ug-course-item__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.ug-course-item__title {
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ug-course-item__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.ug-chip {
    display: inline-flex;
    align-items: center;
    padding: .16rem .5rem;
    border-radius: 999px;
    background: var(--ug-tint);
    color: var(--ug-muted);
    font-size: .75rem;
    line-height: 1.4;
    white-space: nowrap;
}

.ug-chip--danger {
    background: #fdecea;
    color: #b42318;
}

.ug-course-item__bar {
    display: block;
    max-width: 260px;
    height: 4px;
    margin-top: .1rem;
    border-radius: 999px;
    background: var(--ug-line);
    overflow: hidden;
}

.ug-course-item__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ug-accent);
}

.ug-course-item__description {
    display: block;
}

.ug-course-item__description-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ug-muted);
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
}

.ug-course-item__description-btn:hover,
.ug-course-item__description-btn:focus-visible {
    color: var(--ug-accent);
}

.ug-course-item__description-text {
    display: block;
    margin-top: .3rem;
    color: var(--ug-muted);
    font-size: .85rem;
    line-height: 1.5;
}

/* ── Состояние материала ─────────────────────────────────────────────────── */

.ug-state {
    grid-area: state;
    display: inline-flex;
    align-items: center;
    align-self: start;
    padding: .26rem .6rem;
    border-radius: 999px;
    background: var(--ug-tint);
    color: var(--ug-muted);
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.ug-state--completed {
    background: #e7f6ee;
    color: #12714a;
}

.ug-state--completed-late {
    background: #fdf3e2;
    color: #96650a;
}

.ug-state--in-progress {
    background: #e8f1fb;
    color: #1d5f96;
}

.ug-state--incomplete {
    background: #fdecea;
    color: #b42318;
}

/* ── Телефон ─────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .ug-course-head {
        padding: 1.15rem;
        border-radius: 14px;
    }

    .ug-course-head__progress {
        flex-direction: row;
        gap: .85rem;
    }

    .ug-ring {
        width: 72px;
        height: 72px;
    }

    .ug-ring::before {
        inset: 7px;
    }

    .ug-ring__value {
        font-size: 1.1rem;
    }

    .ug-ring__caption {
        text-align: left;
    }

    .ug-btn--primary {
        width: 100%;
    }

    .ug-course-toolbar__controls {
        width: 100%;
        justify-content: space-between;
    }

    .ug-course-section__head {
        padding: .8rem .85rem;
        font-size: .95rem;
    }

    /* Плашка состояния уходит под заголовок: в одну строку с ним она
       ужимает название до двух-трёх слов. */
    .ug-course-item {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon body"
            "state state";
        gap: .5rem .7rem;
        padding: .85rem;
    }

    .ug-state {
        justify-self: start;
    }
}

/*
 * Alpine x-show против утилит Bootstrap.
 *
 * x-show прячет элемент, выставляя ему inline `display: none`. Но утилиты
 * Bootstrap — d-flex, d-block, d-inline-flex — объявлены с !important и
 * побеждают inline-стиль. В итоге Alpine честно считает элемент скрытым
 * (_x_isShown = false, style="display:none"), а он остаётся на экране.
 *
 * Так и вышло с фильтром на странице курса: разделы прятались, потому что
 * у <section> нет d-flex, а элементы списка — нет, потому что есть.
 *
 * Правило возвращает inline-стилю приоритет там, где его поставил Alpine.
 * Селектор по атрибуту, а не по классу: он попадает ровно в те элементы,
 * которые Alpine скрыл, и ни в какие другие.
 */
[x-show][style*="display: none"],
[x-show][style*="display:none"] {
    display: none !important;
}

/*
 * Переключатель языка в меню под бургером.
 *
 * Основной стоит в верхней полосе, но тема прячет её на узком экране
 * целиком — на телефоне сменить язык было нечем. Второй лежит пунктом
 * меню и показывается только там, где первый недоступен.
 *
 * Порог тот же 992px, что у раскладки меню и у resizeWidth в menus.js:
 * все трое обязаны совпадать, иначе появится ширина, где не видно ни
 * одного переключателя либо видно сразу два.
 */
/*
 * Селектор с дочерней связью, а не просто класс: тема объявляет
 * `.react-menus > li { display: block }`, и это специфичнее одного
 * класса. С коротким селектором пункт показывался и на десктопе —
 * переключателей становилось два.
 */
.react-menus > .language-menu-item {
    display: none;
}

@media (max-width: 991px) {
    .react-menus > .language-menu-item {
        display: block;
        padding: .5rem 0;
    }

    .language-menu-item .language_switcher {
        float: none;
        width: 100%;
        max-width: 160px;
    }
}

/*
 * Каталог курсов на телефоне.
 *
 * Тема свёрстана под десктоп: отступы pt---110 и два ряда по mb-50
 * рассчитаны на широкий экран. На телефоне это давало почти пустой
 * первый экран — баннер, воздух, развёрнутые фильтры, — и до первого
 * курса приходилось листать.
 */

/* Пока Alpine не проснулся, свёрнутое не должно мигать развёрнутым. */
[x-cloak] {
    display: none !important;
}

/* Кнопка-переключатель нужна только там, где есть что сворачивать. */
.catalog-filters__toggle {
    display: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.catalog-filters__chevron {
    display: inline-block;
    transition: transform .2s;
}

.catalog-filters__chevron.is-open {
    transform: rotate(180deg);
}

@media (max-width: 991px) {
    /* Кнопка вместо подписи: подпись ничего не делает. */
    .catalog-filters__toggle {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
    }

    .catalog-filters__label {
        display: none;
    }

    /* Десктопные отступы темы — втрое меньше. */
    .catalog-filters.pt---110 {
        padding-top: 24px;
    }

    .catalog-filters .container.pb---70 {
        padding-bottom: 16px;
    }

    .catalog-filters .shorting__course,
    .catalog-filters .shorting__course2 {
        margin-bottom: 16px !important;
    }

    /* Поля во всю ширину: обрезанные по 220px на телефоне неудобны. */
    .catalog-filters__fields {
        text-align: left !important;
        margin-top: 12px;
    }

    .catalog-filters__fields .from-control {
        display: block !important;
        width: 100%;
        max-width: none !important;
        margin: 0 0 8px !important;
    }

    /* Счётчик и сортировка — в одну строку, а не в два ряда. */
    .catalog-filters .shorting__course2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
    }

    .catalog-filters .shorting__course2 > [class*="col-"] {
        width: auto;
        flex: 0 1 auto;
        text-align: left !important;
        padding: 0;
    }
}

/* --------------------------------------------------------------------------
   Главная: фон блока-героя
   -------------------------------------------------------------------------- */

/*
 * Тема заливает баннер главной серо-лиловым #f3f4fa. Фотография на нём —
 * вырезанная по контуру, с прозрачным фоном, и на сером она читается как
 * наклейка на подложке. На белом контур пропадает, и человек стоит прямо
 * на странице — так и было задумано.
 *
 * Селектор повторяет теминый (`.home-five.banner`, два класса), поэтому
 * побеждает порядком: overrides.css подключается после style.css.
 * Фоновый узор banner-bg.png остаётся — он полупрозрачный (альфа 26 из
 * 255) и на белом даёт ту же лёгкую текстуру, что и на сером.
 */
.home-five.banner {
    background-color: #fff;
}

/* --------------------------------------------------------------------------
   Шапка: разделитель перед блоком входа
   -------------------------------------------------------------------------- */

/*
 * Вертикальная черта — это border-left блока входа. Справа от неё тема
 * даёт 30px внутреннего отступа, слева не даёт ничего: черта упирается
 * в последний пункт меню вплотную (измерено — зазор ровно 0).
 *
 * Отступ снаружи, а не увеличенный padding у пункта меню: пункт общий
 * для всех, а черта одна, и разъезжаться они не должны.
 */
.react-login {
    margin-left: 30px;
}