/* Page level layout: the plan sheet beside the 3D view. */

#app { height: 100%; }

.app {
  display: grid;
  grid-template-columns: var(--plan-width) minmax(0, 1fr);
  height: 100%;
}

.app__plan {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--c-ink-line);
}

.viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--c-ink);
}

.viewport__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.viewport__canvas:active { cursor: grabbing; }

/* ?ui=0 shows the model and nothing else, for screenshots. */
.app--bare { grid-template-columns: minmax(0, 1fr); }
.app--bare .app__plan,
.app--bare .top-bar,
.app--bare .hud { display: none; }

@media (max-width: 860px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) min(44vh, 380px);
  }
  .app__plan {
    grid-row: 2;
    border-right: 0;
    border-top: 1px solid var(--c-ink-line);
  }
  .viewport { grid-row: 1; }
}