/* EGE solutions only. Dark tokens copied from learning-unified.css;
   do not load that layout stylesheet here: the light page must stay unchanged.
   theme-init.js/site.js resolve system preference to html[data-theme]. */
html[data-theme="dark"] {
  --lu-bg: #111827;
  --lu-card: #182235;
  --lu-text: #eef5ff;
  --lu-muted: #a9b8c8;
  --lu-line: #2c3b51;
  --lu-primary: #79b4ff;
  --lu-soft: #172b43;
}
html[data-theme="dark"] body.test-page { background: var(--lu-bg); }
/* Shared controls are present on this page too: the original bright consent
   button and the inactive sun label fall below 4.5:1 in dark mode. */
html[data-theme="dark"] .theme-toggle__option--light { color: var(--lu-text); }
html[data-theme="dark"] .privacy-button {
  background: var(--lu-soft);
  border-color: var(--lu-primary);
  color: var(--lu-text);
}
html[data-theme="dark"] .privacy-button:hover,
html[data-theme="dark"] .privacy-button:focus-visible { background: var(--lu-card); color: var(--lu-text); }
html[data-theme="dark"] .solution-shell,
html[data-theme="dark"] .solution-shell :is(p, li, strong, h1, h2, h3, h4, th, td, figcaption),
html[data-theme="dark"] .solution-shell :is(.math, mjx-container, .MathJax, .katex) {
  color: var(--lu-text);
}
html[data-theme="dark"] .solution-shell .breadcrumbs { color: var(--lu-muted); }
html[data-theme="dark"] .solution-shell a { color: var(--lu-primary); }
html[data-theme="dark"] .solution-shell .button {
  background: var(--lu-soft);
  border-color: var(--lu-primary);
  color: var(--lu-text);
}
html[data-theme="dark"] .solution-shell .button:hover,
html[data-theme="dark"] .solution-shell .button:focus-visible {
  background: var(--lu-card);
  color: var(--lu-text);
}
html[data-theme="dark"] .solution-shell .problem-statement,
html[data-theme="dark"] .solution-shell .interval-diagram,
html[data-theme="dark"] .solution-shell table { background: var(--lu-card); }
html[data-theme="dark"] .solution-shell :is(.problem-statement, .interval-diagram, th, td),
html[data-theme="dark"] .solution-shell > h2 { border-color: var(--lu-line); }
html[data-theme="dark"] .solution-shell .problem-statement { border-left-color: var(--lu-primary); }
html[data-theme="dark"] .solution-shell tr { background: transparent; }
html[data-theme="dark"] .solution-shell th { background: var(--lu-soft); }
/* Preserve the original diagram pixels on a light backing: several raster
   figures have transparent backgrounds with dark labels and construction lines. */
html[data-theme="dark"] .solution-shell .solution-task-image { background: var(--lu-text); }
/* Recolor the authored SVG only; MathJax SVG glyphs already use currentColor. */
html[data-theme="dark"] .interval-diagram :is(text, marker path) { fill: var(--lu-text); }
html[data-theme="dark"] .interval-diagram line { stroke: var(--lu-primary); }
html[data-theme="dark"] .interval-diagram line:first-of-type { stroke: var(--lu-text); }
html[data-theme="dark"] .interval-diagram g[fill="#fff"] { fill: var(--lu-card); stroke: var(--lu-primary); }
html[data-theme="dark"] .interval-diagram g[fill="#157ec0"] { fill: var(--lu-primary); stroke: var(--lu-card); }