/* Robot Arm — page chrome. base.css handles the text, buttons and cards;
   this file adds the dark workspace the arm moves in. */

main { max-width: 940px; }

.lede { color: var(--soft); margin-bottom: 20px; }

.panel {
  background: #12151b;
  border-radius: var(--radius);
  padding: 10px 10px 0;
  box-shadow: var(--shadow);
  overflow: hidden;
}

canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  cursor: crosshair;
  touch-action: none;
}

.readout {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  padding: 10px 6px 12px;
  font-size: 13px;
  color: #6d7688;
}
.readout b {
  color: #d9e2f0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: 4px;
}
.warn { color: #e0a458; }
.hidden { visibility: hidden; }

.controls { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 22px; }
.knobs label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  font-size: 14px;
  color: var(--soft);
}
.knobs input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.knobs span { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.note { font-size: 13px; margin-top: 18px; }