.metal-workspace {
  --metal-blue: #266b91;
  --metal-orange: #ad6038;
}
.metal-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: end;
  margin: 1rem 0;
}
.metal-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 21rem;
}
.metal-controls label:has(input[type="checkbox"]) {
  display: block;
  align-self: center;
}
.metal-controls input[type="number"] {
  width: 12rem;
}
.metal-controls input[type="range"] {
  width: 18rem;
}
.metal-controls select {
  min-height: 2.8rem;
}
.metal-apparatus-wrap,
.metal-graph-wrap,
.metal-table-wrap {
  overflow-x: auto;
  margin: 1.4rem 0;
}
.metal-apparatus-wrap svg {
  display: block;
  width: 100%;
  min-width: 820px;
  max-width: 1200px;
}
.metal-graph-wrap svg {
  display: block;
  width: 100%;
  min-width: 750px;
}
.metal-apparatus-wrap text,
.metal-graph-wrap text {
  font-family: system-ui, sans-serif;
  font-size: 17px;
  fill: #243f4d;
}
.metal-apparatus-wrap .metal-heading {
  font-size: 22px;
  font-weight: 650;
}
.metal-apparatus-wrap .metal-digits {
  font-family: ui-monospace, monospace;
  font-size: 42px;
  fill: #19391f;
}
.metal-table-wrap table {
  border-collapse: collapse;
  min-width: 100%;
  font-variant-numeric: tabular-nums;
}
.metal-table-wrap th,
.metal-table-wrap td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid #d6e0e6;
  text-align: left;
  white-space: nowrap;
}
.metal-table-wrap th {
  background: #eff4f7;
}
.metal-table-wrap input {
  min-width: 9rem;
  width: 100%;
  max-width: 14rem;
}
.metal-note {
  padding: 1rem;
  border-left: 4px solid #b47a3b;
  background: #fcf5e9;
}
.metal-corrected {
  color: #854919;
  background: #fff4de;
}
.metal-accepted {
  color: #216743;
  background: #eef8ef;
}
.metal-minor {
  stroke: #e4ebef;
  stroke-width: 0.6;
}
.metal-major {
  stroke: #c5d3dc;
  stroke-width: 1;
}
.metal-fit {
  stroke: #365463;
  stroke-width: 2;
  fill: none;
}
.metal-errorbar {
  stroke: #5d7380;
  stroke-width: 1.4;
  fill: none;
}
.metal-heating-point {
  fill: #236b92;
  stroke: #fff;
  stroke-width: 0.7;
}
.metal-cooling-point {
  fill: #ae5b32;
  stroke: #fff;
  stroke-width: 0.7;
}
.metal-handle {
  cursor: pointer;
}
.metal-handle:focus {
  outline: none;
}
.metal-handle:focus rect {
  stroke: #125da3;
  stroke-width: 4;
}
.metal-controls input:focus-visible,
.metal-controls select:focus-visible {
  outline: 3px solid #a6cbed;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .metal-controls {
    display: block;
  }
  .metal-controls label,
  .metal-controls button {
    margin: 0.7rem 0;
  }
  .metal-controls input[type="range"] {
    max-width: 100%;
  }
}

.metal-physical { cursor: grab; touch-action: none; }
.metal-physical:focus { outline: none; stroke: #165fba; stroke-width: 4; fill: #3a85c515; }
.metal-physical[aria-disabled="true"] { cursor: not-allowed; }