/**
 * Uses your site's own design tokens (--tl-color-*, --tl-space-*, --tl-radius-*,
 * --tl-text-*, --tl-font-*, --tl-transition) wherever they exist, so the tracklist
 * automatically follows your light/dark mode toggle instead of being hardcoded to
 * one theme. Each var() has a plain fallback for sites that don't define them.
 */

ol:has(> li > a.itunes-inserter-track-row) {
    list-style: none;
    margin: 0 0 var(--tl-space-5, 1.5em);
    padding: 0;
    background: var(--tl-color-surface, #f7f7f8);
    border: 1px solid var(--tl-color-border, #e6e6e9);
    border-radius: var(--tl-radius-md, 14px);
    overflow: hidden;
    counter-reset: ii-track;
    font-family: var(--tl-font-base, inherit);
}

ol:has(> li > a.itunes-inserter-track-row) > li {
    counter-increment: ii-track;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--tl-color-border, #e6e6e9);
    margin: 0;
}
ol:has(> li > a.itunes-inserter-track-row) > li:last-child { border-bottom: none; }

ol:has(> li > a.itunes-inserter-track-row) > li::before {
    content: counter(ii-track);
    flex: 0 0 var(--tl-space-6, 44px);
    text-align: center;
    color: var(--tl-color-text-muted, #6b6b74);
    font-size: var(--tl-text-xs, 13px);
    font-variant-numeric: tabular-nums;
}

a.itunes-inserter-track-row {
    display: grid;
    grid-template-columns: 1fr 1fr 56px;
    align-items: center;
    gap: var(--tl-space-3, 12px);
    flex: 1 1 auto;
    padding: var(--tl-space-4, 14px) var(--tl-space-5, 20px) var(--tl-space-4, 14px) 0;
    text-decoration: none !important;
    color: inherit;
    transition: background-color var(--tl-transition, 150ms ease);
}
a.itunes-inserter-track-row:hover { background-color: rgba(128,128,128,0.08); }

.itunes-inserter-track-title {
    font-weight: 700;
    color: var(--tl-color-text, #17171a);
    font-size: var(--tl-text-base, 15px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.itunes-inserter-track-artist {
    color: var(--tl-color-text-muted, #6b6b74);
    font-size: var(--tl-text-sm, 14px);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.itunes-inserter-track-duration {
    color: var(--tl-color-text-muted, #6b6b74);
    font-size: var(--tl-text-xs, 13px);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Mobile: number stays put, title stacks over artist, duration drops off entirely. */
@media (max-width: 560px) {
    ol:has(> li > a.itunes-inserter-track-row) > li {
        align-items: flex-start;
    }
    ol:has(> li > a.itunes-inserter-track-row) > li::before {
        flex-basis: var(--tl-space-6, 32px);
        padding-top: var(--tl-space-4, 14px);
    }
    a.itunes-inserter-track-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--tl-space-1, 2px);
        padding: var(--tl-space-4, 14px) var(--tl-space-4, 16px) var(--tl-space-4, 14px) 0;
    }
    .itunes-inserter-track-duration { display: none; }
    .itunes-inserter-track-artist,
    .itunes-inserter-track-title { text-align: left; }
}