/* The stage, and the buttons on it.
 *
 * A button carries four display lists and shows one. Which one is a matter of
 * where the pointer is, so it is a stylesheet's job and not the player's — and
 * it can only be done here because buttons are written into the page rather
 * than referenced from the library, where selectors could not reach them.
 *
 * The hit state is the odd one. It is never drawn: it says where the button can
 * be clicked, not what it looks like. So it is the only part that takes pointer
 * events, and it takes them while being completely invisible. `opacity: 0`
 * rather than `visibility: hidden` or `display: none`, because those two stop
 * an element receiving events as well as drawing.
 */

/* On a page the film takes the width it is given and keeps its proportions; the
 * viewBox does the rest. It is not pinned to 775x230 here because a projector,
 * a phone and a slide are all wider or narrower than the screen Flash assumed.
 *
 * The harnesses pin it back with tools/reference.mjs `pinStage`, and they have
 * to: they screenshot .stage and compare it against a render that is 775x230,
 * and a resampled screenshot cannot be compared with anything. That call is the
 * assumption written down, which is better than a CSS value nobody could change.
 */
.stage {
  width: 100%;
  aspect-ratio: 775 / 230;
  background: #fff;
  margin-inline: auto;
}

.stage svg {
  display: block;
  width: 100%;
  height: 100%;
}

.button-state {
  display: none;
  pointer-events: none;
}

.button-state-up { display: inline; }

.button:hover .button-state-up { display: none; }
.button:hover .button-state-over { display: inline; }

.button:active .button-state-over { display: none; }
.button:active .button-state-down { display: inline; }

.button-state-hit {
  display: inline;
  opacity: 0;
  pointer-events: all;
}

.button { cursor: pointer; }

/* A button whose hit state has no records of its own — the film gives some of
 * them none — still has to be clickable, so its resting art takes the pointer.
 */
.button:not(:has(.button-state-hit > *)) .button-state-up { pointer-events: all; }

/* The transport, under the stage. It is not part of the film: the film has a
 * playhead and fourteen buttons, and that is what a viewer gets. Stopping it and
 * stepping through it is for whoever is building it.
 */
.transport {
  width: 775px;
  margin-top: 12px;
  display: grid;
  gap: 10px;
  font: 13px/1.5 system-ui, sans-serif;
  color: #222;
}
.transport:empty { display: none; }
.transport-row { display: flex; align-items: center; gap: 10px; }
.transport-row label { min-width: 88px; color: #555; }
.transport input[type=range] { flex: 1; }
.transport button,
.transport select {
  font: inherit;
  padding: 4px 10px;
  border: 1px solid #bbb;
  background: #fff;
  border-radius: 4px;
}
.transport button { cursor: pointer; }
.transport button:hover { background: #f0f0f0; }
.transport select { flex: 1; }
.transport-readout { font-variant-numeric: tabular-nums; min-width: 190px; }
.transport-warn { color: #a00; }