/*
 * Connection indicator and offline banner, shared by index.html and single.html
 * (see js/connection.js).
 *
 * The indicator is a dot plus a word in each page's header. Both pages ship it in the unknown
 * state; the module swaps is-unknown for is-online or is-offline as the polls report in, so every
 * rule here is keyed on the state class rather than on the dot alone.
 *
 * The banner sits in the flow at the top of the page rather than over it. It is only on screen
 * while the emulator is unreachable, and covering the header -- which is where the indicator, the
 * version badge and the API link live -- to say so would hide the answer along with the question.
 *
 * The colours come from css/tokens.css, which both pages load before this file, with fallbacks so
 * it stands on its own. Sizes are in em, so the banner scales with the page's body text.
 */

#connectionBanner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.45em 0.9em;
    background: var(--danger, #dc2626);
    color: var(--text-inverse, #ffffff);
    font-size: 0.9em;
    font-weight: 500;
    text-align: center;
}

/*
 * The id above outranks the browser's own [hidden] { display: none }, so the banner needs its own
 * rule to stay hidden. Without this it is on screen from the moment the page loads.
 */
#connectionBanner[hidden] {
    display: none;
}

[data-connection-indicator] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[data-connection-indicator] .connection-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutral, #4b5563);
    animation: connection-pulse 2s infinite;
}

/* Nothing has answered yet. Neutral and still: a pulse reads as a live signal. */
[data-connection-indicator].is-unknown .connection-dot {
    background: rgba(255, 255, 255, 0.55);
    animation: none;
}

[data-connection-indicator].is-online .connection-dot {
    background: var(--success, #047857);
}

[data-connection-indicator].is-offline .connection-dot {
    background: var(--danger, #dc2626);
}

/* Both headers dim their status line; the one state worth reading is not dimmed. */
[data-connection-indicator].is-offline {
    opacity: 1;
    font-weight: 600;
}

@keyframes connection-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
    [data-connection-indicator] .connection-dot {
        animation: none;
    }
}