/* One set of lesson cards, with REX purple and Meteor orange in the drawings. */
:root {
  --tile: #f1e6f5;
  --tile-border: #bda4c8;
  --tile-shadow: #dfcde6;
}
.lesson-list button,
.lesson-list button[data-level] {
  background: var(--tile);
  border-color: var(--tile-border);
  box-shadow: 3px 4px 0 var(--tile-shadow);
}
.lesson-list button:hover {
  border-color: var(--deep);
  box-shadow: 4px 8px 0 var(--tile-shadow);
}
.lesson-list button.done {
  border-color: var(--deep);
}
.lesson-list button > b {
  border-color: var(--tile-border);
  color: var(--deep);
}
.lesson-list .done > b {
  color: white;
}
.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
}
.theme-toggle svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bulb-glass {
  fill: #ffd074;
}
.theme-toggle:hover {
  background: var(--lavender);
}
@container (max-width: 540px) {
  .header-nav .help {
    margin-left: 0;
  }
}

/* Stars are still so the night stays calm during a lesson. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191321;
  --ink: #fff4e2;
  --button-shadow: #130e1a;
  --purple: #bc78d2;
  --deep: #d8a4ef;
  --orange: #ffad52;
  --line: #4b3b58;
  --muted: #c7b7ce;
  --lavender: #37263f;
  --tile: #2a1e34;
  --tile-border: #6d507e;
  --tile-shadow: #120d19;
  --night-panel: #251b2f;
  --night-raised: #32243c;
  --night-warm: #38293a;
}
[data-theme="dark"] body {
  isolation: isolate;
}
[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("night-sky.svg") repeat,
    radial-gradient(ellipse at 85% 15%, #6944823d, transparent 55%),
    radial-gradient(ellipse at 8% 85%, #7439541c, transparent 50%);
}
[data-theme="dark"] .theme-toggle {
  color: var(--orange);
  border-color: var(--tile-border);
  background: var(--night-raised);
}
[data-theme="dark"] .bulb-glass {
  fill: none;
}
[data-theme="dark"] .bulb-rays {
  opacity: 0;
}
[data-theme="dark"] .bulb-body {
  transform: translateY(-3px);
}
[data-theme="dark"] .hero-art {
  background: radial-gradient(ellipse, #8c5a993d, transparent 70%);
}
[data-theme="dark"] .primary {
  color: #262029;
  border-color: #130e1a;
}
[data-theme="dark"] .primary:hover {
  background: #ffc17a;
}
[data-theme="dark"] .hero-description,
[data-theme="dark"] .about-copy > p:not(.eyebrow),
[data-theme="dark"] .how-step p,
[data-theme="dark"] .card-description,
[data-theme="dark"] .micro,
[data-theme="dark"] .muted,
[data-theme="dark"] .weather-note small,
[data-theme="dark"] .compare-row small,
[data-theme="dark"] #lessonJourney li {
  color: var(--muted);
}
[data-theme="dark"] .quick-facts {
  background: var(--night-raised);
  border-color: var(--tile-border);
  color: var(--ink);
}
[data-theme="dark"] .quick-facts strong {
  color: var(--orange);
}
[data-theme="dark"] .how-it-works,
[data-theme="dark"] .course-progress,
[data-theme="dark"] .lesson-intro,
[data-theme="dark"] .allocation,
[data-theme="dark"] .weather-note,
[data-theme="dark"] .live-learning,
[data-theme="dark"] .stats > div {
  background: var(--night-raised);
  border-color: var(--tile-border);
}
[data-theme="dark"] .how-it-works {
  box-shadow: 6px 6px 0 #120d19;
}
[data-theme="dark"] .how-step,
[data-theme="dark"] #lessonJourney li > span {
  border-color: var(--tile-border);
}
[data-theme="dark"] .tokens-symbol span {
  color: #262029;
  border-color: #262029;
}
[data-theme="dark"] .art-range svg rect {
  fill: #513960;
}
[data-theme="dark"] .art-range svg path {
  stroke: var(--ink);
}
[data-theme="dark"] .art-share svg circle:nth-of-type(2) {
  fill: #89669d;
}
[data-theme="dark"] .lesson-screen {
  background: var(--night-panel);
  border-color: var(--tile-border);
  box-shadow: 7px 7px 0 #120d19;
}
[data-theme="dark"] .box,
[data-theme="dark"] .choices button {
  background: var(--night-panel);
  border-color: var(--tile-border);
}
[data-theme="dark"] .rex-explains,
[data-theme="dark"] .topline .pill {
  background: var(--night-warm);
}
[data-theme="dark"] .intro-steps button {
  color: var(--deep);
  background: var(--night-raised);
  border-color: var(--tile-border);
}
[data-theme="dark"] .intro-track {
  background: var(--line);
}
[data-theme="dark"] .choices .selected,
[data-theme="dark"] .intro-steps [aria-current="step"],
[data-theme="dark"] #lessonJourney [aria-current="step"] > span,
[data-theme="dark"] .lesson-list .done > b,
[data-theme="dark"] .status {
  background: #75438c;
  border-color: #b985d0;
  color: #fff4e2;
}
[data-theme="dark"] .status.out {
  background: #864019;
}
[data-theme="dark"] #lessonJourney [aria-current="step"] {
  color: var(--deep);
}
[data-theme="dark"] .positive {
  color: #a6d996;
}
[data-theme="dark"] .negative {
  color: #ffbc8c;
}
[data-theme="dark"] dialog {
  color: var(--ink);
  background: var(--night-panel);
  border-color: var(--tile-border);
}
[data-theme="dark"] .intro-canvas {
  background: var(--night-panel);
  border-color: var(--tile-border);
}
[data-theme="dark"] #chart {
  background: var(--night-panel);
  border-radius: 16px;
}
/* Match generated chart colours without changing their data or animations. */
[data-theme="dark"] :is(#introVisual, #chart, #allocation) text {
  fill: var(--ink);
}
[data-theme="dark"] :is(#introVisual, #chart, #allocation) [fill="#fefef6"] {
  fill: var(--night-panel);
}
[data-theme="dark"]
  :is(#introVisual, #chart, #allocation)
  :is(
    [fill="#e5c8f1"],
    [fill="#ead4f5"],
    [fill="#ead8f1"],
    [fill="#ead3f4"],
    [fill="#efdef4"],
    [fill="#f2e4f6"]
  ) {
  fill: #4d355e;
}
[data-theme="dark"]
  :is(#introVisual, #chart, #allocation)
  :is([fill="#ffe2ad"], [fill="#ffe5b5"], [fill="#ffdbb1"], [fill="#ffe4bf"]) {
  fill: #614129;
}
[data-theme="dark"] :is(#introVisual, #chart, #allocation) [fill="#b968cb"] {
  fill: #9043ac;
}
[data-theme="dark"] :is(#introVisual, #chart, #allocation) [fill="#9955b6"] {
  fill: #c994df;
}
[data-theme="dark"] :is(#introVisual, #chart, #allocation) [stroke="#813cad"] {
  stroke: #c890e5;
}
[data-theme="dark"] :is(#introVisual, #chart, #allocation) [fill="#e5dde8"] {
  fill: #63536d;
}
[data-theme="dark"]
  :is(#introVisual, #chart, #allocation)
  :is([stroke="#c6a2d7"], [stroke="#d4c5d9"], [stroke="#ddd0e3"]) {
  stroke: #91729f;
}
[data-theme="dark"]
  :is(#introVisual, #chart, #allocation)
  :is([stroke="#171319"], [stroke="#743598"], [stroke="#9a3b16"]) {
  stroke: var(--ink);
}
[data-theme="dark"]
  :is(#introVisual, #chart, #allocation)
  :is(text[fill="#9a3b16"], text[fill="#a64219"]) {
  fill: #ffbc8c;
}
@container (min-width: 900px) {
  [data-theme="dark"] .setup-launch {
    background: var(--night-raised);
    border-color: var(--tile-border);
  }
  [data-theme="dark"] .setup-launch .weather-note {
    background: transparent;
  }
}
@container (max-width: 540px) {
  [data-theme="dark"] .lesson-screen {
    background: transparent;
    box-shadow: none;
  }
}