/* The speaker display. The same component is used full screen, as the live
   preview in the control room and as the demo on the landing page, so every
   size is relative to the box it sits in (container units). */
.stage {
  --phase: var(--go);
  position: relative; overflow: hidden;
  container-type: size;
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center;
  color: var(--stage-ink); background: var(--stage);
  font-family: var(--font);
  transition: background-color .4s ease;
}
.stage[data-phase="wrap"] { --phase: var(--wrap); }
.stage[data-phase="over"] { --phase: var(--stop); background: #4a1013; }
.stage[data-phase="idle"], .stage[data-phase="ready"] { --phase: #6d7a90; }

.stage-top {
  justify-self: stretch; display: flex; justify-content: space-between; align-items: center;
  padding: 3cqh 4cqw 0; min-height: 9cqh;
  font-size: max(11px, 3.2cqh); color: rgba(243, 246, 250, .62);
}
.stage-clock { direction: ltr; font-family: var(--digits); font-weight: 500; letter-spacing: .02em; }
.stage-state { display: inline-flex; align-items: center; gap: .5em; }
.stage-state::before {
  content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--phase);
}

.stage-body { align-self: center; display: grid; justify-items: center; width: 100%; padding-inline: 4cqw; }
.stage-title {
  max-width: 100%; text-align: center; font-weight: 600;
  font-size: max(14px, 7.5cqh); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stage-time {
  direction: ltr; display: flex; justify-content: center; align-items: baseline;
  font-family: var(--digits); font-weight: 600; line-height: .92;
  font-size: min(36cqw, 52cqh);
  color: var(--stage-ink);
  font-variant-numeric: tabular-nums;
}
.stage[data-phase="wrap"] .stage-time { color: var(--wrap); }
.stage[data-phase="over"] .stage-time { color: #fff; }
.stage[data-phase="idle"] .stage-time { color: rgba(243, 246, 250, .28); }
.stage-time .d { display: inline-block; width: .52em; text-align: center; }
.stage-time .sep { display: inline-block; width: .26em; text-align: center; transform: translateY(-.06em); }
.stage-time .sign { display: inline-block; width: .42em; text-align: center; }
.stage[data-paused="true"] .stage-time { opacity: .55; }
.stage[data-message="true"] .stage-time { font-size: min(28cqw, 38cqh); }

.stage-msg {
  justify-self: stretch; margin: 0 4cqw 2cqh;
  padding: 1.6cqh 3cqw; text-align: center;
  font-weight: 600; font-size: max(14px, 7cqh); line-height: 1.2;
  color: var(--ink); background: var(--wrap); border-radius: 1.2cqh;
}
.stage-next {
  justify-self: stretch; min-height: 7cqh; padding: 0 4cqw 2.5cqh;
  text-align: center; font-size: max(11px, 3.6cqh); color: rgba(243, 246, 250, .62);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stage-bar { position: absolute; inset-inline: 0; bottom: 0; height: max(4px, 1.4cqh); background: rgba(255, 255, 255, .08); }
.stage-bar > i { display: block; height: 100%; width: 100%; background: var(--phase); margin-inline-start: auto; }

.stage-offline {
  position: absolute; inset-inline-start: 4cqw; bottom: 4cqh;
  font-size: max(10px, 2.6cqh); color: rgba(243, 246, 250, .5);
}

@media (prefers-reduced-motion: no-preference) {
  .stage[data-phase="over"] .stage-time { animation: overtime 1s steps(2, jump-none) infinite; }
}
@keyframes overtime { 50% { opacity: .55; } }