/* Chapter 7: scene text, the activity-series ladder, particle drawings and the metal-in-solution lab. */

.dl-note { font: 600 26px system-ui, sans-serif; fill: #cfd9ef; }
.dl-head { font: 800 32px system-ui, sans-serif; fill: #fff; }
.dl-small { font: 700 24px system-ui, sans-serif; fill: #cfd9ef; }
.dl-small.gold, .dl-row.gold { fill: #ffd166; }
.dl-small.pink { fill: #ff8fab; }
.dl-small.blue, .dl-row-note.blue { fill: #74c0fc; }
.dl-op { font: 800 44px system-ui, sans-serif; fill: #fff; }
.dl-formula { font: 700 26px system-ui, sans-serif; fill: #e8eefc; }
.dl-atom-text { font-family: system-ui, sans-serif; font-weight: 800; fill: #0d1730; }
.dl-atom-text.small { font-size: 22px !important; }
.dl-ion { font: 800 17px system-ui, sans-serif; fill: #0d1730; }
.dl-nucleus { font: 800 46px system-ui, sans-serif; fill: #fff; }
.dl-row { font: 800 30px system-ui, sans-serif; fill: #fff; }
.dl-row.bad, .dl-row-note.bad { fill: #ff8a8a; }
.dl-row-note { font: 700 24px system-ui, sans-serif; fill: #cfd9ef; }
.dl-row-note.ok { fill: #4ade80; }
.dl-cross { font: 800 72px system-ui, sans-serif; fill: #ff8a8a; }
.dl-eq { font: 800 40px system-ui, sans-serif; fill: #fff; }
.dl-eq.op { fill: #ffd166; }
.dl-obs { font: 600 22px system-ui, sans-serif; fill: #9fb4dd; }
.dl-ladder-sym { font: 800 26px system-ui, sans-serif; fill: #fff; }
.dl-ladder-name { font: 600 22px system-ui, sans-serif; fill: #dfe7f7; }

/* Lab */
.dl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.dl-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #111d38; }
.dl-controls { display: flex; flex-direction: column; gap: 6px; }
.dl-controls .lab-tools { justify-content: flex-start; }
.dl-controls .chip-btn { padding: .3em .65em; font-size: .9em; }
.dl-controls .act-actions { justify-content: flex-start; }
.dl-series { display: flex; flex-wrap: wrap; gap: 3px; }
.dl-series span {
  padding: .15em .4em;
  border-radius: .4em;
  background: rgba(255, 255, 255, .08);
  border: 2px solid transparent;
  font-weight: 700;
  font-size: .85em;
}
.dl-series span.metal { border-color: #ffd166; color: #ffe7a8; }
.dl-series span.ion { border-color: #74c0fc; color: #d0ebff; }
.dl-series span.hint { box-shadow: 0 0 0 3px rgba(255, 209, 102, .5); }
.dl-readout { font-size: .88em; line-height: 1.4; color: #e8eefc; min-height: 3em; }
.dl-readout p { margin: .2em 0; }
.dl-readout ul { margin: .2em 0; padding-left: 1.2em; }
.dl-eqn { font-weight: 800; color: #ffd166; }
.dl-ionic { color: #cfd9ef; }
.dl-next { color: #9fb4dd; font-style: italic; }
.dl-lab-name { font: 700 20px system-ui, sans-serif; fill: #cfd9ef; }
.dl-lab-small { font: 700 17px system-ui, sans-serif; fill: #cfd9ef; }
.dl-lab-tiny { font: 600 14px system-ui, sans-serif; fill: #9fb4dd; }
.dl-lab-status { font: 800 18px system-ui, sans-serif; fill: #ffd166; }

@container (max-width: 620px) {
  .dl-grid { grid-template-columns: 1fr; }
}