@charset "UTF-8";

/* Runner feedback and learning context owner. Extracted from legacy LMS CSS in P15.175. */

/* Runner feedback/context CSS */

.ts-learning-context {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-card);
    padding: var(--spacing-md);
}

.ts-learning-context__header { margin-bottom: var(--spacing-xs); }

.ts-learning-context__title { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }

.ts-learning-context__meta { color: var(--color-text-secondary); margin-bottom: var(--spacing-xs); }

.ts-learning-context__actions { display:flex; flex-wrap:wrap; gap: var(--spacing-xs); }

.ts-learning-context__status { margin-bottom: var(--spacing-xs); }

.ts-learning-context__notice { color: var(--color-warning-text); font-size: var(--font-size-sm); margin-top: var(--spacing-xs); }

#answer-options .answer-option.is-selected:not(.correct-answer):not(.incorrect-answer):not(.missed-answer),
#answer-options .answer-option:has(.answer-option__input:checked):not(.correct-answer):not(.incorrect-answer):not(.missed-answer) {
    border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary-light) 45%, var(--color-bg-card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

#answer-options .answer-option.correct-answer {
    border-color: color-mix(in srgb, var(--color-success) 62%, var(--color-border));
    background: color-mix(in srgb, var(--color-success-light) 58%, var(--color-bg-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success) 34%, transparent);
}

#answer-options .answer-option.incorrect-answer {
    border-color: color-mix(in srgb, var(--color-danger) 58%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger-light) 48%, var(--color-bg-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 28%, transparent);
}

#answer-options .answer-option.correct-answer .answer-option__label {
    color: color-mix(in srgb, var(--color-success-text) 76%, var(--color-text-primary));
    font-weight: var(--font-weight-semibold);
}

#answer-options .answer-option.incorrect-answer .answer-option__label,
#answer-options .answer-option.missed-answer .answer-option__label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

#answer-options .answer-option.correct-answer.incorrect-answer {
    border-left-width: 4px;
    border-left-color: var(--color-success);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 24%, transparent);
}

#answer-options .answer-option.correct-answer .answer-option__input,
#answer-options .answer-option.incorrect-answer .answer-option__input,
#answer-options .answer-option.missed-answer .answer-option__input {
    filter: saturate(1.08) contrast(1.06);
}

#explanation-block,
#learning-explanation {
    border: 1px solid color-mix(in srgb, var(--color-info, #0dcaf0) 38%, var(--color-border));
    background: color-mix(in srgb, var(--color-bg-card) 80%, var(--color-info-light, #e7f8fc));
    color: var(--color-text-primary);
}

#explanation-block .explanation-content,
#learning-explanation .explanation-content {
    color: var(--color-text-primary);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

#explanation-block img,
#learning-explanation img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
#explanation-block,
    #learning-explanation {
        padding: var(--spacing-sm);
    }
}

/* P15.177 Runner result/answer feedback residuals. */
/* ==================== TEST RUNNER ANSWER FEEDBACK CONTRAST (M10.071) ==================== */

#answer-options .answer-option,
#answer-options .form-check.answer-option {
    border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-text-primary));
    border-radius: var(--radius-card);
    background: var(--color-bg-card);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

#answer-options .answer-option .answer-option__label,
#answer-options .form-check.answer-option label {
    color: var(--color-text-primary);
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}


@media (max-width: 768px) {#answer-options .answer-option,
    #answer-options .form-check.answer-option {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }

    #answer-options .answer-option .answer-option__label,
    #answer-options .form-check.answer-option label {
        font-size: var(--font-size-sm);
        line-height: 1.45;
    }

}