/* Chapter 8: scene text, the spotters, the three-bin sorts and the preservation lab. */

.scene-tag { font: 700 30px system-ui, sans-serif; fill: #e8eefc; paint-order: stroke; stroke: #0d1730; stroke-width: 6px; stroke-linejoin: round; }
.scene-tag.small { font-size: 24px; fill: #cfd9ef; }
.scene-tag.xsmall { font-size: 21px; fill: #cfd9ef; }
.scene-tag.gold { fill: #ffd166; }
.scene-tag.big { font-size: 40px; }
.scene-tag.treat { font-size: 24px; fill: #ffd166; font-style: italic; }
.scene-tag.warn { font-size: 28px; fill: #ff8a8a; }
.scene-tag.dark { fill: #14213d; stroke: none; font-weight: 800; }
.scene-tag.blue { fill: #74c0fc; }
.scene-tag.green { fill: #8ce99a; }
.scene-tag.red { fill: #ff8787; }
.scene-tag.purple { fill: #b197fc; }
.fridge-digits { font: 800 40px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #8ce99a; }

.shimmer { animation: shimmer 1.4s ease-in-out infinite alternate; }
@keyframes shimmer { from { opacity: .35; transform: translateY(4px); } to { opacity: .9; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .shimmer { animation: none; } }

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

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

.spot-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(8px, 1.4cqw);
  background: #1b2a4a;
  color: #f1f3f5;
  border: 2px solid #3a4f7d;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.4;
}
.spot-tube { width: max(36px, 4.4cqw); height: auto; flex: none; }
.spot-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: max(6px, .9cqw); }
.spot-btn { text-align: center; font-weight: 700; }

.pl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.pl-left { display: flex; flex-direction: column; gap: 6px; }
.pl-picture svg, .pl-graph svg { width: 100%; height: auto; display: block; }
.pl-picture { border-radius: .8em; overflow: hidden; }
.pl-svg-text { font: 700 24px system-ui, sans-serif; fill: #e8eefc; }
.pl-svg-text.gold { fill: #ffd166; }
.pl-svg-text.small { font-size: 20px; fill: #cfd9ef; }
.pl-controls { display: flex; flex-direction: column; gap: 6px; }
.pl-controls .lab-tools, .pl-controls .act-actions { justify-content: flex-start; }
.pl-methods .chip-btn { padding: .3em .65em; font-size: .85em; }
.pl-question { display: flex; flex-direction: column; gap: 6px; padding: .6em .8em; border-radius: .8em; background: rgba(255, 255, 255, .06); border-left: 4px solid var(--gold); }
.pl-question[hidden] { display: none; }
.pl-q-text { margin: 0; font-weight: 700; }
.pl-q-text b { color: var(--gold); }
.pl-options { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-options .chip-btn { text-align: left; font-size: .85em; }
.pl-controls .lab-readout { text-align: left; }
.pl-goals li { font-size: .8em; }

@container (max-width: 620px) {
  .pl-grid { grid-template-columns: 1fr; }
  .sort3 .sort-bins { grid-template-columns: 1fr; }
  .spot-card { flex-direction: column; }
}

.lab-readout { margin: 0; font-weight: 700; font-size: .9em; color: #e8eefc; }