/* Chapter 3: equation text in the scenes, the half-equation balancer and the overall-equation combiner. */

.eq { font: 700 44px system-ui, sans-serif; fill: #fff; }
.eq.lg { font-size: 62px; }
.eq.md { font-size: 40px; }
.eq.sm { font-size: 34px; }
.eq.xs { font-size: 31px; }
.eq .hl, .eq-chip .hl { fill: #ffd166; }
.eq-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.eq-note.small { font-size: 22px; }
.eq-note.gold { fill: #ffd166; }
.eq-tag { font: 800 26px system-ui, sans-serif; fill: #ffd166; letter-spacing: .04em; }
.eq-chip { font: 800 32px system-ui, sans-serif; fill: #ffe7a8; }
.eq-mol { font: 800 28px system-ui, sans-serif; fill: #d0ebff; }

/* Equations inside activities */
.hb-eq {
  margin: 0;
  width: 100%;
  padding: .45em .6em;
  border-radius: .7em;
  background: rgba(255, 255, 255, .06);
  text-align: center;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.5;
}
.hb-term { white-space: nowrap; }
.hb-arrow { color: #ffd166; }
.hb-plus { color: #9fb4dd; }
.hb-term.t-H2O { color: #a5d8ff; }
.hb-term.t-H { color: #ffc9c9; }
.hb-term.t-e { color: #ffd166; }
.hb-term.dup { border-bottom: 3px solid #ffd166; background: rgba(255, 209, 102, .18); border-radius: .2em; padding: 0 .1em; }

.hb-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hb-pick { text-align: center; font-weight: 700; padding: .35em .7em; font-size: .9em; }
.hb-pick.on { border-color: var(--gold); background: #2c3d66; }
.hb-pick.done { background: #1f5a3a; border-color: var(--ok); }
.hb-pick.on.done { box-shadow: 0 0 0 2px var(--gold); }

.hb-stages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hb-stage { padding: .25em .7em; border-radius: 999px; background: rgba(255, 255, 255, .08); font-weight: 700; font-size: .85em; color: #cfd9ef; }
.hb-stage.now { box-shadow: 0 0 0 2px var(--gold); color: #fff; }
.hb-stage.met { background: #1f5a3a; color: #c9f7d4; }

.hb-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(8px, 1.4cqw); width: 100%; }
.hb-col { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: .5em; border-radius: .8em; background: rgba(255, 255, 255, .04); }
.hb-stepper { display: flex; align-items: center; justify-content: center; gap: 6px; }
.hb-sp { min-width: 4.6em; text-align: right; font-weight: 800; }
.hb-stepper.t-H2O .hb-sp { color: #a5d8ff; }
.hb-stepper.t-H .hb-sp { color: #ffc9c9; }
.hb-stepper.t-e .hb-sp { color: #ffd166; }
.hb-btn { width: 2.2em; height: 2.2em; padding: 0; text-align: center; font-weight: 800; font-size: 1.05em; }
.hb-btn:disabled { opacity: .35; }
.hb-btn.hint { box-shadow: 0 0 0 3px var(--gold); }
.hb-val { min-width: 1.8em; text-align: center; font: 800 1.1em ui-monospace, SFMono-Regular, Menlo, monospace; }
.hb-stepper.zero .hb-val { opacity: .5; }

.hb-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hb-counts[hidden] { display: none; }
.hb-counts-label { text-align: center; }
.hb-count { display: flex; flex-direction: column; align-items: center; min-width: 4.4em; padding: .3em .5em; border-radius: .6em; border: 2px solid transparent; font-weight: 700; }
.hb-count.ok { background: #1f5a3a; border-color: var(--ok); color: #c9f7d4; }
.hb-count.bad { background: rgba(255, 138, 138, .12); border-color: var(--bad); color: #ffd0d0; }
.hb-count-name { font-size: .8em; letter-spacing: .04em; }
.hb-count-vals { font: 800 1em ui-monospace, SFMono-Regular, Menlo, monospace; }
.hb-count-mark { font-size: .85em; }

.cb-rows { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cb-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: max(6px, 1cqw);
  padding: .4em .6em;
  border-radius: .8em;
  background: rgba(255, 255, 255, .05);
  border-left: 5px solid #74c0fc;
}
.cb-row.ox { border-left-color: #ff8fab; }
.cb-tag { font-weight: 800; font-size: .85em; text-transform: uppercase; letter-spacing: .05em; }
.cb-row.red .cb-tag { color: #74c0fc; }
.cb-row.ox .cb-tag { color: #ff8fab; }
.cb-row .hb-sp { min-width: 0; color: #ffd166; }
.cb-eq { margin: 0; font-weight: 800; font-size: 1.1em; text-align: center; line-height: 1.4; }
.cb-e { font-weight: 800; color: #ffd166; white-space: nowrap; }
.cb-meter { margin: 0; font-weight: 800; padding: .3em .9em; border-radius: 999px; background: rgba(255, 138, 138, .12); color: #ffd0d0; align-self: center; }
.cb-meter.ok { background: #1f5a3a; color: #c9f7d4; }
.cb-sum { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.cb-sum[hidden] { display: none; }
.cb-sum .lab-tools .chip-btn { padding: .4em .9em; }

@container (max-width: 620px) {
  .hb-eq { font-size: 1.1em; }
  .hb-sp { min-width: 3.2em; }
  .hb-btn { width: 2em; height: 2em; }
  .cb-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .cb-row .cb-eq { grid-column: 1 / -1; order: 3; }
  .cb-row .cb-e { grid-column: 3; justify-self: end; }
}