html[data-focused-identity-flow="true"] {
    --identity-navbar-height: 68px;
}

.identity-navbar {
    min-height: 68px;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    background: linear-gradient(135deg, #173b52 0%, #285d77 58%, #327993 100%);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.12);
    z-index: 1030;
}

/* Firefox's global sticky fallback intentionally resets generic .sticky-top.
   Keep the focused identity shell above positioned validation/card surfaces. */
.identity-navbar.sticky-top {
    z-index: 1030;
}

.identity-navbar__inner {
    max-width: 1320px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.identity-navbar__brand,
.identity-navbar__action {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.identity-navbar__brand img {
    display: block;
    width: min(180px, 42vw);
    height: auto;
    background-color: transparent;
    content-visibility: visible;
}

.identity-navbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.identity-navbar__status {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.identity-navbar__action {
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    background: rgba(15, 23, 42, 0.24);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.identity-navbar__action:hover {
    color: #173b52;
    background: #fff;
    border-color: #fff;
}

.identity-navbar__brand:focus,
.identity-navbar__action:focus {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px #0f172a;
}

@supports selector(:focus-visible) {
    .identity-navbar__brand:focus:not(:focus-visible),
    .identity-navbar__action:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }

    .identity-navbar__brand:focus-visible,
    .identity-navbar__action:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
        box-shadow: 0 0 0 7px #0f172a;
    }
}

@media (max-width: 575.98px) {
    html[data-focused-identity-flow="true"] {
        --identity-navbar-height: max(60px, calc(50px + env(safe-area-inset-top, 0px)));
    }

    .identity-navbar {
        min-height: 60px;
        padding-bottom: 6px;
    }

    .identity-navbar__inner {
        gap: 8px;
        padding-inline: 0;
    }

    .identity-navbar__action {
        padding-inline: 11px;
        font-size: 0.8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .identity-navbar__action {
        transition: none;
    }
}

html[data-focused-identity-flow="true"] {
    scroll-padding-top: calc(var(--identity-navbar-height, 68px) + 8px);
}