/* /assets/css/physics/electromagnetism/how-a-solenoid-magnetic-field-line-distribution-explained.css — 本页专属样式（en/zh 共用） */
/* ============ 螺线管磁力线分布 · Solenoid field-line distribution ============ */
/* 图形/动画样式，自 svgs/todo/physics-34-…-explained.html 预览 <style> 并入驻此
   （页面禁止内联 <style>）。规则按 body[data-topic="solenoid-field"] 作用域限定，避免与 physics 其他页面同名类冲突；
   动画由 #stage 的 .is-running 驱动，减弱动效在本文件末尾兜底。 */

/* ============ 零件本体/区分色（part bodies & per-part distinct fills） ============ */
body[data-topic="solenoid-field"] .part .body{fill:#c2d1e4;stroke:#2563eb;stroke-width:1.6}
body[data-topic="solenoid-field"] .part .body2{fill:#dde7f4;stroke:#60a5fa;stroke-width:1.2}
body[data-topic="solenoid-field"] .part .body3{fill:#aab9cd;stroke:none}
body[data-topic="solenoid-field"] .part .accent{fill:none;stroke:#6b7b8c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-topic="solenoid-field"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}
body[data-topic="solenoid-field"] .part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}
body[data-topic="solenoid-field"] .part.is-active .body3{fill:#1d4ed8}
body[data-topic="solenoid-field"] .part.is-active .accent{stroke:#1d4ed8}
body[data-topic="solenoid-field"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}
body[data-topic="solenoid-field"] .tag{font-size:13.5px}
body[data-topic="solenoid-field"] .tag-sm{fill:#5b6472;font-size:11px}

/* 各部件区分色（作用域限定 · 均在中灰蓝值域内，禁用近白） */
body[data-topic="solenoid-field"] .part[data-id="part-core"]:not(.is-active) .body{fill:#c2d1e4}
body[data-topic="solenoid-field"] .part[data-id="part-core"]:not(.is-active) .body2{fill:#dde7f4}
body[data-topic="solenoid-field"] .part[data-id="part-battery"]:not(.is-active) .body{fill:#bfcee2}
body[data-topic="solenoid-field"] .part[data-id="part-battery"]:not(.is-active) .body2{fill:#d7e2f2}
body[data-topic="solenoid-field"] .part[data-id="part-battery"]:not(.is-active) .body3{fill:#aab9cd}
body[data-topic="solenoid-field"] .part[data-id="part-switch"]:not(.is-active) .body{fill:#cbd7e7}
body[data-topic="solenoid-field"] .part[data-id="part-switch"]:not(.is-active) .body2{fill:#e0eaf5}

/* 线圈绕组（导线缠成的螺管） */
body[data-topic="solenoid-field"] .sol-turn{fill:none;stroke:#7f93ab;stroke-width:6;stroke-linecap:round}
body[data-topic="solenoid-field"] .part.is-active .sol-turn{stroke:#1d4ed8}

/* 导线导体 + 电流虚线（统一主题蓝） */
body[data-topic="solenoid-field"] .sol-wire{fill:none;stroke:#8ea0b5;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
body[data-topic="solenoid-field"] .sol-flow{fill:none;stroke:#1d4ed8;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:7 14}
body[data-topic="solenoid-field"] .sol-flow-turn{fill:none;stroke:#1d4ed8;stroke-width:2.4;stroke-dasharray:6 13}

/* 磁力线：线圈内部平直平行、外部自 N 极绕回 S 极 */
body[data-topic="solenoid-field"] .sol-field{fill:none;stroke:#3b82f6;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:9 7;opacity:.9}
body[data-topic="solenoid-field"] .sol-field-in{fill:none;stroke:#1d4ed8;stroke-width:2;stroke-linecap:round;stroke-dasharray:10 8;opacity:.95}

/* 磁极标记与引线 */
body[data-topic="solenoid-field"] .sol-pole-cap{fill:#3b82f6;stroke:#1d4ed8;stroke-width:1}
body[data-topic="solenoid-field"] .sol-pole-cap-s{fill:#9aa8bd;stroke:#64748b;stroke-width:1}
body[data-topic="solenoid-field"] .sol-pole-text{font-family:var(--mono);font-size:22px;font-weight:700;fill:#1d4ed8}
body[data-topic="solenoid-field"] .sol-pole-text-s{font-family:var(--mono);font-size:22px;font-weight:700;fill:#475569}
body[data-topic="solenoid-field"] .part.is-active .sol-pole-cap{fill:#1d4ed8}
body[data-topic="solenoid-field"] .part.is-active .sol-pole-text{fill:#1d4ed8}

/* ============ 动画（纯 CSS · 由 #stage 的 .is-running 驱动） ============ */
/* 合上开关：刀闸落下 */
body[data-topic="solenoid-field"] .sol-switch-blade{transform-box:view-box;transform-origin:660px 668px;
  animation:sol-switch .7s cubic-bezier(.34,1.3,.6,1) .1s both}
@keyframes sol-switch{from{transform:rotate(-42deg)}to{transform:rotate(0deg)}}

/* 电流与磁场出现（开关合上后淡入） */
body[data-topic="solenoid-field"] .sol-flow-wrap{opacity:0;animation:sol-on .5s ease .9s both}
body[data-topic="solenoid-field"] .sol-field-wrap{opacity:0;animation:sol-on .6s ease 1s both}
@keyframes sol-on{from{opacity:0}to{opacity:1}}

/* 电流沿导线与线圈流动（虚线动画） */
body[data-topic="solenoid-field"] .sol-flow{animation:sol-flow-dash 1.1s linear infinite}
body[data-topic="solenoid-field"] .sol-flow-turn{animation:sol-flow-dash 1.4s linear infinite}
@keyframes sol-flow-dash{to{stroke-dashoffset:-26}}

/* 磁力线流动 + 脉动 */
body[data-topic="solenoid-field"] .sol-field{animation:sol-field-dash 2.6s linear infinite,sol-field-pulse 3.2s ease-in-out infinite}
body[data-topic="solenoid-field"] .sol-field-in{animation:sol-field-dash 2.2s linear infinite}
@keyframes sol-field-dash{to{stroke-dashoffset:-32}}
@keyframes sol-field-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* 统一动画开关（引擎给 #stage 加 .is-running 后运行） */
body[data-topic="solenoid-field"] .sol-anim{animation-play-state:paused}
body[data-topic="solenoid-field"] .is-running .sol-anim{animation-play-state:running}

/* ============ 无障碍：减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  body[data-topic="solenoid-field"] .sol-anim{animation:none !important}
  body[data-topic="solenoid-field"] .sol-flow-wrap,
  body[data-topic="solenoid-field"] .sol-field-wrap{opacity:1}
  body[data-topic="solenoid-field"] .sol-switch-blade{transform:rotate(0deg)}
  body[data-topic="solenoid-field"] .sol-flow,
  body[data-topic="solenoid-field"] .sol-flow-turn,
  body[data-topic="solenoid-field"] .sol-field,
  body[data-topic="solenoid-field"] .sol-field-in{stroke-dashoffset:0}
}