/*
|--------------------------------------------------------------------------
| CONSTRUCT OS SHUTDOWN COMPONENT
|--------------------------------------------------------------------------
*/

:root{
    --construct-shutdown-bg:rgba(245,242,232,0.94);
    --construct-shutdown-panel:rgba(255,255,255,0.76);
    --construct-shutdown-panel-strong:rgba(255,255,255,0.92);

    --construct-shutdown-text:#161611;
    --construct-shutdown-muted:rgba(22,22,17,0.62);
    --construct-shutdown-faint:rgba(22,22,17,0.42);

    --construct-shutdown-border:rgba(22,22,17,0.16);
    --construct-shutdown-border-strong:rgba(22,22,17,0.34);

    --construct-shutdown-shadow:rgba(20,18,12,0.18);

    --construct-shutdown-font:"IBM Plex Mono", monospace;
}

/*
|--------------------------------------------------------------------------
| SHUTDOWN TAB
|--------------------------------------------------------------------------
*/

.construct-shutdown-tab{
    position:fixed;
    top:50%;
    left:-20px;

    z-index:900;

    transform:translateY(-50%);

    width:64px;
    min-height:156px;

    padding:14px 8px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;

    color:var(--construct-shutdown-text);

    font-family:var(--construct-shutdown-font);

    background:var(--construct-shutdown-panel);

    border:1px solid var(--construct-shutdown-border);
    border-left:none;
    border-radius:0 18px 18px 0;

    backdrop-filter:blur(14px);

    box-shadow:
        0 10px 34px var(--construct-shutdown-shadow),
        inset 0 0 0 1px rgba(255,255,255,0.36);

    cursor:pointer;

    opacity:0.72;

    transition:
        opacity 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        left 180ms ease,
        transform 180ms ease;
}

.construct-shutdown-tab:hover,
.construct-shutdown-tab:focus-visible{
    opacity:1;

    background:var(--construct-shutdown-panel-strong);

    border-color:var(--construct-shutdown-border-strong);

    transform:translateY(-50%) translateX(4px);

    left: -5px;
}

.construct-shutdown-tab span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);

    font-size:0.62rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
}

.construct-shutdown-tab small{
    display:none;
}

/*
|--------------------------------------------------------------------------
| SHUTDOWN OVERLAY
|--------------------------------------------------------------------------
*/

.construct-shutdown-overlay{
    position:fixed;
    inset:0;

    z-index:9998;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:var(--construct-shutdown-bg);

    backdrop-filter:blur(10px);

    opacity:0;
    pointer-events:none;

    transition:opacity 220ms ease;
}

.construct-shutdown-overlay.active{
    opacity:1;
    pointer-events:auto;
}

/*
|--------------------------------------------------------------------------
| SHUTDOWN MODAL
|--------------------------------------------------------------------------
*/

.construct-shutdown-modal{
    width:min(100%, 540px);

    padding:42px 34px;

    background:var(--construct-shutdown-panel);

    border:1px solid var(--construct-shutdown-border);
    border-radius:24px;

    box-shadow:
        0 24px 70px var(--construct-shutdown-shadow),
        inset 0 0 0 1px rgba(255,255,255,0.42);

    text-align:center;
}

/*
|--------------------------------------------------------------------------
| TEXT
|--------------------------------------------------------------------------
*/

.construct-shutdown-eyebrow{
    margin:0 0 18px;

    color:var(--construct-shutdown-muted);

    font-family:var(--construct-shutdown-font);
    font-size:0.68rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
}

.construct-shutdown-modal h2{
    margin:0;

    color:var(--construct-shutdown-text);

    font-size:clamp(2rem, 5vw, 3rem);
    font-weight:500;
    letter-spacing:0.12em;
    line-height:1;

    text-transform:uppercase;
}

.construct-shutdown-message{
    width:min(100%, 390px);

    margin:26px auto 0;

    color:var(--construct-shutdown-muted);

    font-family:var(--construct-shutdown-font);
    font-size:0.74rem;
    letter-spacing:0.12em;
    line-height:2;
    text-transform:uppercase;
}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.construct-shutdown-actions{
    margin-top:36px;

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.construct-shutdown-confirm,
.construct-shutdown-cancel{
    min-width:210px;

    padding:14px 18px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:var(--construct-shutdown-text);

    font-family:var(--construct-shutdown-font);
    font-size:0.66rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    text-decoration:none;

    border-radius:999px;

    cursor:pointer;

    transition:
        transform 180ms ease,
        opacity 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.construct-shutdown-confirm:hover,
.construct-shutdown-cancel:hover{
    transform:translateY(-2px);
}

.construct-shutdown-confirm{
    background:var(--construct-shutdown-text);

    color:var(--construct-shutdown-bg);

    border:1px solid var(--construct-shutdown-text);
}

.construct-shutdown-cancel{
    background:rgba(255,255,255,0.42);

    border:1px solid var(--construct-shutdown-border);
}

/*
|--------------------------------------------------------------------------
| SHUTDOWN TRANSITION
|--------------------------------------------------------------------------
*/

body.construct-shutting-down::before{
    content:"RETURNING TO CONSTRUCT OS...";

    position:fixed;
    inset:0;

    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--construct-shutdown-text);

    font-family:var(--construct-shutdown-font);
    font-size:0.72rem;
    letter-spacing:0.24em;
    text-transform:uppercase;

    background:var(--construct-shutdown-bg);

    animation:
        constructShutdownFlicker 700ms steps(2, end) infinite;
}

@keyframes constructShutdownFlicker{

    0%,
    100%{
        opacity:1;
    }

    50%{
        opacity:0.86;
    }

}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:700px){

    .construct-shutdown-tab{
        top:50%;
        left:0;

        width:42px;
        min-height:138px;

        transform:translateY(-50%);

        opacity:0.78;
    }

    .construct-shutdown-tab:hover,
    .construct-shutdown-tab:focus-visible{
        transform:translateY(-50%) translateX(3px);
    }

    .construct-shutdown-tab span{
        font-size:0.56rem;
        letter-spacing:0.18em;
    }

    .construct-shutdown-modal{
        padding:34px 24px;
    }

    .construct-shutdown-confirm,
    .construct-shutdown-cancel{
        width:100%;
        min-width:0;
    }

}