/* Chapter 6: equation text, the calorimeter rig, the step calculator, the calorimetry lab and the conclusion builder. */

.eq-big { font: 800 110px system-ui, sans-serif; fill: #fff; }
.eq-mid { font: 800 52px system-ui, sans-serif; fill: #fff; }
.eq-line { font: 600 36px system-ui, sans-serif; fill: #e8eefc; }
.eq-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.eq-note.small-note { font-size: 22px; fill: #e8eefc; }
.eq-tag { font: 800 30px system-ui, sans-serif; fill: #e8eefc; }
.gold-fill, .eq-tag.gold { fill: #ffd166; }
.eq-tag.pink { fill: #ff8fab; }
.eq-tag.blue { fill: #74c0fc; }
.eq-tag.green { fill: #8ce99a; }
.eq-tag.orange { fill: #ffa94d; }

.sym-q { fill: #ffd166; }
.sym-m { fill: #74c0fc; }
.sym-c { fill: #8ce99a; }
.sym-t { fill: #ff8fab; }
.sym-e { fill: #ffa8a8; }

.rig-display { font: 700 22px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #8ce99a; }
.rig-display.big { font-size: 26px; fill: #ffe066; }
.rig-text { font: 700 22px system-ui, sans-serif; fill: #e8eefc; }

.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .16s ease-in-out infinite alternate; }
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(.93, 1.08); } }
@media (prefers-reduced-motion: reduce) { .flame { animation: none; } }

.calc-question { margin: 0; font-size: 1.05em; line-height: 1.45; text-align: center; }
.calc-question b { color: var(--gold); }
.calc-body { display: flex; flex-direction: column; gap: max(8px, 1.1cqw); width: 100%; align-items: center; }
.calc-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.calc-values { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; }
.calc-field { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #cfd9ef; }
.calc-input {
  width: 7em;
  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: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; }

.lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.cal-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.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; }
.lab-controls .act-actions { justify-content: flex-start; flex-wrap: wrap; }
.lab-readout { margin: 0; font-weight: 700; font-size: .9em; color: #e8eefc; }
.cal-observe { color: #ffe7a8; font-weight: 600; }
.lab-task-list { display: flex; flex-direction: column; gap: 6px; }
.lab-task { text-align: left; font-size: .88em; }
.lab-task.correct { border-color: var(--ok); background: #143a28; }

.cal-calc { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding-top: 6px; border-top: 2px dashed rgba(255, 255, 255, .2); }
.cal-calc[hidden] { display: none; }
.cal-readings { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cal-reading { display: flex; flex-direction: column; align-items: center; padding: .3em .8em; border-radius: .6em; background: rgba(255, 255, 255, .08); font-size: .9em; }
.cal-reading span { color: #9fb4dd; font-size: .85em; font-weight: 700; }
.cal-reading b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cal-runs { margin: 0; padding-left: 1.2em; font-size: .9em; color: #c9f7d4; display: grid; gap: .2em; }
.cal-runs:empty { display: none; }

.chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }
.cal-paragraph { margin: 0; min-height: 2.6em; padding: .7em 1em; border-radius: .8em; background: rgba(255, 255, 255, .06); border-left: 4px solid var(--gold); line-height: 1.5; width: 100%; box-sizing: border-box; }
.cal-sentence { animation: sentence-in .4s ease-out; }
@keyframes sentence-in { from { opacity: 0; } to { opacity: 1; } }

@container (max-width: 620px) {
  .lab-grid { grid-template-columns: 1fr; }
  .cal-picture { max-width: 340px; justify-self: center; }
  .calc-input { width: 6em; }
}