/* The dark half of the circuit-down takeover and the stall panel (F-2373: split out of circuit-down.css to keep that
   sheet under its cap; loaded straight after it, so the cascade is unchanged). Dark theme, on circuit-watch.css's own
   reasoning: theme-boot.js resolves the choice onto <html data-theme> before anything paints, so the attribute is the
   authority; prefers-color-scheme covers the window before it runs, or if it ever does not. The two card backgrounds
   the stall panel's tests read stay beside their light counterparts in circuit-down.css. */
:root[data-theme="dark"] #tma-circuit-down .circuit-down__card {
    background: #22303c;
    color: #e8eef4;
}

:root[data-theme="dark"] #tma-circuit-down[data-state="recovering"] .circuit-down__progress,
:root[data-theme="dark"] #tma-circuit-down[data-state="updating"] .circuit-down__progress {
    background: rgba(232, 238, 244, 0.2);
}

:root[data-theme="dark"] #tma-circuit-down[data-state="recovering"] .circuit-down__progress::after,
:root[data-theme="dark"] #tma-circuit-down[data-state="updating"] .circuit-down__progress::after {
    background: #e8eef4;
}

:root[data-theme="dark"] #tma-circuit-down .circuit-down__reload,
:root[data-theme="dark"] #tma-circuit-down .circuit-down__leave {
    background: #e8eef4;
    border-color: #e8eef4;
    color: #22303c;
}

:root[data-theme="dark"] #tma-circuit-down .circuit-down__leave {
    background: transparent;
    color: #e8eef4;
}

:root[data-theme="dark"] #tma-circuit-down .circuit-down__reload:hover {
    background: #fff;
}

:root[data-theme="dark"] #tma-circuit-down .circuit-down__leave:hover {
    background: rgba(232, 238, 244, 0.12);
}

:root[data-theme="dark"] #tma-circuit-down :focus-visible {
    outline-color: #e8eef4;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #tma-circuit-down .circuit-down__card {
        background: #22303c;
        color: #e8eef4;
    }

    :root:not([data-theme="light"]) #tma-circuit-down[data-state="recovering"] .circuit-down__progress::after,
    :root:not([data-theme="light"]) #tma-circuit-down[data-state="updating"] .circuit-down__progress::after {
        background: #e8eef4;
    }

    :root:not([data-theme="light"]) #tma-circuit-down .circuit-down__reload,
    :root:not([data-theme="light"]) #tma-circuit-down .circuit-down__leave {
        background: #e8eef4;
        border-color: #e8eef4;
        color: #22303c;
    }

    :root:not([data-theme="light"]) #tma-circuit-down .circuit-down__leave {
        background: transparent;
        color: #e8eef4;
    }

    :root:not([data-theme="light"]) #tma-circuit-down :focus-visible {
        outline-color: #e8eef4;
    }
}

/* ---- the stall panel's dark palette beyond its card (the card rules live in circuit-down.css) ---- */

:root[data-theme="dark"] #tma-circuit-stall .circuit-stall__reload {
    background: #e8eef4;
    border-color: #e8eef4;
    color: #22303c;
}

:root[data-theme="dark"] #tma-circuit-stall .circuit-stall__wait {
    border-color: #e8eef4;
    color: #e8eef4;
}

:root[data-theme="dark"] #tma-circuit-stall .circuit-stall__reload:hover {
    opacity: 0.9;
}

:root[data-theme="dark"] #tma-circuit-stall :focus-visible {
    outline-color: #e8eef4;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #tma-circuit-stall .circuit-stall__reload {
        background: #e8eef4;
        border-color: #e8eef4;
        color: #22303c;
    }

    :root:not([data-theme="light"]) #tma-circuit-stall .circuit-stall__wait {
        border-color: #e8eef4;
        color: #e8eef4;
    }

    :root:not([data-theme="light"]) #tma-circuit-stall :focus-visible {
        outline-color: #e8eef4;
    }
}

/* ---- F-2366: the "still working" line (CircuitStallPanel.razor, raised by circuit-stall-guard.js) ----------------
   Non-modal and unscrimmed, so it sits under the stall panel (2050) and the reconnect modal (2100). Light and dark
   palettes both live here because circuit-down.css is at the family's line cap. */

#tma-circuit-working[hidden] {
    display: none;
}

#tma-circuit-working:not([hidden]) {
    align-items: center;
    background: #ede2b8;
    border-bottom: 1px solid #d4c38a;
    box-sizing: border-box;
    color: #2c3e50;
    display: flex;
    font-size: 0.9rem;
    gap: 0.75rem;
    justify-content: center;
    left: 0;
    padding: 0.4rem 1rem;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1900;
}

#tma-circuit-working .circuit-working__reload {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.2rem 0.3rem;
    text-decoration: underline;
}

#tma-circuit-working :focus-visible {
    outline: 2px solid #2c3e50;
    outline-offset: 2px;
}

:root[data-theme="dark"] #tma-circuit-working:not([hidden]) {
    background: #33414d;
    border-bottom-color: #4a5a68;
    color: #e8eef4;
}

:root[data-theme="dark"] #tma-circuit-working :focus-visible {
    outline-color: #e8eef4;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #tma-circuit-working:not([hidden]) {
        background: #33414d;
        border-bottom-color: #4a5a68;
        color: #e8eef4;
    }

    :root:not([data-theme="light"]) #tma-circuit-working :focus-visible {
        outline-color: #e8eef4;
    }
}