/* Chapter-only styles (SVG text classes, custom activity layouts). Shared styles live in ../shared/styles.css. */

.thermo-text { font: 700 24px system-ui, sans-serif; fill: #e8eefc; }
.tile-letter { font: 800 64px system-ui, sans-serif; fill: var(--gold); }
.tile-word { font: 700 19px system-ui, sans-serif; fill: #fff; }
.tile-effect { font: 500 17px system-ui, sans-serif; fill: #cfd9ef; }
.panel-title { font: 700 24px system-ui, sans-serif; fill: #fff; }
.panel-note { font: 600 20px system-ui, sans-serif; }
.bar-label { font: 600 18px system-ui, sans-serif; fill: #cfd9ef; }
.hc-text { font: 700 22px system-ui, sans-serif; fill: #e8eefc; }
.hc-text.dim { font-weight: 600; fill: #9fb4dd; }
.hc-text.gold { fill: var(--gold); }
.curve-marker { font: 800 14px system-ui, sans-serif; fill: #14213d; }

.state-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: max(10px, 1.6cqw); align-items: center; width: 100%; }
.state-box svg { display: block; width: 100%; height: auto; }
.state-readout { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25em .8em; font-size: .95em; }
.state-readout dt { font-weight: 700; color: #9fb4dd; }
.state-readout dd { margin: 0; font-weight: 700; color: #fff; }
.slider-row { display: flex; align-items: center; gap: 10px; width: min(100%, 60cqw); align-self: center; font-weight: 700; color: #cfd9ef; }
.heat-slider { flex: 1; accent-color: #ff922b; height: 28px; }

.curve-graph { width: min(100%, 58cqw); align-self: center; }
.curve-graph svg { display: block; width: 100%; height: auto; }
.curve-question, .curve-labels { display: flex; flex-direction: column; gap: max(6px, .8cqw); width: 100%; }
.curve-question[hidden], .curve-labels[hidden] { display: none; }
.curve-q { margin: 0; font-weight: 700; text-align: center; }
.curve-q b { color: var(--gold); }
.curve-label-row { display: flex; align-items: center; gap: 10px; }
.curve-num { flex: none; width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #14213d; font-weight: 800; }
.curve-label-row select {
  flex: 1;
  font: inherit;
  padding: .4em .6em;
  border-radius: .6em;
  border: 2px solid #3a4f7d;
  background: #1d2b4b;
  color: #fff;
}
.curve-label-row select.correct { border-color: var(--ok); }
.curve-label-row select.wrong { border-color: var(--bad); }

@container (max-width: 620px) {
  .state-wrap { grid-template-columns: 1fr; }
  .slider-row, .curve-graph { width: 100%; }
}