/* Экран записи: стили.
 *
 * Файл отдаётся статикой, шаблонизатор его не видит: Jinja-вставок и
 * Jinja-комментариев здесь быть не должно. Подключается через `static_url`,
 * поэтому после выката браузер забирает новую версию.
 *
 * Ниже — стили самой страницы, в конце — карточки турниров.
 * Подробности и правила — `portal/README.md`.
 */

        [x-cloak] { display: none !important; }

        /* Вендорные классы, которые остались на этой странице после снятия
           Bootstrap. Файл весил 233 КБ и блокировал первую отрисовку — больше
           секунды на мобильной сети, — а описывал здесь ровно вот это:
           кнопки пустых состояний («Обновить», «Показать завтра») и два
           отступа у текста рядом с ними. Инвентаризация делалась по ЖИВОМУ
           DOM, а не по шаблону.
           Значения взяты вендорные, чтобы вид не поменялся. Появится новая
           разметка с вендорным классом — либо опиши его здесь, либо верни
           файл осознанно. */
        .btn {
            display: inline-block;
            padding: 0.375rem 0.75rem;
            border: 1px solid transparent;
            border-radius: 0.375rem;
            background: transparent;
            color: inherit;
            font-size: var(--bp-fs-body);
            font-weight: 400;
            line-height: 1.5;
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            transition: color .15s ease-in-out, background-color .15s ease-in-out,
                border-color .15s ease-in-out;
        }
        .btn-sm {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: var(--bp-fs-secondary);
        }
        .btn-outline-light {
            border-color: #f8f9fa;
            color: #f8f9fa;
        }
        /* :hover — только там, где есть мышь: на тач-экране он залипает после
           тапа (то же правило, что у остальных кнопок портала). */
        @media (hover: hover) and (pointer: fine) {
            .btn-outline-light:hover {
                background: #f8f9fa;
                border-color: #f8f9fa;
                color: #000;
            }
        }
        .mt-2 { margin-top: 0.5rem; }
        .mb-2 { margin-bottom: 0.5rem; }

        :root {
            --bp-orange: #f97316;
            --bp-orange-dark: #ea580c;
            --bp-purple: #8b5cf6;
            --bp-surface: #1e293b;
        }


        body {
            background-color: #1e293b;
            background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
            /* vh — фолбэк для старых движков, dvh ниже уточняет высоту */
            min-height: 100vh;
            min-height: 100dvh;
            font-family: var(--ff-body);
            padding: 0;
            margin: 0;
        }

        /* ── Skill-level CTA banner (shown until the client has a level) ──────
           Leads to /level: the questionnaire lives on its own page. */
        .skill-cta {
            background:
                radial-gradient(120% 140% at 0% 0%, rgba(146, 196, 58, 0.14), transparent 60%),
                var(--bp-surface);
            border-bottom: 1px solid rgba(146, 196, 58, 0.22);
            padding: var(--bp-space-4) 16px;
        }
        .skill-cta-inner { max-width: 420px; margin: 0 auto; }
        .skill-cta-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .skill-cta-emoji {
            flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: var(--bp-fs-title); background: rgba(146, 196, 58, 0.14);
        }
        .skill-cta-title { font-weight: 700; font-size: var(--bp-fs-body); color: #f1f5f9; line-height: 1.2; }
        .skill-cta-sub { font-size: var(--bp-fs-caption); color: #94a3b8; margin-top: 3px; }
        a.skill-cta { display: block; text-decoration: none; }

        .book-container {
            max-width: 420px;
            margin: 0 auto;
            /* Сверху ступень 4 — столько же, сколько у «Моих», «Сообщений» и
               школы: при переходе по вкладкам содержимое обязано начинаться на
               одной высоте, иначе сетка дёргается. Раньше здесь стояло 8 в
               расчёте на липкую полосу выбора клуба, которая добавляла свои 8;
               выбор уехал в шапку, полоса скрылась вместе со своим отступом, а
               восьмёрка осталась. Низ — ступень 6 сверх высоты нижнего меню,
               которую уже заложил `body.nav-*`. Горизонталь 12 — общая для
               всех разделов, от неё же считается вынос `.city-dropdown`. */
            padding: var(--bp-space-4) 12px var(--bp-space-6);
        }

        /* Ряд «Поддержка / Искать партнёра / Оплатить парковку» с этого экрана
           убран: поддержка и поиск партнёра уехали на «Сообщения», парковка —
           в ряд плашек шапки. Стили ушли вместе с разметкой. */

        /* Promo banner — soft brand-green pill, full width, optional CTA. */
        /* ── Лента баннеров ──────────────────────────────────────────────
           Один баннер в кадре, остальные — жестом вбок. Стопкой они отжимали
           сетку времени вниз и читались как реклама поверх экрана.

           Высота ЖЁСТКАЯ, а не по содержимому: баннеры приезжают запросом, и
           «то две строки, то три» дёргало бы ленту дат при каждой загрузке.
           Текст внутри при нехватке места усекается двумя строками — здесь это
           оправдано ровно тем же, чем в превью «Сообщений»: полный текст в
           одном тапе, баннер — тизер. */
        /* Ступень 1, а не 3: под лентой уже стоит полоса точек в 13px, и она
           работает зазором. Со ступенью 3 воздух складывался вдвое — 25px, и
           лента дат отрывалась от баннера заметнее, чем все прочие блоки друг
           от друга. Меняешь — правь `_BANNER_RAIL_PX` (там та же сумма). */
        .promo-banners-area { margin-bottom: var(--bp-space-1); }
        .promo-rail {
            display: flex;
            gap: 10px;
            /* Тонкая полоска: две строки текста + поля. Баннер — тизер над
               расписанием, и каждый его пиксель высоты отнимает строку сетки
               времени; в 76 px однострочное «+300 баллов за отзыв» висело
               пустой коробкой. Высота фиксирована, а не по содержимому:
               баннеры приезжают запросом, и лента дат прыгала бы на каждой
               загрузке. Сервер высоты не знает — он решает только, рисовать ли
               область (`book_chrome_service.py`); место держит этот класс. */
            height: 56px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .promo-rail::-webkit-scrollbar { display: none; }
        .promo-rail > * {
            flex: 0 0 100%;
            scroll-snap-align: center;
            min-width: 0;
        }
        /* Скелетон занимает место баннера, пока ответ в пути: без него лента
           дат прыгала вверх-вниз на каждой загрузке экрана. */
        .promo-skeleton {
            height: 100%;
            border-radius: 14px;
            background: linear-gradient(
                100deg,
                rgba(255, 255, 255, 0.04) 30%,
                rgba(255, 255, 255, 0.08) 50%,
                rgba(255, 255, 255, 0.04) 70%
            );
            background-size: 220% 100%;
            animation: promo-shimmer 1.4s ease-in-out infinite;
        }
        @keyframes promo-shimmer {
            0%   { background-position: 120% 0; }
            100% { background-position: -20% 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .promo-skeleton { animation: none; }
        }
        /* Высота задана жёстко и занята всегда — иначе появление точек после
           инициализации скрипта сдвигало вниз всю ленту дат. */
        .promo-dots {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            height: 13px;
        }
        .promo-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.22);
        }
        .promo-dot.on { background: var(--bp-green); }

        /* Одна строка: текст, кнопка, крестик — всё по центру высоты. Иконки
           подарка нет: она забирала 42 px, и ради них кнопку уводили под
           текст, отчего баннер вырастал на треть. Крестик стоял и над
           кнопкой, в отдельной колонке — висел оторванным от всего в углу. */
        .promo-banner {
            display: flex;
            align-items: center;
            gap: 10px;
            height: 100%;
            padding: 8px 12px;
            border-radius: 14px;
            background: linear-gradient(
                135deg,
                rgba(146, 196, 58, 0.14),
                rgba(146, 196, 58, 0.08)
            );
            border: 1px solid rgba(146, 196, 58, 0.28);
            color: #ddf0b8;
        }

        .promo-banner__body {
            flex: 1;
            min-width: 0;
            font-size: var(--bp-fs-secondary);
            line-height: 1.35;
            font-weight: 500;
            /* Потолок в две строки — не способ спрятать длинный текст, а
               граница, под которую подогнан лимит поля в CRM: там принимается
               ровно столько, сколько сюда влезает, и превью обрезает так же.
               Клип остаётся страховкой на случай текстов, заведённых раньше. */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .promo-banner__cta {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(146, 196, 58, 0.85);
            color: #0f172a;
            font-size: var(--bp-fs-caption);
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.2s;
        }
        @media (hover: hover) and (pointer: fine) {
            .promo-banner__cta:hover {
                background: #b9e26a;
                color: #0f172a;
            }
        }

        /* Крестик тише кнопки действия: закрыть — не то, ради чего баннер
           показан. Своё поле нажатия у него всё равно 32px, иначе на телефоне
           по нему промахиваются в кнопку рядом. */
        .promo-banner__close {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            /* 32 px поля нажатия при 12 px значке; отрицательное поле справа
               прячет лишнее в край карточки и возвращает ширину тексту.
               Слева — 16 px пустоты до кнопки (10 общего зазора + 6 своих):
               промах тут стоит дорого в обе стороны — нечаянный переход или
               навсегда закрытый баннер. Ширину на это отдала кнопка своими
               полями, текст не потерял ничего. */
            width: 32px;
            height: 32px;
            margin-left: 6px;
            margin-right: -8px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: rgba(255, 255, 255, 0.5);
            font-size: var(--bp-fs-caption);
            cursor: pointer;
        }
        @media (hover: hover) and (pointer: fine) {
            .promo-banner__close:hover {
                background: rgba(255, 255, 255, 0.1);
                color: #fff;
            }
        }

        /* Лимит поля в CRM (40 символов) посчитан под две строки на 360 px.
           Уже — только редкие телефоны, и там полоска растёт до трёх строк,
           а не режет текст. Стоит после основных правил, иначе они его
           перебивают. */
        @media (max-width: 359px) {
            .promo-rail { height: 74px; }
            .promo-banner__body { -webkit-line-clamp: 3; }
        }

        /* Newcomer offer — orange/purple accent, vertical layout.
           Своя раскладка целиком: у карточки заголовок, таймер и две кнопки,
           в сетку промо-баннера они не ложатся. */
        .promo-banner--newcomer_offer {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            padding: 16px;
            background: linear-gradient(135deg, rgba(255,140,50,0.18), rgba(168,85,247,0.14));
            border: 1px solid rgba(255,140,50,0.32);
            color: #fff;
        }
        .newcomer-banner__title {
            font-size: var(--bp-fs-body);
            font-weight: 700;
            line-height: 1.3;
        }
        .newcomer-banner__text {
            font-size: var(--bp-fs-secondary);
            line-height: 1.35;
            opacity: 0.88;
        }
        .newcomer-banner__timer {
            font-size: var(--bp-fs-display);
            font-weight: 700;
            text-align: center;
            letter-spacing: 2px;
            padding: 6px 0;
            font-variant-numeric: tabular-nums;
        }
        .newcomer-banner__actions {
            display: flex;
            gap: 8px;
        }
        .newcomer-banner__btn {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 8px 14px;
            border-radius: 999px;
            font-size: var(--bp-fs-secondary);
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
            transition: opacity 0.2s;
            border: none;
            cursor: pointer;
        }
        @media (hover: hover) and (pointer: fine) {
            .newcomer-banner__btn:hover { opacity: 0.85; }
        }
        .newcomer-banner__btn--primary {
            background: rgba(255,140,50,0.9);
            color: #0f172a;
        }
        .newcomer-banner__btn--dismiss {
            background: rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.7);
        }