/* Chapter 2: equation text and electron art in the scenes, and the redox detective activity. */

.eq-txt { font: 800 84px system-ui, sans-serif; fill: #fff; }
.eq-txt.op { fill: #cfd9ef; }
.badge-on { font: 800 34px system-ui, sans-serif; }
.arc-text { font: 800 30px system-ui, sans-serif; }
.arc-text.small { font-size: 26px; }
.art-name { font: 700 28px system-ui, sans-serif; fill: #cfd9ef; }
.art-sym { font: 800 40px system-ui, sans-serif; fill: #14213d; }
.art-sym.light { fill: #fff; }
.big-word { font: 900 104px system-ui, sans-serif; letter-spacing: 6px; }
.eq-line { font: 700 34px system-ui, sans-serif; fill: #e8eefc; }
.eq-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.e-label { font: 800 18px system-ui, sans-serif; fill: #14213d; }

.e-fly { animation: e-fly 2.6s ease-in-out infinite; }
.e-fly.late { animation-delay: 1.3s; opacity: 0; }
@keyframes e-fly {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  75% { transform: translateX(var(--dx)); opacity: 1; }
  100% { transform: translateX(var(--dx)); opacity: 0; }
}

/* ---------- Redox detective ---------- */

.det-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.det-tab { padding: .35em .85em; font-weight: 700; text-align: center; }
.det-tab.on { border-color: var(--gold); background: #2c3d66; }
.det-tab.solved::after { content: " ✓"; color: var(--ok); }
.det-stage { width: 100%; }
.det-case { display: flex; flex-direction: column; gap: max(8px, 1.1cqw); width: 100%; }
.det-case[hidden] { display: none; }
.det-case-title { margin: 0; font-weight: 800; text-align: center; }

.det-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: max(8px, 1cqw);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .8em;
  background: rgba(255, 255, 255, .04);
}
.det-phase[hidden] { display: none; }
.det-phase-title { margin: 0; align-self: flex-start; font-size: .95em; font-weight: 800; color: var(--gold); }

.det-eq { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 6px 10px; font-size: 1.35em; font-weight: 800; }
.det-sp { display: inline-flex; align-items: flex-end; gap: 3px; white-space: nowrap; }
.det-coef, .det-op { padding-bottom: .3em; }
.det-op { color: #cfd9ef; }
.det-atom {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: .15em .3em .2em;
  font: inherit;
  color: #fff;
  background: #1d2b4b;
  border: 2px solid #3a4f7d;
  border-radius: .5em;
  cursor: pointer;
}
.det-atom:hover { border-color: #6f8bc4; }
.det-atom:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.det-atom sub { font-size: .6em; }
.det-on {
  min-width: 2.3em;
  padding: .05em .3em;
  font-size: .6em;
  text-align: center;
  border-radius: 999px;
  border: 2px dashed #6f8bc4;
  background: #0d1730;
  color: #9fb4dd;
}
.det-atom.done .det-on { border-style: solid; border-color: var(--ok); color: #c9f7d4; }
.det-atom.given { opacity: .7; }
.det-charge { align-self: flex-end; padding-bottom: 1.6em; font-size: .6em; }

.det-picker { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.det-picker[hidden] { display: none; }
.det-picker-label { margin: 0; font-weight: 700; }
.det-keypad { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.det-key { min-width: 3em; padding: .4em .5em; font-weight: 800; text-align: center; }
.det-key.hint, .det-opt.hint, .det-tile.hint { box-shadow: 0 0 0 3px var(--gold); }

.det-changes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.det-changes[hidden] { display: none; }
.det-change { padding: .25em .8em; border-radius: 999px; border: 2px solid; font-weight: 700; }
.det-change.up { border-color: var(--gold); color: #ffe7a8; }
.det-change.down { border-color: #ff8fab; color: #ffc9d6; }
.det-change.same { border-color: #3a4f7d; color: #9fb4dd; }

.det-roles { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center; width: 100%; }
.det-role-label { font-weight: 700; text-align: right; }
.det-role-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.det-opt { padding: .35em .9em; font-weight: 800; text-align: center; }

.det-sentences { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.det-sentence { margin: 0; line-height: 2.1; }
.det-blank {
  display: inline-block;
  min-width: 3.2em;
  margin: 0 .1em;
  padding: 0 .35em;
  line-height: 1.45;
  text-align: center;
  font-weight: 800;
  border-bottom: 3px solid rgba(255, 255, 255, .4);
}
.det-blank.next { border-color: var(--gold); background: rgba(255, 209, 102, .15); }
.det-blank.filled { border-color: var(--ok); color: #c9f7d4; }
.det-bank { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.det-tile { padding: .35em .75em; font-weight: 700; text-align: center; }
.det-done-note { margin: 0; font-weight: 700; color: #c9f7d4; text-align: center; }
.det-done-note[hidden] { display: none; }

@container (max-width: 620px) {
  .det-eq { font-size: 1.15em; }
  .det-roles { grid-template-columns: 1fr; }
  .det-role-label { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .e-fly { animation: none; opacity: 1; transform: translateX(calc(var(--dx) / 2)); }
  .e-fly.late { display: none; }
}