/* The spectrum scope and waterfall. The panel decides where the slot sits
   and how big it is; this only fills it. The min-height is a floor so the
   scope is never drawn into a box of nothing while the panel is unstyled. */
.radio [data-scope] {
  position: relative;
  /* Width only: a size container would ignore its content's height, and
     the panel lets the screen decide this slot's height. */
  container-type: inline-size;
  min-height: 9rem;
  overflow: hidden;
  background: #03050f;
  font-family: var(--font-mono, monospace);
}

/* Inside the radio's screen the panel sizes the slot, and a floor here would
   push the waterfall out of the bottom of a phone-sized screen. */
.radio-screen [data-scope] { min-height: 0; }

.scope-canvas {
  display: block;
  cursor: crosshair;
  /* A tap tunes; the page must not also scroll or zoom on it. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* The SPAN key, laid on the screen the way the 7300's touch keys are. Its
   top is set by scope.js, just under the trace, clear of every label. */
.scope-span {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(160, 190, 255, 0.55);
  border-radius: 2px;
  background: rgba(10, 18, 50, 0.85);
  color: #dfe8ff;
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.4;
  cursor: pointer;
}

/* Held by the instructor's override, or the radio off: shown locked like
   the panel's own keys (panel.css .is-held). */
.scope-span:disabled { opacity: 0.45; cursor: not-allowed; }

.scope-span:focus-visible {
  outline: 2px solid #ffe14a;
  outline-offset: 1px;
}

/* On a phone the scope is a strip a few dozen pixels high; a full-size SPAN
   key would cover half the waterfall. */
@container (max-width: 260px) {
  .scope-span {
    right: 1px;
    padding: 0 0.2rem;
    font-size: 0.55rem;
    line-height: 1.3;
  }
}