/* Chapter 6: scene text, energy bars, step calculators and the energy slide simulator. */

.sc-crate { font: 800 30px system-ui, sans-serif; fill: #fff3e0; }
.panel-title { font: 700 26px system-ui, sans-serif; fill: #ffd166; }
.panel-text { font: 700 34px system-ui, sans-serif; fill: #e8eefc; }
.panel-text.gold { fill: #ffd166; }
.bar-title { font: 700 26px system-ui, sans-serif; fill: #9fb4dd; }
.bar-value { font: 800 26px system-ui, sans-serif; fill: #fff; }
.bar-name { font: 800 26px system-ui, sans-serif; fill: #cfd9ef; }

.calc-formula { margin: 0; padding: .3em .9em; border-radius: .6em; background: rgba(255, 209, 102, .12); color: #ffe7a8; font-weight: 600; text-align: center; }
.calc-formula b { color: var(--gold); }
.calc-question { margin: 0; font-size: 1.1em; line-height: 1.45; text-align: center; }
.calc-question b { color: var(--gold); }
.calc-pic { display: block; width: min(100%, 300px); height: auto; margin: 6px auto 0; }
.calc-pic-text { font: 700 18px system-ui, sans-serif; fill: #cfd9ef; }
.calc-pic-text.gold { fill: #ffd166; }
.calc-body { display: flex; flex-direction: column; gap: max(8px, 1.2cqw); width: 100%; align-items: center; }
.calc-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.calc-step[hidden] { display: none; }
.calc-values { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; }
.calc-field { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-weight: 700; color: #cfd9ef; }
.calc-input {
  width: 8em;
  font: 700 1em ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .45em .6em;
  border-radius: .6em;
  border: 2px solid #3a4f7d;
  background: #0f1a33;
  color: #fff;
}
.calc-input.short { width: 5em; }
.calc-input:focus { outline: none; border-color: var(--gold); }
.calc-input:disabled { opacity: .85; }
.calc-input.wrong { border-color: var(--bad); }
.calc-input.correct { border-color: var(--ok); background: #143a28; }
.calc-unit { font-weight: 700; color: #cfd9ef; }

.slide-sim { width: min(100%, 54cqw); align-self: center; }
.sim-h-text { font: 700 18px system-ui, sans-serif; fill: #ffd166; }
.sim-note { font: 700 18px system-ui, sans-serif; fill: #9fb4dd; }
.sim-speed { font: 800 24px system-ui, sans-serif; fill: #ffd166; }
.sim-bar-name { font: 800 16px system-ui, sans-serif; fill: #cfd9ef; }
.energy-readout span { font-variant-numeric: tabular-nums; }
.energy-readout .e-ep { color: #a5d8ff; }
.energy-readout .e-ek { color: #ffe7a8; }
.energy-readout .e-heat { color: #ffc9c9; }
.lab-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; }
.lab-field { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #cfd9ef; }
.lab-slider { width: max(120px, 14cqw); accent-color: #ffd166; height: 28px; }
.lab-readout { min-width: 3.6em; font-weight: 800; color: var(--gold); }
.fric-btn { text-align: center; font-weight: 800; }
.fric-btn.on { border-color: #ff8a8a; background: #4a2430; color: #ffd0d0; }
.fric-btn:disabled, .lab-slider:disabled { opacity: .5; }

@container (max-width: 620px) {
  .slide-sim { width: 100%; }
  .lab-slider { width: 36vw; }
  .lab-field { flex-wrap: wrap; justify-content: center; }
}