/* Short format labels must keep their words intact. When text is enlarged,
   move a whole filter to the next row instead of squeezing its label. */
@media(max-width:767px) {
  body.drksp-design .drks-entry-tools .drkc-formats {
    display:flex; flex-wrap:wrap; width:100%;
  }
  body.drksp-design .drks-entry-tools .drkc-formats a {
    flex:1 0 auto; width:auto; white-space:normal;
    overflow-wrap:normal; word-break:normal; padding:8px 6px;
  }
  body.drksp-design.drki-icons .drks-entry-tools .drkc-formats a::before {
    display:none!important; content:none;
  }
}

/* The range input can shrink; the one-word label and numeric value cannot. */
body.drku-system .drkm.drkm-stage4 .drkm-channel-volume>span,
body.drku-system .drkm.drkm-stage4 .drkm-channel-volume>output {
  flex:none; overflow-wrap:normal; white-space:nowrap;
}
body.drku-system .drkm.drkm-stage4 .drkm-channel-volume>input { min-width:0; }

/* Give long recording names the available width on the narrowest phones.
   Artwork is decorative here; the selected-state icon remains visible. */
@media(max-width:360px) {
  body.drku-system .drkm.drkm-stage4 button.drkm-track {
    /* The older artwork layer pins its three columns with !important. */
    grid-template-columns:minmax(0,1fr) 18px!important;
  }
  body.drku-system .drkm.drkm-stage4 button.drkm-track>img { display:none; }
}