.flux-linkage-workspace {
  --flux-panel-border: #cbd5e1;
  --flux-panel-bg: #f8fafc;
}

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

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

.flux-linkage-apparatus {
  display: block;
  width: 100%;
  min-height: 19rem;
}

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

.flux-north { fill: #fee2e2; }
.flux-south { fill: #dbeafe; }
.flux-magnet-label { fill: #0f172a; font-size: 2rem; font-weight: 800; }
.flux-field-line { stroke: #0f766e; stroke-width: 4; }
.flux-field-head { fill: #0f766e; }
.flux-field-label { fill: #0f766e; font-weight: 800; }
.flux-coil ellipse { fill: none; stroke: #7c3aed; stroke-width: 6; }
.flux-coil-axis { stroke: #64748b; stroke-width: 2; stroke-dasharray: 6 5; }
.flux-normal { stroke: #be123c; stroke-width: 3; }
.flux-normal-head { fill: #be123c; }
.flux-angle-label { fill: #475569; font-size: 0.95rem; font-weight: 700; }
.flux-lead { fill: none; stroke: #334155; stroke-width: 3; }
.flux-scope { fill: #cbd5e1; stroke: #475569; stroke-width: 2; }
.flux-scope-screen { fill: #111827; stroke: #475569; stroke-width: 1.5; }
.flux-scope-trace { fill: none; stroke: #86efac; stroke-width: 2.5; }
.flux-scope-knob { fill: #64748b; }

.flux-linkage-controls-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

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

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

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

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

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

.flux-linkage-stage {
  margin: 1rem 0;
}

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

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

.flux-linkage-workspace .simulation-corrected {
  background: #fff5cc !important;
  box-shadow: inset 0 0 0 2px #bb7f00;
}

.flux-linkage-workspace .simulation-correction-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: #6f4b00;
}

.flux-linkage-workspace .simulation-graph-grid-minor { stroke: #e3e7e9; stroke-width: 0.65; }
.flux-linkage-workspace .simulation-graph-grid-major { stroke: #b7c0c5; stroke-width: 1.15; }
.flux-linkage-workspace .simulation-graph-axis { stroke: #1f2937; stroke-width: 2; }
.flux-linkage-workspace .simulation-graph-fit { stroke: #2563eb; stroke-width: 2.5; }
.flux-linkage-workspace .simulation-graph-point { fill: #111827; }
.flux-linkage-workspace .simulation-graph-tick { fill: #475569; font-size: 0.82rem; }
.flux-linkage-workspace .simulation-graph-label { fill: #0f172a; font-size: 0.95rem; font-weight: 700; }
.flux-linkage-workspace .simulation-graph-empty { fill: #64748b; font-size: 0.95rem; }

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

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

.flux-linkage-workspace-actions {
  margin-top: 1.25rem;
}

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

  .flux-linkage-apparatus {
    min-height: 15rem;
  }

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

.flux-angle-handle { cursor: grab; touch-action: none; }
.flux-angle-handle:active { cursor: grabbing; }
.flux-angle-handle:focus-visible { outline: 3px solid #2563eb; outline-offset: 5px; }
.flux-angle-handle[aria-disabled="true"] { cursor: wait; opacity: .6; }
.flux-scale-label { fill: #475569; font-size: 12px; }