/* SMACSS Layout: the major regions. The viz stage fills the viewport and layers
   the p5 canvas beneath the dock and the top bar (explicit stacking, not DOM
   order). */
.l-viz-root {
  position: relative;
  /* Clips what is parked outside it, the closed drawer above all: a box reaching
     past the stage would widen the page, which a mobile browser answers by
     laying the whole page out wider and never taking that back. */
  overflow: hidden;
  width: 100vw;
  /* The dynamic unit, so the bars a phone browser lays over the foot of the
     screen do not cut the picture off. */
  height: 100dvh;
}

.l-viz-root canvas {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  touch-action: none;
}

/* The bar across the top carries the station search in the middle of the screen
   and the clock at its right end. The two outer columns are of one width, so the
   search stays centred on the screen; where the screen is too narrow for both,
   the middle column gives way rather than the bar overflowing. The bar stands
   above the dock, the instrumentation editor above both. */
.l-topbar {
  position: absolute;
  z-index: 14;
  top: calc(var(--space-m) + env(safe-area-inset-top));
  left: calc(var(--space-m) + env(safe-area-inset-left));
  right: calc(var(--space-m) + env(safe-area-inset-right));
  display: grid;
  grid-template-columns: 1fr minmax(0, max-content) 1fr;
  gap: var(--space-m);
  align-items: center;
}