/* ======================================================
   СТИЛИ ДЛЯ BLAZOR КОМПОНЕНТА ПОРЯДКА СЛОВ
   ====================================================== */

/* ======================================================
   1. ИНДИКАТОРЫ АНИМАЦИИ И ЗАГРУЗКИ
   ====================================================== */

/* Индикатор загрузки для обычного режима */
.blazor-animation-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding: 5px;
}

.blazor-animation-indicator .glyphicon-refresh {
    animation: spin 1s linear infinite;
    font-size: 14px;
    color: #007bff;
}

/* Индикатор анимации для отрицательной формы */
.negative-animation-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding: 5px;
}

.negative-animation-indicator .glyphicon-refresh {
    animation: spin 1s linear infinite;
    font-size: 14px;
    color: #dc3545;
}

/* Дополнительный индикатор анимации */
.negative-animation-indicator {
    display: flex;
    align-items: center;
    margin-left: 20px;
    color: #28a745;
    font-size: 16px;
}

.negative-animation-indicator i {
    animation: spin 2s linear infinite;
}

/* Индикатор анимации для вопросительной формы */
.question-animation-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding: 5px;
}

.question-animation-indicator .glyphicon-refresh {
    animation: spin 1s linear infinite;
    font-size: 14px;
    color: #17a2b8; /* info цвет для вопросительной формы */
}

/* ======================================================
   2. ПОЭТАПНОЕ ОТОБРАЖЕНИЕ КОЛОНОК (ПОЗИТИВНАЯ ФОРМА)
   ====================================================== */

/* Базовые стили для ячеек схемы */
.positive .scheme.blazor-scheme .cell {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease;
}

/* Этап 1: только первая колонка (S) */
.positive .scheme.blazor-scheme[data-stage="1"] .cell:nth-child(n+2) {
    opacity: 0;
    transform: scale(0.8);
    visibility: hidden;
}

/* Этап 2: первая и вторая колонки (S, V) */
.positive .scheme.blazor-scheme[data-stage="2"] .cell:nth-child(n+3) {
    opacity: 0;
    transform: scale(0.8);
    visibility: hidden;
}

/* Этап 3: первая, вторая и третья колонки (S, V, Obj) */
.positive .scheme.blazor-scheme[data-stage="3"] .cell:nth-child(n+4) {
    opacity: 0;
    transform: scale(0.8);
    visibility: hidden;
}

/* Этап 4: первые четыре колонки (S, V, Obj, Where) */
.positive .scheme.blazor-scheme[data-stage="4"] .cell:nth-child(5) {
    opacity: 0;
    transform: scale(0.8);
    visibility: hidden;
}

/* Этап 4 с задержкой: через 1 секунду показать пятую колонку */
.positive .scheme.blazor-scheme[data-stage="4"].show-fifth .cell:nth-child(5) {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    transition: all 0.3s ease; /* убираем задержку из CSS */
}

/* Этап 5 (полная таблица): все колонки видимы */
.positive .scheme.blazor-scheme[data-stage="5"] .cell {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

/* ======================================================
   3. СТИЛИ ДЛЯ ПОЯСНЕНИЙ И ОБЪЯСНЕНИЙ
   ====================================================== */

/* Контейнер для пояснений этапов */
.stage-explanations {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 15px 20px;
    margin: 20px 0 30px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Заголовки пояснений h3 */
.stage-explanations h3 {
    color: #4A7BB7;
    margin-bottom: 20px;
    font-size: 1.5em;
    margin-top: 0;
    font-weight: bold;
    border-bottom: 2px solid rgba(74,123,183,0.2);
    padding-bottom: 8px;
}

/* Заголовки пояснений h4 */
.stage-explanations h4 {
    color: #4A7BB7;
    margin-bottom: 15px;
    font-size: 1.2em;
    margin-top: 0;
    font-weight: bold;
    border-bottom: 2px solid rgba(74,123,183,0.2);
    padding-bottom: 8px;
}

/* Секции объяснений */
.explanation-section {
    margin-bottom: 20px;
    transition: all 0.5s ease;
}

.explanation-section.hidden {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    overflow: hidden;
}

.explanation-section.visible {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
}

/* Отдельные шаги объяснений */
.explanation-step {
    margin-bottom: 10px;
    padding: 8px 12px;
    background-color: white;
    border-radius: 4px;
    border-left: 3px solid #28a745;
    transition: all 0.4s ease;
}

.explanation-step.hidden {
    opacity: 0;
    transform: translateX(-20px);
    max-height: 0;
    padding: 0 12px;
    margin-bottom: 0;
}

.explanation-step.visible {
    opacity: 1;
    transform: translateX(0);
    max-height: 100px;
}

/* Заметки в объяснениях */
.explanation-note {
    padding: 15px;
    background-color: #e3f2fd;
    border-radius: 6px;
    border: 1px solid #90caf9;
    font-style: italic;
    text-align: center;
    transition: all 0.5s ease;
}

.explanation-note strong {
    color: #1565c0;
}

/* Табличная структура для пояснений к 4 этапу */
.circumstances-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.circumstances-row {
    display: table-row;
}

.circumstances-cell {
    display: table-cell;
    padding: 2px 5px;
    vertical-align: top;
    line-height: 1.4;
}

.circumstances-cell.header {
    font-weight: normal;
    width: 25%;
    padding-right: 10px;
}

.circumstances-cell.first-part {
    width: 75%;
    padding-left: 5px;
}

.circumstances-cell.second-part {
    width: 75%;
    padding-left: 5px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.6s ease, max-height 0.6s ease;
}

.circumstances-cell.second-part.visible {
    opacity: 1;
    max-height: 50px;
}

.circumstances-cell.empty {
    /* Пустая ячейка для выравнивания второй строки */
    width: 25%;
}

/* ======================================================
   4. ЭЛЕМЕНТЫ УПРАВЛЕНИЯ И КНОПКИ
   ====================================================== */

/* Кнопка запуска/остановки трансформации */
.animation-trigger.transform,
.animation-trigger.question {
    margin-bottom: 20px;
}

.btn-animate.transform,
.btn-animate.question {
    background: #4A7BB7;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(74,123,183,0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-animate.transform:hover,
.btn-animate.question:hover {
    background: #3A6BA7;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(74,123,183,0.4);
}

.btn-animate.transform span,
.btn-animate.question span {
    font-weight: bold;
}

/* Центрирование кнопок этапов и позиционирование Wh-questions */
.stage-controls.question {
    position: relative;
    display: flex;
    justify-content: center; /* центрируем первые три кнопки */
    align-items: center;
}

/* Контролы для переключения этапов */
.stage-controls.transform {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Контролы для переключения этапов вопросительной формы */
.stage-controls.question {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}

/* === OVERRIDE LAYOUT FOR STAGE + WH BUTTONS (center 1,2,3; WH adjacent) === */
.stage-controls.question {
    justify-content: center !important;
}
.stage-controls.question .stage-btn-group {
    display: flex;
    gap: 14px;
}
.stage-controls.question .btn-animate.wh-btn {
    position: static !important; /* отменяем absolute */
    right: auto; top: auto; /* сброс */
    margin-left: 42px; /* расстояние после кнопки 3 */
    transform: translateY(10px) scale(0.97);
}
.stage-controls.question .btn-animate.wh-btn.visible {
    transform: translateY(0) scale(1);
}

.stage-btn {
    padding: 8px 16px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
}

.stage-btn:hover {
    background-color: #e9ecef;
}

.stage-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Стиль кнопки Wh-questions */
.stage-controls.question .wh-btn {
    background-color: #28a745;
    color: #fff;
    border: 1px solid #28a745;
}

.stage-controls.question .wh-btn:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Расширенные стили и анимация появления для Wh-questions кнопки */
.stage-controls.question .stage-btn.wh-btn {
    min-width: 140px;
    padding: 8px 20px;
    background-color: #28a745;
    color: #fff;
    border: 1px solid #28a745;
    border-radius: 6px;
    opacity: 0;
    transform: translateX(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    margin-left: 50px; /* визуальный зазор как будто есть еще одна кнопка */
}

.stage-controls.question .stage-btn.wh-btn.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* Группа кнопок этапов по центру */
.stage-controls.question {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}
.stage-controls.question .stage-btn-group {
    display: flex;
    gap: 10px;
    position: relative;
}
/* Wh кнопка рядом, с небольшим отступом слева */
.stage-controls.question .btn-animate.wh-btn {
    margin-left: 30px;
    position: relative;
    top: 0;
    transform: translateY(10px) scale(.97);
}
.stage-controls.question .btn-animate.wh-btn.visible {
    transform: translateY(0) scale(1);
}

/* ======================================================
   5. АНИМАЦИЯ ОТРИЦАТЕЛЬНОЙ ФОРМЫ - СТРУКТУРА КОНТЕЙНЕРОВ
   ====================================================== */

/* Основная ячейка для глаголов */
.verb-cell {
    position: relative;
    overflow: hidden;
}

/* Контейнер для размещения глагольных элементов */
.verb-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Базовые стили для всех глагольных элементов */
.verb-item {
    position: absolute;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 3px;
    transition: all 0.5s ease-in-out;
    white-space: nowrap;
    top: 50%;
    transform: translateY(-50%);
}

/* ======================================================
   6. АНИМАЦИЯ ОТРИЦАТЕЛЬНОЙ ФОРМЫ - ЭЛЕМЕНТ DRINK
   ====================================================== */

/* Базовые стили для drink */
.drink-item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* Этап 1: исходное состояние */
.drink-item[data-stage="1"] {
    transform: translateX(-50%) translateY(-50%);
}

/* Этап 2: drink плавно перемещается вправо */
.drink-item[data-stage="2"] {
    transform: translateX(-25%) translateY(-50%);
}

/* Этап 3: drink смещается еще правее */
.drink-item[data-stage="3"] {
    transform: translateX(-4%) translateY(-50%);
}

/* Этап 4: финальное смещение drink влево после анимации апострофа */
.drink-item[data-stage="4"] {
    transform: translateX(-4%) translateY(-50%);
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) 1s; /* Задержка 1с для завершения анимации апострофа */
}

/* ======================================================
   7. АНИМАЦИЯ ОТРИЦАТЕЛЬНОЙ ФОРМЫ - ЭЛЕМЕНТ DO
   ====================================================== */

/* Базовые стили для do */
.do-item {
    position: absolute;
    transition: 
        left 0.4s cubic-bezier(0.4,0,0.2,1),
        top 0.5s cubic-bezier(0.4,0,0.2,1),
        opacity 0.5s cubic-bezier(0.4,0,0.2,1),
        transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* Этап 1: do скрыт над контейнером */
.do-item[data-stage="1"] {
    left: 15px;
    top: -40px;
    opacity: 0;
    transform: translateY(0);
}

/* Этап 2: do опускается на место, становится видимым */
.do-item[data-stage="2"] {
    left: 15px;
    top: 50%;
    opacity: 1;
    transform: translateY(-50%);
    animation: dropFromTop 0.5s ease-in-out forwards;
}

/* Этап 3: do смещается чуть левее */
.do-item[data-stage="3"] {
    left: 8px;
    top: 50%;
    opacity: 1;
    transform: translateY(-50%);
}

/* Этап 4: do остается видимым на той же позиции */
.do-item[data-stage="4"] {
    left: 8px;
    top: 50%;
    opacity: 1;
    transform: translateY(-50%);
}

/* ======================================================
   8. АНИМАЦИЯ ОТРИЦАТЕЛЬНОЙ ФОРМЫ - ЭЛЕМЕНТ NOT
   ====================================================== */

/* Базовые стили для not-item */
.not-item {
    color: #dc3545;
    left: 41%;
    position: absolute;
    white-space: nowrap;
}

/* Этапы 1-2: not скрыт */
.not-item[data-stage="1"],
.not-item[data-stage="2"] {
    display: none;
}

/* Этап 3: not появляется сверху с анимацией dropFromTop */
.not-item[data-stage="3"] {
    display: block;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
    animation: dropFromTop 0.5s ease-in-out forwards;
}

/* Этап 4: not остается на месте (анимация букв происходит индивидуально) */
.not-item[data-stage="4"] {
    display: block;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
}

/* ======================================================
   9. АНИМАЦИЯ ОТРИЦАТЕЛЬНОЙ ФОРМЫ - БУКВЫ N, O, T И АПОСТРОФ
   ====================================================== */

/* Базовые стили для букв в слове not */
.letter-n, .letter-t {
    display: inline-block;
    transition: transform 0.5s ease-in-out;
}

/* Этапы 1-3: буквы n и t в нормальном положении */
.letter-n[data-stage="1"],
.letter-n[data-stage="2"],
.letter-n[data-stage="3"],
.letter-t[data-stage="1"],
.letter-t[data-stage="2"],
.letter-t[data-stage="3"] {
    transform: none;
}

/* Этап 4: буква n смещается влево на 2px после анимации апострофа */
.letter-n[data-stage="4"] {
    transform: translateX(-2px);
    transition: transform 0.5s ease-in-out 1s; /* Задержка 1с для завершения анимации апострофа */
}

/* Этап 4: буква t смещается влево на 10px после анимации апострофа */
.letter-t[data-stage="4"] {
    transform: translateX(-8px);
    transition: transform 0.5s ease-in-out 1s; /* Задержка 1с для завершения анимации апострофа */
}

/* Анимация буквы o в слове not */
.letter-o {
    display: inline-block;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    position: relative;
}

/* Этапы 1-3: буква o видима и в нормальном положении */
.letter-o[data-stage="1"],
.letter-o[data-stage="2"],
.letter-o[data-stage="3"] {
    transform: none;
    opacity: 1;
}

/* Этап 4: буква o опускается и исчезает */
.letter-o[data-stage="4"] {
    transform: translateY(20px);
    opacity: 0;
}

/* Анимация апострофа */
.apostrophe {
    display: inline-block;
    position: absolute;
    margin-left: -13px; /* Позиционируем на место буквы o */
    transition: all 0.5s ease-in-out;
}

/* Этапы 1-3: апостроф скрыт сверху */
.apostrophe[data-stage="1"],
.apostrophe[data-stage="2"],
.apostrophe[data-stage="3"] {
    top: -40px;
    opacity: 0;
}

/* Этап 4: апостроф опускается и смещается влево */
.apostrophe[data-stage="4"] {
    top: 0;
    opacity: 1;
    transform: translateX(-5px);
    animation: apostropheDropFromTop 0.5s ease-in-out forwards;
    transition: transform 0.5s ease-in-out 1s; /* Задержка 1с для завершения анимации опускания */
}

/* ======================================================
   10. KEYFRAMES АНИМАЦИИ
   ====================================================== */

/* Анимация вращения для индикаторов */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Анимация появления элементов сверху */
@keyframes dropFromTop {
    from {
        top: -40px;
        opacity: 0;
    }
    to {
        top: 50%;
        opacity: 1;
    }
}

/* Анимация появления апострофа сверху */
@keyframes apostropheDropFromTop {
    from {
        top: -40px;
        opacity: 0;
    }
    to {
        top: 5px;
        opacity: 1;
    }
}

/* Анимация появления с прозрачности */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ======================================================
   11. АНИМАЦИЯ ВОПРОСИТЕЛЬНОЙ ФОРМЫ
   ====================================================== */

/* Базовые стили для ячеек схемы вопросительной формы */
.question .scheme.blazor-scheme .cell {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease;
    font-size: 1em;
}

/* 7-колоночная структура для вопросительной формы (первая Wh- всегда скрыта) */
.question .scheme.blazor-scheme .grid-row {
    grid-template-columns: 0fr 0.7fr 1fr 1fr 1fr 1fr 1fr !important; /* Wh | Aux | S | V | Obj | Where | When */
    transition: grid-template-columns 0.5s ease;
    overflow: visible;
}

/* Цвета для колонок вопросительной формы с учётом смещения */
.question .scheme.blazor-scheme .cell:nth-child(2) { /* Aux */
    background: #ffebee !important;
    min-width: 0;
    overflow: visible;
}
.question .scheme.blazor-scheme .cell:nth-child(3) { /* S */
    background: #e3f2fd;
}
.question .scheme.blazor-scheme .cell:nth-child(4) { /* V */
    background: #e8f5e8;
}
.question .scheme.blazor-scheme .cell:nth-child(5) { /* Obj */
    background: #fff3e0;
}
.question .scheme.blazor-scheme .cell:nth-child(6) { /* Where */
    background: #fce4ec;
}
.question .scheme.blazor-scheme .cell:nth-child(7) { /* When */
    background: #f3e5f5;
}

/* ======================================================
   12. АНИМАЦИЯ ГЛАГОЛА В ВОПРОСИТЕЛЬНОЙ ФОРМЕ
   ====================================================== */

/* Ячейка для вспомогательного глагола (первая колонка) */
.question-aux-cell {
    position: relative;
    overflow: hidden;
}

.question-aux-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Текст в первой ячейке - появляется на этапе 3 и изначально сжат */
.question-aux-text {
    opacity: 0;
    transform: scaleY(0); /* Изначально сжат по вертикали */
    transition: 
        opacity 0.5s ease 0.2s, /* Небольшая задержка для плавности */
        transform 0.3s ease 1s; /* Разжатие с задержкой 1с (после завершения анимации do) */
}

.question-aux-text[data-stage="1"],
.question-aux-text[data-stage="2"] {
    opacity: 0;
    transform: scaleY(0);
}

.question-aux-text[data-stage="3"] {
    opacity: 1;
    transform: scaleY(1); /* Разжимается до нормального размера */
}

/* Основная ячейка для глаголов в вопросительной форме */
.question-verb-cell {
    position: relative;
    overflow: visible; /* Позволяем элементам выходить за границы ячейки */
}

/* Контейнер для размещения глагольных элементов в вопросительной форме */
.question-verb-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Позволяем элементам выходить за границы */
}

/* Базовые стили для элемента do в вопросительной форме */
.question-do-item {
    position: absolute;
    transition: 
        left 0.4s cubic-bezier(0.4,0,0.2,1),
        top 0.5s cubic-bezier(0.4,0,0.2,1),
        opacity 0.5s cubic-bezier(0.4,0,0.2,1),
        transform 0.5s cubic-bezier(0.4,0,0.2,1);
    color: #2E7D32;
    font-weight: bold;
}

/* Этап 1: do скрыт над контейнером */
.question-do-item[data-stage="1"] {
    left: 15px;
    top: -40px;
    opacity: 0;
    transform: translateY(0);
}

/* Этап 2: do опускается на место, становится видимым */
.question-do-item[data-stage="2"] {
    left: 27px;
    top: 50%;
    opacity: 1;
    transform: translateY(-50%);
    animation: questionDropFromTop 0.5s ease-in-out forwards;
}

/* Этап 3: do смещается влево в центр первой ячейки, затем сжимается по вертикали */
.question-do-item[data-stage="3"] {
    left: -215px; /* Смещение влево для попадания в центр первой ячейки */
    top: 50%;
    opacity: 1;
    transform: translateY(-50%) scaleY(0); /* Сжатие по вертикали */
    transition: 
        left 0.5s cubic-bezier(0.4,0,0.2,1),
        transform 0.3s ease 0.5s; /* Сжатие с задержкой после перемещения */
}

/* Этап 4: do остается сжатым по вертикали */
.question-do-item[data-stage="4"] {
    left: -225px;
    top: 50%;
    opacity: 1;
    transform: translateY(-50%) scaleY(0);
}

/* Базовые стили для элемента drink в вопросительной форме */
.question-drink-item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
    color: #333;
}

/* Этап 1: исходное состояние drink */
.question-drink-item[data-stage="1"] {
    transform: translateX(-50%) translateY(-50%);
}

/* Этап 2: drink смещается вправо для освобождения места do */
.question-drink-item[data-stage="2"] {
    transform: translateX(-25%) translateY(-50%);
}

/* Этап 3: drink возвращается в центральную позицию */
.question-drink-item[data-stage="3"] {
    transform: translateX(-50%) translateY(-50%);
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* Этап 4: drink остается в центральной позиции */
.question-drink-item[data-stage="4"] {
    transform: translateX(-50%) translateY(-50%);
}

/* ======================================================
   13. АНИМАЦИЯ ЗНАКА ВОПРОСА В ПОСЛЕДНЕЙ КОЛОНКЕ
   ====================================================== */

/* Ячейка для обстоятельства времени (последняя колонка) */
.question-when-cell {
    position: relative;
    overflow: visible; /* Позволяем элементам выходить за границы ячейки */
}

.question-when-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Позволяем элементам выходить за границы */
}

/* Базовые стили для текста "in the morning." */
.question-morning-item {
    position: relative;
    color: #333;
}

/* Базовые стили для точки */
.question-period-item {
    transition: opacity 0.3s ease 0.5s; /* Исчезновение с задержкой после появления знака вопроса */
}

/* Этапы 1-2: точка видима */
.question-period-item[data-stage="1"],
.question-period-item[data-stage="2"] {
    opacity: 1;
}

/* Этап 3: точка исчезает */
.question-period-item[data-stage="3"] {
    opacity: 0;
}

/* УДАЛЕНО: stage 4 (больше не используется) */

/* Базовые стили для знака вопроса */
.question-mark-item {
    position: absolute;
    transition: 
        top 0.5s cubic-bezier(0.4,0,0.2,1),
        opacity 0.5s cubic-bezier(0.4,0,0.2,1);
    color: #dc3545;
    font-weight: bold;
    font-size: 1.1em;
    right: 6px; /* Позиционируем рядом с точкой */
}

/* Этапы 1-2: знак вопроса скрыт сверху */
.question-mark-item[data-stage="1"],
.question-mark-item[data-stage="2"] {
    top: -40px;
    opacity: 0;
}

/* Этап 3: знак вопроса опускается на место точки */
.question-mark-item[data-stage="3"] {
    top: 50%;
    opacity: 1;
    transform: translateY(-50%);
    animation: questionMarkDropFromTop 0.5s ease-in-out forwards;
}

/* УДАЛЕНО: stage 4 (больше не используется) */

/* Анимация появления знака вопроса сверху */
@keyframes questionMarkDropFromTop {
    from {
        top: -40px;
        opacity: 0;
    }
    to {
        top: 50%;
        opacity: 1;
    }
}

/* Анимация появления do сверху для вопросительной формы */
@keyframes questionDropFromTop {
    from {
        top: -40px;
        opacity: 0;
    }
    to {
        top: 50%;
        opacity: 1;
    }
}

/* ======================================================
   14. ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ WH-QUESTIONS
   ====================================================== */

/* Большая кнопка Wh-questions в стиле btn-animate */
.btn-animate.wh-btn {
    background: #28a745;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(40,167,69,0.35);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05em;
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    pointer-events: none;
}
.btn-animate.wh-btn.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.btn-animate.wh-btn:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(40,167,69,0.45);
}
.btn-animate.wh-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(40,167,69,0.3);
}

/* Обертка для центрирования группы и правого выравнивания Wh-кнопки */
.stage-controls.question .stage-center-wrap {
    position: relative;
    display: inline-block; /* размер по содержимому */
}
.stage-controls.question {
    text-align: center; /* центрируем саму обертку */
}
.stage-controls.question .stage-center_wrap .btn-animate.wh-btn {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 24px; /* отступ справа от группы */
    transform: translateY(10px) scale(0.97);
}
.stage-controls.question .stage-center_wrap .btn-animate.wh-btn.visible {
    transform: translateY(-50%) scale(1);
}

/* Трёхзонная раскладка для блока управления этапами */
.stage-controls.question {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr; /* пустая зона слева/справа для центрирования */
    align-items: center;
    column-gap: 16px;
}
/* Центр: занимает две средние колонки (вторая) и центрируется */
.stage-controls.question .stage-center {
    grid-column: 2;
    display: flex;
    justify-content: center;
}
.stage-controls.question .stage-center .stage-btn-group { display: flex; gap: 10px; }

/* Правая сторона: wh-кнопка затем индикатор */
.stage-controls.question .stage-right.wh { grid-column: 3; }
.stage-controls.question .stage-right.indicator { grid-column: 4; justify-self: start; }

/* Правки анимации появления wh-кнопки без смещения верха */
.stage-controls.question .stage-right.wh .btn-animate.wh-btn { transform: translateY(6px) scale(0.97); }
.stage-controls.question .stage-right.wh .btn-animate.wh-btn.visible { transform: translateY(0) scale(1); }

/* === Equal-width three-column question controls (final) === */
/* Updated: center column auto width (content-based) keeping side columns flexible */
.stage-controls.question.three-cols { display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; margin-top:20px; column-gap:0; }
.stage-controls.question.three-cols > .col { display:flex; justify-content:center; align-items:center; min-width:0; }
.stage-controls.question.three-cols > .col.col-left { justify-content:center; }
.stage-controls.question.three-cols > .col.col-center { justify-content:center; }
.stage-controls.question.three-cols > .col.col-right { justify-content:flex-start; }
.stage-controls.question.three-cols .stage-btn-group { display:flex; gap:12px; }
.stage-controls.question.three-cols .stage-btn-group .stage-spinner { margin-left:16px; }
.stage-controls.question.three-cols .col.col-right.hidden { visibility:hidden; }
.stage-controls.question.three-cols .col.col-right.visible .wh-btn { opacity:1; transform:translateY(0) scale(1); }
@media (max-width:600px){
  .stage-controls.question.three-cols { grid-template-columns:1fr; row-gap:12px; }
  .stage-controls.question.three-cols > .col.col-left { display:none; }
  .stage-controls.question.three-cols > .col.col-right.hidden { display:none; }
}
/* === End equal-width three-column controls === */

/* --- BEGIN LEGACY QUESTION CONTROLS (neutralized) --- */
/* All selectors renamed from .stage-controls.question to .legacy-stage-controls-question to avoid conflicts */
.legacy-stage-controls-question { position: relative; display: flex; justify-content: center; align-items: center; }
.legacy-stage-controls-question { margin-top: 20px; display: flex; gap: 10px; align-items: center; position: relative; }
/* override layout (old) */
.legacy-stage-controls-question { justify-content: center !important; }
.legacy-stage-controls-question .stage-btn-group { display: flex; gap: 14px; }
.legacy-stage-controls-question .btn-animate.wh-btn { position: static !important; right: auto; top: auto; margin-left: 42px; transform: translateY(10px) scale(0.97); }
.legacy-stage-controls-question .btn-animate.wh-btn.visible { transform: translateY(0) scale(1); }
/* old wh button variants */
.legacy-stage-controls-question .wh-btn { background-color:#28a745; color:#fff; border:1px solid #28a745; }
.legacy-stage-controls-question .wh-btn:hover { background-color:#218838; border-color:#1e7e34; }
.legacy-stage-controls-question .stage-btn.wh-btn { min-width:140px; padding:8px 20px; background-color:#28a745; color:#fff; border:1px solid #28a745; border-radius:6px; opacity:0; transform:translateX(20px) scale(0.95); pointer-events:none; transition:opacity .4s ease, transform .4s ease; margin-left:50px; }
.legacy-stage-controls-question .stage-btn.wh-btn.visible { opacity:1; transform:translateX(0) scale(1); pointer-events:auto; }
.legacy-stage-controls-question { display:flex; justify-content:center; align-items:center; gap:0; }
.legacy-stage-controls-question .stage-btn-group { display:flex; gap:10px; position:relative; }
.legacy-stage-controls-question .btn-animate.wh-btn { margin-left:30px; position:relative; top:0; transform:translateY(10px) scale(.97); }
.legacy-stage-controls-question .btn-animate.wh-btn.visible { transform:translateY(0) scale(1); }
/* Later legacy grid + inline variants */
.legacy-stage-controls-question .stage-center-wrap { position:relative; display:inline-block; }
.legacy-stage-controls-question { text-align:center; }
.legacy-stage-controls-question .stage_center_wrap .btn-animate.wh-btn { position:absolute; left:100%; top:50%; margin-left:24px; transform:translateY(10px) scale(.97); }
.legacy-stage-controls-question .stage_center_wrap .btn-animate.wh-btn.visible { transform:translateY(-50%) scale(1); }
.legacy-stage-controls-question { display:grid !important; grid-template-columns:1fr auto auto 1fr; align-items:center; column-gap:16px; }
.legacy-stage-controls-question .stage-center { grid-column:2; display:flex; justify-content:center; }
.legacy-stage-controls-question .stage-center .stage-btn-group { display:flex; gap:10px; }
.legacy-stage-controls-question .stage-right.wh { grid-column:3; }
.legacy-stage-controls-question .stage-right.indicator { grid-column:4; justify-self:start; }
.legacy-stage-controls-question .stage-right.wh .btn-animate.wh-btn { transform:translateY(6px) scale(.97); }
.legacy-stage-controls-question .stage-right.wh .btn-animate.wh-btn.visible { transform:translateY(0) scale(1); }
/* --- END LEGACY QUESTION CONTROLS (neutralized) --- */

/* ======================================================
   15. ДИНАМИЧЕСКОЕ ПОКАЗ/СКРЫТИЕ CТОЛБЦОВ WH & AUX (width-driven)
   ===================================================== */
/* Base (stage >=3) widths already: Wh (0.7fr when enabled), Aux (0.7fr). When Wh disabled first column 0fr. */
.scheme.blazor-scheme.question .grid-row { transition: grid-template-columns .5s ease; }
/* WITH Wh: stage 1-2 collapse Wh + Aux; stage >=3 expand both */
.scheme.blazor-scheme.question.with-wh[data-stage="1"] .grid-row,
.scheme.blazor-scheme.question.with-wh[data-stage="2"] .grid-row { grid-template-columns:0fr 0fr 1fr 1fr 1fr 1fr 1fr !important; column-gap:0; }
.scheme.blazor-scheme.question.with-wh[data-stage="3"] .grid-row,
.scheme.blazor-scheme.question.with-wh[data-stage="4"] .grid-row,
.scheme.blazor-scheme.question.with-wh[data-stage="5"] .grid-row { grid-template-columns:0.7fr 0.7fr 1fr 1fr 1fr 1fr 1fr !important; }
/* NO Wh: stage 1-2 collapse Aux; stage >=3 expand Aux */
.scheme.blazor-scheme.question.no-wh[data-stage="1"] .grid-row,
.scheme.blazor-scheme.question.no-wh[data-stage="2"] .grid-row { grid-template-columns:0fr 0fr 1fr 1fr 1fr 1fr 1fr !important; column-gap:0; }
.scheme.blazor-scheme.question.no-wh[data-stage="3"] .grid-row,
.scheme.blazor-scheme.question.no-wh[data-stage="4"] .grid-row,
.scheme.blazor-scheme.question.no-wh[data-stage="5"] .grid-row { grid-template-columns:0fr 0.7fr 1fr 1fr 1fr 1fr 1fr !important; }
/* Prevent bleed from collapsed tracks */
.scheme.blazor-scheme.question .question-wh-cell,
.scheme.blazor-scheme.question .cell:nth-child(1),
.scheme.blazor-scheme.question .cell:nth-child(2) { overflow:hidden; }
/* Aux content safety (keep text animation; hide content when track is 0fr) */
.scheme.blazor-scheme.question[data-stage="1"] .cell:nth-child(2),
.scheme.blazor-scheme.question[data-stage="2"] .cell:nth-child(2) { opacity:0; pointer-events:none; }
.scheme.blazor-scheme.question[data-stage="3"] .cell:nth-child(2) { opacity:1; }
/* Wh content safety mirror (hide fully when track 0fr) */
.scheme.blazor-scheme.question[data-stage="1"] .cell:nth-child(1),
.scheme.blazor-scheme.question[data-stage="2"] .cell:nth-child(1) { opacity:0; pointer-events:none; padding:0 !important; border:none !important; background:transparent !important; min-width:0 !important; }
.scheme.blazor-scheme.question[data-stage="3"] .cell:nth-child(1),
.scheme.blazor-scheme.question[data-stage="4"] .cell:nth-child(1),
.scheme.blazor-scheme.question[data-stage="5"] .cell:nth-child(1) { opacity:1; pointer-events:auto; }
/* Specific Wh class (if present) still covered; keep for clarity */
.scheme.blazor-scheme.question.with-wh[data-stage="1"] .question-wh-cell,
.scheme.blazor-scheme.question.with-wh[data-stage="2"] .question-wh-cell { opacity:0; pointer-events:none; padding:0 !important; border:none !important; background:transparent !important; min-width:0 !important; }
.scheme.blazor-scheme.question.with-wh[data-stage="3"] .question-wh-cell,
.scheme.blazor-scheme.question.with-wh[data-stage="4"] .question-wh-cell,
.scheme.blazor-scheme.question.with-wh[data-stage="5"] .question-wh-cell { opacity:1; pointer-events:auto; }
/* Remove base duplicated WH/AUX templates to avoid override issues (was below) */
/* (Удалено: .scheme.blazor-scheme.question.with-wh .grid-row {...} и .scheme.blazor-scheme.question.no-wh .grid-row {...}) */

/* Minimal padding for the 'in the morning' (When) cell only */
.scheme.blazor-scheme.question .question-when-cell { padding:2px 4px !important; }

/* === Aux Do/do scaleY swap on Wh toggle (stage 3) – revised timing === */
.scheme.blazor-scheme.question .question-aux-cell { position:relative; }
.scheme.blazor-scheme.question .question-aux-cell .question-aux-container { position:relative; }
/* Base: collapsed (scaleY 0) so появление управляется stage/variant правилами */
.scheme.blazor-scheme.question .question-aux-cell .question-aux-variant { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scaleY(0); transform-origin:top center; font-weight:bold; white-space:nowrap; transition:transform .35s ease, opacity .35s ease; opacity:0; }
/* Stages 1-2 keep hidden */
.scheme.blazor-scheme.question[data-stage="1"] .question-aux-cell .question-aux-variant,
.scheme.blazor-scheme.question[data-stage="2"] .question-aux-cell .question-aux-variant { opacity:0; transform:translate(-50%, -50%) scaleY(0); }
/* Stage 3 general visibility (will still be scaleY(0) until variant overrides) */
.scheme.blazor-scheme.question[data-stage="3"] .question-aux-cell .question-aux-variant { opacity:1; }
/* Stage 3, no-wh: uppercase Do grows after 0.5s (синхронно с collapse перемещающегося do), lowercase remains collapsed */
.scheme.blazor-scheme.question.no-wh[data-stage="3"] .question-aux-cell .aux-do-upper { transform:translate(-50%, -50%) scaleY(1); transition:transform .35s ease .5s, opacity .35s ease .5s; }
.scheme.blazor-scheme.question.no-wh[data-stage="3"] .question-aux-cell .aux-do-lower { transform:translate(-50%, -50%) scaleY(0); opacity:0; }
/* Stage 3, with-wh (toggle): IMMEDIATE swap (без задержки) */
.scheme.blazor-scheme.question.with-wh[data-stage="3"] .question-aux-cell .aux-do-upper { transform:translate(-50%, -50%) scaleY(0); opacity:0; transition:transform .25s ease, opacity .25s ease; }
.scheme.blazor-scheme.question.with-wh[data-stage="3"] .question-aux-cell .aux-do-lower { transform:translate(-50%, -50%) scaleY(1); opacity:1; transition:transform .25s ease, opacity .25s ease; }

/* ======================================================
   Question: shift underline patterns by +2 columns (minimal override)
   - Disable lines on cols 1–2 (Wh, Aux)
   - Apply S, V, Obj, Where, When to cols 3–7 respectively
   ====================================================== */
/* Hide any base underline coming from grammar-tables.css on Wh/Aux */
.scheme.blazor-scheme.question .cell:nth-child(1):not(:empty)::before {
  background: none !important;
  background-image: none !important;
}

/* 2: Aux — double line */
.scheme.blazor-scheme.question .cell:nth-child(2):not(:empty)::before {
  height: 4px; /* ensure space for two lines */
  background-image:
    linear-gradient(to right, black 0%, black 100%),
    linear-gradient(to right, black 0%, black 100%) !important;
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 3px;
  background-repeat: no-repeat;
}

/* 3: S — single solid line */
.scheme.blazor-scheme.question .cell:nth-child(3):not(:empty)::before {
  background: black !important;
  background-image: none !important;
}

/* 4: V — double line */
.scheme.blazor-scheme.question .cell:nth-child(4):not(:empty)::before {
  height: 4px; /* ensure space for two lines */
  background-image:
    linear-gradient(to right, black 0%, black 100%),
    linear-gradient(to right, black 0%, black 100%) !important;
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 3px;
  background-repeat: no-repeat;
}

/* 5: Obj — dashed */
.scheme.blazor-scheme.question .cell:nth-child(5):not(:empty)::before {
  background-image: repeating-linear-gradient(to right, black 0 8px, transparent 8px 12px) !important;
  background-size: 12px 2px;
}

/* 6: Where — dot-dash */
.scheme.blazor-scheme.question .cell:nth-child(6):not(:empty)::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  min-width: 60%;
  height: 2px;
  background-image: repeating-linear-gradient(to right, black 0 2px, transparent 2px 4px, black 4px 12px, transparent 12px 14px) !important;
  background-size: 14px 2px;
}

/* 7: When — dot-dash */
.scheme.blazor-scheme.question .cell:nth-child(7):not(:empty)::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  min-width: 60%;
  height: 2px;
  background-image: repeating-linear-gradient(to right, black 0 2px, transparent 2px 4px, black 4px 12px, transparent 12px 14px) !important;
  background-size: 14px 2px;
}

/* Match Question style: make 'do' green in Negative scheme */
.scheme.negative-scheme .do-item {
    color: #2E7D32;
    font-weight: bold;
}

/* ======================================================
   16. DESKTOP/TABLET-ORIENTED LAYOUT (disable mobile)
   ===================================================== */
/* Force desktop/tablet layout widths and horizontal scroll when viewport is narrow */
.scheme.blazor-scheme,
.scheme.negative-scheme {
  min-width: 768px;
  overflow-x: auto; /* enable horizontal scroll on narrow screens */
}

/* Keep three-column controls layout on all widths (override mobile stack) */
.stage-controls.question.three-cols {
  grid-template-columns: 1fr auto 1fr !important;
  row-gap: 0 !important;
}

/* Stage explanations: enforce desktop/tablet width and horizontal scroll on narrow screens */
.stage-explanations {
  min-width: 768px;
  overflow-x: auto; /* keep desktop layout; scroll horizontally on small viewports */
}
.stage-explanations .circumstances-table {
  min-width: 720px; /* avoid column collapse into narrow stacks */
}