/* Set a background image by replacing the URL below */
body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.card {
    box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
    border-width: 0;
    transition: all .2s
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(26, 54, 126, 0.125);
    border-radius: .25rem
}

.card-shadow:hover {
    transform: scale(1.01);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .06);
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem
}

.vertical-timeline {
    width: 100%;
    position: relative;
    padding: 1.5rem 0 1rem
}

.vertical-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 67px;
    height: 100%;
    width: 4px;
    background: #e9ecef;
    border-radius: .25rem
}

.vertical-timeline-element {
    position: relative;
    margin: 0 0 1rem
}

.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
    visibility: visible;
    animation: cd-bounce-1 .8s
}

.vertical-timeline-element-icon {
    position: absolute;
    top: 0;
    left: 60px
}

.vertical-timeline-element-icon .badge-dot-xl {
    box-shadow: 0 0 0 5px #fff
}

.badge-dot-xl {
    width: 18px;
    height: 18px;
    position: relative
}

.badge:empty {
    display: none
}

.badge-dot-xl::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: .25rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5px 0 0 -5px;
    background: #fff
}

.vertical-timeline-element-content {
    position: relative;
    margin-left: 100px;
    font-size: .8rem
}

.vertical-timeline-element-content .timeline-title {
    font-size: .8rem;
    text-transform: uppercase;
    margin: 0 0 .5rem;
    padding: 2px 0 0;
    font-weight: bold
}

.vertical-timeline-element .vertical-timeline-element-date {
    display: block;
    position: absolute;
    left: -20px;
    top: 0;
    padding-right: 10px;
    text-align: right;
    color: #343739;
    font-size: .8rem;
    white-space: nowrap
}

.vertical-timeline-element-content:after {
    content: "";
    display: table;
    clear: both
}

/* ---------------------------------------------------------------------------
   Телефон. Раскладка выше посчитана под настольный экран: лента отдаёт первые
   100 px под колонку даты, вкладки встают в ряд, карточка живёт с полем в 48 px.
   На 390 px это давало тексту 45 % ширины, семь вкладок ломались в столбец
   ссылок, а сводная таблица уезжала за край карточки (замер 2026-08-24).
   --------------------------------------------------------------------------- */

/* Полупрозрачна подложка, а не текст. Прежде на контейнер вешался opacity-75,
   и вместе с фоном бледнели буквы — читаемость падала на светлом снимке гор. */
.main-card {
    background-color: rgba(255, 255, 255, .93);
    backdrop-filter: blur(2px);
}

/* Размер названия в шапке — выбор вида, а не условие раскладки: мутация
   (1rem → 1.25rem) гард шапки не роняет, короткая форма помещается и так.
   Перенос кнопки меню на вторую строку лечится самой короткой формой
   (d-sm-none в разметке), и вот это гард проверяет. */
.navbar-brand {
    font-size: 1rem;
}

@media (min-width: 576px) {
    .navbar-brand {
        font-size: 1.25rem;
    }
}

/* Полоса вкладок: один ряд с прокруткой пальцем вместо переноса по строкам.
   Полосу прокрутки прячем — на телефоне её всё равно не за что взять, а край
   последней вкладки сам показывает, что справа есть продолжение. */
.tab-strip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -.5rem;
    padding: .25rem .5rem;
}

.tab-strip::-webkit-scrollbar {
    display: none;
}

.tab-strip .nav {
    flex-wrap: nowrap;
    gap: .375rem;
}

/* На настольном экране семь вкладок тоже не помещаются в 1280 px, и последняя
   обрезалась краем полосы прокрутки. Там прокрутка пальцем не нужна — разрешаем
   перенос по строкам, как было до правки. */
@media (min-width: 768px) {
    .tab-strip {
        overflow-x: visible;
    }

    .tab-strip .nav {
        flex-wrap: wrap;
    }
}

.tab-strip .nav-link {
    white-space: nowrap;
}

/* Часть ступени: на широком экране — второй строкой в колонке даты, на
   телефоне — через запятую в одну строку над названием. */
.vertical-timeline-element-date .date-break {
    display: block;
}

@media (max-width: 767.98px) {
    .vertical-timeline {
        padding: .5rem 0 0;
    }

    .vertical-timeline::before {
        left: 8px;
    }

    .vertical-timeline-element {
        margin-bottom: 1.75rem;
    }

    .vertical-timeline-element-icon {
        left: 0;
    }

    .vertical-timeline-element-content {
        margin-left: 36px;
        font-size: .875rem;
    }

    /* Дата встаёт в поток над заголовком: абсолютная колонка слева на телефоне
       съедала треть строки и роняла названия семинаров в столбик по слову. */
    .vertical-timeline-element .vertical-timeline-element-date {
        position: static;
        display: block;
        margin-left: 36px;
        padding: 0 0 .35rem;
        text-align: left;
        color: #6c757d;
        font-weight: 600;
        font-size: .8125rem;
        letter-spacing: .01em;
    }

    .vertical-timeline-element-date .date-break {
        display: inline;
    }

    .vertical-timeline-element-date .date-break::before {
        content: ", ";
    }
}

/* Заголовок ленты. Прописные буквы удлиняют и без того длинные названия
   семинаров («СЕМИНАР ТАЙЦЗИ-ЦЮАНЬ, ЧАСТЬ 2 ЧЕЛЯБИНСКАЯ ОБЛАСТЬ…») и читаются
   медленнее строчных — на узком экране это стоит нескольких лишних строк. */
.vertical-timeline-element-content .timeline-title {
    font-size: .95rem;
    text-transform: none;
    line-height: 1.35;
    margin-bottom: .4rem;
}

.vertical-timeline-element-content p {
    margin-bottom: 0;
    line-height: 1.45;
}

/* Сводка на телефоне: строка на ступень вместо таблицы в семь колонок.
   Тот же ход уже принят на странице записи на лекции. */
.summary-item {
    padding: .875rem .25rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.summary-item--open {
    background-color: rgba(255, 243, 205, .6);
    border-radius: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Общий фон сайта. Прежде жил inline-стилем в years/base.html, а страницы
   учётной записи его не имели вовсе — вход выглядел чужой страницей. */
body.mountains {
    /* Адрес картинки приходит из шаблона years/_background.html — с отпечатком
       содержимого, иначе правка фона не доедет до тех, у кого он уже в кэше. */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

/* ---------------------------------------------------------------------------
   Свидетельство в клетке ленты (FEAT-0046). Блок встаёт внутрь существующего
   .vertical-timeline-element-content и своей ширины не требует: на 390 px он
   переносится флексом, как строки действий на страницах лекций.
   --------------------------------------------------------------------------- */

.certificate-summary {
    font-size: .875rem;
    color: #495057;
}

.certificate-summary--notice {
    color: #6c757d;
}

.certificate-static,
.certificate-number {
    font-size: .8125rem;
    color: #6c757d;
}

/* Отступы блока (Founder 25.08: «выверить отступы») — числами, а не на глаз.
   Замер до правки на 390 px: сверху 8 px, снизу РОВНО НОЛЬ — кнопка упиралась в
   нижний край карточки, и палец, промахнувшись вниз, попадал уже по следующей
   клетке ленты. Стало по 8 px с обеих сторон.

   Поля даны padding-ом, а не margin-ом (прежде было `mt-2` в разметке): у
   соседнего абзаца свой нижний margin, и два margin-а схлопнулись бы в один —
   «выверенное» число зависело бы от чужого стиля и молча менялось вместе с ним.

   Эти же поля возвращают зону касания, которую отдала кнопка, ужавшись с 44 px
   до 38: WCAG 2.5.8 засчитывает расстояние до соседней цели наравне с размером
   самой цели. Гард — test_block_keeps_air_around_the_tap_zone.

   Правый край — тоже решение Founder-а: блок читается «номер → действие», и его
   край совпадает с краем текста над ним. Форма выравнивается флексом
   (`justify-content-end`), приглушённая кнопка и статическая строка — этим
   text-align. */
.certificate-control {
    padding: .5rem 0;
    text-align: right;
}

/* Высота — штатная для мелкой кнопки этого сайта. Было 44 px по WCAG 2.5.5
   (уровень AAA); Founder 25.08: «кнопка великовата» — в ленте из семнадцати
   строк она читалась плашкой. Стало 38 px: уровень AA (WCAG 2.5.8 требует
   24×24, запас в полтора раза), а недостающее до пальца добирают поля вокруг
   блока выше. Само по себе это не получается: замер в Chromium и WebKit на
   390 px даёт `btn btn-sm` высотой 31 px.

   Горизонтальный отступ назван явно, а не унаследован: с появлением знака
   свидетельства кнопка и без того шире, и тему сайта может занести. */
.certificate-control .btn {
    min-height: 38px;
    padding: .25rem .5rem;
    display: inline-flex;
    align-items: center;
}

/* Знак свидетельства слева от надписи. `flex: none` — чтобы он не сжимался,
   когда длинная надпись «Скачать ещё раз» упирается в край экрана: сжатый знак
   превратился бы в полоску. */
.certificate-icon {
    flex: none;
    margin-right: .375rem;
}

/* Приглушённая кнопка причины. Класс `disabled` Bootstrap-а сюда НЕ подходит:
   он ставит pointer-events: none, и нажатие, ради которого кнопка существует,
   не доходит вовсе — причина стала бы недостижимой ровно на телефоне, где
   наведения мыши нет. */
.certificate-reason > summary.certificate-btn--muted {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    color: #6c757d;
    border: 1px solid #ced4da;
    background-color: rgba(0, 0, 0, .02);
}

.certificate-reason > summary::-webkit-details-marker {
    display: none;
}

/* Причина — единственное, что осталось по левому краю: предложение с рваным
   левым краем на 390 px читается заметно хуже, а выравнивание блока делалось
   ради кнопки, а не ради текста. */
.certificate-reason__text {
    font-size: .8125rem;
    color: #495057;
    text-align: left;
}