/* Chemistry Lab v1.3: colour themes.
 * data-theme = dark | light (drives every existing dark rule)
 * data-palette = dark (Lab green) | midnight | nebula | light
 * Midnight and Nebula: darker backgrounds and higher contrast (body text 18.5:1, muted text 11:1, accent 9.7–11.5:1). */

:root[data-palette=midnight]{
 --bg:#070B16;--surface:#10182C;--ink:#F5F8FF;--muted:#B9C5E2;--line:#2A3657;--teal:#4FD6F7;--mint:#0F2D44;
 --blue:#152A55;--coral:#3D1B27;--sage:#132F2B;--gold:#3A2D0E;--shadow:0 14px 40px #0008;color-scheme:dark}
:root[data-palette=nebula]{
 --bg:#0D0818;--surface:#1A1230;--ink:#FBF7FF;--muted:#CDC2EA;--line:#3B2D61;--teal:#FF92D4;--mint:#3A1A42;
 --blue:#231F52;--coral:#47192D;--sage:#173230;--gold:#3E2D10;--shadow:0 14px 40px #0008;color-scheme:dark}

/* Shared dark-palette surfaces that were tinted green by hand */
:root:is([data-palette=midnight],[data-palette=nebula]) .header-shell,:root:is([data-palette=midnight],[data-palette=nebula]) .lesson-tabs{background:var(--bg)}
:root:is([data-palette=midnight],[data-palette=nebula]) body{background-image:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--teal) 9%,transparent),transparent 46rem)}
:root:is([data-palette=midnight],[data-palette=nebula]) dialog::backdrop{background:#000c}
:root:is([data-palette=midnight],[data-palette=nebula]) .stars .earned{color:#FFC94A}
:root:is([data-palette=midnight],[data-palette=nebula]) .star-goals li.done span[aria-hidden]{color:#FFC94A}
:root:is([data-palette=midnight],[data-palette=nebula]) .answers .incorrect{border-color:#FF7A7A}
:root:is([data-palette=midnight],[data-palette=nebula]) .button:not(.secondary){color:var(--bg);font-weight:700}

/* Home hero card: dark glass instead of the pale card */
:root:is([data-palette=midnight],[data-palette=nebula]) .hero-exhibit{background:radial-gradient(ellipse at 45% 35%,color-mix(in srgb,var(--teal) 18%,var(--surface)),var(--surface) 70%);color:var(--ink);border-color:var(--line);box-shadow:0 12px 40px #0006}
:root:is([data-palette=midnight],[data-palette=nebula]) .hero-exhibit .exhibit-bottom span{color:var(--muted)}
:root:is([data-palette=midnight],[data-palette=nebula]) .hero-exhibit .exhibit-bottom b{border-color:var(--line);background:#ffffff10}
:root:is([data-palette=midnight],[data-palette=nebula]) .orbit{border-color:color-mix(in srgb,var(--teal) 55%,#9ebed3);box-shadow:0 0 14px color-mix(in srgb,var(--teal) 30%,transparent)}

/* Lesson model stage and its overlays */
:root[data-palette=midnight] .scene-stage{background:#060B18}
:root[data-palette=nebula] .scene-stage{background:#0B0716}
:root:is([data-palette=midnight],[data-palette=nebula]) .scene-views{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:var(--line);box-shadow:0 3px 14px #0006}
:root:is([data-palette=midnight],[data-palette=nebula]) .scene-views button{color:var(--muted)}
:root:is([data-palette=midnight],[data-palette=nebula]) .scene-views button[aria-pressed=true]{background:var(--mint);color:var(--teal)}
:root:is([data-palette=midnight],[data-palette=nebula]) .scene-facts{background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);border-color:var(--line)}
:root:is([data-palette=midnight],[data-palette=nebula]) .scene-stage-hint{color:var(--muted)}

/* 3D scenes (Lesson 1 AtomScene, Lesson 2 ElectronShellsScene) */
:root[data-palette=midnight] :is(.cl-atom-scene,.cl-electron-shells)[data-theme="dark"]{
 --cl-stage-bg:radial-gradient(120% 90% at 50% 36%,#15284F 0%,#0A1328 50%,#03060D 100%);
 --cl-ink:#F2F7FF;--cl-muted:#B9C5E2;--cl-caption:#6FE3FF;--cl-caption-shadow:0 0 22px rgba(79,214,247,.4);
 --cl-pill-bg:rgba(9,15,32,.86);--cl-pill-ink:#F2F7FF;--cl-pill-line:rgba(111,227,255,.38);--cl-pill-on:#4FD6F7;--cl-pill-on-ink:#03121E;
 --cl-config:#F2F7FF;--cl-leader:rgba(111,227,255,.7)}
:root[data-palette=nebula] :is(.cl-atom-scene,.cl-electron-shells)[data-theme="dark"]{
 --cl-stage-bg:radial-gradient(120% 90% at 50% 36%,#2E1B4E 0%,#150C29 50%,#060310 100%);
 --cl-ink:#FBF7FF;--cl-muted:#CDC2EA;--cl-caption:#FFA2DC;--cl-caption-shadow:0 0 22px rgba(255,146,212,.4);
 --cl-pill-bg:rgba(20,12,38,.86);--cl-pill-ink:#FBF7FF;--cl-pill-line:rgba(255,162,220,.4);--cl-pill-on:#FF92D4;--cl-pill-on-ink:#2A0A1E;
 --cl-config:#FBF7FF;--cl-leader:rgba(255,162,220,.72)}

/* 2D labs (Lesson 3 BuildAtomScene, Lesson 4 HeatCoolScene): same stage and pill tokens as the 3D scenes. */
:is(.cl-build-atom,.cl-heat-cool)[data-theme="dark"]{--cl-tray-bg:linear-gradient(180deg,rgba(4,16,20,.62),rgba(4,16,20,.32))}
:root[data-palette=midnight] :is(.cl-build-atom,.cl-heat-cool)[data-theme="dark"]{
 --cl-stage-bg:radial-gradient(120% 90% at 50% 36%,#15284F 0%,#0A1328 50%,#03060D 100%);
 --cl-ink:#F2F7FF;--cl-muted:#B9C5E2;--cl-caption:#6FE3FF;--cl-accent:#4FD6F7;--cl-focus:#9FE4FF;
 --cl-pill-bg:rgba(9,15,32,.86);--cl-pill-line:rgba(111,227,255,.34);--cl-pill-on:#4FD6F7;
 --cl-surface:rgba(9,15,32,.86);--cl-line:rgba(111,227,255,.26);--cl-shell:#6E9BE0;--cl-tray-bg:linear-gradient(180deg,rgba(5,9,22,.78),rgba(5,9,22,.45));
 --cl-box-line:rgba(111,227,255,.26);--cl-hbond:rgba(111,227,255,.55);--cl-halo:#0C1630}
:root[data-palette=nebula] :is(.cl-build-atom,.cl-heat-cool)[data-theme="dark"]{
 --cl-stage-bg:radial-gradient(120% 90% at 50% 36%,#2E1B4E 0%,#150C29 50%,#060310 100%);
 --cl-ink:#FBF7FF;--cl-muted:#CDC2EA;--cl-caption:#FFA2DC;--cl-accent:#FF92D4;--cl-focus:#FFC4EA;
 --cl-pill-bg:rgba(20,12,38,.86);--cl-pill-line:rgba(255,162,220,.36);--cl-pill-on:#FF92D4;
 --cl-surface:rgba(20,12,38,.86);--cl-line:rgba(255,162,220,.26);--cl-shell:#A88BE0;--cl-tray-bg:linear-gradient(180deg,rgba(12,6,24,.78),rgba(12,6,24,.45));
 --cl-box-line:rgba(255,162,220,.28);--cl-hbond:rgba(190,170,255,.6);--cl-halo:#190E30}

/* Colour picker */
.theme-dialog{max-width:560px}
.theme-dialog h2{margin:10px 0 18px}
#theme-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.theme-choice{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px;border:2px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);text-align:left;min-height:44px}
.theme-choice:hover{border-color:var(--teal)}
.theme-choice[aria-pressed=true]{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 30%,transparent)}
.theme-choice strong{display:block;font-size:17px}
.theme-choice small{display:block;font-size:14px;color:var(--muted)}
.theme-preview{position:relative;display:block;height:78px;border-radius:10px;background:var(--p-bg);border:1px solid #ffffff22;overflow:hidden}
.theme-preview i{position:absolute;left:10px;top:10px;right:42%;bottom:10px;border-radius:7px;background:var(--p-surface)}
.theme-preview i::before{content:"";position:absolute;left:10px;top:12px;width:60%;height:7px;border-radius:4px;background:var(--p-ink);opacity:.9}
.theme-preview i::after{content:"";position:absolute;left:10px;bottom:10px;width:46%;height:14px;border-radius:5px;background:var(--p-accent)}
.theme-preview b{position:absolute;right:16px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;border:2px solid var(--p-accent)}
.theme-preview em{position:absolute;right:28px;top:50%;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--p-accent)}
.theme-saved{margin-top:16px!important;font-size:14px!important}
@media(max-width:680px){#theme-choices{grid-template-columns:1fr 1fr;gap:9px}.theme-preview{height:62px}.theme-choice{padding:10px}.theme-choice strong{font-size:16px}.theme-choice small{font-size:13px}}