/**
 * audio-player.css — "Listen to this article" player (pages/news.php).
 * Uses the site primary colour (#cc0000); dark mode follows the html.dark
 * class the theme toggle sets.
 */
.n24-listen {
    --n24-primary: #cc0000;
}

.n24-listen-btn {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #e11d1d, var(--n24-primary));
    box-shadow: 0 8px 18px -6px rgba(204, 0, 0, .6);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
    cursor: pointer;
    border: 0;
}
.n24-listen-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 10px 24px -6px rgba(204, 0, 0, .75);
}
.n24-listen-btn:active { transform: scale(.97); }
.n24-listen-btn svg { width: 22px; height: 22px; }
.n24-listen-btn .n24-ic-play { margin-left: 2px; }
.dark .n24-listen-btn {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

/* generation spinner */
.n24-listen-spinner {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: n24-spin .8s linear infinite;
}
@keyframes n24-spin { to { transform: rotate(360deg); } }

/* progress track */
.n24-track { position: relative; overflow: hidden; }
.n24-track .n24-track-fill {
    background: var(--n24-primary);
    width: 0%;
    transition: width .15s linear;
}
.dark .n24-track .n24-track-fill { background: #ef4444; }

/* elapsed / remaining time readouts */
.n24-listen .n24-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    width: 2.5rem;
    flex: none;
}
.dark .n24-listen .n24-time { color: #9ca3af; }
.n24-listen .n24-time-dur { text-align: right; }

/* speed toggle */
.n24-listen .n24-speed {
    font-size: 11px;
    line-height: 1;
    padding: .3rem .6rem;
    flex: none;
    cursor: pointer;
    border: 0;
}

/* decorative equalizer — dances only while playing */
.n24-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    flex: none;
    opacity: .35;
    transition: opacity .3s ease;
}
.n24-eq i {
    width: 3px;
    border-radius: 2px;
    background: var(--n24-primary);
    height: 30%;
}
.dark .n24-eq i { background: #ef4444; }
.n24-listen.is-playing .n24-eq { opacity: 1; }
.n24-listen.is-playing .n24-eq i { animation: n24-eq-bounce 1s ease-in-out infinite; }
.n24-listen.is-playing .n24-eq i:nth-child(1) { animation-delay: 0s;    height: 60%; }
.n24-listen.is-playing .n24-eq i:nth-child(2) { animation-delay: .12s;  height: 95%; }
.n24-listen.is-playing .n24-eq i:nth-child(3) { animation-delay: .24s;  height: 45%; }
.n24-listen.is-playing .n24-eq i:nth-child(4) { animation-delay: .06s;  height: 80%; }
.n24-listen.is-playing .n24-eq i:nth-child(5) { animation-delay: .3s;   height: 55%; }
.n24-listen.is-playing .n24-eq i:nth-child(6) { animation-delay: .18s;  height: 100%; }
.n24-listen.is-playing .n24-eq i:nth-child(7) { animation-delay: .27s;  height: 65%; }
@keyframes n24-eq-bounce {
    0%, 100% { transform: scaleY(.45); }
    50%      { transform: scaleY(1); }
}

/* download link */
.n24-dl {
    color: #6b7280;
    display: inline-flex;
    transition: color .2s ease, transform .2s ease;
}
.n24-dl:hover { color: var(--n24-primary); transform: translateY(1px); }

/* status / error note */
.n24-note { color: #6b7280; }
.dark .n24-note { color: #9ca3af; }
.n24-note.is-error { color: #dc2626; }

@media (prefers-reduced-motion: reduce) {
    .n24-listen-btn, .n24-listen-spinner, .n24-eq i, .n24-dl, .n24-track-fill {
        animation: none !important;
        transition: none !important;
    }
}