/* ==================================================
   THRU
   Main Stylesheet
================================================== */


/* --------------------------------------------------
   Reset
-------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #1f2b20;

    background:
        linear-gradient(
            180deg,
            #eef3ea 0%,
            #dfe9d8 100%
        );

    padding: 24px 14px;
}


/* --------------------------------------------------
   Main Shell
-------------------------------------------------- */

.game-shell {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;
}


/* --------------------------------------------------
   Header
-------------------------------------------------- */

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.brand {
    display: flex;
    align-items: center;

    gap: 12px;
}

.app-header-icon {
    width: 48px;
    height: 48px;

    display: block;

    flex: 0 0 48px;

    object-fit: cover;

    border-radius: 8px;
}

.brand-text {
    min-width: 0;
}

h1 {
    margin: 0;

    font-size: 42px;
    line-height: 1;

    letter-spacing: 0.14em;
}

.subtitle {
    margin: 5px 0 0;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    opacity: 0.55;
}


/* --------------------------------------------------
   Header Actions
-------------------------------------------------- */

.header-actions {
    display: flex;
    align-items: center;

    gap: 12px;
}


/* --------------------------------------------------
   Menu Container
-------------------------------------------------- */

.menu-container {
    position: relative;

    flex: 0 0 auto;
}


/* --------------------------------------------------
   Menu Button
-------------------------------------------------- */

.menu-button {
    width: 48px;
    height: 48px;

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

    padding: 0;

    color:
        #304e35;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid
        rgba(31, 43, 32, 0.12);

    border-radius: 8px;

    font-family: inherit;

    font-size: 27px;
    line-height: 1;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 12px
        rgba(31, 43, 32, 0.07);

    transition:
        transform 0.12s ease,
        background 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.menu-button:hover {
    transform:
        translateY(-1px);

    background:
        rgba(255, 255, 255, 0.95);

    border-color:
        rgba(31, 43, 32, 0.18);

    box-shadow:
        0 7px 14px
        rgba(31, 43, 32, 0.10);
}

.menu-button:active {
    transform:
        translateY(0);
}

.menu-button:focus-visible {
    outline:
        2px solid
        #4d704f;

    outline-offset: 3px;
}


/* --------------------------------------------------
   Main Menu
-------------------------------------------------- */

.main-menu {
    position: absolute;

    z-index: 100;

    top: calc(100% + 8px);
    right: 0;

    width: 150px;

    padding: 6px;

    background:
        rgba(248, 250, 245, 0.99);

    border:
        1px solid
        rgba(31, 43, 32, 0.12);

    border-radius: 12px;

    box-shadow:
        0 14px 32px
        rgba(31, 43, 32, 0.16);
}


/* --------------------------------------------------
   Menu Item
-------------------------------------------------- */

.menu-item {
    width: 100%;

    display: block;

    padding: 11px 12px;

    text-align: left;

    color:
        #304e35;

    background:
        transparent;

    border: 0;
    border-radius: 8px;

    font-family: inherit;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;

    cursor: pointer;

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

.menu-item:hover {
    background:
        rgba(77, 112, 79, 0.09);
}

.menu-item:focus-visible {
    outline:
        2px solid
        #4d704f;

    outline-offset: -2px;
}


/* --------------------------------------------------
   Main Game Board
-------------------------------------------------- */

.game-board {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(220px, 0.8fr);

    gap: 14px;

    align-items: stretch;
}


/* --------------------------------------------------
   Trail Panel
-------------------------------------------------- */

.trail-panel {
    display: flex;
    flex-direction: column;

    min-height: 610px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid
        rgba(31, 43, 32, 0.12);

    border-radius: 22px;

    box-shadow:
        0 12px 32px
        rgba(31, 43, 32, 0.09);
}


/* --------------------------------------------------
   Trail Header
-------------------------------------------------- */

.trail-header {
    padding: 20px 18px 16px;

    text-align: center;

    border-bottom:
        1px solid
        rgba(31, 43, 32, 0.08);
}

.progress-label,
.stat-label {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.13em;

    opacity: 0.5;
}

.current-mile {
    margin-top: 6px;

    font-size: 28px;
    font-weight: 800;
}


/* --------------------------------------------------
   Trail Map
-------------------------------------------------- */

.trail-map {
    position: relative;

    flex: 1;

    min-height: 450px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(223, 234, 215, 0.45) 0%,
            rgba(239, 245, 234, 0.7) 28%,
            rgba(248, 250, 245, 0.95) 50%,
            rgba(239, 245, 234, 0.7) 72%,
            rgba(223, 234, 215, 0.45) 100%
        );
}


/* --------------------------------------------------
   Vertical Appalachian Trail
-------------------------------------------------- */

.trail-line {
    position: absolute;

    top: -20px;
    bottom: -20px;

    left: 50%;

    width: 6px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            180deg,
            #8c7458 0%,
            #ab8b65 50%,
            #8c7458 100%
        );

    border-radius: 99px;

    box-shadow:
        0 0 0 3px
        rgba(255, 255, 255, 0.6);
}


/* --------------------------------------------------
   Hiker Marker
-------------------------------------------------- */

.hiker-marker {
    position: absolute;

    z-index: 10;

    top: 50%;
    left: 50%;

    width: 58px;
    height: 58px;

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

    transform:
        translate(-50%, -50%);

    font-size: 32px;

    background:
        rgba(255, 255, 255, 0.97);

    border:
        3px solid
        #4d704f;

    border-radius: 50%;

    box-shadow:
        0 8px 20px
        rgba(31, 43, 32, 0.18);
}


/* --------------------------------------------------
   Trail Direction
-------------------------------------------------- */

.trail-direction {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 14px 12px 16px;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.06em;

    opacity: 0.55;

    border-top:
        1px solid
        rgba(31, 43, 32, 0.08);
}

.direction-arrow {
    font-size: 18px;

    opacity: 0.8;
}


/* --------------------------------------------------
   Dashboard
-------------------------------------------------- */

.dashboard {
    display: grid;

    grid-template-rows:
        auto
        auto
        auto
        1fr;

    gap: 14px;
}


/* --------------------------------------------------
   Dashboard Cards
-------------------------------------------------- */

.dashboard-card {
    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid
        rgba(31, 43, 32, 0.12);

    border-radius: 22px;

    box-shadow:
        0 12px 32px
        rgba(31, 43, 32, 0.09);
}


/* --------------------------------------------------
   Stamina
-------------------------------------------------- */

.stamina-card {
    padding: 24px 20px;
}

.stat-value {
    margin-top: 5px;

    font-size: 38px;
    font-weight: 800;
}

.stamina-bar {
    width: 100%;
    height: 12px;

    margin-top: 15px;

    overflow: hidden;

    background:
        #d6ddd2;

    border-radius: 99px;
}

.stamina-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #3d6443,
            #60815f
        );

    border-radius: 99px;

    transition:
        width 0.25s ease;
}


/* --------------------------------------------------
   Miles
-------------------------------------------------- */

.miles-card {
    padding: 24px 20px;
}

.miles-value {
    margin-top: 4px;

    font-size: 44px;
    line-height: 1;

    font-weight: 850;
}


/* --------------------------------------------------
   Next Landmark
-------------------------------------------------- */

.next-card {
    padding: 20px;
}

.next-landmark-content {
    min-height: 118px;

    display: flex;
    flex-direction: column;

    margin-top: 8px;
}

.next-landmark-name {
    min-height: 64px;

    display: flex;
    align-items: flex-start;

    font-size: 18px;
    line-height: 1.2;

    font-weight: 800;

    color: #1f2b20;
}

.next-landmark-type {
    margin-top: 5px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    opacity: 0.45;
}

.next-landmark-distance {
    margin-top: 14px;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 0.06em;

    color: #4d704f;
}

/* --------------------------------------------------
   Action
-------------------------------------------------- */

.action-card {
    display: flex;
    flex-direction: column;

    min-height: 0;

    padding: 0;
}


/* --------------------------------------------------
   Movement Direction Row
-------------------------------------------------- */

.movement-direction-row {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 7px;

    margin-bottom: 8px;
}

.movement-direction-button {
    height: 44px;

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

    padding: 0;

    border:
        1px solid
        rgba(31, 43, 32, 0.16);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.78);

    color:
        #304e35;

    font-family: inherit;

    font-size: 24px;
    line-height: 1;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 5px 12px
        rgba(31, 43, 32, 0.07);

    transition:
        transform 0.12s ease,
        background 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.movement-direction-button:hover:not(:disabled) {
    transform:
        translateY(-1px);

    box-shadow:
        0 7px 14px
        rgba(31, 43, 32, 0.10);
}

.movement-direction-button:active:not(:disabled) {
    transform:
        translateY(0);
}

.movement-direction-button.selected {
    background:
        #4d704f;

    color:
        #ffffff;

    border-color:
        #4d704f;

    box-shadow:
        0 6px 14px
        rgba(77, 112, 79, 0.24);
}

.movement-direction-button:disabled {
    cursor: default;

    opacity: 0.28;

    box-shadow: none;
}


/* --------------------------------------------------
   Hike
-------------------------------------------------- */

.hike-form {
    display: flex;

    width: 100%;
    height: 100%;

    margin: 0;
}

.hike-button {
    width: 100%;
    min-height: 130px;

    flex: 1;

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

    gap: 7px;

    border: 0;

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            #304e35 0%,
            #263d29 100%
        );

    color: white;

    cursor: pointer;

    box-shadow:
        0 12px 32px
        rgba(38, 61, 41, 0.22);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease;
}

.hike-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 15px 34px
        rgba(38, 61, 41, 0.27);
}

.hike-button:active {
    transform:
        translateY(0);
}

.hike-button:disabled {
    cursor: not-allowed;

    opacity: 0.42;

    transform: none;
}

.hike-icon {
    font-size: 36px;
    line-height: 1;
}

.hike-text {
    font-size: 21px;
    font-weight: 850;

    letter-spacing: 0.1em;
}


/* --------------------------------------------------
   Warning
-------------------------------------------------- */

.warning {
    margin-top: 14px;

    padding: 12px;

    text-align: center;

    font-size: 12px;
    line-height: 1.4;

    background:
        rgba(235, 218, 190, 0.62);

    border-radius: 12px;
}


/* ==================================================
   Pockit Labs Dialog
================================================== */


/* --------------------------------------------------
   Dialog
-------------------------------------------------- */

.about-dialog {
    width:
        min(
            92vw,
            500px
        );

    max-height: 88vh;

    margin: auto;

    padding: 0;

    overflow: auto;

    color: #1f2b20;

    background:
        rgba(248, 250, 245, 0.99);

    border:
        1px solid
        rgba(31, 43, 32, 0.14);

    border-radius: 24px;

    box-shadow:
        0 24px 70px
        rgba(31, 43, 32, 0.28);
}

.about-dialog::backdrop {
    background:
        rgba(22, 31, 23, 0.58);

    backdrop-filter:
        blur(3px);
}


/* --------------------------------------------------
   Dialog Content
-------------------------------------------------- */

.about-dialog-content {
    padding: 28px;
}

.about-dialog-content p {
    margin:
        0 0 16px;

    font-size: 14px;
    line-height: 1.65;

    color: #344336;
}

.about-dialog-content p:last-of-type {
    margin-bottom: 0;
}


/* --------------------------------------------------
   Pockit Labs Brand
-------------------------------------------------- */

.about-brand {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 24px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(31, 43, 32, 0.10);
}

.about-logo {
    width: 64px;
    height: 64px;

    flex: 0 0 auto;

    object-fit: contain;
}

.about-brand-text {
    min-width: 0;
}

.about-brand-text h2 {
    margin: 0;

    font-size: 25px;
    line-height: 1.1;

    font-weight: 850;

    letter-spacing: -0.02em;
}

.about-tagline {
    margin:
        5px 0 0
        !important;

    font-size:
        11px
        !important;

    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    opacity: 0.55;
}


/* --------------------------------------------------
   Pockit Labs Social Links
-------------------------------------------------- */

.about-socials {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 24px;
}

.about-social-link {
    width: 42px;
    height: 42px;

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

    color: #304e35;

    background:
        rgba(77, 112, 79, 0.08);

    border:
        1px solid
        rgba(77, 112, 79, 0.18);

    border-radius: 50%;

    font-size: 18px;
    font-weight: 850;

    text-decoration: none;

    transition:
        transform 0.12s ease,
        background 0.12s ease,
        border-color 0.12s ease;
}

.about-social-link:hover {
    transform:
        translateY(-1px);

    background:
        rgba(77, 112, 79, 0.14);

    border-color:
        rgba(77, 112, 79, 0.28);
}


/* --------------------------------------------------
   Dialog Close Button
-------------------------------------------------- */

.secondary-button {
    font-family: inherit;
}

.about-close-button {
    width: 100%;

    margin-top: 22px;

    padding: 12px 18px;

    color: #ffffff;

    background:
        #304e35;

    border: 0;

    border-radius: 12px;

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 0.09em;

    cursor: pointer;

    box-shadow:
        0 7px 16px
        rgba(38, 61, 41, 0.18);

    transition:
        transform 0.12s ease,
        background 0.12s ease,
        box-shadow 0.12s ease;
}

.about-close-button:hover {
    transform:
        translateY(-1px);

    background:
        #263d29;

    box-shadow:
        0 9px 20px
        rgba(38, 61, 41, 0.22);
}

.about-close-button:active {
    transform:
        translateY(0);
}


/* --------------------------------------------------
   Tablet / Small Screens
-------------------------------------------------- */

@media (max-width: 620px) {

    body {
        padding:
            16px 10px 20px;
    }

    .game-header {
        margin-bottom: 12px;
    }

    .app-header-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }

    h1 {
        font-size: 34px;
    }

    .subtitle {
        font-size: 10px;
    }

    .header-actions {
        gap: 8px;
    }

    .menu-button {
        width: 48px;
        height: 48px;

        border-radius: 8px;

        font-size: 27px;
    }

    .main-menu {
        top: calc(100% + 7px);

        width: 140px;
    }

    .game-board {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(150px, 0.85fr);

        gap: 9px;
    }

    .trail-panel {
        min-height: 560px;

        border-radius: 18px;
    }

    .dashboard {
        gap: 9px;
    }

    .dashboard-card {
        border-radius: 18px;
    }

    .trail-header {
        padding:
            16px 8px 12px;
    }

    .current-mile {
        font-size: 23px;
    }

    .trail-map {
        min-height: 420px;
    }

    .hiker-marker {
        width: 52px;
        height: 52px;

        font-size: 28px;
    }

    .trail-direction {
        gap: 5px;

        padding:
            12px 6px;

        font-size: 8px;
    }

    .stamina-card,
    .miles-card {
        padding:
            18px 14px;
    }

    .stat-value {
        font-size: 30px;
    }

    .miles-value {
        font-size: 34px;
    }

    .next-card {
        padding:
            16px 13px;
    }

    .next-landmark-content {
        min-height: 105px;

        margin-top: 9px;
    }

    .next-landmark-name {
        min-height: 52px;

        font-size: 14px;
    }

    .next-landmark-type {
        margin-top: 4px;

        font-size: 8px;
    }

    .next-landmark-distance {
        margin-top: 10px;

        font-size: 11px;
    }

    .movement-direction-row {
        gap: 5px;

        margin-bottom: 7px;
    }

    .movement-direction-button {
        height: 38px;

        border-radius: 10px;

        font-size: 21px;
    }

    .action-card {
        min-height: 150px;

        padding: 0;
    }

    .hike-button {
        min-height: 110px;

        border-radius: 18px;
    }

    .hike-icon {
        font-size: 31px;
    }

    .hike-text {
        font-size: 17px;
    }

    .about-dialog {
        width:
            min(
                94vw,
                460px
            );

        border-radius: 20px;
    }

    .about-dialog-content {
        padding: 22px;
    }

    .about-logo {
        width: 56px;
        height: 56px;
    }

}


/* --------------------------------------------------
   Very Small Phones
-------------------------------------------------- */

@media (max-width: 390px) {

    .brand {
        gap: 8px;
    }

    h1 {
        font-size: 30px;
    }

    .game-board {
        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(130px, 0.88fr);
    }

    .progress-label,
    .stat-label {
        font-size: 9px;
    }

    .current-mile {
        font-size: 20px;
    }

    .stat-value {
        font-size: 27px;
    }

    .miles-value {
        font-size: 30px;
    }

    .stamina-card,
    .miles-card {
        padding:
            16px 11px;
    }

    .next-card {
        padding:
            14px 11px;
    }

    .next-landmark-name {
        min-height: 48px;

        font-size: 13px;
    }

    .next-landmark-distance {
        font-size: 10px;
    }

    .trail-direction span:first-child,
    .trail-direction span:last-child {
        font-size: 7px;
    }

    .movement-direction-button {
        height: 34px;

        border-radius: 9px;

        font-size: 18px;
    }

    .about-dialog-content {
        padding: 19px;
    }

    .about-brand {
        gap: 12px;

        margin-bottom: 20px;

        padding-bottom: 17px;
    }

    .about-logo {
        width: 50px;
        height: 50px;
    }

    .about-brand-text h2 {
        font-size: 22px;
    }

    .about-dialog-content p {
        font-size: 13px;
    }

}

/* ==================================================
   Real Trail Landmarks
================================================== */


/* --------------------------------------------------
   Moving Trail Layer
-------------------------------------------------- */

.trail-world {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;
}


/* --------------------------------------------------
   Side Trails
-------------------------------------------------- */

.trail-side-trail {
    position: absolute;

    z-index: 1;

    height: 6px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            #8c7458 0%,
            #ab8b65 50%,
            #8c7458 100%
        );

    border-radius: 99px;

    box-shadow:
        0 0 0 3px
        rgba(255, 255, 255, 0.6);
}

.trail-side-trail-left {
    right: 50%;
}

.trail-side-trail-right {
    left: 50%;
}


/* --------------------------------------------------
   Landmark Marker
-------------------------------------------------- */

.trail-landmark {
    position: absolute;

    z-index: 4;

    left: 50%;

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

    transform:
        translate(-50%, -50%);

    transition:
        top 0.22s ease-out;
}


/* --------------------------------------------------
   Landmark Position Classes
-------------------------------------------------- */

.trail-landmark-left,
.trail-landmark-right,
.trail-landmark-center {
    margin-left: 0;
}


/* --------------------------------------------------
   Landmark Icon
-------------------------------------------------- */

.trail-landmark-icon {
    min-width: 38px;
    height: 38px;

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

    font-size: 25px;
    line-height: 1;

    background:
        rgba(255, 255, 255, 0.92);

    border:
        1px solid
        rgba(31, 43, 32, 0.14);

    border-radius: 50%;

    box-shadow:
        0 5px 12px
        rgba(31, 43, 32, 0.12);

    filter:
        drop-shadow(
            0 1px 1px
            rgba(31, 43, 32, 0.08)
        );
}


/* --------------------------------------------------
   Northbound Hike Animation
-------------------------------------------------- */

.trail-world.trail-step-north {
    animation:
        trail-step-north
        220ms
        ease-out;
}

@keyframes trail-step-north {

    from {
        transform:
            translateY(-18px);
    }

    to {
        transform:
            translateY(0);
    }

}


/* --------------------------------------------------
   Southbound Hike Animation
-------------------------------------------------- */

.trail-world.trail-step-south {
    animation:
        trail-step-south
        220ms
        ease-out;
}

@keyframes trail-step-south {

    from {
        transform:
            translateY(18px);
    }

    to {
        transform:
            translateY(0);
    }

}


/* --------------------------------------------------
   Hike Button Animation
-------------------------------------------------- */

.hike-button.hiking {
    transform:
        scale(0.97);
}


/* --------------------------------------------------
   Mobile Trail Landmarks
-------------------------------------------------- */

@media (max-width: 620px) {

    .trail-landmark-icon {
        min-width: 32px;
        height: 32px;

        font-size: 21px;
    }

}


/* --------------------------------------------------
   Very Small Phone Trail Landmarks
-------------------------------------------------- */

@media (max-width: 390px) {

    .trail-landmark-icon {
        min-width: 28px;
        height: 28px;

        font-size: 18px;
    }

}


/* --------------------------------------------------
   Hidden
-------------------------------------------------- */

.hidden {
    display: none;
}


/* ==================================================
   THRU Login
================================================== */

.login-page {
    padding: 16px;
    align-items: flex-start;
    padding-top: 52px;
}


.login-shell {
    width: 100%;
    max-width: 430px;

    margin: 0 auto;
}


.login-card {
    padding: 38px 34px;

    background:
        rgba(255, 255, 255, 0.82);

    border:
        1px solid
        rgba(31, 43, 32, 0.12);

    border-radius: 24px;

    box-shadow:
        0 18px 48px
        rgba(31, 43, 32, 0.12);
}


.login-brand {
    text-align: center;
}


.login-boot {
    margin-bottom: 10px;

    font-size: 50px;
    line-height: 1;
}


.login-brand h1 {
    margin: 0;

    font-size: 42px;

    letter-spacing: 0.14em;
}


.login-subtitle {
    margin: 7px 0 0;

    font-size: 11px;
    font-weight: 750;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    opacity: 0.5;
}


.login-copy {
    margin-top: 34px;

    text-align: center;
}


.login-copy h2 {
    margin: 0;

    font-size: 22px;
    font-weight: 800;

    color: #263d29;
}


.login-copy p {
    margin: 8px 0 0;

    font-size: 14px;
    line-height: 1.5;

    opacity: 0.65;
}


.login-email-display {
    margin-top: 8px;

    font-size: 14px;
    font-weight: 750;

    color: #304e35;
}


.login-form {
    margin-top: 28px;
}


.login-label {
    display: block;

    margin-bottom: 7px;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 0.13em;

    opacity: 0.55;
}


.login-input {
    width: 100%;

    padding: 15px 16px;

    color: #1f2b20;

    background:
        rgba(255, 255, 255, 0.92);

    border:
        1px solid
        rgba(31, 43, 32, 0.18);

    border-radius: 13px;

    font-family: inherit;
    font-size: 16px;

    outline: none;
}


.login-input:focus {
    border-color: #4d704f;

    box-shadow:
        0 0 0 3px
        rgba(77, 112, 79, 0.13);
}


.login-code-input {
    text-align: center;

    font-size: 28px;
    font-weight: 800;

    letter-spacing: 0.18em;
}


.login-button {
    width: 100%;

    margin-top: 14px;
    padding: 15px 18px;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            #304e35 0%,
            #263d29 100%
        );

    border: 0;
    border-radius: 13px;

    font-family: inherit;

    font-size: 13px;
    font-weight: 850;

    letter-spacing: 0.1em;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(38, 61, 41, 0.20);
}


.login-error {
    margin-top: 10px;
    padding: 10px 12px;

    text-align: center;

    font-size: 12px;
    font-weight: 650;

    background:
        rgba(235, 218, 190, 0.62);

    border-radius: 10px;
}


.login-note {
    margin: 22px 0 0;

    text-align: center;

    font-size: 11px;

    opacity: 0.48;
}


.login-secondary-actions {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 12px;

    margin-top: 20px;
}


.login-secondary-actions form {
    margin: 0;
}


.login-text-button {
    padding: 0;

    color: #4d704f;
    background: none;

    border: 0;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-decoration: none;

    cursor: pointer;
}


.login-text-button:hover {
    text-decoration: underline;
}


@media (max-width: 480px) {

    .login-page {
        padding: 16px;
    }

    .login-card {
        padding: 32px 24px;
    }

    .login-brand h1 {
        font-size: 38px;
    }

}