/* Chapter 1: magnet and field-line art, pattern thumbnails, the wire activity and the compass plotter. */

.mag-letter { font-weight: 800; font-family: system-ui, sans-serif; fill: #fff; }
.rose-letter { font: 800 48px system-ui, sans-serif; fill: #343a40; }
.rose-letter.north { fill: #e03131; }
.earth-text { font: 700 22px system-ui, sans-serif; fill: #fff; }
.eq-mid { font: 800 52px system-ui, sans-serif; fill: #fff; }
.gold-fill { fill: #ffd166; }
.eq-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.pole-tag { font: 800 44px system-ui, sans-serif; paint-order: stroke; stroke: #0d1730; stroke-width: 8px; }
.pole-tag.north { fill: #ff8a8a; }
.pole-tag.south { fill: #74c0fc; }
.strong-ring { fill: rgba(255, 209, 102, .35); }
.pt-letter { font: 800 34px system-ui, sans-serif; fill: #14213d; }
.wire-q { font-weight: 800; font-family: system-ui, sans-serif; fill: #1b1b1b; }
.wire-hint { font: 700 18px system-ui, sans-serif; fill: #9fb4dd; }
.cmp-face { fill: #f8f9fa; stroke: #868e96; stroke-width: 2.5; }

/* Pattern thumbnails inside quiz questions and options */
.act-title svg.pat { display: block; width: min(100%, 34cqw); height: auto; margin: .5em auto 0; background: rgba(8, 14, 30, .55); border-radius: .6em; }
.pat-opt { display: flex; flex-direction: column; align-items: center; gap: .3em; font-weight: 800; }
.pat-opt svg.pat { width: 100%; height: auto; display: block; background: rgba(8, 14, 30, .55); border-radius: .5em; }
.options:has(.pat-opt) { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.options:has(.pat-opt) .chip-btn { flex: 1 1 28%; min-width: 120px; max-width: 32%; padding: .45em; }

/* × / • wire activity */
.wire-pic { width: min(100%, 30cqw); min-width: 200px; }
.wire-pic svg { display: block; width: 100%; height: auto; }
.wire-options { flex-wrap: wrap; }
.wire-choice { text-align: center; font-weight: 800; padding: .55em 1.2em; }
.chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }

/* Compass plotter */
.plot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.plot-left { display: flex; flex-direction: column; gap: 6px; }
.plot-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.plot-picture svg { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.plot-bg { fill: #10203f; }
.cmp { cursor: grab; outline: none; }
.cmp-hit { fill: transparent; }
.cmp-ring { fill: none; stroke: transparent; stroke-width: 3; }
.cmp.selected .cmp-ring, .cmp:focus-visible .cmp-ring { stroke: #ffd166; }
.plot-trace path { transition: stroke-dashoffset 1.4s ease-out; }
.plot-trace .trace-arrows { opacity: 0; transition: opacity .4s 1.1s; }
.plot-trace.drawn .trace-arrows { opacity: 1; }
.plot-meter-row { display: flex; align-items: center; gap: 8px; }
.plot-meter { flex: 1; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.plot-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4dabf7, #ffd166, #ff6b6b); transition: width .25s; }
.plot-readout { margin: 0; font-weight: 700; font-size: .9em; color: #e8eefc; min-height: 2.6em; }
.plot-controls { display: flex; flex-direction: column; gap: 6px; }
.plot-controls .lab-tools { justify-content: flex-start; }
.plot-controls .chip-btn { padding: .35em .7em; font-size: .9em; }
.plot-controls .chip-btn.on { border-color: var(--gold); background: #2c3d66; }
.current-btn { border-color: #f0a868; }
.plot-task-list { display: flex; flex-direction: column; gap: 6px; }
.plot-task { text-align: left; font-size: .88em; }
.plot-task.correct { border-color: var(--ok); background: #143a28; }

@container (max-width: 620px) {
  .plot-grid { grid-template-columns: 1fr; }
  .act-title svg.pat { width: min(100%, 70cqw); }
  .options:has(.pat-opt) .chip-btn { max-width: 48%; }
}
.q-mark { font: 800 44px system-ui, sans-serif; fill: #ffd166; }
.on .pulse { animation: pulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }