/* Five transport actions share the existing transport footprint. */
.recorder-actions > .recorder-transport {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.recorder-actions > .recorder-transport .recorder-button {
  min-width: 0;
  width: 100%;
  padding-inline: 8px;
}

.track-edit-icon,
.track-follow-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control-rack.is-track-editing,
.track-row.is-control-editing {
  border-color: #48c9ff;
}

#editTrackButton {
  scroll-margin-block: 120px;
}

#followTrackButton.is-active {
  color: #d4f254;
  border-color: #d4f254;
  box-shadow: 0 0 0 2px #d4f25420;
}

.control-rack.is-track-following,
.track-row.is-followed::before {
  border-color: #d4f254;
}

.control-rack.is-track-following :is(input, [role="slider"], select) {
  cursor: default;
}

.control-rack.is-follow-gap :is(.slider-grid, .knob-grid) {
  opacity: 0.5;
}

.track-edit-error {
  margin: 0;
  color: #ffa6ae;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}

#clipMultiSelect.is-active {
  border-color: #d4f254;
  color: #d4f254;
}

.track-row .track-clip.is-edit-selected {
  border-color: rgba(255, 238, 72, 0.82);
  outline: none;
}

@media (min-width: 1221px) {
  .recorder-actions > .recorder-transport {
    width: var(--transport-group-width);
  }
}

@media (min-width: 761px) and (max-width: 960px) {
  .recorder-actions > .recorder-transport { width: 100%; }
}

@media (max-width: 620px) {
  /* The shared bottom bar replaces the older floating in-panel transport. */
  body.is-touch-input .recorder-actions > .recorder-transport {
    position: static;
    inset: auto;
    z-index: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
}