/* magnet_field.css — compass-needle field grid drawn by viz/magnet_field.js (SVG + mode buttons). */

.mf { display: flex; flex-direction: column; gap: 0.7rem; }
.mf-bar { stroke: rgba(0, 0, 0, 0.3); stroke-width: 0.8; }
.mf-plbl { fill: #fff; font-size: 13px; font-weight: 800; }
.mf-nstem { stroke: #f87171; stroke-width: 1.8; stroke-linecap: round; }
.mf-nhead { fill: #f87171; }
.mf-neutral circle { fill: none; stroke: #34d399; stroke-width: 1.4; stroke-dasharray: 2 2; }
.mf-neutral line { stroke: #34d399; stroke-width: 1.6; stroke-linecap: round; }
.mf-neutral text { fill: #6ee7b7; font-size: 9px; font-weight: 700; }

.mf-modes { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.mf-mode { cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; color: #cbd5e1; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s ease; }
.mf-mode:hover { background: rgba(255, 255, 255, 0.09); }
.mf-mode.mf-on { color: #07121d; background: #f87171; border-color: #f87171; }