.repertoire-controls { margin: 1rem 0 1.4rem; }
.repertoire-control-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.repertoire-control-row select { width: auto; max-width: 100%; min-width: 8rem; margin: 0; }
.repertoire-control-row .button { margin: 0; white-space: nowrap; }
.repertoire-help { font-size: .85rem; margin: .55rem 0 0; }
.repertoire-genre-heading { font-size: 1rem; margin: 1.4rem 0 .35rem; padding-bottom: .4rem; border-bottom: 1px solid var(--color-border, #ddd); }
.repertoire-order-note { font-size: .8rem; font-weight: 400; margin-left: .6rem; opacity: .75; white-space: nowrap; }
.repertoire-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
    .repertoire-control-row select { flex: 1 1 9rem; min-width: 0; }
    .repertoire-control-row > label:not(.repertoire-visually-hidden) { flex-basis: 100%; }
    .repertoire-order-note { display: block; margin: .2rem 0 0; white-space: normal; }
}
@media print { .repertoire-controls { display: none; } }