@charset "UTF-8";

@import url(
    "https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap"
);

main {
    width: 100%;
    height: auto;

    padding:
        clamp(
            56px,
            9vh,
            96px
        )
        0
        0;

    box-sizing: border-box;

    display: flex;
    flex-flow: column nowrap;

    justify-content: flex-start;
    align-items: center;
}

main > form {
    width: 85%;
    max-width: 520px;

    height: auto;

    margin: 0;

    box-sizing: border-box;

    display: flex;
    flex-flow: column nowrap;

    justify-content: flex-start;
    align-items: center;
}

main > form > h1 {
    margin:
        0
        0
        28px;

    text-align: center;

    font-family:
        "Alfa Slab One",
        Georgia,
        serif;

    font-size: 2.5em;
    font-weight: 400;
}

main > form > p {
    width: 100%;

    display: flex;
    flex-flow: column nowrap;

    justify-content: space-evenly;
    align-items: center;
}

main > form > p.em-linha {
    margin:
        5px
        0;

    display: flex;
    flex-flow: row nowrap;

    justify-content: flex-start;
    align-items: center;
}

main > form > p > label {
    width: 100%;

    font-size: 0.8em;
    font-weight: bold;
}

main > form > p > input {
    width: 100%;

    padding: 12px;

    border: none;
    border-bottom:
        1px solid
        #888888;

    border-radius: 0;

    outline: none;

    background: transparent;

    font-size: 1.2em;
}

main > form > p > input:focus {
    border-bottom-color:
        #111111;
}

main > form > p.em-linha > input {
    flex:
        0
        0
        auto;

    width: 26px;
    height: 26px;

    margin:
        0
        8px
        0
        0;

    accent-color:
        #ed1f35;
}

main > form > p.em-linha > label {
    width: auto;

    font-size: 0.9em;
}

main > form > input[type="submit"] {
    align-self: flex-end;

    margin-top: 10px;

    padding:
        12px
        26px;

    border: none;

    border-radius: 18px;

    background-color:
        #ed1f35;

    color:
        #ffffff;

    font-size: 1em;

    cursor: pointer;

    transition:
        transform
        120ms
        ease,

        background-color
        160ms
        ease;
}

main > form > input[type="submit"]:active {
    transform:
        scale(0.97);

    background-color:
        #d8182d;
}

aside {
    width:
        min(
            calc(100vw - 40px),
            430px
        );

    height: auto;

    margin:
        24px
        auto
        max(
            24px,
            env(
                safe-area-inset-bottom
            )
        );

    padding: 10px;

    box-sizing: border-box;

    border:
        1px solid
        #ececf0;

    border-radius: 24px;

    background:
        rgba(
            247,
            247,
            249,
            0.92
        );

    box-shadow:
        0
        12px
        34px
        rgba(
            0,
            0,
            0,
            0.07
        );

    display: flex;
    flex-flow: column nowrap;

    gap: 6px;
}

aside > a {
    width: 100%;

    min-height: 48px;

    padding:
        12px
        16px;

    border-radius: 16px;

    color:
        #202024;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    display: flex;

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

    transition:
        background-color
        160ms
        ease,

        transform
        120ms
        ease;

    -webkit-tap-highlight-color:
        transparent;
}

aside > a:active {
    transform:
        scale(0.98);
}

aside > a#esqueci-palavra-passe {
    color:
        #62626b;

    font-size: 0.95rem;
    font-weight: 650;
}

aside > a#esqueci-palavra-passe:hover,
aside > a#esqueci-palavra-passe:focus-visible {
    background-color:
        #ffffff;
}

aside > a#registar {
    gap: 5px;

    background-color:
        #ffffff;

    color:
        #62626b;

    font-size: 0.95rem;
}

aside > a#registar > span {
    color:
        #ed1f35;

    font-weight: 750;
}

aside > a#registar:hover,
aside > a#registar:focus-visible {
    background-color:
        #fff1f3;
}

aside > a:focus-visible,
main > form > input[type="submit"]:focus-visible {
    outline:
        2px solid
        #ed1f35;

    outline-offset:
        2px;
}

/*
 * iPhones altos, como o iPhone 16 Pro Max:
 * baixa ligeiramente todo o bloco de autenticação
 * para aproveitar melhor o espaço vertical.
 *
 * O compatibility mode do iPad fica fora desta regra,
 * preservando o layout já validado no iPad Air 11".
 */
@media (max-width: 480px) and (min-height: 900px) {
    main {
        padding-top: 140px;
    }
}

@media (max-height: 740px) {
    main {
        padding-top: 36px;
    }

    aside {
        margin-top: 20px;
    }
}

/*
 * Transição nativa entre Entrar e Criar conta.
 *
 * Um pouco mais lenta para o movimento ser claramente
 * perceptível sem voltar a parecer pesado.
 */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation:
        margot-auth-sair
        240ms
        cubic-bezier(.4, 0, .2, 1)
        both;
}

::view-transition-new(root) {
    animation:
        margot-auth-entrar
        330ms
        cubic-bezier(.22, .8, .28, 1)
        both;
}

@keyframes margot-auth-sair {
    from {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        opacity: 0.88;

        transform:
            translate3d(
                -28px,
                0,
                0
            );
    }
}

@keyframes margot-auth-entrar {
    from {
        opacity: 0.84;

        transform:
            translate3d(
                38px,
                0,
                0
            );
    }

    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}