/* Chapter 1: particle boxes, kelvin drill and cooling simulator. */

.act-title.small { font-size: max(13px, 1.8cqw); }

.pb-stage { width: min(100%, 60cqw); align-self: center; }
.pb-stage svg { display: block; width: 100%; height: auto; }
.pb-svg-label { font: 700 16px system-ui, sans-serif; fill: #cfd9ef; }

.pb-readout { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: .95em; color: #e8eefc; }
.pb-question { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pb-question[hidden], .pb-sandbox[hidden], .cool-quiz[hidden] { display: none; }

.pb-sandbox { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .15); }
.pb-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; width: min(100%, 60cqw); }
.pb-slider { display: flex; flex-direction: column; gap: 2px; font-size: .85em; font-weight: 700; color: #cfd9ef; }
.pb-slider input { width: 100%; accent-color: #ffd166; }
.pb-bars { display: grid; gap: 4px; width: min(100%, 60cqw); }
.pb-bar-row { display: grid; grid-template-columns: minmax(120px, 13em) 1fr; align-items: center; gap: 8px; font-size: .85em; }
.pb-bar { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pb-bar i { display: block; height: 100%; background: #ff922b; transition: width .3s; }

.kd-question { margin: 0; font-size: max(22px, 3cqw); font-weight: 800; color: #ffd166; }
.kd-row { display: flex; align-items: center; gap: 10px; }
.kd-input {
  width: 7em;
  font: 700 max(16px, 1.8cqw) system-ui, sans-serif;
  text-align: center;
  padding: .4em .6em;
  border-radius: .6em;
  border: 2px solid #3a4f7d;
  background: #0f1a33;
  color: #fff;
  user-select: text;
}
.kd-input:focus { outline: none; border-color: #ffd166; }
.kd-unit { font-weight: 800; font-size: 1.1em; }

.cool-quiz { display: flex; flex-direction: column; align-items: center; gap: max(8px, 1.3cqw); width: 100%; }