/* motor_effect.css — current-carrying wire in a field, drawn by viz/motor_effect.js (SVG + toggles). */

.me { display: flex; flex-direction: column; gap: 0.7rem; }
.me-pole { stroke: rgba(0, 0, 0, 0.3); stroke-width: 1; }
.me-plbl { fill: #fff; font-size: 16px; font-weight: 800; }
.me-field { stroke: rgba(148, 163, 184, 0.5); stroke-width: 1.4; }
.me-fhead { fill: rgba(148, 163, 184, 0.7); }
.me-wiregrp { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.me-wire { fill: #1e293b; stroke: #fbbf24; stroke-width: 2.4; }
.me-sym { stroke: #fbbf24; stroke-width: 2.4; stroke-linecap: round; }
.me-sym-dot { fill: #fbbf24; }
.me-force { stroke: #34d399; stroke-width: 3; }
.me-fhead2 { fill: #34d399; }
.me-flbl { fill: #a7f3d0; font-size: 11px; font-weight: 700; paint-order: stroke; stroke: #0b1220; stroke-width: 2.6px; stroke-linejoin: round; }

.me-toggles { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.me-tog { cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700; color: #e8eef6; padding: 0.34rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); transition: background 0.12s ease; }
.me-tog:hover { background: rgba(255, 255, 255, 0.11); }