/**
 * Course dual-mode fix layer (load LAST)
 * =====================================
 * Evidence-based overrides for hard-coded light Tailwind/utility classes
 * and common inline light colors used across shell + hybrid courses.
 *
 * Works with any of:
 *   html[data-theme="dark"]
 *   html.dark-mode / html.dark
 *   body.dark-mode / body.dark
 */

/* ---------- Night mode scopes ---------- */
html[data-theme="dark"] body,
html.dark-mode body,
html.dark body,
body.dark-mode,
body.dark {
    color: #e2e8f0;
}

/* Surfaces that are white / gray-50 in light mode */
html[data-theme="dark"] body .bg-white,
html[data-theme="dark"] body .bg-gray-50,
html[data-theme="dark"] body .bg-gray-100,
html[data-theme="dark"] body .bg-slate-50,
html[data-theme="dark"] body .bg-slate-100,
html.dark-mode body .bg-white,
html.dark-mode body .bg-gray-50,
html.dark-mode body .bg-gray-100,
html.dark body .bg-white,
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-slate-50,
body.dark-mode .bg-slate-100,
body.dark .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Soft pastel backgrounds (Tailwind *-50) → dark surfaces */
html[data-theme="dark"] body .bg-blue-50,
html[data-theme="dark"] body .bg-indigo-50,
html[data-theme="dark"] body .bg-sky-50,
html[data-theme="dark"] body .bg-cyan-50,
html[data-theme="dark"] body .bg-teal-50,
html[data-theme="dark"] body .bg-green-50,
html[data-theme="dark"] body .bg-emerald-50,
html[data-theme="dark"] body .bg-yellow-50,
html[data-theme="dark"] body .bg-amber-50,
html[data-theme="dark"] body .bg-orange-50,
html[data-theme="dark"] body .bg-red-50,
html[data-theme="dark"] body .bg-rose-50,
html[data-theme="dark"] body .bg-purple-50,
html[data-theme="dark"] body .bg-violet-50,
html[data-theme="dark"] body .bg-pink-50,
html[data-theme="dark"] body .bg-fuchsia-50,
html[data-theme="dark"] body .bg-green-100,
html[data-theme="dark"] body .bg-red-100,
html[data-theme="dark"] body .bg-blue-100,
html[data-theme="dark"] body .bg-yellow-100,
html.dark-mode body .bg-blue-50,
html.dark-mode body .bg-indigo-50,
html.dark-mode body .bg-sky-50,
html.dark-mode body .bg-cyan-50,
html.dark-mode body .bg-teal-50,
html.dark-mode body .bg-green-50,
html.dark-mode body .bg-emerald-50,
html.dark-mode body .bg-yellow-50,
html.dark-mode body .bg-amber-50,
html.dark-mode body .bg-orange-50,
html.dark-mode body .bg-red-50,
html.dark-mode body .bg-rose-50,
html.dark-mode body .bg-purple-50,
html.dark-mode body .bg-violet-50,
html.dark-mode body .bg-pink-50,
html.dark-mode body .bg-green-100,
html.dark-mode body .bg-red-100,
body.dark-mode .bg-blue-50,
body.dark-mode .bg-indigo-50,
body.dark-mode .bg-sky-50,
body.dark-mode .bg-cyan-50,
body.dark-mode .bg-teal-50,
body.dark-mode .bg-green-50,
body.dark-mode .bg-emerald-50,
body.dark-mode .bg-yellow-50,
body.dark-mode .bg-amber-50,
body.dark-mode .bg-orange-50,
body.dark-mode .bg-red-50,
body.dark-mode .bg-rose-50,
body.dark-mode .bg-purple-50,
body.dark-mode .bg-violet-50,
body.dark-mode .bg-pink-50,
body.dark-mode .bg-green-100,
body.dark-mode .bg-red-100,
body.dark-mode .bg-blue-100,
body.dark-mode .bg-yellow-100 {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Gray / slate text utilities → light slate in night mode */
html[data-theme="dark"] body .text-gray-900,
html[data-theme="dark"] body .text-gray-800,
html[data-theme="dark"] body .text-slate-900,
html[data-theme="dark"] body .text-slate-800,
html[data-theme="dark"] body .text-black,
html.dark-mode body .text-gray-900,
html.dark-mode body .text-gray-800,
html.dark-mode body .text-slate-900,
html.dark-mode body .text-slate-800,
html.dark-mode body .text-black,
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-slate-900,
body.dark-mode .text-slate-800,
body.dark-mode .text-black,
body.dark .text-gray-900,
body.dark .text-gray-800 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] body .text-gray-700,
html[data-theme="dark"] body .text-gray-600,
html[data-theme="dark"] body .text-slate-700,
html[data-theme="dark"] body .text-slate-600,
html.dark-mode body .text-gray-700,
html.dark-mode body .text-gray-600,
html.dark-mode body .text-slate-700,
html.dark-mode body .text-slate-600,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600,
body.dark-mode .text-slate-700,
body.dark-mode .text-slate-600,
body.dark .text-gray-700,
body.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] body .text-gray-500,
html[data-theme="dark"] body .text-gray-400,
html[data-theme="dark"] body .text-slate-500,
html[data-theme="dark"] body .text-slate-400,
html.dark-mode body .text-gray-500,
html.dark-mode body .text-gray-400,
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-400 {
    color: #94a3b8 !important;
}

/* Dark brand text (blue-800 etc.) → lighter on dark surfaces */
html[data-theme="dark"] body .text-blue-900,
html[data-theme="dark"] body .text-blue-800,
html[data-theme="dark"] body .text-blue-700,
html[data-theme="dark"] body .text-indigo-900,
html[data-theme="dark"] body .text-indigo-800,
html[data-theme="dark"] body .text-indigo-700,
html[data-theme="dark"] body .text-sky-900,
html[data-theme="dark"] body .text-sky-800,
html.dark-mode body .text-blue-900,
html.dark-mode body .text-blue-800,
html.dark-mode body .text-blue-700,
body.dark-mode .text-blue-900,
body.dark-mode .text-blue-800,
body.dark-mode .text-blue-700,
body.dark-mode .text-indigo-800,
body.dark-mode .text-indigo-700 {
    color: #93c5fd !important;
}

html[data-theme="dark"] body .text-green-900,
html[data-theme="dark"] body .text-green-800,
html[data-theme="dark"] body .text-green-700,
html[data-theme="dark"] body .text-emerald-800,
html[data-theme="dark"] body .text-emerald-700,
html.dark-mode body .text-green-800,
body.dark-mode .text-green-900,
body.dark-mode .text-green-800,
body.dark-mode .text-green-700,
body.dark-mode .text-emerald-800 {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] body .text-red-900,
html[data-theme="dark"] body .text-red-800,
html[data-theme="dark"] body .text-red-700,
html[data-theme="dark"] body .text-rose-800,
html[data-theme="dark"] body .text-orange-800,
html[data-theme="dark"] body .text-yellow-800,
html[data-theme="dark"] body .text-amber-800,
html.dark-mode body .text-red-800,
body.dark-mode .text-red-900,
body.dark-mode .text-red-800,
body.dark-mode .text-red-700,
body.dark-mode .text-rose-800,
body.dark-mode .text-orange-800,
body.dark-mode .text-yellow-800,
body.dark-mode .text-amber-800 {
    color: #fca5a5 !important;
}

html[data-theme="dark"] body .text-purple-800,
html[data-theme="dark"] body .text-violet-800,
html[data-theme="dark"] body .text-pink-800,
html[data-theme="dark"] body .text-fuchsia-800,
body.dark-mode .text-purple-800,
body.dark-mode .text-violet-800,
body.dark-mode .text-pink-800 {
    color: #d8b4fe !important;
}

/* Borders */
html[data-theme="dark"] body .border,
html[data-theme="dark"] body .border-gray-100,
html[data-theme="dark"] body .border-gray-200,
html[data-theme="dark"] body .border-gray-300,
html[data-theme="dark"] body .border-slate-200,
html[data-theme="dark"] body .border-slate-300,
html.dark-mode body .border-gray-200,
html.dark-mode body .border-gray-300,
body.dark-mode .border,
body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode .border-slate-200,
body.dark-mode .border-slate-300 {
    border-color: #475569 !important;
}

/* Course structural surfaces */
html[data-theme="dark"] body .container,
html[data-theme="dark"] body .card,
html[data-theme="dark"] body .icon-card,
html[data-theme="dark"] body .highlight-box,
html[data-theme="dark"] body .quiz-option,
html[data-theme="dark"] body .quiz-explanation,
html[data-theme="dark"] body .content,
html.dark-mode body .container,
html.dark-mode body .card,
html.dark-mode body .icon-card,
body.dark-mode .container,
body.dark-mode .card,
body.dark-mode .icon-card,
body.dark-mode .highlight-box,
body.dark-mode .quiz-option,
body.dark-mode .quiz-explanation {
    color: #e2e8f0;
}

html[data-theme="dark"] body .card,
html[data-theme="dark"] body .icon-card,
html.dark-mode body .card,
html.dark-mode body .icon-card,
body.dark-mode .card,
body.dark-mode .icon-card {
    background-color: rgba(30, 41, 59, 0.92) !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] body .card h1,
html[data-theme="dark"] body .card h2,
html[data-theme="dark"] body .card h3,
html[data-theme="dark"] body .card h4,
html[data-theme="dark"] body .icon-card h3,
html[data-theme="dark"] body .section-title,
html.dark-mode body .card h3,
body.dark-mode .card h1,
body.dark-mode .card h2,
body.dark-mode .card h3,
body.dark-mode .card h4,
body.dark-mode .icon-card h3,
body.dark-mode .section-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] body .card p,
html[data-theme="dark"] body .card li,
html[data-theme="dark"] body .icon-card p,
html[data-theme="dark"] body .content p,
html[data-theme="dark"] body .content li,
html.dark-mode body .card p,
body.dark-mode .card p,
body.dark-mode .card li,
body.dark-mode .icon-card p,
body.dark-mode .content p,
body.dark-mode .content li {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] body .card strong,
html[data-theme="dark"] body .content strong,
body.dark-mode .card strong,
body.dark-mode .content strong {
    color: #f1f5f9 !important;
}

/* Slides (hybrid) */
html[data-theme="dark"] body .slide,
html.dark-mode body .slide,
body.dark-mode .slide {
    color: #e2e8f0;
}

/* Interactive choosers used in shell courses */
html[data-theme="dark"] body .bp-choice,
html[data-theme="dark"] body .bp-detail,
html[data-theme="dark"] body .nrx-chip,
html[data-theme="dark"] body .nrx-panel,
html[data-theme="dark"] body .nrx-panel__fact,
html[data-theme="dark"] body .nrx-lab__intro,
body.dark-mode .bp-choice,
body.dark-mode .bp-detail,
body.dark-mode .nrx-chip,
body.dark-mode .nrx-panel,
body.dark-mode .nrx-panel__fact,
body.dark-mode .nrx-lab__intro {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] body .bp-choice-body,
html[data-theme="dark"] body .bp-choice-body span,
html[data-theme="dark"] body .nrx-chip__meta,
html[data-theme="dark"] body .bp-detail p,
html[data-theme="dark"] body .nrx-panel p,
body.dark-mode .bp-choice-body,
body.dark-mode .nrx-chip__meta,
body.dark-mode .bp-detail p,
body.dark-mode .nrx-panel p {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] body .bp-choice-body strong,
html[data-theme="dark"] body .nrx-chip__title,
html[data-theme="dark"] body .bp-detail h3,
html[data-theme="dark"] body .nrx-panel h3,
body.dark-mode .bp-choice-body strong,
body.dark-mode .nrx-chip__title,
body.dark-mode .bp-detail h3,
body.dark-mode .nrx-panel h3 {
    color: #f8fafc !important;
}

html[data-theme="dark"] body .bp-choice.is-active,
html[data-theme="dark"] body .nrx-chip.is-active,
body.dark-mode .bp-choice.is-active,
body.dark-mode .nrx-chip.is-active {
    border-color: #60a5fa !important;
    background: #1e3a5f !important;
}

/* Flashcards / micro-check */
html[data-theme="dark"] body .course-shell-flashcard,
html[data-theme="dark"] body .course-shell-flashcard__face,
html[data-theme="dark"] body .course-shell-microcheck__option,
body.dark-mode .course-shell-flashcard,
body.dark-mode .course-shell-flashcard__face,
body.dark-mode .course-shell-microcheck__option {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] body .course-shell-flashcard__title,
html[data-theme="dark"] body .course-shell-flashcard__body,
html[data-theme="dark"] body .course-shell-flashcard__eyebrow,
body.dark-mode .course-shell-flashcard__title,
body.dark-mode .course-shell-flashcard__body {
    color: #f1f5f9 !important;
}

/* Tables */
html[data-theme="dark"] body table,
body.dark-mode table {
    color: #cbd5e1;
    background: #1e293b;
}

html[data-theme="dark"] body th,
body.dark-mode th {
    color: #f8fafc !important;
}

html[data-theme="dark"] body td,
body.dark-mode td {
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

/* Evidence footer */
html[data-theme="dark"] body .edu-evidence-footer,
body.dark-mode .edu-evidence-footer {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] body .edu-evidence-footer h2,
body.dark-mode .edu-evidence-footer h2 {
    color: #f8fafc !important;
}

html[data-theme="dark"] body .edu-evidence-footer a,
body.dark-mode .edu-evidence-footer a {
    color: #93c5fd !important;
}

/* Inline style hard-codes frequently used in course HTML */
html[data-theme="dark"] body [style*="color:#0f172a"],
html[data-theme="dark"] body [style*="color: #0f172a"],
html[data-theme="dark"] body [style*="color:#1e293b"],
html[data-theme="dark"] body [style*="color: #1e293b"],
html[data-theme="dark"] body [style*="color:#111827"],
html[data-theme="dark"] body [style*="color: #111827"],
html[data-theme="dark"] body [style*="color:#374151"],
html[data-theme="dark"] body [style*="color: #374151"],
html[data-theme="dark"] body [style*="color:#4b5563"],
html[data-theme="dark"] body [style*="color: #4b5563"],
html[data-theme="dark"] body [style*="color:#334155"],
html[data-theme="dark"] body [style*="color: #334155"],
body.dark-mode [style*="color:#0f172a"],
body.dark-mode [style*="color: #0f172a"],
body.dark-mode [style*="color:#1e293b"],
body.dark-mode [style*="color: #1e293b"],
body.dark-mode [style*="color:#111827"],
body.dark-mode [style*="color:#374151"],
body.dark-mode [style*="color:#4b5563"] {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] body [style*="background:#fff"],
html[data-theme="dark"] body [style*="background: #fff"],
html[data-theme="dark"] body [style*="background:#ffffff"],
html[data-theme="dark"] body [style*="background: #ffffff"],
html[data-theme="dark"] body [style*="background:white"],
html[data-theme="dark"] body [style*="background: white"],
html[data-theme="dark"] body [style*="background-color:#fff"],
html[data-theme="dark"] body [style*="background-color: #fff"],
html[data-theme="dark"] body [style*="background-color:#ffffff"],
html[data-theme="dark"] body [style*="background:#f8fafc"],
html[data-theme="dark"] body [style*="background: #f8fafc"],
html[data-theme="dark"] body [style*="background:#f9fafb"],
html[data-theme="dark"] body [style*="background: #f9fafb"],
html[data-theme="dark"] body [style*="background:#f1f5f9"],
html[data-theme="dark"] body [style*="background: #f1f5f9"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f9fafb"],
body.dark-mode [style*="background:#f1f5f9"] {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

html[data-theme="dark"] body [style*="#e5e7eb"],
html[data-theme="dark"] body [style*="#d1d5db"],
html[data-theme="dark"] body [style*="#e2e8f0"],
body.dark-mode [style*="#e5e7eb"],
body.dark-mode [style*="#d1d5db"],
body.dark-mode [style*="#e2e8f0"] {
    border-color: #475569 !important;
}

/* Remap design tokens for dark surfaces (inline var(--primary-dark) etc.) */
html[data-theme="dark"] body[data-course-shell],
html.dark-mode body[data-course-shell],
body.dark-mode[data-course-shell] {
    --primary-dark: #93c5fd;
    --secondary-dark: #67e8f9;
    --accent-dark: #c4b5fd;
    --success-dark: #6ee7b7;
    --warning-dark: #fcd34d;
    --danger-dark: #fca5a5;
    --info-dark: #67e8f9;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --bg-card: #1e293b;
    --border-card: #475569;
    --bg-secondary: #1e293b;
    --text-main: #f1f5f9;
    --border-color: #475569;
}

/* ---------- Light mode safety ---------- */
/* Ensure light mode is not stuck with dark surfaces when theme=light */
html[data-theme="light"] body:not(.dark-mode) .text-gray-700,
html[data-theme="light"] body:not(.dark-mode) .text-gray-600 {
    color: #374151;
}

html[data-theme="light"] body:not(.dark-mode) .text-gray-800,
html[data-theme="light"] body:not(.dark-mode) .text-gray-900 {
    color: #1f2937;
}

html[data-theme="light"] body:not(.dark-mode) .bg-white {
    background-color: #ffffff;
}

html[data-theme="light"] body:not(.dark-mode) .card,
html[data-theme="light"] body:not(.dark-mode) .icon-card {
    color: #334155;
}

html[data-theme="light"] body:not(.dark-mode) .card h3,
html[data-theme="light"] body:not(.dark-mode) .icon-card h3,
html[data-theme="light"] body:not(.dark-mode) .section-title {
    color: #0f172a;
}

html[data-theme="light"] body:not(.dark-mode) .card p,
html[data-theme="light"] body:not(.dark-mode) .icon-card p,
html[data-theme="light"] body:not(.dark-mode) .content p {
    color: #334155;
}

/* Light interactive labs */
html[data-theme="light"] body:not(.dark-mode) .bp-choice,
html[data-theme="light"] body:not(.dark-mode) .bp-detail,
html[data-theme="light"] body:not(.dark-mode) .nrx-chip,
html[data-theme="light"] body:not(.dark-mode) .nrx-panel {
    color: #0f172a;
}

html[data-theme="light"] body:not(.dark-mode) .bp-choice-body,
html[data-theme="light"] body:not(.dark-mode) .nrx-chip__meta,
html[data-theme="light"] body:not(.dark-mode) .bp-detail p {
    color: #475569;
}

html[data-theme="light"] body:not(.dark-mode) .edu-evidence-footer {
    color: #334155;
}

html[data-theme="light"] body:not(.dark-mode) .edu-evidence-footer h2 {
    color: #0f172a;
}

html[data-theme="light"] body:not(.dark-mode) .edu-evidence-footer a {
    color: #1d4ed8;
}


/* ---------- Hybrid / legacy surfaces (added after live audit) ---------- */
html[data-theme="dark"] body .header,
html[data-theme="dark"] body .header h1,
html[data-theme="dark"] body .header p,
html.dark-mode body .header,
html.dark-mode body .header h1,
body.dark-mode .header,
body.dark-mode .header h1,
body.dark-mode .header p {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] body .section-title,
html[data-theme="dark"] body .section-title i,
body.dark-mode .section-title,
body.dark-mode .section-title i {
    color: #f8fafc !important;
}

html[data-theme="dark"] body .btn,
body.dark-mode .btn {
    color: inherit;
}

html[data-theme="dark"] body .progress-bar,
body.dark-mode .progress-bar {
    background: #334155 !important;
}

html[data-theme="dark"] body .nav-buttons,
body.dark-mode .nav-buttons {
    border-top-color: #475569 !important;
}

/* Common hybrid hard-coded dark text on light cards */
html[data-theme="dark"] body [style*="color:#0f172a"],
html[data-theme="dark"] body [style*="color: #0f172a"],
html[data-theme="dark"] body [style*="color:var(--dark)"],
html[data-theme="dark"] body [style*="color: var(--dark)"],
body.dark-mode [style*="color:var(--dark)"],
body.dark-mode [style*="color: var(--dark)"] {
    color: #e2e8f0 !important;
}

/* Tailwind gray text used as body copy in hybrids */
html[data-theme="dark"] body .text-slate-700,
html[data-theme="dark"] body .text-slate-600,
html[data-theme="dark"] body .text-gray-700,
body.dark-mode .text-slate-700,
body.dark-mode .text-slate-600 {
    color: #cbd5e1 !important;
}

/* Ensure hybrid body text is light in dark mode even if CSS sets color: var(--dark) */
html[data-theme="dark"] body[data-course-shell],
html.dark-mode body[data-course-shell],
body.dark-mode[data-course-shell] {
    color: #e2e8f0;
}

html[data-theme="dark"] body[data-course-shell] .content,
html[data-theme="dark"] body[data-course-shell] .container,
body.dark-mode[data-course-shell] .content,
body.dark-mode[data-course-shell] .container {
    color: #e2e8f0;
}

/* Feedback / quiz panels in hybrid courses */
html[data-theme="dark"] body .feedback,
html[data-theme="dark"] body .quiz-container,
html[data-theme="dark"] body .quiz-question,
body.dark-mode .feedback,
body.dark-mode .quiz-container,
body.dark-mode .quiz-question {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}


/* ---------- Body surface authority (hybrid + shell) ---------- */
/* Many hybrids set body { background: var(--light|text-main); color: var(--dark) }.
   Remap tokens and force readable surfaces in both modes. */
html[data-theme="dark"] body[data-course-shell],
html.dark-mode body[data-course-shell],
body.dark-mode[data-course-shell] {
    --light: #0f172a;
    --dark: #f1f5f9;
    --text-main: #e2e8f0;
    --gray-200: #334155;
    --gray-700: #cbd5e1;
    --card-bg: #1e293b;
    --card-border: #475569;
    background-color: #0f172a !important;
    background-image: none !important;
    color: #e2e8f0 !important;
}

html[data-theme="light"] body[data-course-shell]:not(.dark-mode),
html:not(.dark-mode):not([data-theme="dark"]) body[data-course-shell]:not(.dark-mode) {
    /* Do not force if a theme provides a gradient page; only repair broken inverted tokens */
    --dark: #0f172a;
    --light: #f8fafc;
}

/* Hybrid content panels that stay white-hardcoded in night mode */
html[data-theme="dark"] body[data-course-shell] .container .content,
html[data-theme="dark"] body[data-course-shell] .slide .content,
html.dark-mode body[data-course-shell] .container .content,
body.dark-mode[data-course-shell] .slide .content {
    background-color: transparent;
    color: #e2e8f0;
}

html[data-theme="dark"] body[data-course-shell] .header h1,
html[data-theme="dark"] body[data-course-shell] .header p,
body.dark-mode[data-course-shell] .header h1,
body.dark-mode[data-course-shell] .header p {
    color: #f8fafc !important;
}


/* ============================================================
   Interactive clinical labs (chips / panels / choices)
   ============================================================
   Courses use prefixes: acx, adx, bmx, nrx, bp, hcx, htx, hhx, hrx, etc.
   Many only ship light-mode gradients. In dark mode tokens flip to light
   text while backgrounds stay white → unreadable (e.g. ACS slide 6).
   ============================================================ */

/* Surfaces: chips, panels, labs, choices, detail cards, facts */
html[data-theme="dark"] body[data-course-shell] [class*="-chip"]:not([class*="chip-grid"]),
html[data-theme="dark"] body[data-course-shell] [class*="-panel"],
html[data-theme="dark"] body[data-course-shell] [class*="-lab"],
html[data-theme="dark"] body[data-course-shell] [class*="-choice"],
html[data-theme="dark"] body[data-course-shell] [class*="-detail"],
html[data-theme="dark"] body[data-course-shell] [class*="__fact"],
html[data-theme="dark"] body[data-course-shell] [class*="__intro"],
html.dark-mode body[data-course-shell] [class*="-chip"]:not([class*="chip-grid"]),
html.dark-mode body[data-course-shell] [class*="-panel"],
html.dark-mode body[data-course-shell] [class*="-lab"],
html.dark-mode body[data-course-shell] [class*="-choice"],
html.dark-mode body[data-course-shell] [class*="-detail"],
html.dark-mode body[data-course-shell] [class*="__fact"],
html.dark-mode body[data-course-shell] [class*="__intro"],
body.dark-mode[data-course-shell] [class*="-chip"]:not([class*="chip-grid"]),
body.dark-mode[data-course-shell] [class*="-panel"],
body.dark-mode[data-course-shell] [class*="-lab"],
body.dark-mode[data-course-shell] [class*="-choice"],
body.dark-mode[data-course-shell] [class*="-detail"],
body.dark-mode[data-course-shell] [class*="__fact"],
body.dark-mode[data-course-shell] [class*="__intro"] {
    background: #1e293b !important;
    background-image: none !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 12px 28px -20px rgba(0, 0, 0, 0.55) !important;
}

/* Text inside labs */
html[data-theme="dark"] body[data-course-shell] [class*="-chip"] [class*="__title"],
html[data-theme="dark"] body[data-course-shell] [class*="-panel"] h3,
html[data-theme="dark"] body[data-course-shell] [class*="-lab"] h3,
html[data-theme="dark"] body[data-course-shell] [class*="-choice"] strong,
html[data-theme="dark"] body[data-course-shell] [class*="-detail"] h3,
html[data-theme="dark"] body[data-course-shell] [class*="__intro"] h3,
html[data-theme="dark"] body[data-course-shell] [class*="-panel"] [data-role="title"],
html.dark-mode body[data-course-shell] [class*="-chip"] [class*="__title"],
html.dark-mode body[data-course-shell] [class*="-panel"] h3,
html.dark-mode body[data-course-shell] [class*="-lab"] h3,
html.dark-mode body[data-course-shell] [class*="__intro"] h3,
html.dark-mode body[data-course-shell] [class*="-panel"] [data-role="title"],
body.dark-mode[data-course-shell] [class*="-chip"] [class*="__title"],
body.dark-mode[data-course-shell] [class*="-panel"] h3,
body.dark-mode[data-course-shell] [class*="-lab"] h3,
body.dark-mode[data-course-shell] [class*="__intro"] h3,
body.dark-mode[data-course-shell] [class*="-panel"] [data-role="title"] {
    color: #f8fafc !important;
}

html[data-theme="dark"] body[data-course-shell] [class*="-chip"] [class*="__meta"],
html[data-theme="dark"] body[data-course-shell] [class*="-panel"] p,
html[data-theme="dark"] body[data-course-shell] [class*="-lab"] p,
html[data-theme="dark"] body[data-course-shell] [class*="-choice"] span,
html[data-theme="dark"] body[data-course-shell] [class*="-detail"] p,
html[data-theme="dark"] body[data-course-shell] [class*="__intro"] p,
html[data-theme="dark"] body[data-course-shell] [class*="__fact"] p,
html[data-theme="dark"] body[data-course-shell] [class*="__fact"] span,
html[data-theme="dark"] body[data-course-shell] [class*="-panel"] [data-role],
html[data-theme="dark"] body[data-course-shell] [class*="-eyebrow"],
html[data-theme="dark"] body[data-course-shell] [class*="__eyebrow"],
html.dark-mode body[data-course-shell] [class*="-chip"] [class*="__meta"],
html.dark-mode body[data-course-shell] [class*="-panel"] p,
html.dark-mode body[data-course-shell] [class*="-lab"] p,
html.dark-mode body[data-course-shell] [class*="__intro"] p,
html.dark-mode body[data-course-shell] [class*="__fact"] p,
html.dark-mode body[data-course-shell] [class*="__fact"] span,
html.dark-mode body[data-course-shell] [class*="-panel"] [data-role],
html.dark-mode body[data-course-shell] [class*="__eyebrow"],
body.dark-mode[data-course-shell] [class*="-chip"] [class*="__meta"],
body.dark-mode[data-course-shell] [class*="-panel"] p,
body.dark-mode[data-course-shell] [class*="-lab"] p,
body.dark-mode[data-course-shell] [class*="__intro"] p,
body.dark-mode[data-course-shell] [class*="__fact"] p,
body.dark-mode[data-course-shell] [class*="__fact"] span,
body.dark-mode[data-course-shell] [class*="-panel"] [data-role],
body.dark-mode[data-course-shell] [class*="__eyebrow"] {
    color: #cbd5e1 !important;
}

/* Active / selected chip */
html[data-theme="dark"] body[data-course-shell] [class*="-chip"].is-active,
html[data-theme="dark"] body[data-course-shell] [class*="-choice"].is-active,
html[data-theme="dark"] body[data-course-shell] [class*="-chip"].active,
html.dark-mode body[data-course-shell] [class*="-chip"].is-active,
html.dark-mode body[data-course-shell] [class*="-choice"].is-active,
body.dark-mode[data-course-shell] [class*="-chip"].is-active,
body.dark-mode[data-course-shell] [class*="-choice"].is-active {
    background: #1e3a5f !important;
    background-image: none !important;
    border-color: #60a5fa !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] body[data-course-shell] [class*="-chip"].is-active [class*="__title"],
html[data-theme="dark"] body[data-course-shell] [class*="-chip"].is-active [class*="__meta"],
html.dark-mode body[data-course-shell] [class*="-chip"].is-active [class*="__title"],
html.dark-mode body[data-course-shell] [class*="-chip"].is-active [class*="__meta"],
body.dark-mode[data-course-shell] [class*="-chip"].is-active [class*="__title"],
body.dark-mode[data-course-shell] [class*="-chip"].is-active [class*="__meta"] {
    color: #f1f5f9 !important;
}

/* Hover */
html[data-theme="dark"] body[data-course-shell] [class*="-chip"]:hover,
html[data-theme="dark"] body[data-course-shell] [class*="-choice"]:hover,
html.dark-mode body[data-course-shell] [class*="-chip"]:hover,
body.dark-mode[data-course-shell] [class*="-chip"]:hover {
    border-color: #93c5fd !important;
    background: #273549 !important;
}

/* Explicit ACS + known missing prefixes (extra specificity vs inline light CSS) */
html[data-theme="dark"] body[data-course-shell] .acx-chip,
html[data-theme="dark"] body[data-course-shell] .acx-panel,
html[data-theme="dark"] body[data-course-shell] .acx-lab__intro,
html[data-theme="dark"] body[data-course-shell] .acx-panel__fact,
html[data-theme="dark"] body[data-course-shell] .adx-chip,
html[data-theme="dark"] body[data-course-shell] .adx-panel,
html[data-theme="dark"] body[data-course-shell] .adx-lab__intro,
html[data-theme="dark"] body[data-course-shell] .adx-panel__fact,
html[data-theme="dark"] body[data-course-shell] .bmx-chip,
html[data-theme="dark"] body[data-course-shell] .bmx-panel,
html[data-theme="dark"] body[data-course-shell] .bmx-lab__intro,
html[data-theme="dark"] body[data-course-shell] .bmx-panel__fact,
html[data-theme="dark"] body[data-course-shell] .hcx-chip,
html[data-theme="dark"] body[data-course-shell] .hcx-panel,
html[data-theme="dark"] body[data-course-shell] .hcx-lab__intro,
html[data-theme="dark"] body[data-course-shell] .hcx-panel__fact,
html[data-theme="dark"] body[data-course-shell] .htx-chip,
html[data-theme="dark"] body[data-course-shell] .htx-panel,
html[data-theme="dark"] body[data-course-shell] .htx-lab__intro,
html[data-theme="dark"] body[data-course-shell] .htx-panel__fact,
html[data-theme="dark"] body[data-course-shell] .hhx-chip,
html[data-theme="dark"] body[data-course-shell] .hhx-panel,
html[data-theme="dark"] body[data-course-shell] .hhx-lab__intro,
html[data-theme="dark"] body[data-course-shell] .hhx-panel__fact,
html[data-theme="dark"] body[data-course-shell] .hrx-chip,
html[data-theme="dark"] body[data-course-shell] .hrx-panel,
html[data-theme="dark"] body[data-course-shell] .hrx-lab__intro,
html[data-theme="dark"] body[data-course-shell] .hrx-panel__fact,
html[data-theme="dark"] body[data-course-shell] .bp-choice,
html[data-theme="dark"] body[data-course-shell] .bp-detail,
html.dark-mode body[data-course-shell] .acx-chip,
html.dark-mode body[data-course-shell] .acx-panel,
html.dark-mode body[data-course-shell] .acx-lab__intro,
html.dark-mode body[data-course-shell] .acx-panel__fact,
html.dark-mode body[data-course-shell] .adx-chip,
html.dark-mode body[data-course-shell] .adx-panel,
html.dark-mode body[data-course-shell] .bmx-chip,
html.dark-mode body[data-course-shell] .bmx-panel,
html.dark-mode body[data-course-shell] .hcx-chip,
html.dark-mode body[data-course-shell] .hcx-panel,
html.dark-mode body[data-course-shell] .htx-chip,
html.dark-mode body[data-course-shell] .htx-panel,
html.dark-mode body[data-course-shell] .hhx-chip,
html.dark-mode body[data-course-shell] .hhx-panel,
html.dark-mode body[data-course-shell] .hrx-chip,
html.dark-mode body[data-course-shell] .hrx-panel,
body.dark-mode[data-course-shell] .acx-chip,
body.dark-mode[data-course-shell] .acx-panel,
body.dark-mode[data-course-shell] .acx-lab__intro,
body.dark-mode[data-course-shell] .acx-panel__fact,
body.dark-mode[data-course-shell] .adx-chip,
body.dark-mode[data-course-shell] .adx-panel,
body.dark-mode[data-course-shell] .bmx-chip,
body.dark-mode[data-course-shell] .bmx-panel,
body.dark-mode[data-course-shell] .hcx-chip,
body.dark-mode[data-course-shell] .hcx-panel,
body.dark-mode[data-course-shell] .htx-chip,
body.dark-mode[data-course-shell] .htx-panel,
body.dark-mode[data-course-shell] .hhx-chip,
body.dark-mode[data-course-shell] .hhx-panel,
body.dark-mode[data-course-shell] .hrx-chip,
body.dark-mode[data-course-shell] .hrx-panel,
body.dark-mode[data-course-shell] .bp-choice,
body.dark-mode[data-course-shell] .bp-detail {
    background: #1e293b !important;
    background-image: none !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] body[data-course-shell] .acx-chip.is-active,
html[data-theme="dark"] body[data-course-shell] .adx-chip.is-active,
html[data-theme="dark"] body[data-course-shell] .bmx-chip.is-active,
html[data-theme="dark"] body[data-course-shell] .hcx-chip.is-active,
html[data-theme="dark"] body[data-course-shell] .htx-chip.is-active,
html[data-theme="dark"] body[data-course-shell] .hhx-chip.is-active,
html[data-theme="dark"] body[data-course-shell] .hrx-chip.is-active,
html[data-theme="dark"] body[data-course-shell] .bp-choice.is-active,
html.dark-mode body[data-course-shell] .acx-chip.is-active,
body.dark-mode[data-course-shell] .acx-chip.is-active,
body.dark-mode[data-course-shell] .adx-chip.is-active,
body.dark-mode[data-course-shell] .bmx-chip.is-active,
body.dark-mode[data-course-shell] .hcx-chip.is-active,
body.dark-mode[data-course-shell] .htx-chip.is-active,
body.dark-mode[data-course-shell] .hhx-chip.is-active,
body.dark-mode[data-course-shell] .hrx-chip.is-active,
body.dark-mode[data-course-shell] .bp-choice.is-active {
    background: #1e3a5f !important;
    background-image: none !important;
    border-color: #60a5fa !important;
}

html[data-theme="dark"] body[data-course-shell] .acx-chip__title,
html[data-theme="dark"] body[data-course-shell] .acx-lab__intro h3,
html[data-theme="dark"] body[data-course-shell] .acx-panel h3,
html[data-theme="dark"] body[data-course-shell] .adx-chip__title,
html[data-theme="dark"] body[data-course-shell] .bmx-chip__title,
html[data-theme="dark"] body[data-course-shell] .hcx-chip__title,
html[data-theme="dark"] body[data-course-shell] .htx-chip__title,
html[data-theme="dark"] body[data-course-shell] .hhx-chip__title,
html[data-theme="dark"] body[data-course-shell] .hrx-chip__title,
html.dark-mode body[data-course-shell] .acx-chip__title,
html.dark-mode body[data-course-shell] .acx-panel h3,
body.dark-mode[data-course-shell] .acx-chip__title,
body.dark-mode[data-course-shell] .acx-lab__intro h3,
body.dark-mode[data-course-shell] .acx-panel h3,
body.dark-mode[data-course-shell] .adx-chip__title,
body.dark-mode[data-course-shell] .bmx-chip__title,
body.dark-mode[data-course-shell] .hcx-chip__title,
body.dark-mode[data-course-shell] .htx-chip__title,
body.dark-mode[data-course-shell] .hhx-chip__title,
body.dark-mode[data-course-shell] .hrx-chip__title {
    color: #f8fafc !important;
}

html[data-theme="dark"] body[data-course-shell] .acx-chip__meta,
html[data-theme="dark"] body[data-course-shell] .acx-lab__intro p,
html[data-theme="dark"] body[data-course-shell] .acx-panel p,
html[data-theme="dark"] body[data-course-shell] .acx-panel__fact p,
html[data-theme="dark"] body[data-course-shell] .acx-panel__fact span,
html[data-theme="dark"] body[data-course-shell] .acx-lab__eyebrow,
html[data-theme="dark"] body[data-course-shell] .acx-panel__eyebrow,
html.dark-mode body[data-course-shell] .acx-chip__meta,
html.dark-mode body[data-course-shell] .acx-panel p,
body.dark-mode[data-course-shell] .acx-chip__meta,
body.dark-mode[data-course-shell] .acx-lab__intro p,
body.dark-mode[data-course-shell] .acx-panel p,
body.dark-mode[data-course-shell] .acx-panel__fact p,
body.dark-mode[data-course-shell] .acx-panel__fact span,
body.dark-mode[data-course-shell] .acx-lab__eyebrow,
body.dark-mode[data-course-shell] .acx-panel__eyebrow {
    color: #cbd5e1 !important;
}

/* Eyebrow labels: keep warm accent but visible on dark */
html[data-theme="dark"] body[data-course-shell] .acx-lab__eyebrow,
html[data-theme="dark"] body[data-course-shell] .acx-panel__eyebrow,
body.dark-mode[data-course-shell] .acx-lab__eyebrow,
body.dark-mode[data-course-shell] .acx-panel__eyebrow {
    color: #fbbf24 !important;
}

/* highlight-box / pearl cards inside slides */
html[data-theme="dark"] body[data-course-shell] .highlight-box,
html.dark-mode body[data-course-shell] .highlight-box,
body.dark-mode[data-course-shell] .highlight-box {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] body[data-course-shell] .highlight-box h4,
html[data-theme="dark"] body[data-course-shell] .highlight-box p,
body.dark-mode[data-course-shell] .highlight-box h4,
body.dark-mode[data-course-shell] .highlight-box p {
    color: #e2e8f0 !important;
}

/* Strong text inside content when tokens invert */
html[data-theme="dark"] body[data-course-shell] .content strong,
body.dark-mode[data-course-shell] .content strong {
    color: #f8fafc !important;
}


/* Light mode token authority for interactive lab aliases */
html[data-theme="light"] body:not(.dark-mode),
html:not(.dark-mode):not([data-theme="dark"]) body:not(.dark-mode) {
    --text-main: #0f172a;
    --text-muted: #4b5563;
    --text-primary: #111827;
    --text-secondary: #374151;
}