.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.section-heading p {
    margin-bottom: 0;
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.compact {
    gap: 12px;
}

.two-column .card {
    min-width: 0;
}

.performance-card {
    min-width: 0;
}

#panel-play .table-scroll {
    margin-top: 20px;
}

#midi-summary {
    overflow-wrap: anywhere;
}

.play-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.play-controls > .button {
    margin: 0;
}

.tempo-controls {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.tempo-controls label {
    margin: 0;
}

.tempo-controls input {
    width: 130px;
}

#tempo-info {
    align-self: center;
    font-size: 12px;
}

/* Media-player timeline: elapsed, scrubber and total stay on one row at any width. */
.play-timeline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    font: 12px var(--mono);
    color: var(--text-soft);
    white-space: nowrap;
}

#play-progress {
    flex: 1;
    width: auto;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
}

.track-table td {
    vertical-align: middle;
}

.track-table td:nth-child(2) {
    min-width: 120px;
    max-width: 360px;
    overflow-wrap: anywhere;
}

.track-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    accent-color: var(--primary);
}

.track-select-all {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: inherit;
    color: inherit;
}

.track-table select {
    width: auto;
    min-width: 80px;
}

.track-table td:nth-child(5) {
    min-width: 140px;
}

.track-table input[type="number"] {
    width: 110px;
}

.track-table input:disabled,
.track-table select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.play-hint {
    margin: 18px 0 0;
    font-size: 11px;
}