/* Chapter 11: structural formulas in the scenes, the bromine water table and the reaction workbench. */

.atom-text { font-family: system-ui, sans-serif; font-weight: 800; }
.mol-name { font: 700 24px system-ui, sans-serif; fill: #e8eefc; }
.mol-name.gold-name { fill: #ffd166; }
.mol-plus { font: 800 40px system-ui, sans-serif; fill: #e8eefc; }
.mol-cond { font: 700 24px system-ui, sans-serif; fill: #b197fc; }
.fam-reagent { font: 700 22px system-ui, sans-serif; fill: #ffd166; }
.fam-type { font: 800 22px system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.fam-type.addition { fill: #74c0fc; }
.fam-type.substitution { fill: #f783ac; }
.badge-4 { font: 800 20px system-ui, sans-serif; fill: #14213d; }
.tube-name { font: 700 26px system-ui, sans-serif; fill: #e8eefc; }
.lamp-text { font: 800 28px system-ui, sans-serif; fill: #e5dbff; }
.bottle-text { font: 700 20px system-ui, sans-serif; fill: #e8eefc; }

/* Colour changes in the scenes: the colourless liquid fades in over the orange one. */
#scene [data-el="hook-clear"] { transition: opacity 1s ease .8s; }
#scene [data-el="bw-ene-clear"] { transition: opacity .9s ease .8s; }
#scene [data-el="bw-uv-clear"] { transition: opacity 7s ease-in 1.5s; }

/* Bromine water table */
.bw-pool { gap: 6px; }
.bw-fact { font-size: .9em; text-align: center; }
.bw-table {
  display: grid;
  grid-template-columns: minmax(5.5em, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  width: 100%;
}
.bw-head { font-weight: 800; color: var(--gold); text-align: center; align-self: end; }
.bw-row-label { font-weight: 700; color: #cfd9ef; align-self: center; font-size: .9em; }
.bw-cell { min-height: 2.4em; text-align: center; font-size: .9em; border-style: dashed; }
.bw-cell.correct { border-style: solid; }
.bw-cell.hint { box-shadow: 0 0 0 3px var(--gold); }

/* Reaction workbench */
.wb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: max(10px, 1.4cqw);
  width: 100%;
  align-items: start;
}
.wb-left { display: flex; flex-direction: column; gap: 6px; }
.wb-pic { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.wb-pic svg { width: 100%; height: auto; display: block; }
.wb-controls { display: flex; flex-direction: column; gap: 5px; }
.wb-predict { display: flex; flex-direction: column; gap: 5px; }
.wb-predict[hidden] { display: none; }
.wb-controls .lab-tools { justify-content: flex-start; gap: 5px; }
.wb-controls .chip-btn { padding: .3em .65em; font-size: .85em; }
.wb-controls .act-actions { justify-content: flex-start; margin-top: 4px; }
.wb-results { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: .88em; font-weight: 700; }
.wb-results[hidden] { display: none; }
.wb-results li.hit { color: #c9f7d4; }
.wb-results li.miss { color: #ffd0d0; }
.wb-results li.next { color: #9fb4dd; font-weight: 600; }
.wb-title { font: 800 22px system-ui, sans-serif; fill: #e8eefc; }
.wb-name { font: 700 20px system-ui, sans-serif; fill: #e8eefc; }
.wb-name.gold-name { fill: #ffd166; }
.wb-verdict { font: 800 24px system-ui, sans-serif; fill: #ffd166; }
.wb-swatch-label { font: 600 16px system-ui, sans-serif; fill: #9fb4dd; }
.wb-cond-text { font: 700 18px system-ui, sans-serif; fill: #ced4da; }
.wb-cond-text.uv { fill: #b197fc; }

@container (max-width: 620px) {
  .wb-grid { grid-template-columns: 1fr; }
  .bw-table { grid-template-columns: minmax(4.5em, .7fr) minmax(0, 1fr) minmax(0, 1fr); }
  .bw-cell, .bw-fact, .bw-row-label { font-size: .8em; }
}