/* Shared contrast rules for the explanatory blocks around lab source code. */
.code-context {
    color: var(--text, var(--ej-theme-text, #eef5ff)) !important;
}

.code-context .code-role,
.code-context .code-facts {
    background: var(--panel, var(--ej-theme-panel, #0f1b2c)) !important;
    border-color: var(--border, var(--ej-theme-border, #2b405c)) !important;
    color: var(--text, var(--ej-theme-text, #eef5ff)) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.code-context .code-role strong,
.code-context .code-role p {
    color: var(--text, var(--ej-theme-text, #eef5ff)) !important;
    -webkit-text-fill-color: currentColor;
    opacity: 1 !important;
    visibility: visible !important;
}

.code-context .code-role .next-step {
    color: var(--muted, var(--ej-theme-muted, #b9c6d8)) !important;
    -webkit-text-fill-color: currentColor;
    opacity: 1 !important;
}

.code-context .code-facts dt {
    color: var(--accent, var(--ej-theme-accent, #8bc5ff)) !important;
}

.code-context .code-facts dd,
.code-context .code-facts a {
    color: var(--muted, var(--ej-theme-muted, #b9c6d8)) !important;
    -webkit-text-fill-color: currentColor;
    opacity: 1 !important;
}

html[data-theme="light"] .code-context .code-role,
html[data-theme="light"] .code-context .code-facts {
    background: #ffffff !important;
    color: #172033 !important;
}

html[data-theme="light"] .code-context .code-role strong,
html[data-theme="light"] .code-context .code-role p {
    color: #172033 !important;
}

html[data-theme="light"] .code-context .code-role .next-step,
html[data-theme="light"] .code-context .code-facts dd,
html[data-theme="light"] .code-context .code-facts a {
    color: #4b5b70 !important;
}

/* Show complete source files instead of creating a vertical scrollbar per card. */
.code-card pre,
.code-shell pre,
.code-card .code-shell pre {
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}