.navigation-transition {
    position: fixed;
    inset: 72px 0 0 250px;
    z-index: 1040;
    overflow: auto;
    background: #f5f8f6;
}

.navigation-transition[hidden] { display: none; }

.brand .brand-version {
    margin-top: 3px;
    color: rgba(222, 246, 236, .72);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: none;
}

[data-integration-check-button][data-check-state="running"] { cursor: wait; opacity: .82; }
[data-integration-check-button][data-check-state="completed"] { border-color: #248663; background: #e7f5ef; color: #176b4e; }
[data-integration-check-button][data-check-state="failed"] { border-color: #c7463c; background: #fff2f1; color: #a23b32; }

.navigation-transition-inner {
    width: min(1050px, calc(100% - 64px));
    margin: 42px auto;
}

.navigation-transition h1 { margin: 0 0 8px; }

.navigation-transition-progress {
    height: 3px;
    margin: 28px 0;
    overflow: hidden;
    border-radius: 99px;
    background: #dce7e1;
}

.navigation-transition-progress span {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: inherit;
    background: #19825f;
    animation: navigation-progress 1.1s ease-in-out infinite;
}

.navigation-transition-skeleton {
    padding: 26px;
    border: 1px solid #dce5e0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(18, 54, 41, .06);
}

.navigation-transition-skeleton span {
    display: block;
    height: 18px;
    margin-bottom: 18px;
    border-radius: 6px;
    background: linear-gradient(90deg, #edf2ef 25%, #f8faf9 50%, #edf2ef 75%);
    background-size: 200% 100%;
    animation: navigation-shimmer 1.25s linear infinite;
}

.navigation-transition-skeleton span:nth-child(1) { width: 38%; height: 26px; }
.navigation-transition-skeleton span:nth-child(2) { width: 92%; }
.navigation-transition-skeleton span:nth-child(3) { width: 78%; }
.navigation-transition-skeleton span:nth-child(4) { width: 84%; margin-bottom: 0; }

.nav-link-app.navigation-pending,
.mobile-more-panel a.navigation-pending,
.mobile-work-nav a.navigation-pending {
    color: #fff;
    background: rgba(42, 176, 129, .22);
}

@keyframes navigation-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(390%); }
}

@keyframes navigation-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (max-width: 900px) {
    .navigation-transition { inset: 64px 0 64px; }
    .navigation-transition-inner { width: calc(100% - 32px); margin: 26px auto; }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-transition-progress span,
    .navigation-transition-skeleton span { animation-duration: 2.5s; }
}