/* The TERMINATED-circuit family: the framework's own #blazor-error-ui bar, and the takeover
   circuit-death-guard.js raises when that bar appears. See that file for why this is a third case neither
   F-421's never-connected banner nor F-599's reconnect modal can cover.

   A file of its own, on the same reasoning circuit-watch.css gives: this must render correctly on a page whose
   interactivity is already broken, so it leans on nothing that could have been the thing that failed. The
   #blazor-error-ui rules below are MOVED VERBATIM from MainLayout.razor.css (F-706's dark-mode fix intact,
   token-routed with literal fallbacks) because the element itself moved out of the routed layout and into
   App.razor — a scoped stylesheet only styles what its own component renders, so the rules had to travel with
   it. BlazorErrorUiDarkModeContrastTests reads them here now and asserts exactly what it asserted before. */

#blazor-error-ui {
    background: var(--removable-soft, #fff4cc);
    border-top: 1px solid var(--hairline-strong, rgba(44, 62, 80, 0.18));
    bottom: 0;
    box-shadow: 0 -1px 2px var(--hairline-strong, rgba(44, 62, 80, 0.18));
    color: var(--ink-1, #2c3e50);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* F-706 (operator employees family): --removable-soft is a fully OPAQUE hex in the light theme
   (tokens.css #F9EFE2), so the light bar above is legible against anything scrolled beneath it — but
   the SAME token resolves to a TRANSLUCENT wash in dark mode (rgba(245, 176, 74, .13)), correct for a
   chip tint on a card, wrong for a fixed full-bleed alert bar that must guarantee its own contrast no
   matter what page content is currently underneath it. Overriding onto the token's own opaque sibling
   --removable-solid (tokens.css) — the same fix shape as the sibling F-421 banner (circuit-watch.css
   #circuit-connect-ui) and the checkout email field's dark override (CheckoutEmailCorrectionForm.razor.css)
   — reusing that banner's own already-measured amber/dark-amber pair so all three connectivity
   affordances read as one family. */
:root[data-theme="dark"] #blazor-error-ui {
    background: var(--removable-solid, #4a3a12);
}

/* ---- the takeover -----------------------------------------------------------------------------------------
   A full-screen scrim rather than another bar, and that is the whole point: the bar above is the affordance
   that shipped, was measured to be easy to miss, and left an operator clicking dead controls. A takeover
   cannot be missed and cannot be clicked past, which is exactly right for a page where every control below it
   is already inert. It is up for a second or two in the ordinary case — the guard reloads underneath it. */

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

#tma-circuit-down:not([hidden]) {
    align-items: center;
    background: rgba(22, 33, 44, 0.82);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    /* Above the F-599 reconnect modal (2100), which is above the F-421 banner (2000) — the order is the
       order of severity: a circuit that DIED supersedes one that dropped, which supersedes one that is slow
       to start. Only one of the three can be true at a time, but nothing enforces that, so the tie-break is
       written down rather than left to DOM order.

       And above the BOOT GATE (#tma-click-overlay, 9998), which is the one that actually bites: that element
       is opaque and full-screen, and it is held until the circuit reports in — which, for a circuit that
       died on arrival, is never. Without this the takeover would spend the gate's whole 10-second fallback
       hidden underneath a spinner. circuit-death-guard.js also tells the gate to stop waiting, so the two
       halves agree; this z-index is what makes the outcome independent of that call arriving. */
    z-index: 9999;
}

#tma-circuit-down .circuit-down__card {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 8px 28px rgba(44, 62, 80, 0.35);
    box-sizing: border-box;
    color: #2c3e50;
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
    gap: 0.7rem;
    line-height: 1.4;
    max-width: 26rem;
    padding: 1.4rem 1.5rem;
    width: 100%;
}

#tma-circuit-down .circuit-down__title {
    font-size: 1.05rem;
    font-weight: 700;
}

/* One message per state, the same shape the F-599 modal uses: a single message covering both would have to
   lie about one of them. The state is set by the guard; an unknown value shows neither message, which
   degrades to the title and the manual reload rather than to a false claim about what is happening. */
#tma-circuit-down .circuit-down__message {
    display: none;
}

#tma-circuit-down[data-state="recovering"] .circuit-down__message--recovering,
#tma-circuit-down[data-state="updating"] .circuit-down__message--updating,
#tma-circuit-down[data-state="exhausted"] .circuit-down__message--exhausted {
    display: block;
}

/* The progress cue belongs only to the states that are actually making progress. In the exhausted state a
   spinner would be the same lie the passive error bar told: motion implying something is still being done.
   F-960's 'updating' state qualifies — healthz-reload-gate.js really is polling and really will reload the
   moment the server answers — and it deliberately keeps the "Leave this page" button, which 'recovering'
   hides: that wait is a second or two, this one can be minutes, and an operator must be able to walk away. */
#tma-circuit-down .circuit-down__progress {
    display: none;
}

#tma-circuit-down[data-state="recovering"] .circuit-down__progress,
#tma-circuit-down[data-state="updating"] .circuit-down__progress {
    background: rgba(44, 62, 80, 0.14);
    border-radius: 999px;
    display: block;
    height: 0.25rem;
    overflow: hidden;
    position: relative;
}

#tma-circuit-down[data-state="recovering"] .circuit-down__progress::after,
#tma-circuit-down[data-state="updating"] .circuit-down__progress::after {
    animation: circuit-down-progress 1.1s linear infinite;
    background: #2c3e50;
    border-radius: inherit;
    content: "";
    inset: 0 auto 0 0;
    position: absolute;
    width: 40%;
}

@keyframes circuit-down-progress {
    from { transform: translateX(-100%); }
    to { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
    #tma-circuit-down[data-state="recovering"] .circuit-down__progress::after,
    #tma-circuit-down[data-state="updating"] .circuit-down__progress::after {
        animation: none;
        width: 100%;
    }
}

/* The card is the focus target when the takeover is raised (circuit-death-guard.js), and it carries
   tabindex="-1" for that — which would otherwise paint a focus ring around the whole card on a mouse user's
   screen. :focus-visible below still rings it for a keyboard user, which is the case that needs it. */
#tma-circuit-down .circuit-down__card:focus {
    outline: none;
}

#tma-circuit-down .circuit-down__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#tma-circuit-down .circuit-down__reload,
#tma-circuit-down .circuit-down__leave {
    background: #2c3e50;
    border: 1px solid #2c3e50;
    border-radius: 0.35rem;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
}

/* Reloading is the action most likely to work, so the escape hatch reads as secondary rather than competing
   with it. It is only offered once automatic recovery has given up. */
#tma-circuit-down .circuit-down__leave {
    background: transparent;
    color: #2c3e50;
}

#tma-circuit-down[data-state="recovering"] .circuit-down__leave {
    display: none;
}

#tma-circuit-down .circuit-down__reload:hover {
    background: #1c2a36;
}

#tma-circuit-down .circuit-down__leave:hover {
    background: rgba(44, 62, 80, 0.08);
}

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

/* 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. */
: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;
    }
}