/* The Now Playing panel's ON AIR and "Next up:" lines (now-playing-extras.js). Loaded by the
   overlay and by the admin preview, so both render the same geometry.

   A switched-on line always keeps its row: an empty one is hidden with visibility, never
   display, so the song does not move on air when a show starts or a next track is leased. */
.np-extra-line {
    display: flex;
    align-items: center;
    gap: 0.5em;
    max-width: 100%;
    min-width: 0;
    line-height: 1.3;
    white-space: nowrap;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.np-extra-line.is-empty {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.np-extra-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease;
}

.np-extra-text.np-updating {
    opacity: 0;
}

/* The website's on-air pill (scenesat-web app.css "On air"): danger red pulled toward black
   with a white bold uppercase label, so it reads on any video behind it. The edge is a light
   inset rather than a red border so a recoloured badge still looks deliberate. */
.np-on-air__pill {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.45em;
    padding: 0.2em 0.7em 0.2em 0.55em;
    border-radius: 999px;
    background-color: #ac3131;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.25;
    text-transform: uppercase;
    /* The pill is solid; it never takes the line's gradient, shadow or stroke. */
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.np-on-air__dot {
    width: 0.6em;
    height: 0.6em;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    animation: np-on-air-pulse 1.6s ease-in-out infinite;
}

@keyframes np-on-air-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .np-on-air__dot { animation: none; }
}

.np-on-air .np-extra-text {
    font-weight: 700;
}

.np-next-up__label {
    flex: none;
    font-weight: 700;
}