/* Chapter 5: scene text, the burner lab and the equation balancer. */

.eq-mid { font: 800 52px system-ui, sans-serif; fill: #fff; }
.eq-mid.small-mid { font-size: 42px; }
.eq-line { font: 700 38px system-ui, sans-serif; fill: #e8eefc; }
.eq-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.eq-note.small-note { font-size: 22px; }
.eq-note.core-note { fill: #e8eefc; }
.eq-note.bad-note { fill: #ff8787; }
.eq-line.bad-fill { fill: #ff8787; }
.eq-tag { font: 800 30px system-ui, sans-serif; fill: #e8eefc; }
.eq-tag.gold { fill: #ffd166; }
.eq-tag.row-tag { font-size: 22px; letter-spacing: .12em; fill: #9fb4dd; }
.gold-fill { fill: #ffd166; }
.eq-mid.gold-fill { fill: #ffd166; }

/* Burner lab */
.lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.lab-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.lab-picture svg { display: block; width: 100%; height: auto; }
.lab-small { font: 600 14px system-ui, sans-serif; fill: #9fb4dd; }
.lab-controls { display: flex; flex-direction: column; gap: 6px; }
.lab-controls .lab-tools { justify-content: flex-start; }
.lab-controls .chip-btn { padding: .35em .7em; font-size: .9em; }
.slider-row { display: flex; align-items: center; gap: 8px; }
.air-slider { flex: 1; min-width: 0; accent-color: #74c0fc; height: 28px; }
.lab-readout { margin: 0; font-weight: 700; font-size: .9em; color: #e8eefc; }
.o2-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.o2-fill { display: block; height: 100%; width: 0; background: #ffa94d; transition: width .25s ease; }
.o2-fill.enough { background: var(--ok); }
.lab-small-text { margin: 0; font-size: .8em; color: #9fb4dd; }
.lab-regime { margin: 0; font-weight: 800; }
.lab-regime.ok { color: #8ce99a; }
.lab-regime.warn { color: #ffc078; }
.lab-eq { margin: 0; font: 700 .85em ui-monospace, SFMono-Regular, Menlo, monospace; color: #e8eefc; line-height: 1.35; }
.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tally-box {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .35em .3em; border-radius: .6em;
  background: rgba(255, 255, 255, .06); border: 2px solid #3a4f7d;
  font-size: .85em; font-weight: 700; color: #cfd9ef;
}
.tally-box b { font-size: 1.3em; color: #fff; }
.tally-box.made { border-color: var(--ok); }
.tally-box.extra.made { border-color: #ff8a8a; background: rgba(255, 138, 138, .12); }
.lab-task-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.lab-task { text-align: left; font-size: .88em; }
.lab-task.correct { border-color: var(--ok); background: #143a28; }

/* Equation balancer */
.bal-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.bal-side { display: flex; align-items: center; gap: 8px; }
.bal-term {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: .4em .5em; border-radius: .8em; border: 2px solid #3a4f7d; background: rgba(255, 255, 255, .05);
}
.bal-term.hint { box-shadow: 0 0 0 3px var(--gold); }
.bal-term.correct { border-color: var(--ok); background: #143a28; }
.bal-stepper { display: flex; align-items: center; gap: 4px; }
.bal-step { min-width: 2em; padding: .2em .5em; }
.bal-coef { min-width: 1.4em; text-align: center; font: 800 1.35em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gold); }
.bal-formula { font-weight: 800; font-size: 1.3em; }
.bal-sign { font-weight: 800; font-size: 1.4em; color: #cfd9ef; }
.bal-sign.arrow { color: var(--gold); }
.bal-table {
  display: grid; grid-template-columns: repeat(4, auto); gap: 4px 18px;
  justify-content: center; text-align: center; font-weight: 700;
}
.bal-head { font-size: .8em; color: #9fb4dd; text-transform: uppercase; letter-spacing: .05em; }
.bal-atom { color: var(--gold); }
.bal-ok { color: var(--ok); }
.bal-no { color: var(--bad); }

@container (max-width: 620px) {
  .lab-grid { grid-template-columns: 1fr; }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bal-formula { font-size: 1.1em; }
}