/* M07K02 · Magnetic field */
.mag-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:34px; align-items:center; padding:76px 0 54px; scroll-margin-top:calc(var(--header-h) + 22px); }
.mag-hero > * { min-width:0; }
.mag-hero-copy :is(h1,h2) { margin:12px 0 18px; max-width:900px; font-size:clamp(2.5rem,5.2vw,5rem); line-height:.98; letter-spacing:-.052em; }
.mag-hero-copy :is(h1,h2) em { color:var(--accent-2); font-style:normal; }
.mag-hero-copy > p { margin:0; max-width:800px; color:var(--muted); font-size:1.05rem; }
.mag-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.mag-hero-card,.mag-card,.mag-panel,.mag-assumption,.mag-note,.mag-scope-grid article,.mag-reading { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.mag-hero-card { padding:25px; }
.mag-hero-card > span,.mag-card > span,.mag-reading > span,.mag-scope-grid article > span { color:var(--accent-2); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.mag-equation { display:grid; place-items:center; min-height:66px; margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--bg-elevated) 78%,transparent); font-family:var(--em-mono); text-align:center; overflow-wrap:anywhere; }
.mag-equation.large { min-height:88px; font-size:clamp(1.08rem,2vw,1.36rem); }
.mag-mini-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.mag-mini-grid div { min-width:0; padding:10px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--panel-solid) 72%,transparent); }
.mag-mini-grid span { display:block; color:var(--muted); font-size:.68rem; }
.mag-mini-grid strong { display:block; margin-top:4px; font-size:.78rem; overflow-wrap:anywhere; }
.mag-foundation { padding:42px 0 68px; }
.mag-foundation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mag-card { padding:22px; box-shadow:none; }
.mag-card.primary { background:color-mix(in srgb,var(--accent-2) 8%,var(--panel)); border-color:color-mix(in srgb,var(--accent-2) 34%,var(--line)); }
.mag-card h3 { margin:8px 0; font-size:1.08rem; }
.mag-card p { margin:8px 0 0; color:var(--muted); font-size:.92rem; }
.mag-note { display:grid; grid-template-columns:180px minmax(0,1fr); gap:18px; align-items:start; margin-top:14px; padding:20px 22px; box-shadow:none; }
.mag-note strong { color:var(--warm); }
.mag-note p { margin:0; color:var(--muted); }
.mag-lab-section { padding:72px 0 64px; border-block:1px solid var(--line); background:color-mix(in srgb,var(--bg-elevated) 38%,transparent); }
.mag-lab-shell { display:grid; grid-template-columns:292px minmax(0,1fr); gap:14px; align-items:start; }
.mag-controls { position:sticky; top:calc(var(--header-h) + 16px); display:grid; gap:13px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:color-mix(in srgb,var(--bg-elevated) 92%,transparent); box-shadow:var(--shadow); }
.mag-control-head { display:flex; align-items:start; justify-content:space-between; gap:12px; padding-bottom:4px; }
.mag-control-head > div { display:grid; gap:3px; }
.mag-control-head span { color:var(--muted); font-size:.72rem; }
.mag-control-head strong { font-size:.88rem; }
.mag-status { min-width:max-content; padding:4px 7px; border:1px solid var(--line); border-radius:999px; color:var(--accent-2)!important; font-weight:800; letter-spacing:.04em; }
.mag-controls label { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; align-items:center; font-size:.78rem; font-weight:700; }
.mag-controls label > span { min-width:0; }
.mag-controls output { color:var(--accent-2); font-family:var(--em-mono); font-size:.74rem; }
.mag-controls input[type="range"] { grid-column:1/-1; width:100%; min-width:0; accent-color:var(--accent-2); }
.mag-presets { min-width:0; margin:0; padding:10px; border:1px solid var(--line); border-radius:12px; }
.mag-presets legend { padding:0 5px; color:var(--muted); font-size:.7rem; font-weight:700; }
.mag-presets > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.mag-presets button { min-width:0; min-height:36px; padding:5px 6px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text); cursor:pointer; font-size:.68rem; font-weight:750; }
.mag-presets button:hover,.mag-presets button:focus-visible,.mag-presets button.is-active { border-color:color-mix(in srgb,var(--accent-2) 55%,var(--line)); background:color-mix(in srgb,var(--accent-2) 11%,var(--panel)); }
.mag-reset { width:100%; }
.mag-assumption { padding:13px; border-radius:12px; box-shadow:none; }
.mag-assumption strong { font-size:.76rem; }
.mag-assumption p { margin:5px 0 0; color:var(--muted); font-size:.71rem; line-height:1.45; }
.mag-stage { min-width:0; display:grid; gap:14px; }
.mag-panel { min-width:0; padding:16px; box-shadow:none; overflow:hidden; }
.mag-panel-head { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.mag-panel-head > div:first-child { display:grid; gap:3px; }
.mag-panel-head span { color:var(--muted); font-size:.7rem; }
.mag-panel-head strong { font-size:.88rem; }
.mag-readout { text-align:right; }
.mag-readout strong { display:block; color:var(--accent-2); font-family:var(--em-mono); font-size:.82rem; }
.mag-map-svg,.mag-vector-svg,.mag-force-svg,.mag-cut-svg { width:100%; overflow:hidden; contain:paint; }
.mag-axis { stroke:var(--line-strong); stroke-width:1.35; }
.mag-grid-line { stroke:var(--line); stroke-width:1; }
.mag-field-arrow { stroke:var(--accent-2); stroke-width:2.1; stroke-linecap:round; }
.mag-field-head { fill:var(--accent-2); }
.mag-wire { fill:var(--panel-solid); stroke:var(--text); stroke-width:2; }
.mag-wire-dot { fill:var(--danger); }
.mag-wire-cross { stroke:var(--accent); stroke-width:3.2; stroke-linecap:round; }
.mag-wire-zero { stroke:var(--muted); stroke-width:2; }
.mag-svg-label,.mag-vector-label { fill:var(--muted); font-size:15px; font-family:var(--em-mono); }
.mag-wire-label { fill:var(--text); font-size:14px; font-family:var(--em-mono); font-weight:800; }
.mag-svg-label.accent,.mag-vector-label.accent { fill:var(--accent-2); }
.mag-svg-label.warm,.mag-vector-label.warm { fill:var(--warm); }
.mag-probe-ring { fill:var(--panel-solid); stroke:var(--warm); stroke-width:3; }
.mag-probe-vector { stroke:var(--warm); stroke-width:4; stroke-linecap:round; }
.mag-probe-head { fill:var(--warm); }
.mag-component-1 { stroke:var(--accent-2); stroke-width:4; stroke-linecap:round; }
.mag-component-2 { stroke:var(--accent); stroke-width:4; stroke-linecap:round; }
.mag-resultant { stroke:var(--warm); stroke-width:5; stroke-linecap:round; }
.mag-component-head-1 { fill:var(--accent-2); }.mag-component-head-2 { fill:var(--accent); }.mag-resultant-head { fill:var(--warm); }
.mag-force-b { stroke:var(--accent-2); stroke-width:5; stroke-linecap:round; }
.mag-force-b-head { fill:var(--accent-2); }
.mag-force-f { stroke:var(--warm); stroke-width:5; stroke-linecap:round; }
.mag-force-f-head { fill:var(--warm); }
.mag-velocity-ring { fill:var(--panel-solid); stroke:var(--text); stroke-width:2; }
.mag-velocity-dot { fill:var(--text); }
.mag-velocity-cross { stroke:var(--text); stroke-width:3; stroke-linecap:round; }
.mag-cut-x { fill:none; stroke:var(--accent-2); stroke-width:3; }
.mag-cut-y { fill:none; stroke:var(--warm); stroke-width:3; }
.mag-probe-cut { stroke:var(--accent); stroke-width:1.5; stroke-dasharray:5 5; }
.mag-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.mag-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.mag-checks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.mag-metrics div,.mag-checks div { min-width:0; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:var(--panel); }
.mag-metrics span,.mag-checks span { display:block; color:var(--muted); font-size:.69rem; }
.mag-metrics strong,.mag-checks strong { display:block; margin-top:4px; font-family:var(--em-mono); font-size:.78rem; overflow-wrap:anywhere; }
.mag-checks strong { color:var(--accent-3); }
.mag-reading { padding:18px 20px; box-shadow:none; }
.mag-reading h3 { margin:7px 0 5px; font-size:1rem; }
.mag-reading p { margin:0; color:var(--muted); font-size:.88rem; }
.mag-scope { padding:68px 0 46px; }
.mag-scope-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mag-scope-grid article { min-width:0; padding:18px; box-shadow:none; }
.mag-scope-grid strong { display:block; margin-top:6px; }
.mag-scope-grid p { margin:7px 0 0; color:var(--muted); font-size:.84rem; }
@media (max-width:980px) {
  .mag-hero { grid-template-columns:1fr; }
  .mag-lab-shell { grid-template-columns:1fr; }
  .mag-controls { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mag-control-head,.mag-presets,.mag-reset,.mag-assumption { grid-column:1/-1; }
  .mag-scope-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mag-checks { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .mag-hero { padding-top:50px; }
  .mag-hero-copy :is(h1,h2) { font-size:clamp(2.1rem,11vw,3.6rem); overflow-wrap:anywhere; }
  .mag-foundation-grid,.mag-detail-grid,.mag-metrics,.mag-checks,.mag-scope-grid { grid-template-columns:1fr; }
  .mag-note { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .mag-controls { grid-template-columns:1fr; }
  .mag-control-head,.mag-presets,.mag-reset,.mag-assumption { grid-column:auto; }
  .mag-mini-grid { grid-template-columns:1fr; }
  .mag-panel { padding:12px; }
  .mag-panel-head { flex-direction:column; gap:6px; }
  .mag-readout { text-align:left; }
  .mag-map-svg,.mag-vector-svg,.mag-force-svg,.mag-cut-svg { min-height:260px; }
}