/* =============================================================================
   Зона «Минутный тест» — раскладка трёх экранов и оформление разметки,
   которую рисует public/js/quick_test.js.

   Файл подключается только вьюхами `app/Views/quick_test/*`. Своей палитры
   зона не имеет: раньше она жила в чужой сине-индиговой гамме, теперь берёт
   цвет исключительно из семантических токенов UIKit. Локальные переменные
   ниже — псевдонимы к токенам, а не новые значения.

   Что здесь есть и чего здесь нет:
   — раскладка (сетки, фиксированная панель действий, оверлей загрузки);
   — оформление узлов, которые печатает JS (`.tag`, `.answer-box`, …), —
     скрипт в этом прогоне не редактируется, поэтому его разметку одевает CSS;
   — оформления кнопок, бейджей, плиток и полосы прогресса здесь НЕТ:
     это компоненты UIKit, и они красятся своим `components.css`.
   ========================================================================== */

.ui-quick-test,
.ui-quick-test-results {
    /* Псевдонимы: одно имя на зону вместо повторения токена в двадцати местах */
    --qt-panel-radius: var(--ui-radius-md);
    --qt-panel-border: 1px solid var(--ui-color-border-subtle);
    --qt-measure: 40rem;

    /* Смещение под фиксированной шапкой сайта. Общего токена высоты шапки в
       системе пока нет, поэтому имя объявлено здесь и читает его сразу, как
       только он появится в `tokens.css`; запасное значение — то самое, на
       котором стоит `body { padding-top }` в `custom.css`. Второго литерала
       в зоне нет: всё, что зависит от шапки, смотрит на это имя. */
    --qt-header-height: var(--ui-header-height, 56px);

    /* Слои зоны. Ориентиры Bootstrap: fixed-top 1030, modal 1055 */
    --qt-layer-actions: 1020;
    --qt-layer-overlay: 1050;

    max-width: var(--qt-measure);
    margin-inline: auto;
    padding-inline: var(--ui-space-sm);
}

/* -----------------------------------------------------------------------------
   Экран старта
   -------------------------------------------------------------------------- */

.ui-quick-test__rules {
    margin-block: var(--ui-space-md);
    padding: var(--ui-space-md);
    border: var(--qt-panel-border);
    border-radius: var(--qt-panel-radius);
    background-color: var(--ui-color-surface-sunken);
}

.ui-quick-test__rules-title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2xs);
    margin-bottom: var(--ui-space-sm);
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-semibold);
    line-height: var(--ui-line-height-snug);
}

.ui-quick-test__rules-title .bi {
    color: var(--ui-color-accent);
}

.ui-quick-test__rules-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-quick-test__rules-list li {
    position: relative;
    padding-left: var(--ui-space-sm);
    line-height: var(--ui-line-height-base);
}

.ui-quick-test__rules-list li + li {
    margin-top: var(--ui-space-2xs);
}

/* Маркер — форма, а не смысл: он декоративен и скрыт от скринридера,
   потому что список и без него объявляется списком. */
.ui-quick-test__rules-list li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--ui-color-accent);
}

.ui-quick-test__start {
    display: flex;
    justify-content: center;
    margin-bottom: var(--ui-space-lg);
}

/* -----------------------------------------------------------------------------
   Экран теста
   -------------------------------------------------------------------------- */

.ui-quick-test--running {
    /* Место под фиксированную панель действий, включая вырез на iPhone */
    padding-bottom: calc(env(safe-area-inset-bottom) + 9rem);
}

.ui-quick-test__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2xs);
    padding-block: var(--ui-space-sm);
}

.ui-quick-test__title {
    margin: 0;
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-semibold);
    line-height: var(--ui-line-height-tight);
}

.ui-quick-test__counter {
    margin-left: auto;
    font-size: var(--ui-font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ui-color-text-muted);
}

/* Таймер виден всё время: он и есть условие задачи. */
.ui-quick-test__timer {
    position: sticky;
    top: var(--qt-header-height);
    z-index: 1;
    padding: var(--ui-space-sm);
    border: 1px solid var(--ui-color-accent-border);
    border-radius: var(--qt-panel-radius);
    background-color: var(--ui-color-accent-soft);
}

/* -----------------------------------------------------------------------------
   Карточка вопроса. Внутренности печатает quick_test.js — классы ниже
   принадлежат ему, поэтому переименовать их нельзя, только одеть.
   -------------------------------------------------------------------------- */

.ui-quick-test__question {
    margin-top: var(--ui-space-sm);
    padding: var(--ui-space-md);
    border: var(--qt-panel-border);
    border-radius: var(--qt-panel-radius);
    background-color: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-quick-test__question .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3xs);
    margin-bottom: var(--ui-space-sm);
}

.ui-quick-test__question .tag {
    display: inline-flex;
    align-items: center;
    padding: var(--ui-space-3xs) var(--ui-space-2xs);
    border-radius: var(--ui-radius-pill);
    font-size: var(--ui-font-size-xs);
    font-weight: var(--ui-font-weight-medium);
    line-height: var(--ui-line-height-snug);
}

.ui-quick-test__question .tag-category {
    background-color: var(--ui-color-surface-raised);
    color: var(--ui-color-text-muted);
}

/* Бейдж сложности рисует скрипт своей разметкой (ограничение D02) и вешает на
   него бутстраповские `bg-success bg-opacity-10 text-success`. Оставить как есть
   нельзя: мост красит `.text-success` в `--ui-color-success`, а это ЗАЛИВОЧНЫЙ
   цвет — подпись в 12px на 10-процентной подложке даёт ~3:1 для лёгкого и ~1.7:1
   для среднего, вдвое ниже порога. Дефект внесён мостом, поэтому и гасится здесь.

   Берём ту же пару токенов, что и компонент `badge-difficulty`: `-surface` под
   подложку, `-text` под подпись — она уже выверена на контраст. `!important`
   вынужденный и единственный в зоне: утилиты Bootstrap объявлены с ним, обычной
   специфичностью их не перебить, а `public/js/` в этом прогоне не редактируется. */
.ui-quick-test__question .tag-easy {
    background-color: var(--ui-color-difficulty-easy-surface) !important;
    color: var(--ui-color-difficulty-easy-text) !important;
}

.ui-quick-test__question .tag-medium {
    background-color: var(--ui-color-difficulty-medium-surface) !important;
    color: var(--ui-color-difficulty-medium-text) !important;
}

.ui-quick-test__question .tag-hard {
    background-color: var(--ui-color-difficulty-hard-surface) !important;
    color: var(--ui-color-difficulty-hard-text) !important;
}

.ui-quick-test__question .question-text {
    margin-bottom: var(--ui-space-sm);
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-medium);
    line-height: var(--ui-line-height-snug);
    color: var(--ui-color-text);
    text-wrap: pretty;
}

.ui-quick-test__question .answer-box {
    position: relative;
    margin-bottom: var(--ui-space-sm);
    padding: var(--ui-space-sm);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-color-surface-sunken);
    transition: background-color var(--ui-duration-base) var(--ui-easing-standard),
                border-color var(--ui-duration-base) var(--ui-easing-standard);
}

.ui-quick-test__question .answer-text {
    margin: 0;
    line-height: var(--ui-line-height-base);
    color: var(--ui-color-text);
}

/* Итог ответа. Скрипт меняет только класс, поэтому слово «верно» приходится
   печатать из CSS: цвет один смысл нести не может — часть аудитории его
   не различает. `::after` попадает в дерево доступности и читается вслух. */
.ui-quick-test__question .answer-box.correct,
.ui-quick-test__question .answer-box.incorrect {
    padding-bottom: var(--ui-space-md);
}

.ui-quick-test__question .answer-box.correct {
    border-color: var(--ui-color-success);
    background-color: var(--ui-color-success-surface);
}

.ui-quick-test__question .answer-box.incorrect {
    border-color: var(--ui-color-danger);
    background-color: var(--ui-color-danger-surface);
}

.ui-quick-test__question .answer-box.correct::after,
.ui-quick-test__question .answer-box.incorrect::after {
    position: absolute;
    right: var(--ui-space-sm);
    bottom: var(--ui-space-3xs);
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-semibold);
}

.ui-quick-test__question .answer-box.correct::after {
    content: "Вы ответили верно";
    color: var(--ui-color-success-text);
}

.ui-quick-test__question .answer-box.incorrect::after {
    content: "Вы ответили неверно";
    color: var(--ui-color-danger-text);
}

/* Подсказка. Прежняя версия держалась на цветной полосе слева — заменена
   на полноценную рамку с подложкой: полоса читается как украшение. */
.ui-quick-test__question .instruction-box {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-2xs);
    padding: var(--ui-space-2xs) var(--ui-space-xs);
    border: 1px solid var(--ui-color-accent-border);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-color-accent-soft);
}

.ui-quick-test__question .instruction-box .bi {
    line-height: var(--ui-line-height-base);
    color: var(--ui-color-accent-text);
}

.ui-quick-test__question .instruction-text {
    margin: 0;
    font-size: var(--ui-font-size-sm);
    line-height: var(--ui-line-height-snug);
    color: var(--ui-color-text-muted);
}

/* Сообщение об ошибке скрипт рисует бутстраповским `.alert-danger` —
   он покрашен мостом токенов, зоне добавлять нечего. */

/* -----------------------------------------------------------------------------
   Панель действий. Закреплена внизу: в тесте на минуту кнопка ответа обязана
   быть под большим пальцем, а не там, куда доскроллил вопрос.
   -------------------------------------------------------------------------- */

.ui-quick-test__actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--qt-layer-actions);
    padding: var(--ui-space-2xs) var(--ui-space-sm);
    padding-bottom: calc(var(--ui-space-2xs) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ui-color-border);
    background-color: var(--ui-color-surface);
}

.ui-quick-test__actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ui-space-2xs);
    max-width: var(--qt-measure);
    margin-inline: auto;
}

.ui-quick-test__actions-skip {
    max-width: var(--qt-measure);
    margin-block-start: var(--ui-space-3xs);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .ui-quick-test__actions {
        right: auto;
        left: 50%;
        max-width: calc(var(--qt-measure) + var(--ui-space-md));
        width: 100%;
        transform: translateX(-50%);
        border: 1px solid var(--ui-color-border);
        border-bottom: 0;
        border-radius: var(--qt-panel-radius) var(--qt-panel-radius) 0 0;
        box-shadow: var(--ui-shadow-md);
    }
}

/* -----------------------------------------------------------------------------
   Оверлей загрузки. Класс `active` вешает и снимает quick_test.js.
   -------------------------------------------------------------------------- */

.ui-quick-test__overlay {
    position: fixed;
    inset: 0;
    z-index: var(--qt-layer-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    background-color: rgba(var(--ui-color-surface-rgb), 0.9);
    transition: opacity var(--ui-duration-base) var(--ui-easing-standard),
                visibility var(--ui-duration-base) var(--ui-easing-standard);
}

.ui-quick-test__overlay.active {
    visibility: visible;
    opacity: 1;
}

.ui-quick-test__overlay-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-2xs);
    padding: var(--ui-space-md);
    border: var(--qt-panel-border);
    border-radius: var(--qt-panel-radius);
    background-color: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-lg);
    color: var(--ui-color-text-muted);
}

.ui-quick-test__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--ui-color-accent-border);
    border-top-color: var(--ui-color-accent);
    border-radius: 50%;
    animation: ui-quick-test-spin 0.8s linear infinite;
}

@keyframes ui-quick-test-spin {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------------
   Экран результатов
   -------------------------------------------------------------------------- */

.ui-quick-test-results {
    padding-bottom: var(--ui-space-xl);
}

.ui-quick-test-results__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-3xs);
    padding: var(--ui-space-lg) var(--ui-space-md);
    border: 1px solid var(--ui-color-accent-border);
    border-radius: var(--ui-radius-lg);
    background-color: var(--ui-color-accent-soft);
    text-align: center;
}

.ui-quick-test-results__trophy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--ui-space-2xs);
    border-radius: 50%;
    background-color: var(--ui-color-surface);
    font-size: var(--ui-font-size-xl);
    color: var(--ui-color-accent-text);
}

.ui-quick-test-results__score {
    font-size: var(--ui-font-size-3xl);
    font-weight: var(--ui-font-weight-bold);
    line-height: var(--ui-line-height-tight);
    font-variant-numeric: tabular-nums;
    color: var(--ui-color-text);
}

.ui-quick-test-results__verdict {
    margin: 0;
    color: var(--ui-color-text-muted);
}

.ui-quick-test-results__note {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-3xs);
    margin-top: var(--ui-space-2xs);
    padding: var(--ui-space-3xs) var(--ui-space-xs);
    border-radius: var(--ui-radius-pill);
    background-color: var(--ui-color-surface);
    font-size: var(--ui-font-size-sm);
    color: var(--ui-color-text-muted);
}

.ui-quick-test-results__section {
    margin-top: var(--ui-space-lg);
}

.ui-quick-test-results__section-title {
    margin-bottom: var(--ui-space-sm);
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-semibold);
    line-height: var(--ui-line-height-tight);
}

/* auto-fit вместо брейкпоинтов: на 360px это одна колонка,
   дальше две-три — по тому, сколько влезает, а не по номеру устройства. */
.ui-quick-test-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--qt-grid-min, 9.5rem), 1fr));
    gap: var(--ui-space-2xs);
}

/* Уровню сложности нужна колонка пошире: там не одно число, а подпись,
   счёт и полоса, и на узкой колонке полоса выродилась бы в чёрточку. */
.ui-quick-test-results__grid--wide {
    --qt-grid-min: 13rem;
}

.ui-quick-test-results__difficulty {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2xs);
    padding: var(--ui-space-sm);
    border: var(--qt-panel-border);
    border-radius: var(--qt-panel-radius);
    background-color: var(--ui-color-surface);
}

/* Бейдж центрируется сам, полоса тянется на всю ширину карточки. */
.ui-quick-test-results__difficulty-badge {
    align-self: center;
}

.ui-quick-test-results__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ui-space-2xs);
    margin-top: var(--ui-space-lg);
}

/* -----------------------------------------------------------------------------
   Движение
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ui-quick-test__spinner {
        animation-duration: 2.4s;
    }

    .ui-quick-test__overlay,
    .ui-quick-test__question .answer-box {
        transition: none;
    }
}