/* ==============================
   WORKOUT GENERATION MODAL
   ============================== */

.workout-gen-modal {
    font-family: var(--font-primary);
    transition:
        transform var(--transition-normal),
        background-color var(--transition-slow);
}

.workout-gen-modal-overlay--body-hidden {
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.workout-gen-modal .modal-topbar-shell .spa-topbar__leading,
.workout-gen-modal .modal-topbar-shell .spa-topbar__profile {
    min-width: calc(var(--space-lg) + var(--space-xs));
}

.workout-gen-modal .modal-topbar-shell {
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--transition-slow),
        border-color var(--transition-slow);
}

.workout-gen-modal-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
    padding-left: calc(var(--space-md) + var(--safe-area-left));
    padding-right: calc(var(--space-md) + var(--safe-area-right));
    padding-bottom: calc(var(--space-md) + var(--safe-area-bottom));
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--transition-slow),
        visibility 0s linear 0s;
}

.workout-gen-modal--body-hidden {
    background-color: transparent;
    pointer-events: none;
}

.workout-gen-modal--body-hidden .modal-topbar-shell {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    pointer-events: auto;
}

.workout-gen-modal--body-hidden .workout-gen-modal-body {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--transition-slow),
        visibility 0s linear var(--transition-slow);
}

/* ==============================
   MODAL TOPBAR
   ============================== */

.workout-gen-progress-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
}

.workout-gen-dismiss-btn {
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.workout-gen-dismiss-btn.visible {
    opacity: 0.9;
    pointer-events: auto;
}

.workout-gen-dismiss-btn:disabled {
    cursor: default;
}

.workout-gen-dismiss-btn:active {
    transform: scale(0.96);
}

.workout-gen-progress-bar {
    width: 100%;
    max-width: 520px;
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-standard);
    overflow: hidden;
    position: relative;
}

.workout-gen-progress-fill {
    height: 100%;
    background: var(--text-primary);
    border-radius: var(--radius-standard);
    width: 0%;
    transition: width var(--transition-normal);
}

.workout-gen-progress-text {
    align-items: center;
    justify-content: center;
    max-width: 100%;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-base);
    text-align: center;
    display: none;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.workout-gen-progress-text:not(.btn) {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.workout-gen-progress-text.is-error {
    color: var(--status-error-fg);
}

.workout-gen-progress-text:disabled {
    cursor: default;
}

.workout-gen-progress-text.visible {
    opacity: 1;
}

/* ==============================
   TRIVIA TOGGLE
   ============================== */

.workout-gen-trivia-toggle {
    transition: transform var(--transition-fast);
}

.workout-gen-trivia-toggle:active {
    transform: scale(0.98);
}

.workout-gen-trivia-toggle-icon {
    opacity: 0.9;
}

/* ==============================
   TRIVIA SECTION
   ============================== */

.workout-gen-trivia-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding-top: var(--space-lg);
    transition: opacity var(--transition-normal);
}

.workout-gen-trivia-content {
    --workout-gen-trivia-card-width: min(calc(100% - (2 * var(--space-md))),
            calc((100dvh - (8 * var(--space-lg))) * 8 / 11),
            calc(24 * var(--u)));

    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.workout-gen-trivia-status-stack,
.workout-gen-trivia-prompt {
    position: absolute;
    left: 50%;
    width: min(var(--workout-gen-trivia-card-width), 100%);
    pointer-events: none;
}

.workout-gen-trivia-status-stack {top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    text-align: center;
    z-index: var(--z-base)}

.workout-gen-trivia-status,
.workout-gen-trivia-feedback {
    margin: 0;
    text-align: center;
}

.workout-gen-trivia-status {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.workout-gen-trivia-status[data-visibility="hidden"] {
    display: none;
}

.workout-gen-trivia-status[data-result="correct"] {
    color: var(--status-success-fg);
}

.workout-gen-trivia-status[data-result="incorrect"] {
    color: var(--status-error-fg);
}

.workout-gen-trivia-feedback {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    transition: color var(--transition-fast), opacity var(--transition-fast);
    font-weight: var(--font-weight-regular);
}

.workout-gen-trivia-feedback[data-visibility="hidden"] {
    opacity: 0;
}

.workout-gen-trivia-prompt {
    top: var(--space-xl);
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: calc(var(--z-base) + 1);
}

.workout-gen-trivia-card {
    --workout-gen-trivia-card-accent: var(--status-info-fg);

    position: absolute;
    left: 50%;
    top: 100%;
    width: var(--workout-gen-trivia-card-width);
    max-width: 100%;
    max-height: calc(100% - (2 * var(--space-xl)));
    aspect-ratio: 8 / 11;
    transform: translate(-50%, 0);
    perspective: 1000px;
    touch-action: none;
    z-index: calc(var(--z-base) + 2);
}

.workout-gen-trivia-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.workout-gen-trivia-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--radius-standard);
    background-color: var(--text-primary);
    color: var(--bg-primary);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    user-select: none;
    -webkit-user-drag: none;
    overflow: hidden;
}

.workout-gen-trivia-card-face-inner {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--text-primary);
    min-height: 0;
}

.workout-gen-trivia-card-front {
    transform: rotateY(0deg);
    padding: var(--space-md);
    border: none;
}

.workout-gen-trivia-card-back {
    transform: rotateY(180deg);
    border: 8px solid var(--workout-gen-trivia-card-accent);
}

.workout-gen-trivia-card-back .workout-gen-trivia-card-face-inner {
    border: none;
    border-radius: calc(var(--radius-standard) - 10px);
    overflow: hidden;
    background-color: var(--text-primary);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.workout-gen-trivia-question {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-xl);
    color: var(--workout-gen-trivia-question-color, var(--bg-primary));
    text-align: center;
    line-height: var(--line-height-tight);
    margin: 0;
    width: 100%;
    transition: color var(--transition-fast);
}

/* ==============================
   RESPONSIVE ADJUSTMENTS
   ============================== */

@media (max-width: 768px) {
    .workout-gen-modal-body {
        padding-left: calc(var(--space-md) + var(--safe-area-left));
        padding-right: calc(var(--space-md) + var(--safe-area-right));
    }

    .workout-gen-trivia-content {
        --workout-gen-trivia-card-width: min(calc(100% - (2 * var(--space-sm))),
                calc((100dvh - (7 * var(--space-lg))) * 8 / 11),
                calc(20 * var(--u)));
    }

    .workout-gen-trivia-prompt {
        top: calc(var(--space-lg) + var(--space-sm));
    }
}