/* The viewport: a WebGL2 field canvas below, a Canvas2D CAD overlay above,
   a vertical toolbar on the left, a status line at the bottom. */

.viewport-panel { display: flex; flex-direction: row; overflow: hidden; background: #111317; }
.viewport-tools { display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--bg-2); border-right: 1px solid var(--line); flex: none; }
.viewport-tools .button { width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.viewport-tools .gap { height: 0.5rem; }
.viewport-grid { position: absolute; left: 0.6rem; top: 0.6rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.4rem; background: #0009; border: 1px solid var(--line); border-radius: 5px; font: 12px var(--font); color: var(--text-2); }
.viewport-grid label { display: inline-flex; align-items: center; gap: 0.3rem; }
.viewport-grid input { width: 4rem; font: 12px var(--mono); padding: 1px 4px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 3px; }
.viewport-stage { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; cursor: crosshair; }
.viewport-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viewport-stage canvas.overlay { pointer-events: none; }
.viewport-status {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 1rem; padding: 0.15rem 0.6rem;
  background: #0009; color: var(--text-2); font: 11px var(--mono); pointer-events: none;
}
.viewport-status .hint { color: var(--text); }
.viewport-legend { position: absolute; right: 0.6rem; top: 0.6rem; width: 12px; height: 140px; border: 1px solid var(--line); pointer-events: none; }
.viewport-legend-labels { position: absolute; right: 1.6rem; top: 0.4rem; height: 150px; display: flex; flex-direction: column; justify-content: space-between; color: var(--text-2); font: 10px var(--mono); pointer-events: none; text-align: right; }