.kp-audio-track {
    --kp-audio-track-cover: 48px;
    display: grid;
    grid-template-columns: var(--kp-audio-track-cover) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--kp-space-2);
    min-inline-size: 0;
    padding: var(--kp-space-1) var(--kp-space-2);
    border-radius: var(--kp-radius-md);
}

.kp-audio-track.is-current {
    background: color-mix(in srgb, var(--kp-accent) 9%, var(--kp-color-surface));
}

.kp-audio-track__cover {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--kp-audio-track-cover);
    block-size: var(--kp-audio-track-cover);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--kp-color-border);
    border-radius: var(--kp-radius-md);
    background: var(--n-accent-soft, var(--kp-color-surface-muted));
    color: var(--n-accent-ink, var(--kp-accent));
}

button.kp-audio-track__cover { cursor: pointer; }
.kp-audio-track__cover img, .kp-audio-track__glyph {
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
}

.kp-audio-track__cover img { object-fit: cover; }
.kp-audio-track__glyph, .kp-audio-track__glyph > span { display: grid; place-items: center; }
.kp-audio-track__glyph { position: relative; }
.kp-audio-track__cover img + .kp-audio-track__glyph { background: #0007; color: #fff; }
.kp-audio-track__cover:not([aria-pressed="true"]) .kp-audio-track__pause,
.kp-audio-track__cover[aria-pressed="true"] .kp-audio-track__play { display: none; }
button.kp-audio-track__cover:hover, .kp-audio-track.is-current .kp-audio-track__cover { border-color: var(--kp-accent); }
.kp-audio-track :is(a, button, summary):focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; }

.kp-audio-track__meta { min-inline-size: 0; }
.kp-audio-track__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--kp-color-text);
    font-size: var(--kp-text-md);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.kp-audio-track__byline {
    display: flex;
    align-items: baseline;
    gap: var(--kp-space-2);
    margin-block-start: 2px;
    color: var(--kp-color-text-muted);
    font-size: var(--kp-text-sm);
}

.kp-audio-track__byline a {
    min-inline-size: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kp-audio-track__meta a:hover { text-decoration: underline; }
.kp-audio-track__byline time { flex: none; font-variant-numeric: tabular-nums; }
.kp-audio-track__byline--badges { flex-wrap: wrap; row-gap: 2px; }
.kp-audio-track__badge { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.kp-audio-track__badge svg { flex: none; }
.kp-audio-track__badge--warning { color: var(--kp-color-warning); }
.kp-audio-track__menu { position: relative; margin: 0; }
.kp-audio-track__menu > summary {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border-radius: var(--kp-radius-md);
    color: var(--kp-color-text-muted);
    cursor: pointer;
    list-style: none;
}

.kp-audio-track__menu > summary::-webkit-details-marker { display: none; }
.kp-audio-track__menu[open] { z-index: 30; }
.kp-audio-track__menu[open] > summary, .kp-audio-track__menu > summary:hover {
    background: var(--kp-color-surface-muted);
    color: var(--kp-color-text);
}

.kp-audio-track__menu-panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 4px);
    inline-size: min(230px, calc(100vw - 52px));
    padding: var(--kp-space-1);
    border: 1px solid var(--kp-color-border);
    border-radius: var(--kp-radius-lg);
    background: var(--kp-color-surface);
    box-shadow: var(--kp-shadow-md);
}

.kp-audio-track__menu-panel :is(a, button) {
    display: flex;
    align-items: center;
    gap: var(--kp-space-2);
    inline-size: 100%;
    min-block-size: 44px;
    padding: var(--kp-space-2);
    border: 0;
    border-radius: var(--kp-radius-md);
    background: transparent;
    color: var(--kp-color-text);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.kp-audio-track__menu-panel :is(a, button):hover { background: var(--kp-color-surface-muted); }
.kp-audio-track__menu-panel :is(a, button) svg { flex: none; }
.kp-audio-track__menu-panel form { margin: 0; }
.kp-audio-track__menu-panel .kp-audio-track__delete { color: var(--kp-color-danger); }
.kp-audio-track noscript { grid-column: 1 / -1; }
.kp-audio-track noscript:not(:has(audio)) { display: none; }
.kp-audio-track noscript audio { inline-size: 100%; }

@media (max-width: 480px) {
    .kp-audio-track { --kp-audio-track-cover: 44px; }
}