/* ====================================
   Tracklist
======================================= */

.episode-tracklist {
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}

/* Toggle button — hidden on desktop, shown on mobile via responsive.css */
.tracklist-toggle-btn {
    display: none;
}

.tracklist-empty-note {
    display: block;
    padding: 2px 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.tracks-list {
    list-style: none;
    padding: 0;
    margin-left: 0;
    margin-top: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Match the eventual row footprint while a deferred tracklist is fetched.
   This keeps viewport hydration from moving every following episode. */
.lazy-tracklist-reserve {
    min-height: calc(var(--lazy-track-count, 0) * 32px);
    /* Skeleton bars drawn from the reserved height alone — no placeholder DOM,
       so the initial payload stays summary-only. Without these the reserve is
       a blank gap the size of a tracklist, which reads as broken. */
    --lazy-row-pitch: 32px;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(var(--color-border-rgb), 0.5) 0,
        rgba(var(--color-border-rgb), 0.5) 10px,
        transparent 10px,
        transparent var(--lazy-row-pitch)
    );
    background-repeat: repeat-y;
    background-size: 38% 100%;
    animation: lazy-tracklist-pulse 1.6s ease-in-out infinite;
}

@keyframes lazy-tracklist-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .lazy-tracklist-reserve {
        animation: none;
    }
}

/* A shell that resolved with no rows. The skeleton is gone by then, so the
   only thing left would be a bare rule under the card — collapse it and let
   the card read like an episode that never had a tracklist. */
.episode-tracklist--empty {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.track-item {
    cursor: pointer;
    font-size: 0.9em;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    border-radius: var(--border-radius-lg);
    transition: background-color var(--transition-base), transform var(--transition-base);
    position: relative;
    box-sizing: border-box;
    min-width: 0;
}

.track-item:hover {
    background-color: var(--color-surface-alt);
}

.track-item:active {
    transform: translateY(0);
    box-shadow: none;
}

.track-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through to buttons */
}

/* Fills space so timestamp + actions stay right-aligned */
.track-text {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: baseline;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    overflow: hidden;
    line-height: 1.35;
    position: relative;
    z-index: 2;
}

.track-text .track-artist,
.track-text .track-title {
    min-width: 0;
}

.track-row-spacer {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 8px;
    margin-left: 8px;
    position: relative;
    z-index: 2;
}

/* Index column — doubles as play / pause control */
.track-number {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: var(--btn-icon-size);
    min-width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: rgba(var(--color-text-tertiary-rgb, var(--color-text-secondary-rgb)), 0.55);
    font-size: 0.75em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    position: relative;
    z-index: 2;
    line-height: 1;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: color var(--transition-base), background var(--transition-base);
}

.track-number:hover,
.track-number:focus-visible {
    color: var(--color-text-primary);
}

.track-number:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.track-num-text {
    display: block;
}

.track-num-icon {
    display: none;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 0.8rem;
}

.track-num-icon i {
    margin: 0;
}

/* Hover: show play (when not the active track) */
.track-item:hover:not(.playing) .track-num-text {
    display: none;
}

.track-item:hover:not(.playing) .track-num-play {
    display: -webkit-inline-flex;
    display: inline-flex;
}

/* Active track: always show pause */
.track-item.playing .track-num-text,
.track-item.playing .track-num-play {
    display: none !important;
}

.track-item.playing .track-num-pause {
    display: -webkit-inline-flex;
    display: inline-flex;
}

.track-item.playing .track-number {
    color: var(--color-text-primary);
}

.track-like-btn,
.track-playlist-btn,
.track-info-btn {
    z-index: 2;
    position: relative;
}

/* Info button hidden — track info auto-opens in the persistent sidebar
 * when a track plays, so the explicit affordance is redundant. The
 * surrounding sizing/hover rules are kept inert by display:none. */
.track-info-btn {
    display: none !important;
}

.track-item:hover .track-info-btn {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    pointer-events: auto;
}

.track-info-btn:hover {
    background: var(--color-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.track-artist {
    color: var(--color-text-primary);
    min-width: 0;
}

.track-artist::after {
    content: ' -';
    color: var(--color-text-secondary);
}

/* Stations publish half-filled rows (artist with no title, title with no
   artist). Collapse the missing half so the separator never dangles. */
.track-text .track-artist:empty,
.track-text .track-title:empty {
    display: none;
}

.track-text .track-artist:has(+ .track-title:empty)::after {
    content: none;
}

.track-title {
    color: var(--color-text-secondary);
    font-weight: 500;
    min-width: 0;
}

/* Timestamp (shown on hover only) */
.track-timestamp {
    margin-left: 8px;
    margin-right: 0;
    font-size: 0.75em;
    color: var(--color-text-tertiary, var(--color-text-secondary));
    opacity: 0;
    transition: opacity var(--transition-base);
    position: relative;
    z-index: 2;
    cursor: pointer;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.track-item:hover .track-timestamp {
    opacity: 1;
    color: var(--color-text-secondary);
    font-weight: 600;
}

/* Currently playing — same surface as row hover */
.track-item.playing {
    outline: none;
    background-color: var(--color-surface-alt);
}

.track-item.highlight {
    background: rgba(var(--color-text-primary-rgb), 0.08);
    box-shadow: 0 0 0 1px rgba(var(--color-text-primary-rgb), 0.14);
}

.track-item.highlight .track-artist,
.track-item.highlight .track-title,
.track-item.highlight .track-timestamp {
    color: var(--color-text-primary);
}

.track-item.playing .track-artist,
.track-item.playing .track-title {
    color: var(--color-text-primary);
    font-weight: 600;
}

.track-item.playing .track-timestamp {
    opacity: 1;
    color: var(--color-text-secondary);
    font-weight: 600;
}

@keyframes track-btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Like Button */
.track-like-btn,
.track-playlist-btn {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    padding-right: 8px;
    background: transparent;
    border: none;
    border-radius: var(--btn-icon-radius);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition:
        opacity var(--duration-normal) var(--ease-out),
        color var(--transition-base);
    transition-delay: 0s;
    position: relative;
    opacity: 0;
    pointer-events: none;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    line-height: 1;
}

/* Keyboard focus reveals the row actions the way a pointer does. Without the
 * :has() half these keep opacity: 0 while still being tabbable — pointer-events
 * doesn't take a control out of the tab order — so the focus ring base.css
 * paints is faded out with the button and the row reads as having nothing in
 * it. */
.track-item:hover .track-like-btn,
.track-item:hover .track-playlist-btn,
.track-item:has(:focus-visible) .track-like-btn,
.track-item:has(:focus-visible) .track-playlist-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Touch has no hover, so the row actions stay visible and meet the app's
 * minimum target size. */
@media (pointer: coarse) {
    .track-like-btn,
    .track-playlist-btn {
        opacity: 1;
        pointer-events: auto;
        width: var(--touch-target-min);
        height: var(--touch-target-min);
    }
}

.track-like-btn:hover,
.track-like-btn:focus-visible,
.track-playlist-btn:hover,
.track-playlist-btn:focus-visible {
    color: var(--color-text-primary);
}

.track-like-btn i {
    font-size: 14px;
}

/* Liked — persist visibility when not hovering */
.track-like-btn.liked {
    opacity: 1;
    pointer-events: auto;
    color: var(--color-text-primary);
}

.track-like-btn.processing {
    pointer-events: none;
    opacity: 0.6;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ====================================
   Compact tracklist — two-line tracks (artist / title), NTS-style
   Uses viewport width (not hover:none) so devtools mobile emulation works.
======================================= */
@media (max-width: 1024px) {
    .lazy-tracklist-reserve {
        min-height: calc(var(--lazy-track-count, 0) * 44px);
        --lazy-row-pitch: 44px;
    }

    /* Keep numbered column on touch; pause must override the rule below */
    .track-num-icon {
        display: none !important;
    }

    .track-item.playing .track-num-pause {
        display: -webkit-inline-flex !important;
        display: inline-flex !important;
    }

    .track-num-text {
        display: block !important;
    }

    .track-item:hover:not(.playing) {
        background-color: transparent;
    }

    .track-item:hover:not(.playing) .track-num-text {
        display: block !important;
    }

    .track-item:hover:not(.playing) .track-num-play {
        display: none !important;
    }

    /* Row actions are dropped on mobile: the row is a 44px tap target for
     * playback, and filing the playing track is offered once, in the player
     * (next to its like button) rather than on every row. */
    .track-info-btn,
    .track-like-btn,
    .track-playlist-btn,
    .track-timestamp {
        display: none;
    }

    .track-item:hover .track-like-btn:not(.liked) {
        display: none;
        opacity: 0;
        pointer-events: none;
    }

    .track-item.playing .track-info-btn {
        display: -webkit-inline-flex;
        display: inline-flex;
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        width: 32px;
        height: 32px;
        border-radius: var(--border-radius-full);
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
    }

    .track-like-btn.liked {
        display: -webkit-inline-flex;
        display: inline-flex;
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        width: 32px;
        height: 32px;
        border-radius: var(--border-radius-full);
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
    }

    .episode-tracklist .tracks-list > .track-item {
        min-height: 44px;
        padding: 6px 0;
        gap: var(--space-sm);
        border-radius: 0;
        box-sizing: border-box;
        -webkit-align-items: center;
        align-items: center;
        border-bottom: 1px solid rgba(var(--color-border-rgb), 0.6);
    }

    .episode-tracklist .tracks-list > .track-item:last-child {
        border-bottom: none;
    }

    .episode-tracklist .tracks-list > .track-item.playing {
        border-radius: var(--border-radius-lg);
        border-bottom-color: transparent;
        background-clip: padding-box;
    }

    /* The previous row's divider would read as a top border on the
     * highlighted playing row, so drop it there too. */
    .episode-tracklist .tracks-list > .track-item:has(+ .track-item.playing) {
        border-bottom-color: transparent;
    }

    /* Playing row shows its start time, right-aligned (spacer is hidden here). */
    .track-item.playing .track-timestamp {
        display: inline;
        margin-left: auto;
        margin-right: var(--space-sm);
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--color-text-tertiary);
    }

    .track-item.playing .track-text .track-title {
        font-weight: 400;
    }

    .track-text {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        overflow: hidden;
        line-height: 1.25;
        -webkit-align-self: center;
        align-self: center;
    }

    .track-text .track-artist {
        display: block;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.005em;
        color: var(--color-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .track-text .track-artist::after {
        display: none;
    }

    .track-text .track-title {
        display: block;
        font-size: 0.82rem;
        font-weight: 400;
        line-height: 1.3;
        color: var(--color-text-tertiary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Playing-row text that no longer fits beside the timestamp scrolls
     * back and forth instead of clipping. JS sets --marquee-distance to the
     * overflow width; text-indent avoids a wrapper element. */
    .track-item.playing .track-text .marquee {
        text-overflow: clip;
        animation: track-marquee 8s ease-in-out infinite;
    }

    @keyframes track-marquee {
        0%, 15% { text-indent: 0; }
        50%, 65% { text-indent: var(--marquee-distance, 0); }
        100% { text-indent: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .track-item.playing .track-text .marquee {
            animation: none;
            text-overflow: ellipsis;
        }
    }

    .track-row-spacer {
        display: none;
    }

    .track-number {
        width: 28px;
        min-width: 28px;
        height: 28px;
        font-size: 0.72rem;
        color: var(--color-text-tertiary);
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        -webkit-align-self: center;
        align-self: center;
    }
}