/* Final Autoprop wordmark: bold geometric "auto", light "prop" and
   acid-lime ".ai". The proportions mirror the approved artwork rather than
   treating the custom house-o as a full-em icon. Outfit's lowercase x-height
   is materially smaller than 1em, so the vector must follow that x-height.
   Keep this component independent of page skins so every app shell uses the
   same geometry and the house cut-out remains sharp at any resolution. */
.ap-wordmark {
    --ap-wordmark-main: #f6fff9;
    --ap-wordmark-accent: #c8ff23;
    display: inline-flex;
    align-items: center;
    color: var(--ap-wordmark-main);
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1em;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.062em;
    white-space: nowrap;
}
.ap-wordmark-auto,
.ap-wordmark-ai {
    font-weight: 700;
}

.ap-wordmark-prop {
    font-weight: 400;
}

.ap-wordmark-ai {
    color: var(--ap-wordmark-accent);
}

.ap-wordmark-house-o {
    width: 0.61em;
    height: 0.61em;
    flex: 0 0 0.61em;
    margin: 0 0.002em 0 0.018em;
    overflow: visible;
    transform: translateY(0.085em);
}

/* App rail */
.sidebar .brand-logo .ap-wordmark {
    --ap-wordmark-main: #f6fff9;
    --ap-wordmark-accent: #c8ff23;
    font-size: 1.32rem !important;
    letter-spacing: -0.062em !important;
}

/* Sign-in, sign-up and account recovery */
.auth-logo-link .ap-wordmark {
    --ap-wordmark-main: #fffff4;
    --ap-wordmark-accent: #c8ff23;
    font-size: 2rem;
}

/* The legacy skin colours every span inside the auth logo lemon. Restore the
   approved two-tone wordmark while retaining lemon for the .ai suffix only. */
body.laser-lemon-app .auth-logo-link .ap-wordmark,
body.laser-lemon-app .auth-logo-link .ap-wordmark-auto,
body.laser-lemon-app .auth-logo-link .ap-wordmark-prop {
    color: var(--ap-wordmark-main) !important;
}

body.laser-lemon-app .auth-logo-link .ap-wordmark-ai {
    color: var(--ap-wordmark-accent) !important;
}

@media (max-width: 480px) {
    .auth-logo-link .ap-wordmark {
        font-size: 1.8rem;
    }
}

@media (forced-colors: active) {
    .ap-wordmark,
    .ap-wordmark-ai {
        color: CanvasText;
    }
}