/* Public track lists only; the native audio player and admin controls stay unchanged. */
table.track-list {
    width: 100%;
    max-width: 400px;
    table-layout: fixed;
}

.mp3-track {
    margin: 4px 0;
    padding: 6px 10px 6px 6px;
    border: 1px solid #dce3dc;
    border-radius: 12px;
    background: #f9fbf8;
}

.mp3-track table {table-layout: fixed;}
.mp3-track td.mp3_song_image {width: 50px;}

.mp3-track td.mp3_song_title {
    height: auto;
    padding: 4px 10px 4px 0;
    background: none;
    color: #2e3931;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.mp3-track td.mp3_song_playtime {
    width: 42px;
    height: auto;
    background: none;
    color: #68736b;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.mp3-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #344b3a;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 150ms ease;
}

.mp3-play-button:hover {background: #48694f;}
.mp3-play-button:active {background: #26392b;}
.mp3-play-button:focus {outline: 3px solid #82996a; outline-offset: 3px;}
.mp3-play-button:focus:not(:focus-visible) {outline: none;}

.mp3-play-icon {
    display: block;
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .mp3-play-button {transition: none;}
}