/* Chapter 6: test tubes, hydrated ions, the solubility-rules table, equations and the test-tube lab. */

.glass { fill: rgba(255, 255, 255, .04); stroke: #cfe3ff; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.glass.rim { stroke-width: 6; }
.glass.dashed { stroke-dasharray: 10 8; stroke: rgba(207, 227, 255, .5); }

.ion-text { font-family: system-ui, sans-serif; font-weight: 800; fill: #0d1730; }
.tt-label { font: 800 32px system-ui, sans-serif; fill: #e8eefc; }
.tt-label.small { font-size: 26px; }
.tt-label.lab { font-size: 24px; }
.tt-q { font: 800 40px system-ui, sans-serif; fill: rgba(207, 227, 255, .5); }
.scene-plus { font: 800 80px system-ui, sans-serif; fill: #ffd166; }
.scene-plus.small { font-size: 56px; }
.scene-title { font: 800 40px system-ui, sans-serif; fill: #fff; }
.scene-label { font: 800 32px system-ui, sans-serif; fill: #e8eefc; }
.scene-label.big { font-size: 40px; }
.scene-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.scene-note.core-note { fill: #e8eefc; }
.scene-note.small-note { font-size: 21px; }
.scene-mark { font: 800 24px system-ui, sans-serif; }
.gold-fill { fill: #ffd166; }

.rule-row { fill: rgba(255, 255, 255, .06); stroke: #3a4f7d; stroke-width: 2; }
.rule-name { font: 800 30px system-ui, sans-serif; fill: #fff; }
.rule-ion { font: 700 24px system-ui, sans-serif; fill: #9fb4dd; }
.rule-text { font: 600 28px system-ui, sans-serif; fill: #e8eefc; }
.rule-ok { fill: #8ce99a; font-weight: 800; }
.rule-no { fill: #ffa8a8; font-weight: 800; }
.rule-ex { fill: #ffd166; font-weight: 800; }

.eq-svg { font-family: system-ui, sans-serif; font-weight: 800; fill: #fff; }
.eq-st { fill: #9fb4dd; font-weight: 700; }

.drift { animation: tt-drift 4s ease-in-out infinite; }
@keyframes tt-drift { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }

/* Ordering activity: long sentences, one per row. */
.seq-slots { margin: 0; padding-left: 1.6em; width: 100%; display: grid; gap: max(6px, .8cqw); }
.seq-slot { min-height: 2.6em; border: 2px dashed rgba(255, 255, 255, .3); border-radius: .8em; display: flex; align-items: stretch; }
.seq-slot::marker { font-weight: 800; color: #ffd166; }
.seq-slot .seq-tile { flex: 1; margin: -2px; }
.seq-empty { align-self: center; padding: 0 .9em; color: rgba(255, 255, 255, .45); font-size: .9em; }
.seq-tiles { width: 100%; display: grid; gap: max(6px, .8cqw); }
.seq-tile { font-size: .92em; }

/* Test-tube lab */
.tt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.tt-picture { width: 100%; border-radius: .8em; background: #0d1730; }
.tt-picture svg { display: block; width: 100%; height: auto; }
.tt-controls { display: flex; flex-direction: column; gap: 6px; }
.tt-controls .lab-tools { justify-content: flex-start; }
.tt-controls .chip-btn { padding: .35em .7em; font-size: .9em; }
.tt-controls .act-actions { justify-content: flex-start; }
.tt-sol b { font-weight: 800; }
.tt-swatch { display: inline-block; width: .8em; height: .8em; margin-right: .4em; border-radius: 50%; border: 2px solid #cfe3ff; background: rgba(208, 235, 255, .25); vertical-align: -.05em; }
.tt-swatch.blue { background: #4dabf7; }
.tt-note { margin: 0; font-size: .85em; color: #9fb4dd; }
.tt-result { width: 100%; padding: .6em .9em; border-radius: .8em; background: rgba(255, 255, 255, .06); display: grid; gap: .25em; }
.tt-result[hidden] { display: none; }
.tt-result p { margin: 0; }
.tt-headline { font-weight: 800; color: #ffe7a8; }
.tt-eq { font-weight: 700; font-size: 1.05em; }
.tt-st { font-size: .75em; color: #9fb4dd; }
.tt-ppt { color: #ffd166; }
.tt-spect { color: #cfd9ef; }

.tt-liquid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s ease-in-out; }
.tt-liquid.low { transform: scaleY(.15); }
.tt-liquid.empty { transform: scaleY(0); }
.tt-cloud { opacity: 0; transition: opacity .8s ease-in; }
.tt-cloud.on { opacity: .6; }
.tt-cloud.on.fade { opacity: .12; transition: opacity 1.6s ease-out; }
.tt-settled { opacity: 0; transition: opacity 1.4s ease-in; }
.tt-settled.on { opacity: 1; }
.tt-grain { opacity: 0; transform-box: fill-box; animation: tt-settle 2.2s ease-in forwards; }
@keyframes tt-settle {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: translateY(var(--dy)); }
}

@container (max-width: 620px) {
  .tt-grid { grid-template-columns: 1fr; }
  .tt-picture { width: min(100%, 360px); justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .drift { animation: none; }
  .tt-grain { animation: none; opacity: 1; transform: translateY(var(--dy)); }
  .tt-liquid, .tt-cloud, .tt-settled { transition: none; }
}