/* --- S4U connection watcher pill (site-wide) -------------------------------------------
   Rendered by net-watch.js at body level, outside any .s4u wrapper, so the .s4u-nw
   namespace carries its own look. Self-contained on purpose: this sheet also loads on
   legacy _Layout pages where design-system.css (and its tokens) is absent, so colors
   are plain values in the site's ink/champagne palette, no var() and no oklch (old TV
   browsers drop oklch; plain colors render identically everywhere).
   Old TV notes: no flex gap (margin instead), plain `bottom` fallback declared before
   the safe-area calc so unknown env() just falls back.
   z-index sits directly UNDER the feed-guard overlay (2147483600 in player.css s16):
   a blocking dialog outranks a status pill; everything else sits below both.
   Pointer-events stays off: the pill is pure status and must never eat a tap that was
   aimed at what is underneath it (player controls, slate rows).
   -------------------------------------------------------------------------------------- */

.s4u-nw {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 2147483500;
    display: flex;
    align-items: center;
    max-width: calc(100vw - 32px);
    padding: 9px 16px 9px 13px;
    border-radius: 999px;
    background: rgba(21, 19, 16, 0.96);
    border: 1px solid rgba(212, 183, 121, 0.30);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    color: #f3ede1;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.s4u-nw.is-visible {
    opacity: 1;
    visibility: visible;
}

.s4u-nw__dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 9px; /* no flex gap: old TVs misreport support */
    border-radius: 50%;
    background: #e05252;
}

.s4u-nw--down .s4u-nw__dot {
    animation: s4u-nw-pulse 1.6s ease-in-out infinite;
}

.s4u-nw--up .s4u-nw__dot {
    background: #58c08a;
}

@keyframes s4u-nw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Lite mode / reduced motion: no pulse, no fade choreography. */
html.s4u-lite .s4u-nw,
html.s4u-lite .s4u-nw__dot {
    transition: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .s4u-nw,
    .s4u-nw__dot {
        transition: none;
        animation: none;
    }
}