/* Pure design-system tokens/fonts, without a global Tailwind reset. These also work
   before Blazor/layout styles load. The native reload link mirrors Button Primary/Xl. */
@import url("../_content/Engini.Ui/styles/figma-scales.css");
@import url("../_content/Engini.Ui/styles/fonts.css");

.engini-recovery {
    box-sizing: border-box;
    width: 100%;
    padding: var(--Spacing__6, 1.5rem);
    color: var(--gray-high-contrast-text, CanvasText);
    background: var(--gray-subtle-background, Canvas);
    font-family: Inter, sans-serif;
    text-align: left;
}
.engini-recovery-page {
    display: grid;
    place-items: center;
    min-height: 100dvh;
}
.engini-recovery-content {
    width: 100%;
    max-width: 28rem;
}
.engini-recovery-static .engini-recovery-logo { margin-bottom: var(--Spacing__4, 1rem); }
.engini-recovery-static .engini-recovery-logo-dark { display: none; }
.dark .engini-recovery-static .engini-recovery-logo-light { display: none; }
.dark .engini-recovery-static .engini-recovery-logo-dark { display: block; }
/* Native-only fallback. Managed recovery uses the real Card/Button components,
   without overriding any of their appearance or typography. */
.engini-recovery-static .engini-recovery-content {
    box-sizing: border-box;
    padding: var(--Spacing__6, 1.5rem);
    border: 1px solid var(--borders-and-dividers-default, GrayText);
    border-radius: var(--radius-md, .5rem);
    background: var(--background-raised, Canvas);
}
.engini-recovery-static h2 { margin: 0 0 var(--Spacing__3, .75rem); font-size: 1.5rem; font-weight: 500; line-height: 1.5; }
.engini-recovery-static p {
    margin: 0 0 var(--Spacing__6, 1.5rem);
    color: var(--text-muted, CanvasText);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5rem;
}
.engini-recovery-static .engini-recovery-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: var(--Spacing__1_5, .375rem) var(--Spacing__3, .75rem);
    border: 0;
    border-radius: var(--radius-sm, .375rem);
    background: var(--background-primary, CanvasText);
    color: var(--gray-app-background, Canvas);
    font: 500 .8125rem/1.25rem Inter, sans-serif;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}
.engini-recovery-static .engini-recovery-reload:hover { background: var(--background-primary-hover, CanvasText); color: var(--gray-app-background, Canvas); text-decoration: none; }
.engini-recovery-static .engini-recovery-reload:active { background: var(--gray-ui-element-backgroundd, Canvas); color: var(--text-default, CanvasText); }
.engini-recovery-static .engini-recovery-reload:focus-visible { outline: 2px solid var(--borders-and-dividers-active, CanvasText); outline-offset: 2px; }
.engini-recovery-static .engini-recovery-reference {
    margin: var(--Spacing__6, 1.5rem) 0 0;
    padding-top: var(--Spacing__4, 1rem);
    border-top: 1px solid var(--borders-and-dividers-default, GrayText);
    font-size: .8125rem;
    line-height: 1.25rem;
    overflow-wrap: anywhere;
}
html.engini-client-recovery #blazor-error-ui {
    padding: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: var(--gray-subtle-background, Canvas);
    z-index: 1000000;
}
html.engini-client-recovery .engini-recovery-legacy { display: none; }
html.engini-client-recovery .engini-recovery-static { display: grid !important; }
@media (max-width: 480px) { .engini-recovery { padding: var(--Spacing__4, 1rem); } }