/* Chapter 3: surface race and design detective. */

.race-chart { width: min(100%, 60cqw); align-self: center; }
.race-chart svg { display: block; width: 100%; height: auto; }
.race-axis { font: 600 13px system-ui, sans-serif; fill: #9fb4dd; }
.race-readout { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-weight: 700; font-size: .9em; }
.race-chip { display: inline-flex; align-items: center; gap: 6px; padding: .2em .6em; border-radius: 999px; background: rgba(255, 255, 255, .07); border-bottom: 3px solid var(--line); }
.race-chip i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .5); }
.race-quiz { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.race-question { margin: 0; font-weight: 800; }

.det-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: max(10px, 2cqw); align-items: center; width: 100%; }
.det-figure svg { display: block; width: 100%; max-height: 42cqw; height: auto; }
.det-side { display: flex; flex-direction: column; gap: max(8px, 1.2cqw); }
.det-parts { display: flex; flex-direction: column; gap: 6px; }
.det-parts .chip-btn.on { border-color: var(--gold); background: #2c3d66; }
.det-question { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.det-question .lab-tools { justify-content: flex-start; }
.det-question .lab-tools .chip-btn { text-align: center; }
.det-prompt { margin: 0; font-weight: 700; line-height: 1.35; }
.det-marker { cursor: pointer; }
.det-marker circle { fill: #ffd166; stroke: #14213d; stroke-width: 3; }
.det-marker text { font: 800 16px system-ui, sans-serif; fill: #14213d; pointer-events: none; }
.det-marker.done circle { fill: #4ade80; }
.det-marker:focus-visible circle { stroke: #fff; stroke-width: 4; }

@container (max-width: 620px) {
  .race-chart { width: 100%; }
  .det-layout { grid-template-columns: 1fr; }
  .det-figure svg { max-height: 60cqw; }
}