/* Chapter 3: generator scenes, AC/DC picture sort, Fleming's rule practice, generator simulator and Lenz lab. */

.field-line { stroke: #a5d8ff; stroke-width: 3; opacity: .65; }
.field-line.dashed { stroke-dasharray: 12 9; }
.axis-line { stroke: #9fb4dd; stroke-width: 3; }
.leader { stroke: #9fb4dd; stroke-width: 2; }
.panel { fill: rgba(255, 255, 255, .05); stroke: #3a4f7d; stroke-width: 3; }
.pole-letter { font: 800 40px system-ui, sans-serif; fill: #fff; }
.q-mark { font-family: system-ui, sans-serif; font-weight: 800; fill: #ffd166; }
.graph-title { font: 800 44px system-ui, sans-serif; fill: #fff; }
.gen-label { font: 700 28px system-ui, sans-serif; }
.gen-label:not([fill]) { fill: #e8eefc; }
.gen-label.small { font-size: 24px; }
.gen-small { font: 600 22px system-ui, sans-serif; fill: #9fb4dd; }
.gen-small.gold-fill { fill: #ffd166; font-weight: 700; font-size: 24px; }

.bob-down { animation: bob-down 1.8s linear infinite; }
.bob-up { animation: bob-down 1.8s linear infinite reverse; }
@keyframes bob-down {
  0% { transform: translateY(-70px); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateY(70px); opacity: 0; }
}
.slide-in { animation: slide-in 2.2s ease-in-out infinite; }
.slide-out { animation: slide-in 2.2s ease-in-out infinite reverse; }
@keyframes slide-in {
  0% { transform: translateX(90px); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateX(-30px); opacity: 0; }
}

/* AC / DC picture sort */
.pic-card { display: grid; place-items: center; min-height: 4.2em; }
.pic-card .mini-pic { display: block; width: min(220px, 34cqw); height: auto; }
.pic-card .mini-pic.sym { width: min(120px, 20cqw); }
.chip-btn.hint, .btn.hint { box-shadow: 0 0 0 3px var(--gold); }

/* Fleming practice and Lenz lab share a picture + side panel layout */
.fl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: center;
}
.fl-picture svg, .lenz-picture svg { display: block; width: 100%; height: auto; border-radius: .8em; }
.fl-side { display: flex; flex-direction: column; gap: max(8px, 1cqw); }
.fl-question { margin: 0; line-height: 1.45; }
.fl-question b { color: var(--gold); }
.fl-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fl-buttons.lenz-buttons { grid-template-columns: 1fr; }
.fl-btn { text-align: center; font-weight: 700; }
.fl-text { font: 700 24px system-ui, sans-serif; }
.fl-text:not([fill]) { fill: #e8eefc; }
.fl-text.small { font-size: 20px; }
.lenz-magnet { transition: transform 1.1s ease-in-out; }

/* Generator simulator */
.gen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: max(10px, 1.6cqw);
  width: 100%;
  align-items: start;
}
.gen-left { display: flex; flex-direction: column; gap: 4px; }
.gen-picture svg { display: block; width: 100%; height: auto; border-radius: .8em; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.gen-picture svg:active { cursor: grabbing; }
.gen-legend { margin: 0; font-size: .78em; color: #9fb4dd; line-height: 1.35; }
.gen-controls { display: flex; flex-direction: column; gap: 6px; }
.gen-controls .lab-tools { justify-content: flex-start; }
.slider-row { display: flex; align-items: center; gap: 8px; }
.speed-slider { flex: 1; min-width: 0; accent-color: #ffd166; height: 28px; }
.lab-readout { margin: 0; font-weight: 700; font-size: .85em; color: #e8eefc; min-height: 2.6em; }
.gen-tasks { display: flex; flex-direction: column; gap: 6px; }
.gen-task {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: .45em .7em;
  border-radius: .7em;
  border: 2px solid #3a4f7d;
  font-size: .86em;
  line-height: 1.3;
}
.gen-task.correct { border-color: var(--ok); background: #143a28; animation: none; }
.gen-task.correct .gen-task-text::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.gen-task .chip-btn { padding: .3em .8em; font-weight: 700; text-align: center; }
.gen-task-text { flex: 1 1 12em; }
.count-row { display: flex; gap: 6px; }
.count-btn { min-width: 2.6em; }
.sim-text { font: 600 18px system-ui, sans-serif; fill: #9fb4dd; }

@container (max-width: 620px) {
  .gen-grid, .fl-grid { grid-template-columns: 1fr; }
}