.magnetic-force-workspace {
  --magnetic-panel-border: #cbd5e1;
  --magnetic-panel-bg: #f8fafc;
  --magnetic-display-bg: #111827;
  --magnetic-display-fg: #d1fae5;
}

.magnetic-force-bench {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.8fr);
  gap: 1.25rem;
  align-items: stretch;
  margin: 1.25rem 0;
}

.magnetic-force-apparatus-panel,
.magnetic-force-controls-panel,
.magnetic-force-stage {
  border: 1px solid var(--magnetic-panel-border);
  border-radius: 0.75rem;
  background: var(--magnetic-panel-bg);
  padding: 1rem;
}

.magnetic-force-apparatus {
  display: block;
  width: 100%;
  min-height: 18rem;
}

.magnet-pole {
  stroke: #334155;
  stroke-width: 3;
}

.magnet-north { fill: #fee2e2; }
.magnet-south { fill: #dbeafe; }
.magnet-label { font-size: 2rem; font-weight: 700; fill: #0f172a; }
.magnetic-wire {
  stroke: #713f12;
  stroke-width: 6;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 320px 122px;

  vector-effect: non-scaling-stroke;
}
.wire-terminal { display: none; }
.field-arrow { stroke: #0f766e; stroke-width: 4; }
.field-arrow-head { fill: #0f766e; }
.balance-base { fill: #cbd5e1; stroke: #475569; stroke-width: 2; }
.balance-pan { fill: #94a3b8; stroke: #475569; stroke-width: 2; }
.balance-display { fill: var(--magnetic-display-bg); }
.balance-display-text { fill: var(--magnetic-display-fg); font: 700 1.05rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.apparatus-caption { fill: #475569; font-size: 0.9rem; }

.magnetic-force-controls-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.magnetic-force-controls-panel select,
.magnetic-analysis-form input,
.magnetic-force-stage input[type="text"] {
  max-width: 18rem;
}

.magnetic-instrument-readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.5rem 0;
}

.magnetic-instrument-readouts div {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid #dbe2ea;
  border-radius: 0.55rem;
  background: #fff;
}

.magnetic-instrument-readouts dt {
  font-size: 0.78rem;
  color: #475569;
}

.magnetic-instrument-readouts dd {
  margin: 0.25rem 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.magnetic-force-stage {
  margin: 1rem 0;
}

.magnetic-graph-frame {
  overflow-x: auto;
  margin: 1rem 0;
}

.magnetic-graph-frame svg {
  display: block;
  width: 100%;
  min-width: 34rem;
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 0.5rem;
}

.magnetic-analysis-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}

.magnetic-analysis-form label {
  flex-basis: 100%;
}

.magnetic-force-workspace-actions {
  margin-top: 1.25rem;
}

@media (max-width: 800px) {
  .magnetic-force-bench {
    grid-template-columns: 1fr;
  }

  .magnetic-force-apparatus {
    min-height: 14rem;
  }

  .magnetic-instrument-readouts {
    grid-template-columns: 1fr;
  }
}

.magnetic-apparatus-control { cursor: grab; touch-action: none; }
.magnetic-apparatus-control:active { cursor: grabbing; }
.magnetic-apparatus-control:focus-visible { outline: 3px solid #2563eb; outline-offset: 5px; }
.magnetic-apparatus-control[aria-disabled="true"] { cursor: wait; opacity: .6; }