/* Chapter 4: colour-change rows in the scenes and the virtual reaction tubes. */

.row-formula { font: 800 34px system-ui, sans-serif; fill: #fff; }
.row-formula.small { font-size: 28px; }
.row-head { font: 800 28px system-ui, sans-serif; fill: #ffd166; }
.cap-word, .tube-note {
  font: 700 22px system-ui, sans-serif;
  fill: #fff;
  stroke: #0b1428;
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.cap-word.small { font-size: 19px; }
.tube-note { font-size: 20px; fill: #cfd9ef; }
.tube-note.small { font-size: 16px; }

.swatch {
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-right: .4em;
  vertical-align: -.12em;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(255, 255, 255, .6);
}

.tube-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.tube-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tube-picture { width: min(100%, 230px); border-radius: .8em; background: #0d1730; }
.tube-picture svg { width: 100%; height: auto; display: block; }
.tube-readout { text-align: center; font-size: .88em; min-height: 3.6em; }
.lab-controls { display: flex; flex-direction: column; gap: 6px; }
.lab-readout { margin: 0; font-weight: 700; color: #e8eefc; }
.tube-picks { justify-content: flex-start; }
.tube-picks .chip-btn { padding: .35em .7em; font-size: .9em; }
.tube-picks .chip-btn:disabled:not(.on) { opacity: .45; }
.tube-small { margin: 0; font-size: .78em; color: #9fb4dd; }

.chip-btn.hint, .btn.hint { box-shadow: 0 0 0 3px var(--gold); }

.obs-builder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: max(8px, 1.2cqw);
  border-radius: .8em;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .15);
}
.obs-builder[hidden] { display: none; }
.obs-sentence { margin: 0; line-height: 2.3; }
.obs-species { margin-right: .15em; }
.obs-pair { white-space: nowrap; }
.chip-btn.blank {
  padding: .15em .55em;
  margin: 0 .12em;
  text-align: center;
  font-weight: 700;
  border-style: dashed;
  color: #ffd166;
}
.chip-btn.blank.filled { border-style: solid; color: #fff; }
.word-bank { justify-content: center; }
.word-bank .chip-btn { padding: .3em .65em; font-size: .9em; text-align: center; }
.obs-roles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.obs-roles .lab-label { min-width: 5.5em; text-align: right; }
.chip-btn.role { text-align: center; font-weight: 800; min-width: 4.5em; }
.chip-btn.role.on { border-color: var(--gold); background: #2c3d66; }
.obs-result { font-size: .92em; line-height: 1.45; }
.obs-result p { margin: .2em 0; }
.obs-result b { color: var(--gold); }

@container (max-width: 620px) {
  .tube-grid { grid-template-columns: 1fr; }
  .tube-picture { width: min(60%, 200px); }
  .obs-roles .lab-label { min-width: 0; }
}