/* ======================================== 
   PENGAKOLL 
======================================== */ 
 
 
/* ======================================== 
   COLORS 
======================================== */ 
 
:root { 
 
    --background: 
        #E8E6E1; 
 
    --text: 
        #20242A; 
 
    --text-soft: 
        #4F555B; 
 
    --accent: 
        #3F91D1; 
 
} 
 
 
 
/* ======================================== 
   RESET 
======================================== */ 
 
* { 
    margin: 
        0; 
 
    padding: 
        0; 
 
    box-sizing: 
        border-box; 
} 
 
 
html, 
body { 
    width: 
        100%; 
 
    min-height: 
        100%; 
} 
 
 
body { 
    min-height: 
        100vh; 
 
    min-height: 
        100dvh; 
 
    background: 
        var(--background); 
 
    color: 
        var(--text); 
 
    font-family: 
        Arial, 
        Helvetica, 
        sans-serif; 
}



/* ========================================
   BODY NÄR POPUP ÄR ÖPPEN
======================================== */

body.auth-open {
    overflow:
        hidden;
}



/* ========================================
   LOGGA IN
======================================== */

.login-button {
    position:
        fixed;

    top:
        28px;

    right:
        40px;

    z-index:
        10;

    padding:
        13px 24px;

    background:
        var(--text);

    color:
        var(--background);

    border:
        none;

    border-radius:
        14px;

    font-family:
        inherit;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}


.login-button:hover {
    background:
        #34393F;

    transform:
        translateY(-1px);
}


.login-button:active {
    transform:
        translateY(1px);
}
 
 
 
/* ======================================== 
   HERO 
======================================== */ 
 
.hero { 
    width: 
        min( 
            calc(100% - 80px), 
            1480px 
        ); 
 
    min-height: 
        100vh; 
 
    min-height: 
        100dvh; 
 
    margin: 
        0 auto; 
 
    display: 
        flex; 
 
    align-items: 
        center;

    justify-content:
        flex-start;

    gap:
        75px;
} 
 
 
 
/* ======================================== 
   CONTENT 
======================================== */ 
 
.hero-content { 
    display: 
        flex; 
 
    flex-direction: 
        column; 
 
    align-items: 
        flex-start; 
 
    max-width: 
        900px;

    flex-shrink:
        0;
} 
 
 
 
/* ======================================== 
   PENGAKOLL 
======================================== */ 
 
.brand { 
    margin: 
        0; 
 
    margin-bottom: 
        10px; 
 
    color: 
        var(--text); 
 
    font-size: 
        90px; 
 
    font-weight: 
        800; 
 
    line-height: 
        0.95; 
 
    letter-spacing: 
        -0.045em; 
} 
 
 
 
/* ======================================== 
   MINDRE RÄKNANDE 
======================================== */ 
 
.less-counting { 
    margin: 
        0; 
 
    margin-bottom: 
        0; 
 
    color: 
        var(--text); 
 
    font-size: 
        64px; 
 
    font-weight: 
        800; 
 
    line-height: 
        0.95; 
 
    letter-spacing: 
        -0.045em; 
} 
 
 
 
/* ======================================== 
   MER KOLL 
======================================== */ 
 
.more-control { 
    margin: 
        0; 
 
    margin-bottom: 
        8px; 
 
    color: 
        var(--accent); 
 
    font-size: 
        58px; 
 
    font-weight: 
        800; 
 
    line-height: 
        1; 
 
    letter-spacing: 
        -0.045em; 
} 
 
 
 
/* ======================================== 
   LILLA TEXTEN 
======================================== */ 
 
.intro-text { 
    width: 
        min( 
            100%, 
            620px 
        ); 
 
    margin: 
        0; 
 
    color: 
        var(--text-soft); 
 
    font-size: 
        18px; 
 
    font-weight: 
        400; 
 
    line-height: 
        1.4; 
}



/* ========================================
   PROVA PENGAKOLL
======================================== */

.try-button {
    margin:
        20px 0 0;

    padding:
        13px 24px;

    background:
        var(--text);

    color:
        var(--background);

    border:
        none;

    border-radius:
        14px;

    font-family:
        inherit;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}


.try-button:hover {
    background:
        #34393F;

    transform:
        translateY(-1px);
}


.try-button:active {
    transform:
        translateY(1px);
}



/* ========================================
   PIE CHART
======================================== */

.pie-chart {
    width:
        320px;

    height:
        320px;

    flex-shrink:
        0;

    transform:
        translateY(-35px);
}


.pie-chart svg {
    display:
        block;

    width:
        100%;

    height:
        100%;

    overflow:
        visible;
}



/* ========================================
   PIE PIECES
======================================== */

.pie-piece {
    cursor:
        pointer;

    transition:
        transform 0.22s ease;

    transform-box:
        fill-box;

    transform-origin:
        center;
}



/* ========================================
   BLÅ DEL
   TYDLIGARE MELLANRUM
======================================== */

.pie-blue {
    fill:
        #3F91D1;

    transform:
        translate(7px, -4px);
}


.pie-blue:hover {
    transform:
        translate(12px, -7px);
}



/* ========================================
   GRÖN DEL
   LITET MELLANRUM
======================================== */

.pie-green {
    fill:
        #9EAF98;

    transform:
        translate(0, 2px);
}


.pie-green:hover {
    transform:
        translate(0, 8px);
}



/* ========================================
   LILA DEL
   LITET MELLANRUM
======================================== */

.pie-purple {
    fill:
        #AAA0C4;

    transform:
        translate(-2px, -1px);
}


.pie-purple:hover {
    transform:
        translate(-8px, -5px);
}



/* ========================================
   AUTH OVERLAY
======================================== */

.auth-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(32, 36, 42, 0);

    backdrop-filter:
        blur(0px);

    -webkit-backdrop-filter:
        blur(0px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 0.35s ease,
        background 0.35s ease,
        backdrop-filter 0.35s ease,
        visibility 0.35s ease;
}


.auth-overlay.is-open {
    background:
        rgba(32, 36, 42, 0.28);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}



/* ========================================
   AUTH MODAL
======================================== */

.auth-modal {
    position:
        relative;

    width:
        min(
            100%,
            430px
        );

    padding:
        42px 38px 36px;

    background:
        #F1F0EC;

    border:
        1px solid rgba(32, 36, 42, 0.08);

    border-radius:
        22px;

    box-shadow:
        0 18px 60px rgba(32, 36, 42, 0.14);

    opacity:
        0;

    transform:
        translateY(24px)
        scale(0.965);

    transition:
        opacity 0.32s ease,
        transform 0.42s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );
}


.auth-overlay.is-open .auth-modal {
    opacity:
        1;

    transform:
        translateY(0)
        scale(1);
}

/* ========================================
   STÄNG POPUP
======================================== */

.auth-close {
    position:
        absolute;

    top:
        14px;

    right:
        17px;

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        transparent;

    color:
        var(--text-soft);

    border:
        none;

    border-radius:
        50%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        27px;

    font-weight:
        400;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.auth-close:hover {
    background:
        rgba(32, 36, 42, 0.07);

    color:
        var(--text);
}



/* ========================================
   AUTH CONTENT
======================================== */

.auth-content {
    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity 0.12s ease,
        transform 0.12s ease;
}


.auth-content.is-changing {
    opacity:
        0;

    transform:
        translateY(4px);
}



/* ========================================
   AUTH HEADER
======================================== */

.auth-header {
    margin-bottom:
        26px;

    padding-right:
        30px;
}


.auth-title {
    margin:
        0 0 7px;

    color:
        var(--text);

    font-size:
        30px;

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -0.035em;
}


.auth-description {
    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        15px;

    line-height:
        1.45;
}



/* ========================================
   AUTH FORM
======================================== */

.auth-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;
}



/* ========================================
   AUTH FIELD
======================================== */

.auth-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.auth-field label {
    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        700;
}


.auth-field input {
    width:
        100%;

    height:
        48px;

    padding:
        0 14px;

    background:
        var(--background);

    color:
        var(--text);

    border:
        1px solid rgba(32, 36, 42, 0.18);

    border-radius:
        12px;

    outline:
        none;

    font-family:
        inherit;

    font-size:
        16px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.auth-field input:hover {
    border-color:
        rgba(32, 36, 42, 0.32);
}


.auth-field input:focus {
    border-color:
        var(--accent);

    box-shadow:
        0 0 0 3px rgba(63, 145, 209, 0.12);
}



/* ========================================
   AUTH MAIN BUTTON
======================================== */

.auth-main-button {
    width:
        100%;

    min-height:
        48px;

    margin-top:
        3px;

    padding:
        12px 18px;

    background:
        var(--text);

    color:
        var(--background);

    border:
        none;

    border-radius:
        14px;

    font-family:
        inherit;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.auth-main-button:hover {
    background:
        #34393F;

    transform:
        translateY(-1px);
}


.auth-main-button:active {
    transform:
        translateY(1px);
}



/* ========================================
   AUTH TEXT BUTTON
======================================== */

.auth-text-button {
    display:
        block;

    margin:
        16px auto 0;

    padding:
        3px;

    background:
        transparent;

    color:
        var(--text-soft);

    border:
        none;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;
}


.auth-text-button:hover {
    color:
        var(--accent);
}



/* ========================================
   AUTH DIVIDER
======================================== */

.auth-divider {
    width:
        100%;

    height:
        1px;

    margin:
        24px 0 20px;

    background:
        rgba(32, 36, 42, 0.10);
}



/* ========================================
   AUTH SWITCH
======================================== */

.auth-switch-text {
    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        14px;

    line-height:
        1.5;

    text-align:
        center;
}


.auth-link-button {
    margin-left:
        3px;

    padding:
        0;

    background:
        transparent;

    color:
        var(--accent);

    border:
        none;

    font-family:
        inherit;

    font-size:
        inherit;

    font-weight:
        700;

    cursor:
        pointer;
}


.auth-link-button:hover {
    text-decoration:
        underline;
}

/* ========================================
   AUTH MESSAGE
======================================== */

.auth-message {
    display:
        none;

    margin:
        -4px 0 0;

    padding:
        11px 13px;

    border-radius:
        10px;

    font-size:
        14px;

    line-height:
        1.4;
}


.auth-message:not(:empty) {
    display:
        block;
}


.auth-message.is-error {
    background:
        rgba(180, 70, 70, 0.08);

    color:
        #8E3F3F;
}


.auth-message.is-success {
    background:
        rgba(86, 130, 83, 0.10);

    color:
        #476B45;
}



/* ========================================
   AUTH BUTTON DISABLED
======================================== */

.auth-main-button:disabled {
    opacity:
        0.65;

    cursor:
        default;

    transform:
        none;
}

/* ========================================
   MOBILE

   Vi ändrar fortfarande inte textstorlekarna
   på själva framsidan här.
======================================== */

@media (
    max-width: 700px
) {

    .hero {
        width:
            calc(100% - 40px);
    }


    .login-button {
        top:
            20px;

        right:
            20px;
    }


    .auth-overlay {
        padding:
            18px;
    }


    .auth-modal {
        padding:
            40px 24px 30px;

        border-radius:
            20px;
    }

}