/* [CG] SYNGLI-7040 theme controls and surfaces without recolouring authored media. */
html[data-theme="dark"] #question {
    background: var(--app-surface);
    color: var(--app-text);
}
html[data-theme="dark"] .learn-footer {
    background: var(--app-surface-secondary);
    color: var(--app-text);
    border-top: 1px solid var(--app-border);
}
html[data-theme="dark"] :is(.playback-speed-toggle,
    .svg-tracing-options-button, .svg-tracing-demo,
    .handwriting-letter-tab, .tutor_context_premise_badge,
    .pc-quick-review-passage, .spoken-fib-recorder) {
    background: var(--app-surface-secondary);
    color: var(--app-text-secondary);
    border-color: var(--app-border);
}
html[data-theme="dark"] :is(.handwriting-letter-tab[aria-pressed="true"],
    .handwriting-letter-tab:hover, .svg-tracing-options input:checked + span) {
    background: var(--app-selection);
    color: var(--app-action);
    border-color: var(--app-focus);
}
html[data-theme="dark"] .handwriting-viewport[data-vertical-trim],
html[data-theme="dark"] canvas[data-svg-tracing-mode] {
    background-color: #1e232a;
    box-shadow: inset 0 0 0 1px #505b68;
}
html[data-theme="dark"] .handwriting-viewport[data-vertical-trim] > canvas {
    background-color: transparent;
    box-shadow: none;
}
html[data-theme="dark"] .syngli-modal-body .svg-tracing-option-row {
    color: var(--app-text);
    border-color: var(--app-divider);
}
html[data-theme="dark"] :is(.svg-tracing-progress, .handwriting-sections,
    .question_type, #cue_card_header, #cue_card_footer,
    #instruction_header, .tutor_context_premise_text) {
    color: var(--app-text-secondary);
}
html[data-theme="dark"] .button-correct-background {
    background: var(--app-success-surface);
    color: var(--app-success);
}
html[data-theme="dark"] .button-incorrect-background {
    background: var(--app-error-surface);
    color: var(--app-error);
}
html[data-theme="dark"] :is(.fib.input_response, .pc.input_response) {
    /* [CG] Match the existing important rule for typed-answer underlines. */
    border-bottom-color: var(--app-border) !important;
}

/* [CG] An empty question surface must not leave a band below instructions. */
html[data-theme="dark"] body.course-instructions-visible #question {
    background: transparent;
}