/* Login / sign-up page (comp MS COMPUTER_LOGIN). Same unit as the site: 1rem = 100 px of the 1920 x 1080 frame. */
body.login-page { background: #050407; overflow: auto; color: #fff; min-height: 100vh; }

.card { position: fixed; left: .24rem; top: .24rem; bottom: .24rem; width: 9.6rem; border-radius: .36rem; overflow: hidden; background: url("../assets/degrade_login.jpg") center / cover; }
.card-dots { position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(118, 112, 124, .647) .013rem, transparent .017rem); background-size: .12rem .12rem; background-position: center; }
.card-in { position: absolute; left: 50%; top: calc(50% - 1.06rem); width: 5rem; margin-left: -2.5rem; text-align: center; }
.card-logo { display: block; width: 1.25rem; margin: 0 auto; }
.card-logo svg { display: block; width: 100%; height: auto; }
.card-sub { margin-top: .38rem; font-size: .2rem; line-height: .28rem; color: #B9AFC2; }
.steps { list-style: none; margin: .4rem 0 0; padding: 0; text-align: left; }
.steps li { display: flex; align-items: center; height: .74rem; border-radius: .14rem; background: rgba(26, 24, 32, .88); margin-bottom: .12rem; padding-left: .23rem; font: 500 .22rem var(--sans); }
.steps li.on { background: #fff; color: #120E15; }
.steps i { display: flex; align-items: center; justify-content: center; width: .3rem; height: .3rem; border-radius: 50%; background: #2E2B33; color: #8E8896; font: 500 .15rem var(--sans); margin-right: .17rem; }
.steps li.on i { background: #120E15; color: #fff; }

.form { position: fixed; left: calc(50% + 1.7rem); top: calc(50% - 3.54rem); width: 6.4rem; }
.form h1 { font: 500 .54rem/.6rem var(--sans); letter-spacing: -.03em; text-align: center; }
.form-sub { margin-top: .06rem; font-size: .2rem; line-height: .3rem; color: #8E8896; text-align: center; }
.oauth { display: grid; grid-template-columns: 1fr 1fr; gap: .16rem; margin-top: .36rem; }
.oauth a { display: flex; align-items: center; justify-content: center; gap: .1rem; height: .64rem; border-radius: .14rem; background: #0C0B0E; box-shadow: inset 0 0 0 .012rem rgba(255, 255, 255, .14); font: 500 .21rem var(--sans); }
.oauth svg { width: .24rem; height: .24rem; }
.oauth .g { font: 700 .22rem var(--sans); }
.or { position: relative; text-align: center; height: .2rem; margin-top: .465rem; font: 500 .13rem/.2rem var(--sans); letter-spacing: .1em; color: #8E8896; }
.or::before { content: ""; position: absolute; left: 0; right: 0; top: .1rem; height: .01rem; background: rgba(255, 255, 255, .12); }
.or span { position: relative; background: #050407; padding: 0 .12rem; }
form { margin-top: .305rem; }
.form label { display: block; position: relative; font: 500 .19rem/.26rem var(--sans); margin-bottom: .25rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .16rem; }
.form input { display: block; box-sizing: border-box; width: 100%; height: .64rem; margin-top: .09rem; padding: 0 .22rem; border: 0; border-radius: .12rem; background: #1C1B20; color: #fff; font: 400 .2rem var(--sans); letter-spacing: -.01em; outline: 0; }
.form input::placeholder { color: #5E5966; }
.form input:focus { box-shadow: inset 0 0 0 .015rem var(--lilac); }
.pw { margin-bottom: 0 !important; }
.eye { position: absolute; right: .2rem; bottom: .24rem; width: .24rem; height: .16rem; color: #8E8896; }
.eye svg { display: block; width: 100%; height: 100%; }
.help { margin-top: .15rem; font-size: .15rem; line-height: .2rem; color: #8E8896; }
.submit { display: block; width: 100%; height: .72rem; margin-top: .23rem; border-radius: .14rem; background: #fff; color: #120E15; font: 500 .22rem var(--sans); }
.have { margin-top: .32rem; font-size: .19rem; line-height: .3rem; color: #8E8896; text-align: center; }
.have a { color: #fff; font-weight: 500; }

/* CLI get-started block, in place of the sign-up form (same field styling). */
.cli { margin-top: .36rem; }
.cli-label { font: 500 .19rem/.26rem var(--sans); margin: .25rem 0 .09rem; }
.cli-box { margin: 0; box-sizing: border-box; width: 100%; padding: .2rem .22rem; border-radius: .12rem; background: #1C1B20; color: #fff; font: 400 .18rem/.3rem var(--mono); white-space: pre-wrap; word-break: break-all; }
.help code { font-family: var(--mono); color: #fff; }

@media (max-aspect-ratio: 1/1) {
    .card { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 1.5rem; margin: .12rem; border-radius: .2rem; }
    .card-dots { background-size: .1rem .1rem; background-image: radial-gradient(circle at center, rgba(118, 112, 124, .647) .009rem, transparent .012rem); }
    .card-in { top: .26rem; width: 3rem; margin-left: -1.5rem; }
    .card-logo { width: .6rem; }
    .card-sub { margin-top: .12rem; font-size: .135rem; line-height: .19rem; }
    .steps { display: none; }
    .form { position: static; width: auto; margin: 0 .24rem .32rem; padding-top: .22rem; }
    .form h1 { font-size: .3rem; line-height: .36rem; }
    .form-sub { margin-top: .04rem; font-size: .135rem; line-height: .2rem; }
    .oauth { gap: .1rem; margin-top: .2rem; }
    .oauth a { height: .46rem; border-radius: .1rem; font-size: .15rem; gap: .07rem; }
    .oauth svg { width: .18rem; height: .18rem; }
    .oauth .g { font-size: .16rem; }
    .or { margin-top: .16rem; height: .16rem; font-size: .1rem; line-height: .16rem; }
    .or::before { top: .08rem; }
    form { margin-top: .14rem; }
    .form label { font-size: .135rem; line-height: .18rem; margin-bottom: .12rem; }
    .two { gap: .1rem; }
    .form input { height: .46rem; margin-top: .05rem; padding: 0 .14rem; border-radius: .09rem; font-size: 16px; }
    .eye { right: .14rem; bottom: .15rem; width: .2rem; height: .14rem; }
    .help { margin-top: .08rem; font-size: .115rem; line-height: .16rem; }
    .submit { height: .5rem; margin-top: .14rem; border-radius: .1rem; font-size: .16rem; }
    .have { margin-top: .14rem; font-size: .135rem; line-height: .2rem; }
    body.login-page { overflow: auto; }
 .cli { margin-top: .2rem; }
 .cli-label { font-size: .135rem; line-height: .18rem; margin: .14rem 0 .05rem; }
 .cli-box { padding: .12rem .14rem; border-radius: .09rem; font-size: .12rem; line-height: .2rem; }
}