/* Chapter 2: scene text, the label activity, the wave machine, the calculator and the conversion drill. */

.w-big { font: 800 120px system-ui, sans-serif; fill: #fff; }
.w-mid { font: 800 52px system-ui, sans-serif; fill: #fff; }
.w-line { font: 600 34px system-ui, sans-serif; fill: #e8eefc; }
.w-line.strong { font-weight: 800; fill: #fff; }
.w-line.dim { fill: #9fb4dd; }
.w-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.w-tag { font: 800 32px system-ui, sans-serif; }
.w-sym { font: 800 48px Georgia, 'Times New Roman', serif; font-style: italic; }
.w-sym.small { font-size: 38px; }
.gold { fill: #ffd166; }
.blue { fill: #74c0fc; }
.green { fill: #69db7c; }
.red { fill: #ff8787; }
.w-mid.gold { fill: #ffd166; }
.w-mid.green { fill: #69db7c; }
.w-line.gold { fill: #ffd166; }

.label-figure, .wm-figure { width: min(100%, 64cqw); align-self: center; }
.label-figure svg, .wm-figure svg { display: block; width: 100%; height: auto; }
.lw-note { font: 600 18px system-ui, sans-serif; fill: #9fb4dd; }
.lw-target { cursor: pointer; }
.lw-target:focus-visible { outline: none; }
.lw-target:focus-visible .lw-badge { stroke: #fff; stroke-width: 4; }
.lw-badge { fill: #ffd166; }
.lw-num { font: 800 20px system-ui, sans-serif; fill: #14213d; pointer-events: none; }
.lw-target.placed { cursor: default; }
.lw-target.placed .lw-badge { fill: #69db7c; }
.lw-target.hint .lw-badge { animation: lw-flash .8s ease-in-out infinite alternate; }
@keyframes lw-flash { to { fill: #fff; } }
.label-chips .chip-btn.correct { opacity: .85; }

.wm-axis { font: 600 20px system-ui, sans-serif; fill: #9fb4dd; }
.wm-tag { font: 800 30px Georgia, 'Times New Roman', serif; font-style: italic; }
.wm-controls { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: max(10px, 1.6cqw); align-items: center; width: 100%; }
.wm-sliders { display: flex; flex-direction: column; gap: 8px; }
.wm-slider-row { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #cfd9ef; }
.wm-slider-row span { width: 6em; }
.wm-slider { flex: 1; accent-color: #74c0fc; height: 28px; }
.wm-readout { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2em .8em; font-size: .9em; }
.wm-readout dt { font-weight: 700; color: #9fb4dd; }
.wm-readout dd { margin: 0; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.wm-challenge { margin: 0; font-weight: 800; color: var(--gold); text-align: center; }
.wm-choices[hidden] { display: none; }
.wm-question { margin: 0; font-weight: 700; text-align: center; }

.calc-question { margin: 0; font-size: 1.1em; line-height: 1.45; text-align: center; }
.calc-question b { color: var(--gold); }
.calc-body { display: flex; flex-direction: column; gap: max(8px, 1.2cqw); width: 100%; align-items: center; }
.calc-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.calc-step[hidden] { display: none; }
.calc-values { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; }
.calc-field { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #cfd9ef; }
.calc-input {
  width: 9em;
  font: 700 1em ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .45em .6em;
  border-radius: .6em;
  border: 2px solid #3a4f7d;
  background: #0f1a33;
  color: #fff;
}
.calc-input:focus { outline: none; border-color: var(--gold); }
.calc-input:disabled { opacity: .85; }
.calc-input.wrong { border-color: var(--bad); }
.calc-input.correct { border-color: var(--ok); background: #143a28; }
.calc-unit { font-weight: 700; color: #cfd9ef; }

.drill-prompt { margin: 0; font-size: 1.15em; text-align: center; }
.drill-prompt b { color: var(--gold); }

@container (max-width: 620px) {
  .label-figure, .wm-figure { width: 100%; }
  .wm-controls { grid-template-columns: 1fr; }
  .calc-input { width: 7em; }
}