/* Available before the application bundle; no JavaScript keeps server HTML visible. */
html.site-booting, html.site-booting body { overflow: hidden; }
html.site-booting #root { visibility: hidden; }
html.site-booting::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    background: #293241 url("/img/logo/logo-loading.png") center / 100px 100px no-repeat;
}
html.site-booting::after {
    content: "";
    position: fixed;
    z-index: 2147483647;
    left: calc(50% - 75px);
    top: calc(50% - 75px);
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    border: 2px solid;
    border-color: #d5ab64 transparent;
    border-radius: 50%;
    animation: site-boot-spin .8s linear infinite;
    pointer-events: none;
}
#site-boot-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#site-boot-recovery {
    position: fixed;
    z-index: 2147483647;
    top: calc(50% + 100px);
    inset-inline: 16px;
    text-align: center;
    color: #e0e1dd;
    font: 14px/1.8 Tahoma, sans-serif;
}
#site-boot-recovery p { margin: 0 0 12px; }
#site-boot-recovery button {
    min-height: 44px;
    margin: 4px;
    padding: 8px 16px;
    border: 1px solid #d5ab64;
    border-radius: 12px;
    color: #293241;
    background: #d5ab64;
    cursor: pointer;
    font: inherit;
}
#site-boot-recovery button + button { color: #e0e1dd; background: transparent; }
#site-boot-recovery button:focus-visible { outline: 3px solid #a8dadc; outline-offset: 3px; }
@keyframes site-boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.site-booting::after { animation: none; } }
@media (max-height: 480px) {
    html.site-booting::before { background-position: center calc(30vh - 36px); background-size: 72px 72px; }
    html.site-booting::after { top: calc(30% - 50px); left: calc(50% - 50px); width: 100px; height: 100px; }
    #site-boot-recovery { top: calc(30% + 65px); }
}