/* Theme controls and light theme styles for Learn Quantum Science. */

/* Navigation in dark and light modes. */

.topbar .topnav {
  margin-left: 0;
}

@media (max-width: 700px) {
  .topbar {
    gap: 6px;
    padding: 0 10px;
  }

  .mobile-main-menu {
    margin-left: auto;
  }

  .topbar #account-button {
    min-height: 34px;
    padding: 5px 9px;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .topbar {
    gap: 4px;
    padding: 0 6px;
  }

  .topbar #outline-toggle {
    min-height: 44px;
    padding: 4px 7px;
    font-size: 13px;
  }

  .topbar .brand-mark {
    width: 28px;
    height: 28px;
  }

  .mobile-main-menu summary {
    padding: 5px 7px;
    font-size: 13px;
  }

  .topbar #account-button {
    min-height: 32px;
    padding: 4px 7px;
    font-size: 13px;
  }
}

/* Light theme design tokens and semantic variables. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f8f7f3;
  --panel: #ffffff;
  --raised: #f1efe8;
  --sunken: #f3f5f9;
  --border: #d5dce6;
  --border-strong: #8796ab;
  --text: #0f172a;
  --muted: #435269;
  --faint: #596981;
  --green: #0369a1;
  --amber: #6d28d9;
  --pink: #be185d;
  --blue: #1d4ed8;
  --ok: #137347;
  --error: #b91c1c;
  --radius: 8px;

  /* Lesson workspace fallback variables. */
  --surface-1: #ffffff;
  --surface-2: #f1f5f9;
  --border-subtle: #cbd5e1;
  --text-1: #0f172a;
  --text-2: #334155;
  --accent: #0284c7;

  /* Light theme semantic surface tokens. */
  --light-surface-tint: #f4f7fb;
  --light-surface-elevated: #ffffff;
  --light-surface-warm: #f9f8f4;
  --light-cyan-tint: #e6f4fe;
  --light-cyan-border: #7cc4fa;
  --light-cyan-ink: #0c4a6e;
  --light-violet-tint: #f2edff;
  --light-violet-border: #b794f4;
  --light-violet-ink: #4c1d95;
  --light-ok-tint: #ecfdf5;
  --light-ok-border: #52b788;
  --light-ok-ink: #0f5132;
  --light-error-tint: #fef2f2;
  --light-error-border: #e07a84;
  --light-error-ink: #881337;
  --light-warn-tint: #fffbeb;
  --light-warn-border: #d99b26;
  --light-warn-ink: #78350f;
  --light-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --light-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);
  --light-shadow-lg: 0 20px 54px rgba(15, 23, 42, 0.14);
}

/* Global light surfaces, navigation, buttons, and inputs. */
html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="light"] a {
  color: var(--green);
}

html[data-theme="light"] .skip-link {
  background: var(--amber);
  color: #ffffff;
}

html[data-theme="light"] .loading-status {
  background: rgba(248, 247, 243, 0.96);
  border-bottom-color: var(--border);
  color: var(--text);
  box-shadow: var(--light-shadow-sm);
}

html[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .brand {
  color: var(--text);
}

html[data-theme="light"] .brand-mark {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="light"] .topnav a {
  color: var(--muted);
  border-radius: 6px;
}

html[data-theme="light"] .topnav a:hover,
html[data-theme="light"] .topnav a[aria-current="page"] {
  color: var(--text);
  background: var(--raised);
  border-bottom-color: var(--green);
}

html[data-theme="light"] .mobile-main-menu summary {
  color: var(--text);
  background: var(--panel);
  border-color: var(--border-strong);
  border-radius: 8px;
}

html[data-theme="light"] .mobile-main-menu nav {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 10px;
  box-shadow: var(--light-shadow-md);
}

html[data-theme="light"] .mobile-main-menu a {
  color: var(--text);
}

html[data-theme="light"] .mobile-main-menu a:hover,
html[data-theme="light"] .mobile-main-menu a[aria-current="page"] {
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
}

html[data-theme="light"] .btn {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .btn:hover:not(:disabled) {
  border-color: var(--green);
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
}

html[data-theme="light"] .btn.primary {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
}

html[data-theme="light"] .btn.primary:hover:not(:disabled) {
  background: #075985;
  border-color: #075985;
  color: #ffffff;
}

html[data-theme="light"] .btn.ghost {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border-strong);
}

html[data-theme="light"] .btn.ghost:hover:not(:disabled) {
  background: var(--raised);
  border-color: var(--green);
  color: var(--text);
}

html[data-theme="light"] .btn:disabled,
html[data-theme="light"] button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

html[data-theme="light"] progress {
  background: #e2e8f0;
  border-color: var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
}

html[data-theme="light"] progress::-webkit-progress-bar {
  background: #e2e8f0;
}

html[data-theme="light"] progress::-webkit-progress-value {
  background: var(--green);
}

html[data-theme="light"] progress::-moz-progress-bar {
  background: var(--green);
}

html[data-theme="light"] input[type="range"] {
  accent-color: var(--green);
}

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border-strong);
  border-radius: 8px;
}

html[data-theme="light"] input[type="text"]:focus-visible,
html[data-theme="light"] input[type="number"]:focus-visible,
html[data-theme="light"] input[type="email"]:focus-visible,
html[data-theme="light"] input[type="search"]:focus-visible,
html[data-theme="light"] select:focus-visible,
html[data-theme="light"] textarea:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-color: var(--amber);
}

/* Sidebar outline and search drawer. */
html[data-theme="light"] .outline {
  background: var(--panel);
  border-right-color: var(--border);
  box-shadow: var(--light-shadow-lg);
}

html[data-theme="light"] .outline-backdrop {
  background: rgba(15, 23, 42, 0.38);
}

html[data-theme="light"] .outline-chapter {
  color: var(--muted);
}

html[data-theme="light"] .outline-lesson {
  color: var(--text);
}

html[data-theme="light"] .outline-item {
  color: var(--muted);
  border-radius: 6px;
}

html[data-theme="light"] .outline-item:hover {
  background: var(--raised);
  color: var(--text);
}

html[data-theme="light"] .outline-item[aria-current="page"] {
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
  border-left-color: var(--green);
  font-weight: 600;
}

html[data-theme="light"] .outline-item.done .status-dot {
  background: var(--ok);
  border-color: var(--ok);
}

html[data-theme="light"] .status-dot {
  border-color: var(--border-strong);
  background: var(--panel);
}

html[data-theme="light"] .search-box {
  border-bottom-color: var(--border);
}

html[data-theme="light"] .search-results a {
  border-radius: 6px;
}

html[data-theme="light"] .search-results a:hover {
  background: var(--light-cyan-tint);
}

/* Course overview, header badges, and chapter cards. */
html[data-theme="light"] .hero {
  border-bottom-color: var(--border);
}

html[data-theme="light"] .eyebrow {
  color: var(--amber);
}

html[data-theme="light"] .lede {
  color: var(--muted);
}

html[data-theme="light"] .course-card,
html[data-theme="light"] .chapter-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .study-card,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .enterprise-band,
html[data-theme="light"] .value-item,
html[data-theme="light"] .First-Steps-Card {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 10px;
  box-shadow: var(--light-shadow-sm);
}

html[data-theme="light"] .course-card:hover {
  border-color: var(--green);
  box-shadow: var(--light-shadow-md);
}

html[data-theme="light"] .course-card-top span,
html[data-theme="light"] .badge {
  background: var(--light-violet-tint);
  color: var(--light-violet-ink);
  border-color: var(--light-violet-border);
  border-radius: 6px;
}

html[data-theme="light"] .chapter-lessons a {
  border-top-color: var(--border);
}

html[data-theme="light"] .chapter-lessons a:hover {
  background: var(--light-surface-tint);
}

html[data-theme="light"] .error-banner {
  background: var(--light-error-tint);
  border-color: var(--light-error-border);
  color: var(--light-error-ink);
  border-radius: 8px;
  box-shadow: var(--light-shadow-md);
}

/* Landing page, pricing, legal, study dashboard, and account dialog. */
html[data-theme="light"] .landing-hero {
  border-bottom-color: var(--border);
}

html[data-theme="light"] .landing-hero-art,
html[data-theme="light"] .course-cover,
html[data-theme="light"] .course-card-art,
html[data-theme="light"] .landing-card-art {
  background: #0b1020;
  border-color: var(--border);
  border-radius: 10px;
  box-shadow: var(--light-shadow-md);
}

html[data-theme="light"] .trust-strip,
html[data-theme="light"] .site-footer {
  border-color: var(--border);
}

html[data-theme="light"] .plan-card.highlight {
  border-color: var(--green);
  background: linear-gradient(180deg, var(--light-cyan-tint) 0%, #ffffff 36%);
}

html[data-theme="light"] .plan-badge {
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
  border: 1px solid var(--light-cyan-border);
  border-radius: 6px;
}

html[data-theme="light"] .faq-list details,
html[data-theme="light"] .model-limits,
html[data-theme="light"] .Inline-Disclosure {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 8px;
}

html[data-theme="light"] .account-dialog,
html[data-theme="light"] dialog {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
  border-radius: 12px;
  box-shadow: var(--light-shadow-lg);
}

html[data-theme="light"] .account-dialog::backdrop,
html[data-theme="light"] dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

html[data-theme="light"] .dialog-note.ok {
  color: var(--ok);
}

html[data-theme="light"] .dialog-note.error {
  color: var(--error);
}

html[data-theme="light"] .legal-toc {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 8px;
}

html[data-theme="light"] .legal-prose code,
html[data-theme="light"] .prose code {
  background: #edf2f7;
  color: #1e293b;
  border-radius: 4px;
}

html[data-theme="light"] .prose pre,
html[data-theme="light"] .study-code {
  background: #f4f6fa;
  color: #0f172a;
  border-color: var(--border);
  border-radius: 8px;
}

/* Exercise split view, instructions, dock, and workspace tabs. */
html[data-theme="light"] .lesson-bar,
html[data-theme="light"] .mobile-tabs {
  background: var(--raised);
  border-bottom-color: var(--border);
}

html[data-theme="light"] .mobile-tabs button[aria-selected="true"] {
  background: var(--panel);
  color: var(--text);
  border-bottom-color: var(--green);
}

html[data-theme="light"] .instructions {
  background: var(--bg);
  border-right-color: var(--border);
}

html[data-theme="light"] .workspace {
  background: var(--panel);
}

html[data-theme="light"] .task {
  background: var(--panel);
  border-color: var(--border);
  border-left-color: var(--amber);
  border-radius: 8px;
  box-shadow: var(--light-shadow-sm);
}

html[data-theme="light"] .task h2 {
  color: var(--amber);
}

html[data-theme="light"] .dock {
  background: var(--panel);
  border-top-color: var(--border);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .answer-option {
  background: var(--light-surface-tint);
  border-color: var(--border-strong);
  border-radius: 8px;
  color: var(--text);
}

html[data-theme="light"] .answer-option:hover {
  border-color: var(--green);
  background: var(--light-cyan-tint);
}

html[data-theme="light"] .answer-option:has(input:checked) {
  border-color: var(--green);
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
}

html[data-theme="light"] .hint {
  background: var(--light-violet-tint);
  border-left-color: var(--amber);
  color: var(--light-violet-ink);
  border-radius: 6px;
}

html[data-theme="light"] .feedback {
  background: var(--light-surface-tint);
  border-color: var(--border-strong);
  border-radius: 8px;
  color: var(--text);
}

html[data-theme="light"] .retry-practice {
  background: var(--light-surface-tint);
  color: var(--text);
}

html[data-theme="light"] .feedback.ok {
  background: var(--light-ok-tint);
  border-color: var(--light-ok-border);
  color: var(--light-ok-ink);
}

html[data-theme="light"] .feedback.wrong {
  background: var(--light-error-tint);
  border-color: var(--light-error-border);
  color: var(--light-error-ink);
}

html[data-theme="light"] .bookmark-star[aria-pressed="true"] {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--light-violet-tint);
}

html[data-theme="light"] .note-item {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 8px;
}

/* Course lesson headers, practice exams, question navigator, timers, and choices. */
html[data-theme="light"] .course-header {
  background: var(--panel);
  border-bottom-color: var(--border);
}

html[data-theme="light"] .course-header-badge {
  background: var(--light-violet-tint);
  border-color: var(--light-violet-border);
  color: var(--light-violet-ink);
  border-radius: 6px;
}

html[data-theme="light"] .course-module-card,
html[data-theme="light"] .exam-card,
html[data-theme="light"] .exam-summary,
html[data-theme="light"] .exam-sidebar,
html[data-theme="light"] .exam-main {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 10px;
  box-shadow: var(--light-shadow-sm);
}

html[data-theme="light"] .course-lesson-link:hover,
html[data-theme="light"] .exam-nav-btn:hover {
  background: var(--light-surface-tint);
  border-color: var(--green);
}

html[data-theme="light"] .exam-nav-btn.active {
  background: var(--light-violet-tint);
  border-color: var(--amber);
  color: var(--light-violet-ink);
}

html[data-theme="light"] .exam-nav-num {
  background: var(--panel);
  border-color: var(--border-strong);
  color: var(--muted);
  border-radius: 6px;
}

html[data-theme="light"] .exam-nav-btn.done .exam-nav-num {
  background: var(--light-ok-tint);
  border-color: var(--light-ok-border);
  color: var(--light-ok-ink);
}

html[data-theme="light"] .exam-nav-btn.wrong .exam-nav-num {
  background: var(--light-error-tint);
  border-color: var(--light-error-border);
  color: var(--light-error-ink);
}

html[data-theme="light"] .exam-nav-btn.flagged .exam-nav-num {
  border-color: var(--light-warn-border);
  background: var(--light-warn-tint);
  color: var(--light-warn-ink);
}

/* 68-question square grid and question-number states. */
html[data-theme="light"] .question-grid {
  border-color: var(--border);
}

html[data-theme="light"] .question-number {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  font-weight: 600;
}

html[data-theme="light"] .question-number:hover:not(:disabled) {
  border-color: var(--green);
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
}

html[data-theme="light"] .question-number.current,
html[data-theme="light"] .question-number[aria-current="step"],
html[data-theme="light"] .question-number[aria-current="true"] {
  background: var(--amber);
  border-color: var(--amber);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.22);
}

html[data-theme="light"] .question-number.correct {
  background: var(--light-ok-tint);
  border-color: var(--light-ok-border);
  color: var(--light-ok-ink);
}

html[data-theme="light"] .question-number.incorrect,
html[data-theme="light"] .question-number.wrong {
  background: var(--light-error-tint);
  border-color: var(--light-error-border);
  color: var(--light-error-ink);
}

html[data-theme="light"] .question-number.flagged {
  background: var(--light-warn-tint);
  border-color: var(--light-warn-border);
  color: var(--light-warn-ink);
}

html[data-theme="light"] .question-number.current.correct,
html[data-theme="light"] .question-number.current.incorrect,
html[data-theme="light"] .question-number.current.flagged {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

/* Exam clock, timer status, assumptions, and paused or expired fieldsets. */
html[data-theme="light"] .exam-clock {
  background: var(--light-surface-tint);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

html[data-theme="light"] .exam-timer-status {
  color: var(--muted);
  background: var(--raised);
  border-color: var(--border);
  border-radius: 6px;
}

html[data-theme="light"] .exam-timer-status.paused,
html[data-theme="light"] .exam-clock.paused {
  background: var(--light-warn-tint);
  border-color: var(--light-warn-border);
  color: var(--light-warn-ink);
}

html[data-theme="light"] .exam-timer-status.expired,
html[data-theme="light"] .exam-clock.expired {
  background: var(--light-error-tint);
  border-color: var(--light-error-border);
  color: var(--light-error-ink);
}

html[data-theme="light"] .exam-assumptions {
  display: block;
  background: var(--light-surface-tint);
  border-left: 3px solid var(--amber);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}

html[data-theme="light"] fieldset.paused,
html[data-theme="light"] fieldset.expired,
html[data-theme="light"] .exam-main fieldset:disabled,
html[data-theme="light"] [data-exam-state="paused"] fieldset,
html[data-theme="light"] [data-exam-state="expired"] fieldset {
  background: var(--raised);
  border-color: var(--border);
  color: var(--muted);
  border-radius: 8px;
}

/* Practice exam question pills, code blocks, figures, and answer choices. */
html[data-theme="light"] .exam-pill {
  background: var(--raised);
  border-color: var(--border);
  color: var(--muted);
  border-radius: 6px;
}

html[data-theme="light"] .exam-pill.accent {
  background: var(--light-violet-tint);
  border-color: var(--light-violet-border);
  color: var(--light-violet-ink);
}

html[data-theme="light"] .exam-prompt code,
html[data-theme="light"] .exam-choice code,
html[data-theme="light"] .exam-feedback code,
html[data-theme="light"] .course-prose code {
  background: #edf2f7;
  color: #3b0764;
  border-radius: 4px;
}

html[data-theme="light"] .exam-code,
html[data-theme="light"] .course-prose pre {
  background: #f4f6fa;
  border-color: var(--border);
  color: #0f172a;
  border-radius: 8px;
}

html[data-theme="light"] .exam-figure {
  background: #ffffff;
  border-color: var(--border);
  border-radius: 8px;
}

/* Preserve all 77 embedded practice-figure data-URI SVGs without filters or inversion. */
html[data-theme="light"] img.practice-figure,
html[data-theme="light"] .exam-figure img {
  filter: none !important;
  background: #ffffff;
}

html[data-theme="light"] .exam-matrix {
  background: var(--light-surface-tint);
  border-color: var(--border);
  border-radius: 8px;
  color: var(--text);
}

html[data-theme="light"] .exam-choice {
  background: var(--panel);
  border-color: var(--border-strong);
  border-radius: 8px;
  color: var(--text);
}

html[data-theme="light"] .exam-choice:hover:not(:disabled) {
  border-color: var(--green);
  background: var(--light-cyan-tint);
}

html[data-theme="light"] .exam-choice.selected {
  border-color: var(--amber);
  background: var(--light-violet-tint);
  color: var(--text);
}

html[data-theme="light"] .exam-choice-letter {
  background: var(--light-surface-tint);
  border-color: var(--border-strong);
  color: var(--muted);
  border-radius: 6px;
}

html[data-theme="light"] .exam-choice.selected .exam-choice-letter {
  background: var(--amber);
  border-color: var(--amber);
  color: #ffffff;
}

html[data-theme="light"] .exam-choice.correct {
  border-color: var(--light-ok-border);
  background: var(--light-ok-tint);
  color: var(--light-ok-ink);
}

html[data-theme="light"] .exam-choice.correct .exam-choice-letter {
  background: var(--ok);
  border-color: var(--ok);
  color: #ffffff;
}

html[data-theme="light"] .exam-choice.incorrect {
  border-color: var(--light-error-border);
  background: var(--light-error-tint);
  color: var(--light-error-ink);
}

html[data-theme="light"] .exam-choice.incorrect .exam-choice-letter {
  background: var(--error);
  border-color: var(--error);
  color: #ffffff;
}

html[data-theme="light"] .exam-verdict {
  color: var(--ok);
}

html[data-theme="light"] .exam-choice.incorrect .exam-verdict {
  color: var(--error);
}

html[data-theme="light"] .exam-feedback {
  background: var(--light-ok-tint);
  border-color: var(--light-ok-border);
  color: var(--text);
  border-radius: 8px;
}

html[data-theme="light"] .exam-feedback.wrong {
  background: var(--light-error-tint);
  border-color: var(--light-error-border);
}

html[data-theme="light"] .exam-rationale b,
html[data-theme="light"] .exam-stat strong {
  color: var(--amber);
}

html[data-theme="light"] .exam-flag-btn.flagged {
  border-color: var(--light-warn-border);
  color: var(--light-warn-ink);
  background: var(--light-warn-tint);
}

/* Python syntax highlighting (Highlight.js) for light theme with WCAG AA contrast. */
html[data-theme="light"] .hljs {
  color: #0f172a;
  background: transparent;
}

html[data-theme="light"] .hljs-keyword,
html[data-theme="light"] .hljs-selector-tag,
html[data-theme="light"] .hljs-literal,
html[data-theme="light"] .hljs-Type {
  color: #6d28d9;
  font-weight: 600;
}

html[data-theme="light"] .hljs-title,
html[data-theme="light"] .hljs-title.function_,
html[data-theme="light"] .hljs-title.class_,
html[data-theme="light"] .hljs-function {
  color: #0369a1;
  font-weight: 600;
}

html[data-theme="light"] .hljs-string,
html[data-theme="light"] .hljs-doctag,
html[data-theme="light"] .hljs-regexp {
  color: #116329;
}

html[data-theme="light"] .hljs-number,
html[data-theme="light"] .hljs-variable.constant_ {
  color: #9a3412;
}

html[data-theme="light"] .hljs-built_in,
html[data-theme="light"] .hljs-params,
html[data-theme="light"] .hljs-attr,
html[data-theme="light"] .hljs-attribute,
html[data-theme="light"] .hljs-symbol {
  color: #1d4ed8;
}

html[data-theme="light"] .hljs-comment,
html[data-theme="light"] .hljs-quote,
html[data-theme="light"] .hljs-meta {
  color: #526077;
  font-style: italic;
}

/* MathML readability in light mode. */
html[data-theme="light"] math {
  color: inherit;
}

/* Shared workspace kit and study-steps in light mode. */
html[data-theme="light"] .ws-stage,
html[data-theme="light"] .results-card,
html[data-theme="light"] .code-block,
html[data-theme="light"] .study-step-stage,
html[data-theme="light"] .study-step-card,
html[data-theme="light"] .study-source-panel {
  background: var(--light-surface-tint);
  border-color: var(--border);
  border-radius: 8px;
  color: var(--text);
}

html[data-theme="light"] .ws-caption,
html[data-theme="light"] .bar-track {
  background: #e2e8f0;
  color: var(--text);
}

html[data-theme="light"] .study-step-badge {
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
  border: 1px solid var(--light-cyan-border);
}

html[data-theme="light"] .study-step-check {
  background: var(--light-violet-tint);
  border-color: var(--light-violet-border);
  color: var(--text);
  border-radius: 8px;
}

html[data-theme="light"] .study-step-check p.correct {
  color: var(--ok);
}

html[data-theme="light"] .study-step-check p.wrong {
  color: var(--error);
}

html[data-theme="light"] .study-step-table th,
html[data-theme="light"] .study-step-table td {
  border-bottom-color: var(--border);
  color: var(--text);
}

html[data-theme="light"] .study-step-table tr.active td {
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
}

/* Source figures in study-steps are black-on-white scans: disable dark-mode inversion in light mode. */
html[data-theme="light"] .study-source-figure {
  filter: none;
  background: #ffffff;
  border-color: var(--border);
}

/* Lesson-specific workspace overrides across all 23 interactive lessons. */
html[data-theme="light"] .sp-presets button,
html[data-theme="light"] .sp-seg button,
html[data-theme="light"] .sp-choices button,
html[data-theme="light"] .vec-presets button,
html[data-theme="light"] .ss-presets button {
  background: var(--panel);
  border-color: var(--border-strong);
  color: var(--text);
}

html[data-theme="light"] .sp-presets button:hover,
html[data-theme="light"] .sp-seg button:hover,
html[data-theme="light"] .sp-choices button:hover,
html[data-theme="light"] .vec-presets button:hover,
html[data-theme="light"] .ss-presets button:hover {
  border-color: var(--green);
  background: var(--light-cyan-tint);
}

html[data-theme="light"] .sp-presets button[aria-pressed="true"],
html[data-theme="light"] .sp-seg button[aria-pressed="true"],
html[data-theme="light"] .vec-presets button[aria-pressed="true"],
html[data-theme="light"] .ss-presets button[aria-pressed="true"] {
  border-color: var(--amber);
  background: var(--light-violet-tint);
  color: var(--light-violet-ink);
  font-weight: 600;
}

html[data-theme="light"] .sp-stage {
  background: var(--light-surface-tint);
  border-color: var(--border);
}

html[data-theme="light"] .sp-predict,
html[data-theme="light"] .sg-predict,
html[data-theme="light"] .vec-readout,
html[data-theme="light"] .ss-readout,
html[data-theme="light"] .ss-predict {
  background: var(--light-cyan-tint);
  border-color: var(--light-cyan-border);
  color: var(--text);
}

html[data-theme="light"] .sp-split {
  background: #cbd5e1;
}

html[data-theme="light"] .sg-modes .btn[aria-pressed="true"] {
  background: var(--light-cyan-tint);
  border-color: var(--green);
  color: var(--light-cyan-ink);
}

html[data-theme="light"] .sg-modes .btn[data-mode="classical"][aria-pressed="true"] {
  background: #fce7f3;
  border-color: var(--pink);
  color: var(--pink);
}

html[data-theme="light"] .bm-readout,
html[data-theme="light"] .pi-readout,
html[data-theme="light"] .bb-readout {
  background: var(--light-surface-tint);
  border-left-color: var(--green);
  color: var(--text);
}

html[data-theme="light"] .bm-figure,
html[data-theme="light"] .bm-steps,
html[data-theme="light"] .bm-free,
html[data-theme="light"] .pi-figure,
html[data-theme="light"] .pi-steps,
html[data-theme="light"] .pi-free,
html[data-theme="light"] .pi-step-text,
html[data-theme="light"] .bb-figure,
html[data-theme="light"] .bb-steps,
html[data-theme="light"] .bb-free,
html[data-theme="light"] .bb-step-text {
  background: var(--light-surface-tint);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="light"] .bb-table caption,
html[data-theme="light"] .bb-totals,
html[data-theme="light"] .ent-step-note,
html[data-theme="light"] .ent-readout,
html[data-theme="light"] .ent-control,
html[data-theme="light"] .bp-readout,
html[data-theme="light"] .bp-control,
html[data-theme="light"] .bq-readout,
html[data-theme="light"] .bq-control,
html[data-theme="light"] .be-readout,
html[data-theme="light"] .be-control,
html[data-theme="light"] .lg-readout,
html[data-theme="light"] .lg-control,
html[data-theme="light"] .lc-readout,
html[data-theme="light"] .lc-control,
html[data-theme="light"] .lc-wires,
html[data-theme="light"] .rg-readout,
html[data-theme="light"] .rg-control,
html[data-theme="light"] .qg-readout,
html[data-theme="light"] .qg-control,
html[data-theme="light"] .cd-readout,
html[data-theme="light"] .cd-control,
html[data-theme="light"] .cd-table caption,
html[data-theme="light"] .tp-readout,
html[data-theme="light"] .tp-control,
html[data-theme="light"] .tp-run,
html[data-theme="light"] .tp-avg-line,
html[data-theme="light"] .tp-table caption,
html[data-theme="light"] .ec-readout,
html[data-theme="light"] .ec-control,
html[data-theme="light"] .ec-table caption,
html[data-theme="light"] .od-readout,
html[data-theme="light"] .od-table caption,
html[data-theme="light"] .dj-readout,
html[data-theme="light"] .dj-fieldset legend,
html[data-theme="light"] .dj-table caption,
html[data-theme="light"] .sm-readout,
html[data-theme="light"] .sm-table caption,
html[data-theme="light"] .qc-readout,
html[data-theme="light"] .qc-table caption,
html[data-theme="light"] .gr-readout,
html[data-theme="light"] .gr-legend,
html[data-theme="light"] .gr-table caption {
  color: var(--muted);
}

html[data-theme="light"] .lc-wires b {
  color: var(--text);
}

html[data-theme="light"] .ent-card,
html[data-theme="light"] .bp-card,
html[data-theme="light"] .bq-card,
html[data-theme="light"] .be-card,
html[data-theme="light"] .lg-card,
html[data-theme="light"] .lc-card,
html[data-theme="light"] .rg-card,
html[data-theme="light"] .qg-card,
html[data-theme="light"] .cd-card,
html[data-theme="light"] .tp-card,
html[data-theme="light"] .ec-card,
html[data-theme="light"] .od-card,
html[data-theme="light"] .dj-card,
html[data-theme="light"] .sm-card,
html[data-theme="light"] .qc-card,
html[data-theme="light"] .gr-card {
  background: var(--light-surface-tint);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="light"] .ent-step-badge,
html[data-theme="light"] .bp-step-badge,
html[data-theme="light"] .bq-step-badge,
html[data-theme="light"] .be-step-badge,
html[data-theme="light"] .lg-step-badge,
html[data-theme="light"] .lc-step-badge,
html[data-theme="light"] .rg-step-badge,
html[data-theme="light"] .qg-step-badge,
html[data-theme="light"] .cd-step-badge,
html[data-theme="light"] .tp-step-badge,
html[data-theme="light"] .ec-step-badge,
html[data-theme="light"] .od-step-badge,
html[data-theme="light"] .dj-step-badge,
html[data-theme="light"] .sm-step-badge,
html[data-theme="light"] .qc-step-badge,
html[data-theme="light"] .gr-step-badge {
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
  border: 1px solid var(--light-cyan-border);
}

html[data-theme="light"] .bp-control select,
html[data-theme="light"] .bq-control select,
html[data-theme="light"] .be-control select,
html[data-theme="light"] .lg-control select,
html[data-theme="light"] .lc-control select,
html[data-theme="light"] .rg-control select,
html[data-theme="light"] .qg-control select,
html[data-theme="light"] .cd-control select,
html[data-theme="light"] .tp-control select {
  background: var(--panel);
  border-color: var(--border-strong);
  color: var(--text);
}

html[data-theme="light"] .lc-views .btn[aria-pressed="true"],
html[data-theme="light"] .lc-inputs .btn[aria-pressed="true"],
html[data-theme="light"] .rg-bits .btn[aria-pressed="true"],
html[data-theme="light"] .ec-buttons .btn[aria-pressed="true"],
html[data-theme="light"] .sm-card button[aria-pressed="true"],
html[data-theme="light"] .qc-card button[aria-pressed="true"] {
  background: var(--light-cyan-tint);
  border-color: var(--green);
  color: var(--light-cyan-ink);
  font-weight: 600;
}

html[data-theme="light"] .bb-table th,
html[data-theme="light"] .bb-table td,
html[data-theme="light"] .cd-table th,
html[data-theme="light"] .cd-table td,
html[data-theme="light"] .tp-table th,
html[data-theme="light"] .tp-table td,
html[data-theme="light"] .ec-table th,
html[data-theme="light"] .ec-table td,
html[data-theme="light"] .od-table th,
html[data-theme="light"] .od-table td,
html[data-theme="light"] .dj-table th,
html[data-theme="light"] .dj-table td,
html[data-theme="light"] .sm-table th,
html[data-theme="light"] .sm-table td,
html[data-theme="light"] .qc-table th,
html[data-theme="light"] .qc-table td,
html[data-theme="light"] .gr-table th,
html[data-theme="light"] .gr-table td,
html[data-theme="light"] .lg-switch,
html[data-theme="light"] .dj-fieldset {
  border-color: var(--border);
}

html[data-theme="light"] .tp-table th:first-child,
html[data-theme="light"] .tp-table td:first-child {
  background: var(--light-surface-tint);
}

html[data-theme="light"] .cd-current td,
html[data-theme="light"] .tp-current td,
html[data-theme="light"] .tp-table .tp-current td:first-child,
html[data-theme="light"] .ec-current td,
html[data-theme="light"] .od-current td,
html[data-theme="light"] .dj-current td,
html[data-theme="light"] .gr-current td {
  background: var(--light-cyan-tint);
  color: var(--light-cyan-ink);
}

html[data-theme="light"] .qc-warning {
  background: #fdf2f8;
  border-color: var(--pink);
  color: var(--pink);
}

/*
 * Theme-scoped SVG attribute overrides for interactive lesson workspaces.
 * These rules remap dark-mode inline SVG panel backgrounds, grids, and light text
 * while keeping semantic color distinctions (cyan, violet, pink, green, amber) clear.
 * Static artwork and exam img.practice-figure data URIs remain untouched.
 */
html[data-theme="light"] .workspace svg [fill="#061232" i],
html[data-theme="light"] .workspace svg [fill="#080c14" i],
html[data-theme="light"] .workspace svg [fill="#090d16" i],
html[data-theme="light"] .workspace svg [fill="#0f172a" i],
html[data-theme="light"] .workspace svg [fill="#151b28" i],
html[data-theme="light"] .workspace svg [fill="#1e293b" i] {
  fill: #ffffff;
}

html[data-theme="light"] .workspace svg [fill="#0f1c3d" i],
html[data-theme="light"] .workspace svg [fill="#122450" i],
html[data-theme="light"] .workspace svg [fill="#15213b" i],
html[data-theme="light"] .workspace svg [fill="#203c69" i],
html[data-theme="light"] .workspace svg [fill="#334155" i],
html[data-theme="light"] .workspace svg [fill="#3b4f80" i] {
  fill: #e8eef7;
}

html[data-theme="light"] .workspace svg [fill="#103346" i],
html[data-theme="light"] .workspace svg [fill="#123650" i] {
  fill: #e0f2fe;
}

html[data-theme="light"] .workspace svg [fill="#231b49" i],
html[data-theme="light"] .workspace svg [fill="#321b40" i],
html[data-theme="light"] .workspace svg [fill="#32224f" i] {
  fill: #f3e8ff;
}

html[data-theme="light"] .workspace svg [fill="#f2f6ff" i],
html[data-theme="light"] .workspace svg [fill="#f8fafc" i],
html[data-theme="light"] .workspace svg [fill="#e2e8f0" i],
html[data-theme="light"] .workspace svg [fill="#d7e2fa" i],
html[data-theme="light"] .workspace svg [fill="#d3def7" i] {
  fill: #0f172a;
}

html[data-theme="light"] .workspace svg [fill="#cbd5e1" i],
html[data-theme="light"] .workspace svg [fill="#acbddf" i],
html[data-theme="light"] .workspace svg [fill="#99a7c0" i],
html[data-theme="light"] .workspace svg [fill="#94a3b8" i] {
  fill: #334155;
}

html[data-theme="light"] .workspace svg [fill="#e4d3ff" i] {
  fill: #5b21b6;
}

/* Dark-on-light text and strokes inside SVG shapes. */
html[data-theme="light"] .workspace svg text[fill="#5cecff" i],
html[data-theme="light"] .workspace svg tspan[fill="#5cecff" i],
html[data-theme="light"] .workspace svg text[fill="#38bdf8" i],
html[data-theme="light"] .workspace svg tspan[fill="#38bdf8" i] {
  fill: #0369a1;
}

html[data-theme="light"] .workspace svg text[fill="#c4a0ff" i],
html[data-theme="light"] .workspace svg tspan[fill="#c4a0ff" i],
html[data-theme="light"] .workspace svg text[fill="#a78bfa" i],
html[data-theme="light"] .workspace svg tspan[fill="#a78bfa" i],
html[data-theme="light"] .workspace svg text[fill="#a855f7" i],
html[data-theme="light"] .workspace svg tspan[fill="#a855f7" i] {
  fill: #6d28d9;
}

html[data-theme="light"] .workspace svg text[fill="#efaaff" i],
html[data-theme="light"] .workspace svg tspan[fill="#efaaff" i],
html[data-theme="light"] .workspace svg text[fill="#ffb8db" i],
html[data-theme="light"] .workspace svg tspan[fill="#ffb8db" i],
html[data-theme="light"] .workspace svg text[fill="#f43f5e" i],
html[data-theme="light"] .workspace svg tspan[fill="#f43f5e" i] {
  fill: #be185d;
}

html[data-theme="light"] .workspace svg text[fill="#34d399" i],
html[data-theme="light"] .workspace svg tspan[fill="#34d399" i] {
  fill: #0f766e;
}

html[data-theme="light"] .workspace svg text[fill="#fbbf24" i],
html[data-theme="light"] .workspace svg tspan[fill="#fbbf24" i] {
  fill: #b45309;
}

html[data-theme="light"] .workspace svg [stroke="#1e293b" i],
html[data-theme="light"] .workspace svg [stroke="#24365f" i],
html[data-theme="light"] .workspace svg [stroke="#293142" i],
html[data-theme="light"] .workspace svg [stroke="#2d3748" i],
html[data-theme="light"] .workspace svg [stroke="#334155" i] {
  stroke: #cbd5e1;
}

html[data-theme="light"] .workspace svg [stroke="#475569" i],
html[data-theme="light"] .workspace svg [stroke="#4a5568" i],
html[data-theme="light"] .workspace svg [stroke="#65738f" i],
html[data-theme="light"] .workspace svg [stroke="#657fba" i],
html[data-theme="light"] .workspace svg [stroke="#7895cf" i] {
  stroke: #64748b;
}

html[data-theme="light"] .workspace svg [stroke="#f2f6ff" i],
html[data-theme="light"] .workspace svg [stroke="#f8fafc" i] {
  stroke: #0f172a;
}

/* Reduced motion support for both system preference and app data attribute. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Corrections from browser contrast checks. */
html[data-theme="light"] {
  --page: #f8f7f3;
  --border-strong: #718198;
  --light-cyan-border: #377fa8;
  --light-violet-border: #9360cd;
  --light-ok-border: #27825a;
  --light-error-border: #bd4c65;
  --light-warn-border: #9a6900;
}
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .step p,
html[data-theme="light"] .topic-card p,
html[data-theme="light"] .plan-list li,
html[data-theme="light"] .task ol { color: var(--muted); }
html[data-theme="light"] .instructions-scroll { background: var(--page); }
html[data-theme="light"] .results-panel { background: var(--sunken); }
html[data-theme="light"] .choice { background: var(--panel); color: var(--text); border-color: var(--border-strong); }
html[data-theme="light"] .choice:hover:not(:has(input:disabled)),
html[data-theme="light"] .choice:has(input:checked) { background: var(--light-cyan-tint); border-color: var(--green); }
html[data-theme="light"] .choice:has(input:disabled) { cursor: default; }
html[data-theme="light"] .gate-note { color: var(--light-warn-ink); }
html[data-theme="light"] .feedback.success { background: var(--light-ok-tint); color: var(--light-ok-ink); border-color: var(--light-ok-border); }
html[data-theme="light"] .feedback.solution { background: var(--light-cyan-tint); color: var(--light-cyan-ink); border-color: var(--light-cyan-border); }
html[data-theme="light"] .btn:disabled,
html[data-theme="light"] button:disabled { opacity: 1; color: #596579; background: #edf0f4; border-color: #8796ab; box-shadow: none; }
html[data-theme="light"] .workspace svg [stroke="#061232" i] { stroke: var(--sunken); }
html[data-theme="light"] .workspace svg [fill="#88b5ff" i],
html[data-theme="light"] .workspace svg [fill="#64b5f6" i],
html[data-theme="light"] .workspace svg [fill="#88cfff" i] { fill: #1d4ed8; }
html[data-theme="light"] .workspace svg [fill="#5cecff" i],
html[data-theme="light"] .workspace svg [fill="#38bdf8" i] { fill: #0369a1; }
html[data-theme="light"] .workspace svg [fill="#c4a0ff" i],
html[data-theme="light"] .workspace svg [fill="#a78bfa" i] { fill: #6d28d9; }
html[data-theme="light"] .workspace svg [fill="#efaaff" i] { fill: #a21caf; }
html[data-theme="light"] .workspace svg [stroke="#5cecff" i],
html[data-theme="light"] .workspace svg [stroke="#38bdf8" i] { stroke: #0369a1; }
html[data-theme="light"] .workspace svg [stroke="#c4a0ff" i],
html[data-theme="light"] .workspace svg [stroke="#a78bfa" i] { stroke: #6d28d9; }
html[data-theme="light"] .workspace svg [stroke="#88b5ff" i],
html[data-theme="light"] .workspace svg [stroke="#64b5f6" i],
html[data-theme="light"] .workspace svg [stroke="#88cfff" i] { stroke: #1d4ed8; }
html[data-theme="light"] .workspace svg [stroke="#efaaff" i] { stroke: #a21caf; }
html[data-theme="light"] .prose p,
html[data-theme="light"] .prose-list,
html[data-theme="light"] .hero-text,
html[data-theme="light"] .legal li,
html[data-theme="light"] .faq p,
html[data-theme="light"] .compare tbody th { color: var(--text); }
html[data-theme="light"] .outline-link { color: var(--muted); }
html[data-theme="light"] .outline-link:hover { background: var(--raised); }
html[data-theme="light"] .outline-link:is([aria-current="page"], [aria-current="step"]) { background: var(--light-cyan-tint); color: var(--light-cyan-ink); }
html[data-theme="light"] .outline-mark { border-color: var(--border-strong); }
html[data-theme="light"] .outline-missing,
html[data-theme="light"] .compare td.no { color: var(--muted); }
html[data-theme="light"] .step-number,
html[data-theme="light"] .save-badge { background: var(--light-cyan-tint); color: var(--light-cyan-ink); }
html[data-theme="light"] .plan-card.featured,
html[data-theme="light"] .topic-card.featured,
html[data-theme="light"] .landing-cta { background: var(--light-surface-tint); box-shadow: none; }
html[data-theme="light"] .callout { background: var(--light-violet-tint); }
html[data-theme="light"] .callout strong,
html[data-theme="light"] .callout p { color: var(--light-violet-ink); }
html[data-theme="light"] .callout.note { background: var(--light-cyan-tint); }
html[data-theme="light"] .callout.note strong,
html[data-theme="light"] .callout.note p { color: var(--light-cyan-ink); }
html[data-theme="light"] .cosine-table th,
html[data-theme="light"] .cosine-table td { border-color: var(--border-strong); }
html[data-theme="light"] .cosine-table th[scope="row"] { background: var(--raised); }
html[data-theme="light"] .ws-caption { background: var(--raised); }
html[data-theme="light"] .bar-track { background: #cbd5e1; }
html[data-theme="light"] .bar-track.signed::before { background: var(--muted); }
html[data-theme="light"] .practice-option { background: var(--panel); color: var(--text); border-color: var(--border-strong); }
html[data-theme="light"] .practice-option:hover:not(:has(input:disabled)),
html[data-theme="light"] .practice-option:has(input:checked) { background: var(--light-cyan-tint); border-color: var(--green); }
html[data-theme="light"] .practice-option.is-correct { background: var(--light-ok-tint); color: var(--light-ok-ink); border-color: var(--light-ok-border); }
html[data-theme="light"] .practice-option.is-incorrect:has(input:checked) { background: var(--light-error-tint); color: var(--light-error-ink); border-color: var(--light-error-border); }
html[data-theme="light"] .practice-feedback.is-correct .answer-status { color: var(--light-ok-ink); }
html[data-theme="light"] .practice-feedback.is-incorrect .answer-status { color: var(--light-error-ink); }
html[data-theme="light"] .practice-code pre { background: var(--sunken); color: var(--text); }
html[data-theme="light"] .practice-option input { accent-color: var(--green); }

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto; width: 40px; height: 40px; padding: 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease; }
.theme-toggle:hover { background: var(--raised); border-color: var(--border); }
.theme-toggle:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.theme-toggle .theme-moon, html[data-theme="light"] .theme-toggle .theme-sun { display: none; }
html[data-theme="light"] .theme-toggle .theme-moon { display: block; }
@media (max-width: 700px) { .theme-toggle { margin-left: 0; } }
html[data-theme="light"] .workspace-tabs { background: var(--panel); }
html[data-theme="light"] .workspace-tabs button[aria-selected="true"] { background: var(--light-cyan-tint); color: var(--green); }

html[data-reduce-motion="1"] .theme-toggle, html[data-reduce-motion="1"] .workspace-tabs button { transition: none; }

html[data-theme="light"] .workspace svg :is(text, tspan):is([style*="stroke:#061232" i], [style*="stroke: #061232" i]) {
  stroke: var(--panel) !important;
}