/* SpecEnvoy Chemistry — shared immersive "lab" theme.
   Loaded by every /learn/chemistry tool (atom-builder, gas-lab, equations, molecules).
   Mirrors the elements.css look (dark, aurora backdrop, neon accents) so the whole
   section feels like one instrument. Per-tool CSS layers specifics on top. */
:root{
  --ch-bg:#060a16; --ch-bg2:#0b1226; --ch-panel:#0d1530;
  --ch-ink:#eaf0ff; --ch-dim:#93a2c9; --ch-faint:#6b7aa0;
  --ch-line:rgba(120,150,220,.16);
  --ch-accent:#4dd2ff; --ch-accent2:#a0f060; --ch-accent3:#e599f7;
  --ch-warn:#ffd43b; --ch-hot:#ff6b6b; --ch-cool:#7c9cff;
  /* CPK-ish element colours reused across tools */
  --el-H:#e6edff; --el-C:#3a4763; --el-N:#4d7dff; --el-O:#ff5b5b;
  --el-p:#ff6b6b; --el-n:#8895b3; --el-e:#4dd2ff;
}
.chem-page{background:var(--ch-bg);min-height:100vh;color:var(--ch-ink);position:relative;overflow-x:hidden;}
/* aurora backdrop + drifting particle grid (shared with elements) */
.chem-page::before{content:"";position:fixed;inset:-20% -10% auto -10%;height:120%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(700px 460px at 72% -6%, rgba(77,120,230,.26), transparent 60%),
    radial-gradient(600px 420px at 12% 8%, rgba(120,60,220,.16), transparent 60%),
    radial-gradient(680px 520px at 90% 40%, rgba(40,200,180,.11), transparent 60%);
  animation:chAurora 22s ease-in-out infinite alternate;}
@keyframes chAurora{0%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-3%,2%,0) scale(1.08);}100%{transform:translate3d(3%,-1%,0) scale(1.04);}}
.chem-page::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(140,170,255,.10) 1px, transparent 1.4px);background-size:34px 34px;
  animation:chDrift 40s linear infinite;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);}
@keyframes chDrift{to{background-position:340px 680px;}}
@media (prefers-reduced-motion:reduce){.chem-page::before,.chem-page::after{animation:none;}}

.chem-wrap{max-width:1180px;margin:0 auto;padding:0 16px 80px;}
.chem-hero{padding:14px 0 6px;}
.chem-hero h1{font-size:clamp(26px,5vw,42px);margin:.1em 0;letter-spacing:-.5px;}
.chem-hero h1 .glow{background:linear-gradient(90deg,#4dd2ff,#a0f060,#e599f7);-webkit-background-clip:text;background-clip:text;color:transparent;}
.chem-hero p{color:var(--ch-dim);max-width:64ch;margin:.25em 0 0;line-height:1.55;}

/* the crumbs/topbar/footer come from global style.css; a few chem overrides for contrast */
.chem-page .crumbs a{color:#8fb4ff;}
.chem-page .topnav a{color:var(--ch-dim);}

/* generic control surfaces ------------------------------------------------- */
.chem-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 10px;}
.chem-seg{display:inline-flex;background:var(--ch-bg2);border:1px solid var(--ch-line);border-radius:10px;overflow:hidden;flex-wrap:wrap;}
.chem-seg button{background:none;border:0;color:var(--ch-dim);padding:8px 13px;font-size:13px;cursor:pointer;transition:.15s;}
.chem-seg button.on{background:linear-gradient(180deg,#1b2b57,#152146);color:#fff;box-shadow:inset 0 0 0 1px rgba(120,180,255,.35);}
.chem-seg button:hover{color:#fff;}

.chem-btn{background:var(--ch-bg2);border:1px solid var(--ch-line);border-radius:10px;color:var(--ch-ink);
  padding:9px 14px;font-size:14px;cursor:pointer;transition:.15s;line-height:1;}
.chem-btn:hover{border-color:rgba(140,180,255,.5);color:#fff;background:#111a38;}
.chem-btn.primary{background:linear-gradient(180deg,#1f6feb,#1550c8);border-color:#2b6fe0;color:#fff;font-weight:600;}
.chem-btn.primary:hover{background:linear-gradient(180deg,#3a86ff,#1f6feb);}
.chem-btn:disabled{opacity:.4;cursor:not-allowed;}
.chem-btn.ghost{background:none;}

.chem-panel{background:linear-gradient(180deg,rgba(20,30,64,.55),rgba(11,18,38,.55));
  border:1px solid var(--ch-line);border-radius:16px;padding:16px 18px;}
.chem-panel h2,.chem-panel h3{margin:0 0 8px;}

/* slider rows — Firefox needs min-width/width:0 or flex rows overflow phones */
.chem-slider{display:flex;align-items:center;gap:10px;margin:9px 0;font-size:13px;color:var(--ch-dim);}
.chem-slider label{flex:0 0 auto;min-width:96px;}
.chem-slider input[type=range]{flex:1;min-width:0;width:0;accent-color:var(--ch-accent);height:22px;}
.chem-slider .val{flex:0 0 auto;min-width:58px;text-align:right;color:var(--ch-ink);font-variant-numeric:tabular-nums;}

/* small chips / tags */
.chem-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(77,210,255,.1);
  border:1px solid rgba(77,210,255,.28);color:#cfeeff;border-radius:8px;padding:5px 10px;font-size:13px;
  cursor:pointer;transition:.15s;}
.chem-chip:hover{background:rgba(77,210,255,.22);color:#fff;transform:translateY(-1px);}
.chem-chip.on{background:linear-gradient(180deg,#1b2b57,#152146);color:#fff;border-color:rgba(120,180,255,.5);}
.chem-chip.soon{opacity:.55;cursor:default;background:rgba(255,255,255,.04);border-color:var(--ch-line);color:var(--ch-faint);}
.chem-chip.soon:hover{transform:none;}

/* mute toggle (shared with elements convention) */
.chem-mute{background:var(--ch-bg2);border:1px solid var(--ch-line);border-radius:10px;color:var(--ch-dim);
  padding:8px 11px;font-size:14px;cursor:pointer;transition:.15s;line-height:1;}
.chem-mute:hover{color:#fff;} .chem-mute.off{opacity:.55;}

/* readout / stat bars */
.chem-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--ch-line);
  border-radius:12px;overflow:hidden;border:1px solid var(--ch-line);}
.chem-readout > div{background:var(--ch-panel);padding:9px 12px;}
.chem-readout .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ch-dim);}
.chem-readout .v{font-size:18px;margin-top:2px;font-variant-numeric:tabular-nums;}

.chem-note{background:rgba(255,255,255,.03);border-left:3px solid var(--ch-accent);border-radius:0 8px 8px 0;
  padding:11px 15px;color:#d7e0fb;font-size:14px;line-height:1.6;margin:14px 0;}

.chem-cred{margin-top:26px;color:var(--ch-dim);font-size:12.5px;line-height:1.6;}
.chem-cred a{color:#7fbcff;}

/* two-column stage/controls layout used by several tools */
.chem-lab{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:18px;align-items:start;margin-top:14px;}
@media (max-width:820px){.chem-lab{grid-template-columns:1fr;}}