html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  position: fixed;
  inset: 0;
}

#spectrogram,
#availability-overlay {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
}

#spectrogram {
  background: #000;
  touch-action: none;
  cursor: crosshair;
}

#availability-overlay {
  pointer-events: none;
}

#frequency-ruler {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px;
  z-index: 4;
  pointer-events: none;
}

#status,
#debug {
  position: fixed;
  z-index: 6;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  margin: 0;
  padding: 5px 7px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.46);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: none;
  white-space: pre-wrap;
}

#status[data-state="ready"] { display: none; }
#status[data-state="error"] { color: #fff; }

#debug {
  top: max(58px, env(safe-area-inset-top));
  bottom: auto;
  max-width: min(92vw, 720px);
}