/* =========================================================
   HAMMER CRAFT ACCOUNT UI
========================================================= */


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


:root {

    --paper:
        #f1ede6;

    --paper-dark:
        #e7e0d6;

    --ink:
        #252321;

    --brown:
        #9a6537;

    --muted:
        #706b64;

    --line:
        rgba(
            37,
            35,
            33,
            0.16
        );

}


html {

    scroll-behavior:
        smooth;

}


body {

    background:
        var(--paper);

    color:
        var(--ink);

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

}


button,
input {

    font:
        inherit;

}


a {

    color:
        inherit;

}



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


.auth-header {

    width: 100%;

    height: 82px;

    padding:
        0
        6vw;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    background:
        rgba(
            241,
            237,
            230,
            0.96
        );

    backdrop-filter:
        blur(14px);

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

    border-bottom:
        1px solid
        var(--line);

}


.auth-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--ink);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        3px;

}


.auth-brand img {

    width:
        48px;

    height:
        48px;

    object-fit:
        contain;

}


.header-button {

    padding:
        13px
        18px;

    border:
        1px solid
        var(--ink);

    background:
        transparent;

    color:
        var(--ink);

    cursor:
        pointer;

    text-decoration:
        none;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        1.5px;

}


.header-button:hover {

    background:
        var(--ink);

    color:
        white;

}


.button-reset {

    appearance:
        none;

}



/* =========================================================
   AUTH PAGE
========================================================= */


.auth-page {

    min-height:
        100vh;

    padding:
        150px
        7vw
        80px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            400px,
            0.75fr
        );

    gap:
        9vw;

    align-items:
        center;

}


.eyebrow {

    color:
        var(--brown);

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        3px;

}


.auth-intro h1,
.account-hero h1 {

    margin-top:
        25px;

    font-size:
        clamp(
            65px,
            8vw,
            120px
        );

    line-height:
        0.86;

    letter-spacing:
        -7px;

}


.auth-intro h1 em,
.account-hero h1 em {

    display:
        block;

    color:
        var(--brown);

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        normal;

}


.auth-intro > p {

    max-width:
        560px;

    margin-top:
        35px;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.75;

}


.account-benefits {

    margin-top:
        45px;

    padding-top:
        20px;

    border-top:
        1px solid
        var(--line);

    display:
        flex;

    gap:
        30px;

    color:
        var(--muted);

    font-size:
        7px;

    font-weight:
        bold;

    letter-spacing:
        2px;

}



/* =========================================================
   AUTH PANEL
========================================================= */


.auth-panel {

    width:
        100%;

    max-width:
        620px;

    padding:
        42px;

    background:
        var(--paper-dark);

}


.auth-panel form {

    display:
        flex;

    flex-direction:
        column;

}


.auth-panel
label:not(
    .check-row
) {

    margin-bottom:
        28px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        2px;

}


.auth-panel input[
    type="text"
],

.auth-panel input[
    type="email"
],

.auth-panel input[
    type="password"
] {

    width:
        100%;

    padding:
        13px
        0;

    border:
        none;

    border-bottom:
        1px solid
        var(--line);

    outline:
        none;

    background:
        transparent;

    color:
        var(--ink);

    font-size:
        15px;

}


.auth-panel input:focus {

    border-bottom-color:
        var(--brown);

}


.check-row {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.55;

}


.small-check {

    margin:
        0;

}


.login-tools {

    margin-bottom:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.text-button {

    border:
        none;

    background:
        transparent;

    color:
        var(--brown);

    cursor:
        pointer;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        1px;

}


.main-button {

    width:
        100%;

    height:
        58px;

    margin-top:
        28px;

    padding:
        0
        20px;

    border:
        none;

    background:
        var(--ink);

    color:
        white;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1.5px;

}


.main-button:hover {

    background:
        var(--brown);

}


.form-message {

    min-height:
        22px;

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.6;

}


.form-message.error {

    color:
        #9c3535;

}


.form-message.success {

    color:
        #4e7145;

}


.auth-panel-footer {

    margin-top:
        28px;

    padding-top:
        20px;

    border-top:
        1px solid
        var(--line);

    color:
        var(--muted);

    font-size:
        12px;

}


.auth-panel-footer a {

    color:
        var(--ink);

    font-weight:
        bold;

}



/* =========================================================
   ACCOUNT PAGE
========================================================= */


.account-page {

    min-height:
        100vh;

    padding:
        150px
        7vw
        100px;

}


.account-hero {

    max-width:
        1100px;

}


.customer-info {

    margin-top:
        35px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.customer-info strong {

    font-size:
        18px;

}


.customer-info span {

    color:
        var(--muted);

    font-size:
        13px;

}



/* =========================================================
   ACCOUNT ACTIONS
========================================================= */


.account-actions {

    margin-top:
        80px;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

}


.account-action {

    min-height:
        270px;

    padding:
        28px;

    border:
        1px solid
        var(--line);

    color:
        var(--ink);

    text-decoration:
        none;

    display:
        grid;

    grid-template-columns:
        40px
        1fr
        35px;

    gap:
        15px;

}


a.account-action:hover {

    background:
        var(--paper-dark);

}


.action-number {

    color:
        var(--brown);

    font-size:
        9px;

}


.account-action h2 {

    margin-top:
        85px;

    font-size:
        21px;

}


.account-action p {

    max-width:
        300px;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.6;

}


.action-arrow {

    font-size:
        18px;

}


.action-arrow.muted {

    color:
        var(--muted);

    font-size:
        7px;

    font-weight:
        bold;

    letter-spacing:
        1px;

}



/* =========================================================
   SCAN HISTORY
========================================================= */


.scan-history {

    margin-top:
        120px;

}


.section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

}


.section-heading h2 {

    margin-top:
        15px;

    font-size:
        clamp(
            40px,
            5vw,
            75px
        );

    letter-spacing:
        -4px;

}


.small-button {

    padding:
        13px
        17px;

    border:
        1px solid
        var(--ink);

    color:
        var(--ink);

    text-decoration:
        none;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        1px;

}


.scan-list {

    margin-top:
        50px;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px;

}


.loading-card,
.empty-scans,
.scan-history-card {

    min-height:
        230px;

    padding:
        25px;

    border:
        1px solid
        var(--line);

}


.loading-card {

    color:
        var(--muted);

}


.empty-scans {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.empty-scans strong {

    font-size:
        18px;

}


.empty-scans p {

    margin-top:
        10px;

    color:
        var(--muted);

}


.empty-scans a {

    margin-top:
        25px;

    color:
        var(--brown);

    font-size:
        9px;

    font-weight:
        bold;

}


.scan-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size:
        8px;

    letter-spacing:
        1px;

}


.scan-card-top strong {

    color:
        var(--brown);

}


.scan-history-card h3 {

    margin-top:
        50px;

    font-size:
        24px;

}


.scan-stats {

    margin-top:
        30px;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        15px;

}


.scan-stats div {

    padding-top:
        12px;

    border-top:
        1px solid
        var(--line);

}


.scan-stats span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        7px;

}


.scan-stats strong {

    display:
        block;

    margin-top:
        5px;

    font-size:
        10px;

}


.scan-id {

    margin-top:
        25px;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        8px;

    word-break:
        break-all;

}



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


@media
(max-width: 850px) {


    .auth-header {

        height:
            72px;

        padding:
            0
            18px;

    }


    .auth-page {

        padding:
            120px
            20px
            60px;

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .auth-intro h1,
    .account-hero h1 {

        font-size:
            60px;

        letter-spacing:
            -5px;

    }


    .auth-panel {

        max-width:
            none;

        padding:
            28px
            22px;

    }


    .account-page {

        padding:
            120px
            20px
            70px;

    }


    .account-actions {

        grid-template-columns:
            1fr;

    }


    .account-action {

        min-height:
            220px;

    }


    .scan-list {

        grid-template-columns:
            1fr;

    }


    .section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .account-benefits {

        flex-wrap:
            wrap;

    }

}