/* Reset, document shell, and the pan/zoom canvas surface. */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  overflow: hidden;
}

#wrap {
  position: absolute;
  inset: 44px 0 0 0;
  overflow: hidden;
  cursor: grab;
  /* Keep the wires/cards stacking below self-contained, so it cannot
     compete with the toolbar or the autocomplete. */
  isolation: isolate;
}
#wrap.panning {
  cursor: grabbing;
}
#canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  z-index: 5;
}
#wires-overlay,
#wires-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Member references draw over the cards, the way they always have. */
#wires-overlay {
  z-index: 10;
}
/* Inheritance draws under them: a base reached across the board passes
   behind whatever is in the way instead of over the top of its members. */
#wires-back {
  z-index: 1;
}
#grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
#measure {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  top: -9999px;
  left: -9999px;
  font-family: "IBM Plex Mono", monospace;
}