/* Atom Lab — scoped; uses topic.css variables */

.atoms-lab {
  --atoms-ink: var(--color-text);
  --atoms-muted: var(--color-text-muted);
  --atoms-amber: var(--chip-chemistry);
  --atoms-proton: #f06543;
  --atoms-neutron: #7eb8d6;
  --atoms-electron: #9ae6b4;
  --atoms-glow: oklch(from var(--chip-chemistry) l c h / 0.35);
  font-family: var(--font-body);
  max-width: 920px;
}

/* ── Header ──────────────────────────────────────────────── */
.atoms-lab__header { margin-bottom: var(--space-6); }
.atoms-lab__eyebrow {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--atoms-amber); margin-bottom: var(--space-2);
}
.atoms-lab__title {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25; margin-bottom: var(--space-3);
}
.atoms-lab__intro {
  font-size: var(--text-sm); color: var(--atoms-muted); line-height: 1.6; max-width: 54ch;
}

/* ── Tabs ────────────────────────────────────────────────── */
.atoms-lab__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.atoms-lab__tab {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  padding: 0.5rem 1rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: oklch(from var(--color-text) l c h / 0.04);
  color: var(--atoms-muted); cursor: pointer;
  transition: background var(--transition-interactive), color var(--transition-interactive),
              border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.atoms-lab__tab:hover { color: var(--atoms-ink); border-color: oklch(from var(--atoms-amber) l c h / 0.45); }
.atoms-lab__tab[aria-selected="true"] {
  color: var(--color-bg); background: var(--atoms-amber);
  border-color: var(--atoms-amber); box-shadow: 0 0 24px var(--atoms-glow);
}

/* ── Panels ──────────────────────────────────────────────── */
.atoms-lab__panel { display: none; animation: atoms-lab-in 0.45s cubic-bezier(0.16,1,0.3,1) both; }
.atoms-lab__panel.is-active { display: block; }
@keyframes atoms-lab-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .atoms-lab__panel { animation:none; } }

/* ── Canvas stage ────────────────────────────────────────── */
.atoms-lab__stage-wrap {
  position: relative; border-radius: var(--radius-xl);
  border: 1px solid var(--color-border); overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 45%, oklch(from var(--atoms-amber) l c h / 0.08), transparent 55%), var(--color-surface);
  margin-bottom: var(--space-6);
}
.atoms-lab__stage-wrap::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg,transparent 40%,oklch(from var(--color-text) l c h / 0.03));
  border-radius:inherit;
}
.atoms-lab__stage-wrap--dark {
  background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(240,181,107,0.06), transparent 55%), #0c0c14;
}
.atoms-lab__canvas { display:block; width:100%; height:auto; aspect-ratio:16/10; max-height:380px; }
.atoms-lab__canvas--spectrum { aspect-ratio:16/7; max-height:320px; }

/* ── Controls / sliders ──────────────────────────────────── */
.atoms-lab__controls { display:grid; gap:var(--space-5); padding:var(--space-5) var(--space-6) var(--space-6); }
@media (min-width:640px) { .atoms-lab__controls { grid-template-columns:1fr 1fr; align-items:start; } }
.atoms-lab__slider-block label {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--text-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--atoms-muted); margin-bottom:var(--space-2);
}
.atoms-lab__slider-block label span {
  font-family:var(--font-mono); font-size:var(--text-sm); color:var(--atoms-amber);
  letter-spacing:0; text-transform:none;
}
.atoms-lab input[type="range"] { width:100%; accent-color:var(--chip-chemistry); height:6px; border-radius:3px; }

/* ── Readout ─────────────────────────────────────────────── */
.atoms-lab__readout {
  grid-column:1/-1; display:grid; gap:var(--space-3); padding:var(--space-5);
  border-radius:var(--radius-md); background:oklch(from var(--color-primary) l c h / 0.06);
  border:1px solid oklch(from var(--color-primary) l c h / 0.2);
}
@media (min-width:640px) { .atoms-lab__readout { grid-template-columns:repeat(3,1fr); } }
.atoms-lab__stat { text-align:center; }
.atoms-lab__stat dt {
  font-size:var(--text-xs); font-weight:600; color:var(--atoms-muted);
  text-transform:uppercase; letter-spacing:0.05em; margin-bottom:var(--space-1);
}
.atoms-lab__stat dd {
  font-family:var(--font-mono); font-size:clamp(1.1rem,2.5vw,1.5rem); font-weight:500; color:var(--atoms-ink);
}
.atoms-lab__stat dd sup, .atoms-lab__stat dd sub { font-size:0.65em; }
.atoms-lab__teach {
  grid-column:1/-1; font-size:var(--text-sm); color:var(--atoms-muted); line-height:1.65;
  border-top:1px solid oklch(from var(--color-primary) l c h / 0.15);
  padding-top:var(--space-4); margin-top:var(--space-1);
}

/* ── Orbital diagram (Config Builder) ────────────────────── */
.atoms-lab__config { max-width: 640px; }
.atoms-lab__config-target {
  font-size: var(--text-base); margin-bottom: var(--space-5);
}
.atoms-lab__config-target strong { color: var(--atoms-amber); }
.atoms-lab__orbitals {
  display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end;
  margin-bottom: var(--space-5); padding: var(--space-5);
  border-radius: var(--radius-xl); border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.atoms-lab__subshell { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.atoms-lab__subshell-label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  color: var(--atoms-muted); letter-spacing: 0.04em;
}
.atoms-lab__orbital-group { display: flex; gap: 4px; }
.atoms-lab__orbital-box {
  width: 44px; height: 52px; border-radius: 6px;
  border: 1.5px dashed oklch(from var(--color-text) l c h / 0.2);
  background: oklch(from var(--color-text) l c h / 0.03);
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600;
  color: var(--atoms-electron); cursor: pointer; display: flex;
  align-items: center; justify-content: center; letter-spacing: -0.08em;
  transition: border-color var(--transition-interactive), background var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.atoms-lab__orbital-box:hover {
  border-color: oklch(from var(--atoms-amber) l c h / 0.5);
  background: oklch(from var(--atoms-amber) l c h / 0.06);
}
.atoms-lab__orbital-box--filled {
  border-style: solid; border-color: oklch(from var(--atoms-electron) l c h / 0.4);
  background: oklch(from var(--atoms-electron) l c h / 0.08);
}
.atoms-lab__orbital-box--full {
  border-color: oklch(from var(--atoms-electron) l c h / 0.5);
  box-shadow: 0 0 12px oklch(from var(--atoms-electron) l c h / 0.15);
}
.atoms-lab__config-count {
  font-size: var(--text-sm); color: var(--atoms-muted); margin-bottom: var(--space-4);
}
.atoms-lab__config-count strong { color: var(--atoms-amber); font-family: var(--font-mono); }

/* ── Spectrum buttons ────────────────────────────────────── */
.atoms-lab__spectrum-btns {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4);
}

/* ── Balance ─────────────────────────────────────────────── */
.atoms-lab__balance { display:grid; gap:var(--space-6); }
.atoms-lab__balance-card {
  border-radius:var(--radius-xl); border:1px solid var(--color-border);
  background:var(--color-surface); padding:var(--space-6); text-align:center;
}
.atoms-lab__balance-goal {
  font-family:var(--font-display); font-size:clamp(1.3rem,3.5vw,1.8rem);
  font-weight:700; margin-bottom:var(--space-2);
}
.atoms-lab__balance-sub { font-size:var(--text-sm); color:var(--atoms-muted); margin-bottom:var(--space-5); }
.atoms-lab__balance-vis { display:flex; justify-content:center; margin-bottom:var(--space-4); }
.atoms-lab__balance-canvas { border-radius:var(--radius-md); }
.atoms-lab__big-num {
  font-family:var(--font-mono); font-size:clamp(2.5rem,8vw,4rem); font-weight:500;
  color:var(--atoms-electron); line-height:1; margin:var(--space-3) 0;
}
.atoms-lab__balance-label {
  font-size:var(--text-xs); color:var(--atoms-muted); text-transform:uppercase; letter-spacing:0.06em;
}
.atoms-lab__balance-charge-line { font-size:var(--text-sm); color:var(--atoms-muted); margin-top:var(--space-2); }
.atoms-lab__balance-charge-line strong { font-family:var(--font-mono); color:var(--atoms-amber); font-size:var(--text-base); }
.atoms-lab__balance-btns { display:flex; justify-content:center; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-4); }

/* ── Shared: buttons, choices, feedback ──────────────────── */
.atoms-lab__btn {
  font-family:var(--font-body); font-weight:600; font-size:var(--text-sm);
  padding:0.65rem 1.25rem; border-radius:var(--radius-full);
  border:1px solid var(--color-border); background:oklch(from var(--color-text) l c h / 0.06);
  color:var(--atoms-ink); cursor:pointer;
  transition:transform 0.12s ease, background var(--transition-interactive), border-color var(--transition-interactive);
}
.atoms-lab__btn:hover { background:oklch(from var(--atoms-amber) l c h / 0.15); border-color:oklch(from var(--atoms-amber) l c h / 0.4); }
.atoms-lab__btn:active { transform:scale(0.97); }
.atoms-lab__btn--primary { background:var(--atoms-amber); border-color:var(--atoms-amber); color:var(--color-bg); }
.atoms-lab__btn--primary:hover { filter:brightness(1.05); }

.atoms-lab__feedback { min-height:1.5em; font-size:var(--text-sm); font-weight:600; margin-top:var(--space-4); }
.atoms-lab__feedback--ok { color:var(--chip-biology); }
.atoms-lab__feedback--no { color:#e07070; }

.atoms-lab__section-label {
  font-size:var(--text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--color-text-faint); margin-bottom:var(--space-5);
}