/* Test interface styles */

/* Desktop styles */
.test_text {
    font-size: 33px;
    line-height: 41px;
}

.add-btns,
.answ-btn {
    width: 180px;
    height: 90px;
    font-size: 25px !important;
    line-height: 29px;
}

.answ-btn .fs-4 {
    font-size: 25px !important;
}

.answ-btn-back {
    font-size: 23px;
}

/* Mobile devices (less than 768px) */
@media screen and (max-width: 767px) {
    /* Hide main navigation */
    .navbar {
        display: none !important;
    }

    /* Hide instructions header on mobile */
    .card-header {
        display: none !important;
    }

    /* Compact mobile layout */
    .container-fluid {
        padding: 0.5rem !important;
    }

    main {
        margin: 0 0.5rem 0.5rem 0.5rem !important;
    }

    .card {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .card-body {
        padding: 0.25rem !important;
    }

    /* Compact question header */
    .d-flex.justify-content-between.align-items-center {
        margin-bottom: 0.25rem !important;
    }

    .d-flex.justify-content-between.align-items-center h5 {
        font-size: 14px !important;
        margin: 0 !important;
    }

    .d-flex.justify-content-between.align-items-center small {
        font-size: 12px !important;
    }

    /* Compact progress bar */
    .progress {
        height: 4px !important;
        margin-bottom: 0.25rem !important;
    }

    /* Question text */
    .test_text {
        font-size: 16px !important;
        line-height: 20px !important;
        margin-bottom: 0.75rem !important;
    }

    /* Answer buttons in 2x5 grid on mobile using CSS Grid */
    .row.g-2.mb-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: repeat(5, 1fr) !important;
        gap: 0.25rem !important;
        margin: 0 0 0.5rem 0 !important;
    }

    .row.g-2.mb-4 > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
    }

    .answ-btn {
        height: 65px !important;
        font-size: 14px !important;
        padding: 0.25rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .answ-btn .fs-4 {
        font-size: 14px !important;
    }

    /* Scale explanation */
    .d-flex.justify-content-between.mt-4 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .d-flex.justify-content-between.mt-4 .badge {
        font-size: 10px !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Action buttons - Next button full width, Skip button below */
    .row.g-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        margin: 0.25rem 0 0 0 !important;
    }

    .row.g-3 > div {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide "К пропущенным" button completely on mobile */
    .row.g-3 .col-12.col-md-4:nth-child(2) {
        display: none !important;
    }

    /* Next button first (full width) */
    .row.g-3 .col-12.col-md-4:last-child {
        order: 1 !important;
    }

    /* Skip button second (full width, under Next) */
    .row.g-3 .col-12.col-md-4:first-child {
        order: 2 !important;
    }

    .answ-btn-next {
        height: 44px !important;
        font-size: 14px !important;
        padding: 0.5rem 0.75rem !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .answ-btn-skip {
        height: 44px !important;
        font-size: 14px !important;
        padding: 0.75rem 1rem !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .answ-btn-skip svg,
    .answ-btn-next svg {
        width: 14px !important;
        height: 14px !important;
        margin-right: 0.25rem !important;
        flex-shrink: 0 !important;
    }
}

/* Very small devices (less than 400px) */
@media screen and (max-width: 399px) {
    .answ-btn {
        height: 38px !important;
        font-size: 12px !important;
    }

    .answ-btn .fs-4 {
        font-size: 12px !important;
    }

    .test_text {
        font-size: 15px !important;
        line-height: 18px !important;
    }

    .answ-btn-next {
        height: 40px !important;
        font-size: 12px !important;
        padding: 0.5rem 0.5rem !important;
    }

    .answ-btn-skip {
        height: 40px !important;
        font-size: 12px !important;
        padding: 0.75rem 0.75rem !important;
    }

    .answ-btn-skip svg,
    .answ-btn-next svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Small devices and up (tablets, 576px and up) */
@media screen and (min-width: 576px) {
    .test_text {
        font-size: 33px;
        line-height: 41px;
    }

    .add-btns,
    .answ-btn {
        width: 180px;
        height: 90px;
        font-size: 25px !important;
        line-height: 29px;
    }

    .answ-btn .fs-4 {
        font-size: 25px !important;
    }

    .answ-btn-back {
        font-size: 23px;
    }
}

/* Button selection styles */
.selected {
    background: linear-gradient(135deg, #0d6efd, #0dcaf0) !important;
    border-color: #0d6efd !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(13, 110, 253, 0.3) !important;
}

.btn.selected,
.btn-outline-primary.selected,
.answ-btn.btn.selected {
    background: linear-gradient(135deg, #0d6efd, #0dcaf0) !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(13, 110, 253, 0.3) !important;
}

.btn.selected:hover,
.btn.selected:focus,
.btn.selected:active,
.btn-outline-primary.selected:hover,
.btn-outline-primary.selected:focus,
.btn-outline-primary.selected:active,
.answ-btn.btn.selected:hover,
.answ-btn.btn.selected:focus,
.answ-btn.btn.selected:active {
    background: linear-gradient(135deg, #0d6efd, #0dcaf0) !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: white !important;
}

.answ-btn-next.selected {
    background: linear-gradient(135deg, #198754, #0dcaf0) !important;
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(25, 135, 84, 0.3) !important;
}

.answ-btn-next.selected:hover,
.answ-btn-next.selected:focus,
.answ-btn-next.selected:active {
    background: linear-gradient(135deg, #198754, #0dcaf0) !important;
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
}

/* Utility classes */
.h-divider {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 1px;
    width: 100%;
    border-top: 1px solid grey;
}

/* ============================================================================
   Темы предъявления теста для респондентов с ОВЗ (ЕМ СПТ-ОВЗ)
   ----------------------------------------------------------------------------
   Включаются классом на <body> (см. resources/views/tests/startTest.blade.php):
     .ovz-hearing — нарушения слуха: золотистый фон, Verdana, 24 пт;
     .ovz-vision  — слабовидящие: подбор размера шрифта, чёрное на белом/жёлтом;
     .ovz-oda     — НОДА: управление без мыши, крупные зоны нажатия.
   Для обычных логинов класса нет — массовое тестирование выглядит как раньше.

   Масштаб --ovz-scale (1…2) меняется кнопками A− / A / A+: методика требует
   подбирать размер «с учётом остроты остаточного зрения респондента».
   Базовые 32px = 24 пт — нижняя граница по методике, ниже не опускаемся
   даже на телефоне, поэтому правила перекрывают мобильные медиазапросы выше.
   ============================================================================ */

body.ovz {
    --ovz-scale: 1;
    --ovz-page-bg: #ffffff;
    --ovz-card-bg: #ffffff;
    --ovz-text: #111111;
    --ovz-accent: #0b4da2;      /* рамки и выбранный ответ */
    --ovz-focus: #b8590a;       /* обводка фокуса — не совпадает с рамкой */
    --ovz-question-bg: #ffffff;
    --ovz-warning: #7a4a00;     /* «Пропустить»: жёлтый Bootstrap на белом нечитаем */

    background: var(--ovz-page-bg) !important;
    color: var(--ovz-text) !important;
    font-family: Verdana, "PT Sans", Arial, Helvetica, sans-serif !important;
    line-height: 1.6;
}

/* Нарушения слуха: золотистый фон (акцент 4, более светлый оттенок 60 %) */
body.ovz-hearing {
    --ovz-page-bg: #fff6dd;
    --ovz-card-bg: #ffe699;
    --ovz-question-bg: #ffe699;
}

/* Слабовидящие: максимальный контраст, фон переключается кнопкой */
body.ovz-vision {
    --ovz-page-bg: #ffffff;
    --ovz-card-bg: #ffffff;
    --ovz-question-bg: #ffffff;
}

body.ovz-vision.ovz-bg-yellow {
    --ovz-page-bg: #fff8dc;
    --ovz-card-bg: #fff8dc;
    --ovz-question-bg: #fff8dc;
}

body.ovz #app,
body.ovz main {
    background: var(--ovz-page-bg) !important;
}

/* Карточка теста без рамки и тени (замечание заказчика 14.09.2026): контур
   вокруг всего экрана вопроса ничего не сообщает респонденту, а кнопки
   «Пропустить» / «Далее» у него читались «приклеенными» к нижней линии.
   Единственная рамка на экране — у кнопок ответов: рамка = «можно нажать». */
body.ovz .card {
    background: var(--ovz-card-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.ovz .card-header {
    background: var(--ovz-card-bg) !important;
    background-image: none !important;
    color: var(--ovz-text) !important;
    border-bottom: 0 !important;
}

body.ovz .progress_text {
    color: var(--ovz-text) !important;
    font-size: calc(20px * var(--ovz-scale)) !important;
}

/* Служебный ID логина растить незачем: на 200 % он вылезал за край экрана,
   а читает его психолог, а не респондент */
body.ovz .card-header .client_id {
    color: var(--ovz-text) !important;
    font-size: 18px !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-all !important;
}

body.ovz .card-body {
    background: var(--ovz-card-bg) !important;
}

/* Текст вопроса: 24 пт (32px) минимум, на любом экране */
body.ovz .test_text {
    background: var(--ovz-question-bg) !important;
    color: var(--ovz-text) !important;
    font-size: calc(32px * var(--ovz-scale)) !important;
    line-height: 1.5 !important;
    border-left: 8px solid var(--ovz-accent) !important;
    letter-spacing: 0.02em;
    text-align: left !important;
}

/* На текст вопроса фокус переводится программно при каждом новом вопросе
   (ovzFocusQuestion) — рамку вокруг него не рисуем: рамка означает «выбор»,
   а вопрос не выбирают */
body.ovz .test_text:focus,
body.ovz .test_text:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Кнопки ответов: крупная цифра, толстая рамка, большая зона нажатия */
body.ovz .answ-btn {
    width: 100% !important;
    min-height: calc(80px * var(--ovz-scale)) !important;
    height: auto !important;
    font-size: calc(30px * var(--ovz-scale)) !important;
    border: 3px solid var(--ovz-accent) !important;
    color: var(--ovz-accent) !important;
    background: #ffffff !important;
}

/* Наведение мыши не должно читаться как выбор: рамка и заливка остаются
   как у невыбранного, меняется только фон на светло-голубой */
body.ovz .answ-btn:hover:not(.selected) {
    background: #eaf1fc !important;
    color: var(--ovz-accent) !important;
    border-color: var(--ovz-accent) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.ovz .answ-btn:focus,
body.ovz .answ-btn:active {
    box-shadow: none !important;
    transform: none !important;
}

body.ovz .answ-btn .fs-4 {
    font-size: calc(30px * var(--ovz-scale)) !important;
}

/* Выбранный ответ: не только цвет — ещё галочка и утолщённая рамка,
   градиент убран, он снижает контраст текста на кнопке */
body.ovz .answ-btn.selected,
body.ovz .answ-btn.btn.selected,
body.ovz .btn-outline-primary.selected {
    background: var(--ovz-accent) !important;
    background-image: none !important;
    border: 6px solid #08306b !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

body.ovz .answ-btn.selected .fs-4::after {
    content: " ✓";
}

/* Базовые правила .answ-btn.btn.selected:hover/:focus специфичнее темы и
   возвращали выбранной кнопке сине-голубой градиент под мышью — выбранный
   ответ обязан выглядеть одинаково, куда бы ни ушла мышь */
body.ovz .answ-btn.btn.selected:hover,
body.ovz .answ-btn.btn.selected:focus,
body.ovz .answ-btn.btn.selected:active {
    background: var(--ovz-accent) !important;
    background-image: none !important;
    border: 6px solid #08306b !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Ряд кнопок действий: при увеличении шрифта колонки перестают делить строку
   на три и переносятся, иначе «Пропустить» рвётся по слогам */
body.ovz .test_block .row.g-3 > [class*="col-"] {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    min-width: min(100%, calc(200px * var(--ovz-scale))) !important;
}

/* «Пропустить» / «Далее»: подпись не переносится по слогам даже при 200 % —
   на увеличенном шрифте кнопка растёт в высоту, а не рвёт слово */
body.ovz .add-btns {
    width: 100% !important;
    min-height: calc(64px * var(--ovz-scale)) !important;
    height: auto !important;
    font-size: calc(20px * var(--ovz-scale)) !important;
    border-width: 3px !important;
    white-space: nowrap !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Жёлтая рамка Bootstrap даёт на белом контраст ~2:1 — для ОВЗ не годится */
body.ovz .answ-btn-skip {
    background: #ffffff !important;
    border-color: var(--ovz-warning) !important;
    color: var(--ovz-warning) !important;
}

body.ovz .answ-btn-next {
    background: #1b6b34 !important;
    background-image: none !important;
    border-color: #1b6b34 !important;
    color: #ffffff !important;
}

body.ovz .answ-btn-next.disabled,
body.ovz .answ-btn-next:disabled {
    background: #ffffff !important;
    border-color: #4a3f22 !important;
    color: #4a3f22 !important;
    opacity: 1 !important;
}

body.ovz .answ-btn-next.selected {
    background: #1b6b34 !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Инструкция и подписи шкалы. Без рамок: контур уже даёт карточка теста,
   вторая обводка внутри неё (у .instruction или у .alert-info) читается как
   двойная рамка. Разметка ставит .border-0, тема не должна его перебивать */
body.ovz .instruction {
    font-size: calc(20px * var(--ovz-scale)) !important;
    color: var(--ovz-text) !important;
    border: 0 !important;
}

body.ovz .alert-info {
    font-size: calc(20px * var(--ovz-scale)) !important;
    background: #ffffff !important;
    color: var(--ovz-text) !important;
    border: 0 !important;
}

body.ovz .instruction .btn {
    font-size: calc(24px * var(--ovz-scale)) !important;
    min-height: calc(64px * var(--ovz-scale)) !important;
    margin: 0.5rem 0 1rem !important;
}

/* Ряд «Пропустить / Далее» — оторван и от подписей шкалы сверху, и от края
   карточки снизу (замечание заказчика: кнопка сидела на нижней линии).
   У .row.g-3 свой отрицательный margin-top под gutter — заменяем его
   положительным, колонки сохраняют свой верхний отступ, итого ~3rem от
   подписей. Снизу отступ растёт вместе с текстом: на телефоне padding
   карточки всего 0.75rem, без этого кнопки упирались бы в край экрана */
body.ovz .test_block .row.g-3 {
    margin-top: calc(0.75rem * var(--ovz-scale)) !important;
    margin-bottom: calc(1rem * var(--ovz-scale)) !important;
}

body.ovz .text-muted,
body.ovz small.text-muted {
    color: #1f1f1f !important;
    font-size: calc(20px * var(--ovz-scale)) !important;
}

/* Подписи концов шкалы («1 — абсолютно неверно») */
body.ovz .badge {
    font-size: calc(18px * var(--ovz-scale)) !important;
}

/* Финальный экран (текст обратной связи и кнопка «Завершить») — тот же
   крупный кегль, что и у вопросов: его читает тот же респондент */
body.ovz #text_box,
body.ovz #cont_box {
    font-size: calc(24px * var(--ovz-scale)) !important;
    line-height: 1.6 !important;
    color: var(--ovz-text) !important;
    margin: 10px 5% !important;
}

body.ovz .btn-finish {
    font-size: calc(24px * var(--ovz-scale)) !important;
    height: auto !important;
    width: auto !important;
    min-height: calc(64px * var(--ovz-scale)) !important;
    padding: 0.5rem 2rem !important;
}

/* Видимый фокус клавиатуры — без него НОДА не понимает, где находится */
body.ovz a:focus-visible,
body.ovz button:focus-visible,
body.ovz [tabindex]:focus-visible {
    outline: 5px solid var(--ovz-focus) !important;
    outline-offset: 3px !important;
}

/* На выбранном ответе фокус-ринг не рисуем (зарисовка заказчика 14.09.2026):
   выбор с клавиатуры переводит фокус на нажатую кнопку, и вокруг синей
   залитой кнопки с галочкой появлялась ещё и оранжевая обводка — две рамки
   читались как два разных состояния. Теперь на экране не больше одной
   оранжевой рамки, и она всегда означает «курсор здесь, ответ ещё не выбран»:
   стоит на невыбранной кнопке при Tab-навигации, а на выбранной — исчезает.
   То же для «Далее»: после выбора ответа она уже залита зелёным. */
body.ovz .answ-btn.selected:focus-visible,
body.ovz .answ-btn-next.selected:focus-visible {
    outline: none !important;
}

/* ===== Анкета респондента (возраст, пол, класс) =====
   Тот же респондент, что и в тесте, поэтому поля и подписи крупные:
   без этого слабовидящий упирается в мелкую форму ещё до первого вопроса. */
body.ovz .anketa-container .card-header h4 {
    font-size: calc(26px * var(--ovz-scale)) !important;
}

body.ovz .anketa-container .form-label {
    font-size: calc(24px * var(--ovz-scale)) !important;
    color: var(--ovz-text) !important;
}

body.ovz .anketa-container .form-control,
body.ovz .anketa-container .form-select {
    font-size: calc(24px * var(--ovz-scale)) !important;
    min-height: calc(64px * var(--ovz-scale)) !important;
    border: 3px solid var(--ovz-accent) !important;
    color: var(--ovz-text) !important;
    background: #ffffff !important;
}

body.ovz .anketa-container .btn {
    font-size: calc(22px * var(--ovz-scale)) !important;
    min-height: calc(64px * var(--ovz-scale)) !important;
    border-width: 3px !important;
    white-space: normal !important;
}

body.ovz .anketa-container .btn-check:checked + .btn {
    background: var(--ovz-accent) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #08306b !important;
}

body.ovz .anketa-container .form-text {
    font-size: calc(18px * var(--ovz-scale)) !important;
    color: #3d3d3d !important;
}

/* ===== Панель доступности (размер текста, фон, подсказка по клавишам) =====
   Структура: панель (flex, переносы разрешены) → группы .ovz-a11y-group
   («подпись + кнопки», внутри переносов нет) → подсказка последней строкой.
   Крестик закрытия вынесен из потока в правый верхний угол панели, под него
   зарезервирован padding-right — иначе на промежуточных масштабах группа
   заезжала бы под крестик. Всё масштабируется вместе с --ovz-scale. */
.ovz-a11y-bar {
    --ovz-close-size: calc(48px * var(--ovz-scale, 1));   /* зона нажатия крестика */
    --ovz-close-inset: 0.5rem;                             /* отступ крестика от углов */

    position: relative;
    max-width: 1140px;
    margin: 0 auto 1rem auto;
    /* справа: отступ крестика + сам крестик + зазор до кнопок */
    padding: 0.75rem calc(var(--ovz-close-inset) + var(--ovz-close-size) + 0.75rem) 0.75rem 1rem;
    background: #ffffff;
    border: 2px solid #0b4da2;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    row-gap: 0.75rem;
    column-gap: 1.5rem;         /* между группами — заметно шире, чем внутри группы */
    flex-wrap: wrap;
    font-family: Verdana, Arial, sans-serif;
    color: #111111;
}

/* Скрытая крестиком панель убирается целиком, вместе со своим нижним
   margin: у .ovz-a11y-bar{display:flex} без !important атрибут hidden
   проиграл бы, и сверху остался бы пустой блок */
.ovz-a11y-bar[hidden] {
    display: none !important;
}

/* Группа «подпись + кнопки»: не рвётся, при нехватке места уезжает целиком */
.ovz-a11y-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.ovz-a11y-group__btns {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Панель растёт вместе с текстом теста: подсказку про клавиши читает тот же
   респондент, которому понадобились 200 % */
.ovz-a11y-bar__label {
    font-size: calc(18px * var(--ovz-scale, 1));
    font-weight: bold;
    white-space: nowrap;
}

.ovz-a11y-bar__hint {
    font-size: calc(16px * var(--ovz-scale, 1));
    color: #3d3d3d;
    flex-basis: 100%;
    order: 100;   /* подсказка — всегда последней строкой */
}

.ovz-a11y-btn {
    font-family: inherit;
    font-weight: bold;
    font-size: calc(20px * var(--ovz-scale, 1));
    line-height: 1;
    min-width: calc(56px * var(--ovz-scale, 1));
    min-height: calc(48px * var(--ovz-scale, 1));
    padding: 0.5rem 0.9rem;
    background: #ffffff;
    color: #0b4da2;
    border: 3px solid #0b4da2;
    border-radius: 0.4rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Крестик «скрыть панель»: всегда в правом верхнем углу, вне потока;
   зона нажатия не меньше 48px — у респондента проблемы со зрением и моторикой */
.ovz-a11y-close {
    position: absolute;
    top: var(--ovz-close-inset);
    right: var(--ovz-close-inset);
    width: var(--ovz-close-size);
    height: var(--ovz-close-size);
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: calc(28px * var(--ovz-scale, 1));
    line-height: 1;
}

.ovz-a11y-btn:hover {
    background: #eaf1fc;
}

.ovz-a11y-btn[aria-pressed="true"] {
    background: #0b4da2;
    color: #ffffff;
}

.ovz-a11y-btn:focus-visible {
    outline: 5px solid #b8590a;
    outline-offset: 3px;
}

/* Планшет и уже (< 992px): справа под крестик места не хватает — уже при
   175 % группа «Размер текста» заезжала под него. Резервируем крестику
   верхнюю строку (padding-top), группы получают всю ширину панели */
@media screen and (max-width: 991px) {
    .ovz-a11y-bar {
        padding: calc(var(--ovz-close-inset) + var(--ovz-close-size) + 0.5rem) 1rem 0.75rem 1rem;
    }
}

/* Телефон (< 768px): подпись встаёт над своими кнопками, группа занимает
   всю строку (иначе wrap-контейнер считает ширину по одной строке и
   вылезает за панель); ряд кнопок по-прежнему не рвётся. Кнопки чуть
   компактнее, чтобы три кнопки размера влезали в 360px и на 200 % */
@media screen and (max-width: 767px) {
    .ovz-a11y-bar {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        column-gap: 1rem;
    }

    .ovz-a11y-group {
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .ovz-a11y-group .ovz-a11y-bar__label {
        flex-basis: 100%;
    }

    .ovz-a11y-btn {
        min-width: calc(44px * var(--ovz-scale, 1));
        font-size: calc(18px * var(--ovz-scale, 1));
        padding: 0.5rem 0.5rem;
    }
}

/* Мобильные: тема не даёт шрифту падать ниже 24 пт, ряд ответов — по две кнопки */
@media screen and (max-width: 767px) {
    body.ovz .navbar {
        display: none !important;
    }

    body.ovz .card-header {
        display: block !important;
    }

    body.ovz .card-body {
        padding: 0.75rem !important;
    }

    /* 24 пт (32px) — методический минимум, он же нижняя граница на телефоне:
       лучше вертикальная прокрутка, чем нечитаемый для ОВЗ мелкий текст */
    body.ovz .test_text {
        font-size: calc(32px * var(--ovz-scale)) !important;
        padding: 1rem !important;
    }

    body.ovz .answ-btn {
        min-height: calc(64px * var(--ovz-scale)) !important;
        font-size: calc(28px * var(--ovz-scale)) !important;
    }

    body.ovz .answ-btn .fs-4 {
        font-size: calc(28px * var(--ovz-scale)) !important;
    }

    body.ovz .add-btns {
        min-height: calc(56px * var(--ovz-scale)) !important;
        font-size: calc(18px * var(--ovz-scale)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ovz * {
        transition: none !important;
        animation: none !important;
    }
}