/* Chapter 7: three-bin sort, quiz graphs, the virtual yeast investigation and the write-up builder. */

.sort-bins:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sort-buttons { flex-wrap: wrap; }

.tq-graph { display: block; width: min(100%, 200px); height: auto; margin: 0 auto .35em; }
.option:has(.tq-graph) { text-align: center; font-weight: 700; }
.act-title .env-graph { display: block; width: min(100%, 520px); height: auto; margin: 0 auto .5em; }

.yl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.yl-left, .yl-right { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.yl-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.yl-picture svg, .yl-graph svg { display: block; width: 100%; height: auto; }
.yl-left .chip-btn { padding: .35em .7em; font-size: .9em; }
.yl-modes .chip-btn:disabled:not(.on) { opacity: .45; }
.yl-levels .chip-btn { min-width: 4.2em; }

.yl-table { width: 100%; border-collapse: collapse; font-size: .85em; }
.yl-table th, .yl-table td { padding: .2em .3em; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.yl-table thead th { color: #9fb4dd; font-weight: 700; font-size: .9em; }
.yl-table tbody th { color: #cfd9ef; white-space: nowrap; }
.yl-table tr.current { background: rgba(255, 209, 102, .1); }
.yl-trial {
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  border-radius: .4em;
  padding: .1em .55em;
  cursor: pointer;
}
.yl-trial:not(:disabled):hover { border-color: #6f8bc4; }
.yl-trial:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.yl-trial:disabled { cursor: default; color: #6f84ad; }
.yl-trial.out { text-decoration: line-through; color: #ff8a8a; }
.yl-trial.hint { box-shadow: 0 0 0 3px var(--gold); }
.yl-mean { font-weight: 800; color: #c9f7d4; }

.yl-avg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; padding: .4em; border-radius: .7em; background: rgba(255, 209, 102, .08); }
.yl-avg[hidden] { display: none; }
.yl-input {
  width: 5.5em;
  font: 700 1em ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .4em .6em;
  border-radius: .6em;
  border: 2px solid #3a4f7d;
  background: #0f1a33;
  color: #fff;
}
.yl-input:focus { outline: none; border-color: var(--gold); }
.yl-graph { width: 100%; border-radius: .8em; background: rgba(255, 255, 255, .04); }

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

.wu-source { margin: 0; font-size: .85em; color: #9fb4dd; text-align: center; }
.wu-paper { display: grid; gap: 8px; width: 100%; }
.wu-para {
  --c: #748ffc;
  padding: .55em .9em;
  border-radius: .8em;
  background: rgba(255, 255, 255, .05);
  border-left: 5px solid var(--c);
  opacity: .55;
  transition: opacity .3s;
}
.wu-para.active, .wu-para.done { opacity: 1; }
.wu-para.active { background: rgba(255, 255, 255, .09); }
.wu-M { --c: #9775fa; }
.wu-E { --c: #ffd166; }
.wu-badge { display: block; font-size: .78em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.wu-text { margin: .2em 0 0; min-height: 1.4em; line-height: 1.45; }
.wu-sentence { animation: wu-in .4s ease-out; }
@keyframes wu-in { from { opacity: 0; } to { opacity: 1; } }
.wu-note { margin: 0; padding: .5em .9em; border-radius: .7em; border: 1px dashed var(--gold); color: #ffe7a8; font-size: .9em; text-align: center; }
.wu-note[hidden] { display: none; }

@container (max-width: 620px) {
  .yl-grid { grid-template-columns: 1fr; }
  .yl-table { font-size: .8em; }
  .sort-bins:has(> :nth-child(3)) { grid-template-columns: 1fr; }
}