/* Barra del escenario, zoom e indicador de movimiento. */
.badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: #ffffffbb;
  padding: 6px 10px;
  border-radius: 20px;
  color: #7290ac;
}
.zoom-controls {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #ffffffec;
  border: 1px solid #dbe9f4;
  border-radius: 13px;
  padding: 4px;
}
.zoom-controls button {
  border: 0;
  background: var(--ad-soft-keep);
  color: #4d78a5;
  border-radius: 8px;
  width: 31px;
  height: 29px;
  font-size: calc(22px * var(--text-scale, 1));
  line-height: 1;
  touch-action: manipulation;
}
.zoom-controls output {
  font-size: calc(11px * var(--text-scale, 1));
  color: #7790a7;
  width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.badge {
  max-width: calc(100% - 135px);
  font-size: calc(10px * var(--text-scale, 1));
  white-space: normal;
}
/* One aligned tool row; the practice exercise remains a separate transient card. */
.stage-toolbar {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-toolbar .badge {
  position: static;
  display: flex;
  align-items: center;
  width: auto;
  max-width: 200px;
  min-width: 0;
  height: 33px;
  padding: 4px 10px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #d9e7f1;
  border-radius: 11px;
  background: #ffffffd9;
}
.stage-toolbar .zoom-controls,
.stage-toolbar .mobile-zoom {
  position: static;
  margin-left: auto;
  flex: none;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .playground > .zoom-controls {
    display: none;
  }

  .badge {
    top: 7px;
    left: 8px;
    padding: 3px 7px;
    font-size: calc(10px * var(--text-scale, 1));
    background: #ffffffa8;
  }

  .playground > .mobile-zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 112px;
    height: 33px;
    min-height: 33px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-line-header);
    border-radius: 11px;
    background: #ffffffed;
  }

  .mobile-zoom button {
    width: 31px;
    height: 31px;
    min-height: 31px;
    font-size: calc(18px * var(--text-scale, 1));
    padding: 0;
    border: 0;
    border-radius: 9px;
  }

  .mobile-zoom div {
    flex: 1;
    text-align: center;
  }

  .mobile-zoom span {
    display: none;
  }

  .mobile-zoom output {
    font-size: calc(11px * var(--text-scale, 1));
    color: #416b8e;
    font-weight: bold;
  }

  .stage-toolbar {
    top: 8px;
    left: 8px;
    right: 8px;
    gap: 5px;
  }

  .stage-toolbar .badge {
    height: 33px;
    padding: 3px 6px;
    font-size: calc(10px * var(--text-scale, 1));
  }

  .stage-toolbar .zoom-controls {
    display: none;
  }

  .stage-toolbar .mobile-zoom {
    align-items: center;
    border: 1px solid var(--color-line-header);
    border-radius: 11px;
    background: #ffffffed;
  }
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .zoom-controls button {
    width: 36px;
    height: 36px;
  }

  .zoom-controls output {
    font-size: calc(12px * var(--text-scale, 1));
  }
}
@media (max-width: 850px) and (orientation: portrait) and (min-height: 800px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) and (min-height: 800px) {
  .stage-toolbar .mobile-zoom {
    width: 124px;
    height: 40px;
    min-height: 40px;
  }

  .stage-toolbar .mobile-zoom button {
    width: 36px;
    height: 36px;
    min-height: 36px;
    font-size: calc(20px * var(--text-scale, 1));
  }

  .stage-toolbar .mobile-zoom output {
    font-size: calc(12px * var(--text-scale, 1));
  }

  .stage-toolbar .badge {
    height: 40px;
  }
}
/* The motion status is a label, not a field: a borderless pill led by the pace icon. */
.stage-toolbar #motion-status {
  flex: none;
  gap: 6px;
  width: auto;
  max-width: min(260px, 58%);
  padding: 4px 12px 4px 8px;
  border: 0;
  border-radius: 999px;
  background: #ffffffb8;
  color: var(--ad-ink-blue);
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 600;
  box-shadow: none;
}
#motion-status::before {
  content: "🚶";
  flex: none;
  font-size: calc(16px * var(--text-scale, 1));
}
#motion-status[data-pace="jog"]::before {
  content: "🏃";
}
#motion-status[data-pace="run"]::before {
  content: "⚡";
}
html[data-appearance="dark"] .stage-toolbar #motion-status {
  background: #21394fb8;
  color: var(--ad-ink-blue);
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .stage-toolbar {
    left: 16px;
    right: 16px;
    top: 14px;
    gap: 12px;
  }
}
.stage-toolbar :is(.zoom-controls, .mobile-zoom) {
  border: 1px solid var(--ad-line);
  background: var(--ad-surface);
  box-shadow: 0 2px 0 #dce9f3;
}
.stage-toolbar :is(.zoom-controls, .mobile-zoom) button {
  appearance: none;
  display: grid;
  place-items: center;
  border: 1px solid #b6d3ef;
  background: var(--ad-soft-keep);
  color: #3173b5;
  box-shadow: 0 2px 0 var(--ad-edge);
  font-weight: 700;
}
.stage-toolbar :is(.zoom-controls, .mobile-zoom) button:disabled {
  opacity: 0.42;
  box-shadow: none;
}
.stage-toolbar :is(.zoom-controls, .mobile-zoom) :is(output, .zoom-readout) {
  color: var(--ad-ink-blue);
  font-weight: 700;
}
html[data-appearance="dark"] .stage-toolbar :is(.zoom-controls, .mobile-zoom) {
  background-color: #2a465e;
  color: #d8ebfc;
  border-color: #6c91b4;
  box-shadow: 0 2px 0 #172d3e;
}
html[data-appearance="dark"] .stage-toolbar :is(.zoom-controls, .mobile-zoom) button {
  background: #365978;
  color: #e6f2ff;
  border-color: #7297bc;
  box-shadow: 0 2px 0 var(--ad-edge);
}
html[data-appearance="dark"]
  .stage-toolbar
  :is(.zoom-controls, .mobile-zoom)
  :is(output, .zoom-readout) {
  color: var(--ad-ink-blue);
}
/* Leave room for the keys' bevel inside the size control, including on phones. */
.stage-toolbar :is(.zoom-controls, .mobile-zoom) {
  height: auto;
  min-height: 0;
  width: auto;
  padding: 4px 5px 7px;
  gap: 5px;
  align-items: center;
  border-radius: 15px;
}
.stage-toolbar :is(.zoom-controls, .mobile-zoom) button {
  flex: none;
  padding: 0;
  line-height: 1;
  border-radius: 10px;
}
.stage-toolbar :is(.zoom-controls, .mobile-zoom) :is(output, .zoom-readout) {
  display: block;
  min-width: 40px;
  width: auto;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stage-toolbar .mobile-zoom div {
  flex: none;
}
.stage-toolbar :is(.zoom-controls, .mobile-zoom) button:not(:disabled):active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 #ffffff60,
    0 1px 0 var(--tile-base);
}
/* Keep the touch zoom keys, percentage and focus ring inside one stable control. */
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .stage-toolbar .mobile-zoom {
    display: flex;
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 4px 6px 6px;
    gap: 8px;
  }

  .stage-toolbar .mobile-zoom button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex: 0 0 32px;
  }

  .stage-toolbar .mobile-zoom div {
    flex: 0 0 auto;
    min-width: 44px;
  }

  .stage-toolbar .mobile-zoom .zoom-readout {
    min-width: 44px;
    white-space: nowrap;
    line-height: 1.2;
  }

  .stage-toolbar .mobile-zoom button:focus-visible {
    outline: 2px solid #9b720c;
    outline-offset: 1px;
  }
}