#carakai-preprod-banner {
    width: 100%;
    padding: 6px 16px;
    background: #fef3c7;
    color: #92400e;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Leave room for the environment badge and account name on laptop screens. */
@media (max-width: 1439px) {
    body[data-carakai-environment="preproduction"] header .xl\:flex {
        display: none;
    }
}

/* Login has no shared header and must keep its form below the banner. */
body.login-bg[data-carakai-environment="preproduction"] {
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
}

body > #carakai-preprod-banner {
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
}

body.login-bg[data-carakai-environment="preproduction"] > .w-full {
    margin-block: auto;
    padding: 24px 16px;
}