/* Chapter 1: atom art, ON badges and equations in the scenes, and the oxidation-number calculator. */

.atom-sym { font-family: system-ui, sans-serif; font-weight: 800; fill: #14213d; }
.chem-bond { stroke: #cfd9ef; stroke-width: 10; stroke-linecap: round; }
.chem-arrow { fill: none; stroke: #e8eefc; stroke-width: 8; stroke-linecap: round; }

.on-badge rect { fill: #ffd166; stroke: #14213d; stroke-width: 3; }
.on-badge text { font: 800 32px system-ui, sans-serif; fill: #14213d; }
.on-badge.alt rect { fill: #ff8fab; }
.on-badge.q rect { fill: #1d2b4b; stroke: #ffd166; stroke-dasharray: 8 6; }
.on-badge.q text { fill: #ffd166; }

.chem-big { font: 800 84px system-ui, sans-serif; fill: #fff; }
.chem-big.small { font-size: 68px; }
.chem-mid { font: 800 44px system-ui, sans-serif; fill: #fff; }
.chem-eq { font: 700 46px system-ui, sans-serif; fill: #e8eefc; }
.chem-note { font: 600 30px system-ui, sans-serif; fill: #9fb4dd; }
.t-h { fill: #f1f3f5; }
.t-o { fill: #ff8787; }
.t-gold { fill: #ffd166; font-weight: 800; }

.m-box { fill: rgba(255, 255, 255, .06); stroke: #3a4f7d; stroke-width: 3; }
.m-num { font: 800 38px system-ui, sans-serif; fill: #14213d; }
.m-text { font: 700 34px system-ui, sans-serif; fill: #e8eefc; }

.calc-row { fill: rgba(255, 255, 255, .05); stroke: #3a4f7d; stroke-width: 3; }
.calc-row.done { fill: rgba(74, 222, 128, .12); stroke: #4ade80; }
.calc-sum { fill: rgba(255, 209, 102, .08); stroke: #ffd166; stroke-width: 4; stroke-dasharray: 14 10; }

/* Oxidation-number calculator */
.act.oxc { gap: max(6px, .9cqw); }
.oxc-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.oxc-pick { padding: .3em .7em; font-weight: 800; text-align: center; }
.oxc-pick.on { border-color: var(--gold); background: #2c3d66; }
.oxc-pick.done { box-shadow: inset 0 -4px 0 var(--ok); }
.oxc-formula { margin: 0; text-align: center; font-size: 2.1em; font-weight: 800; line-height: 1.1; }
.oxc-kind { margin: 0; text-align: center; font-size: .9em; color: #9fb4dd; font-weight: 600; }
.oxc-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.oxc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  padding: .4em .7em;
  border-radius: .8em;
  background: rgba(255, 255, 255, .05);
  border: 2px solid transparent;
}
.oxc-row.locked { opacity: .55; }
.oxc-row.hint { border-color: var(--gold); }
.oxc-row.correct { border-color: var(--ok); background: #143a28; }
.oxc-atom { display: inline-flex; align-items: center; gap: 8px; }
.oxc-el {
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--c);
  color: #14213d;
  font-weight: 800;
}
.oxc-count { font-weight: 800; min-width: 2.2em; }
.oxc-stepper { display: inline-flex; align-items: center; gap: 4px; }
.oxc-step { width: 2.1em; height: 2.1em; padding: 0; text-align: center; font-weight: 800; font-size: 1.05em; }
.oxc-input {
  width: 3.6em;
  font: 800 1.05em ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  padding: .35em .3em;
  border-radius: .6em;
  border: 2px solid #3a4f7d;
  background: #0f1a33;
  color: #fff;
}
.oxc-input:focus { outline: none; border-color: var(--gold); }
.oxc-row.correct .oxc-input { border-color: var(--ok); }
.oxc-contrib { min-width: 3.4em; font-weight: 700; color: #cfd9ef; }
.oxc-check { align-self: center; }
.oxc-check[hidden] { display: none; }
.oxc-tag { font-size: .8em; color: #9fb4dd; min-width: 8em; }
.oxc-row.correct .oxc-tag { color: #c9f7d4; font-weight: 800; min-width: 0; }
.oxc-sum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: .45em .9em;
  border-radius: .8em;
  border: 2px dashed rgba(255, 209, 102, .6);
  font-weight: 800;
  text-align: center;
}
.oxc-sum.ok { border-style: solid; border-color: var(--ok); background: #143a28; color: #c9f7d4; }
.oxc-sum.off { border-color: var(--bad); }
.oxc-sum-target { font-size: .85em; font-weight: 700; color: #cfd9ef; }
.oxc-sum.ok .oxc-sum-target { color: #c9f7d4; }

@container (max-width: 620px) {
  .oxc-tag { min-width: 0; width: 100%; text-align: center; }
  .oxc-formula { font-size: 1.7em; }
}