/* Chapter 6: dough lab and nitrogen-cycle builder. */

.dl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.dl-left { display: flex; flex-direction: column; gap: 6px; }
.dl-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.dl-picture svg { display: block; width: 100%; height: auto; }
.dl-svg-text { font: 800 24px system-ui, sans-serif; }
.dl-meters { display: grid; gap: 4px; }
.dl-meter { display: grid; grid-template-columns: 8.5em 1fr; align-items: center; gap: 8px; font-size: .85em; font-weight: 700; color: #cfd9ef; }
.dl-bar { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.dl-bar i { display: block; height: 100%; width: 0; background: #74c0fc; }
.dl-bar i.eth { background: #e599f7; }
.dl-controls { display: flex; flex-direction: column; gap: 6px; }
.dl-row { display: flex; flex-direction: column; gap: 4px; }
.dl-controls .lab-tools { justify-content: flex-start; }
.dl-controls .chip-btn { padding: .35em .7em; font-size: .9em; }
.dl-controls .chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }
.dl-actions { justify-content: flex-start; flex-wrap: wrap; }
.dl-controls .lab-goals { justify-content: flex-start; }
.dl-runs { margin: 0; padding-left: 1.2em; font-size: .85em; color: #c9f7d4; display: grid; gap: .15em; }
.dl-runs:empty { display: none; }

.nb-picture { width: min(100%, 70cqw); align-self: center; }
.nb-picture svg { display: block; width: 100%; height: auto; }
.nb-reveal { opacity: 0; transition: opacity .5s; }
.nb-reveal.on { opacity: 1; }
.nc-badge { cursor: pointer; }
.nc-badge.filled { cursor: default; }
.nc-badge:focus-visible { outline: none; }
.nc-badge:focus-visible circle { stroke: var(--gold); stroke-width: 7; }
.nc-badge.hint circle { stroke: var(--gold); stroke-width: 8; }
.nc-badge.shake { animation: none; }
.nc-badge.shake circle { fill: #ff8a8a; }
.nb-chips .chip-btn { text-align: center; font-weight: 700; }

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