/* Chapter 5: scene text, nuclear equations, the reactor simulator and the equation balancer. */

.n-note { font: 600 26px system-ui, sans-serif; fill: #c5d3ee; }
.n-note.small { font-size: 22px; fill: #9fb4dd; }
.n-label { font: 800 30px system-ui, sans-serif; fill: #fff; }
.n-big { font: 800 52px system-ui, sans-serif; fill: #fff; }
.n-sum { font: 800 38px system-ui, sans-serif; fill: #fff; }
.n-badge { font: 800 24px system-ui, sans-serif; fill: #14213d; }
.n-badge.big { font-size: 40px; fill: #fff; }
.eqs { font-family: system-ui, sans-serif; font-weight: 800; fill: #fff; }
.gold-text { fill: #ffd166; }
.blue-text { fill: #74c0fc; }
.ok-text { fill: #4ade80; }

/* Reactor simulator */
.rx-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.rx-left { display: flex; flex-direction: column; gap: 6px; }
.rx-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.rx-svg-note { font: 600 15px system-ui, sans-serif; fill: #9fb4dd; }
.rx-nucleus { fill: #ffa94d; stroke: #ffd8a8; stroke-width: 2; }
.rx-nucleus.flash { fill: #fff3bf; stroke: #ffd166; }
.rx-nucleus.empty { fill: none; stroke: rgba(255, 169, 77, .45); stroke-dasharray: 3 3; }
.rx-rod { fill: #343a40; stroke: #adb5bd; stroke-width: 2; }
.rx-rod-value { color: #fff; }
.rx-status { margin: 0; font-weight: 800; font-size: 1.1em; color: #cfd9ef; }
.rx-status.ok { color: #4ade80; }
.rx-status.warm { color: #ffc078; }
.rx-status.hot { color: #ff8a8a; }
.rx-meter { position: relative; display: flex; height: 14px; border-radius: 7px; overflow: visible; }
.rx-zone { display: block; height: 100%; }
.rx-zone.dead { background: #495057; border-radius: 7px 0 0 7px; }
.rx-zone.ok { background: #2f9e44; }
.rx-zone.warm { background: #e8590c; }
.rx-zone.hot { background: #c92a2a; border-radius: 0 7px 7px 0; }
.rx-marker {
  position: absolute;
  top: -5px;
  width: 6px;
  height: 24px;
  margin-left: -3px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 2px #0d1730;
  transition: left .15s linear;
}
.rx-meter-labels { display: flex; justify-content: space-between; font-size: .75em; color: #9fb4dd; }
.rx-progress { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.rx-progress span { display: block; height: 100%; width: 0; background: #4ade80; }
.rx-note { margin: 0; font-size: .8em; color: #9fb4dd; text-align: center; }
.lab-task { text-align: left; font-size: .88em; cursor: default; }
.lab-task.correct { border-color: var(--ok); background: #143a28; }

.lab-grid {
  display: grid;
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.lab-controls { display: flex; flex-direction: column; gap: 6px; }
.slider-row { display: flex; align-items: center; gap: 8px; }
.angle-slider { flex: 1; min-width: 0; accent-color: #ffd166; height: 28px; }
.lab-readout { margin: 0; font-weight: 700; font-size: .9em; color: #e8eefc; }
.lab-task-list { display: flex; flex-direction: column; gap: 6px; }

/* Equation balancer */
.calc-question { margin: 0; font-size: 1.05em; line-height: 1.45; text-align: center; }
.nq {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .3em .55em;
  padding: .6em .8em;
  border-radius: .8em;
  background: rgba(255, 255, 255, .05);
  font-size: 1.35em;
}
.nq-nuc, .nq-group { display: inline-flex; align-items: center; gap: .1em; }
.nq-nums { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: .6em; font-weight: 800; line-height: 1.15; }
.nq-a { color: #ffd166; }
.nq-z { color: #74c0fc; }
.nq-sym { font-size: 1.3em; font-weight: 800; }
.nq-op { font-weight: 800; color: #cfd9ef; }
.nq-coef { font-weight: 800; margin-right: .15em; }
.nq-in {
  width: 3.4em;
  font: 800 1em ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  padding: .2em .25em;
  border-radius: .45em;
  border: 2px dashed #ffd166;
  background: #0f1a33;
  color: #fff;
}
.nq-in.atomic { border-color: #74c0fc; }
.nq-in.coef { width: 2.4em; font-size: .85em; margin-right: .15em; }
.nq-in:focus { outline: none; border-style: solid; }
.nq-in.wrong { border-color: var(--bad); border-style: solid; }
.nq-in.correct { border-color: var(--ok); border-style: solid; background: #143a28; }
.nq-key { margin: 0; font-size: .85em; color: #9fb4dd; text-align: center; }
.gold-key { color: #ffd166; font-weight: 700; }
.blue-key { color: #74c0fc; font-weight: 700; }

@container (max-width: 620px) {
  .rx-grid { grid-template-columns: 1fr; }
  .nq { font-size: 1.1em; }
}
.nq-nums .nq-in { font-size: 1.25em; width: 3em; }