.snap-cohort-lesson-navigation {
    --snap-cohort-navigation-ink: #172033;
    --snap-cohort-navigation-muted: #667085;
    --snap-cohort-navigation-soft: color-mix(in srgb, var(--snap-cohort-accent, #5b4bdb) 8%, #fff);
    --snap-cohort-navigation-accent-ink: color-mix(
        in srgb,
        var(--snap-cohort-link, var(--snap-cohort-accent-dark, #5148d8)) 72%,
        #111827 28%
    );
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--snap-cohort-accent, #5b4bdb) 12%, transparent), transparent 38%),
        var(--snap-cohort-surface, #fff);
    border: 1px solid var(--snap-cohort-border, #e4e7ec);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgb(16 24 40 / 8%);
    color: var(--snap-cohort-navigation-ink);
    container-type: inline-size;
    margin-block: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
}

.snap-cohort-lesson-navigation--compact {
    border-radius: 14px;
    margin-block: 1.25rem;
}

.snap-cohort-lesson-navigation--compact .snap-cohort-lesson-navigation__overview,
.snap-cohort-lesson-navigation--compact .snap-cohort-lesson-navigation__completion {
    padding: .875rem 1rem;
}

.snap-cohort-lesson-navigation--compact .snap-cohort-lesson-navigation__link {
    min-height: 72px;
    padding: .75rem 1rem;
}

.snap-cohort-lesson-navigation--minimal {
    background: var(--snap-cohort-surface, #fff);
    border-radius: 14px;
    box-shadow: none;
    margin-block: 1rem;
}

.snap-cohort-lesson-navigation__overview {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 2rem) .875rem;
}

.snap-cohort-lesson-navigation__position {
    display: grid;
    gap: .25rem;
}

.snap-cohort-lesson-navigation__position > span,
.snap-cohort-lesson-navigation__link small {
    color: var(--snap-cohort-navigation-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.snap-cohort-lesson-navigation__position strong {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    letter-spacing: -.02em;
}

.snap-cohort-lesson-navigation__status {
    background: var(--snap-cohort-navigation-soft);
    border-radius: 999px;
    color: var(--snap-cohort-navigation-accent-ink);
    font-size: .8125rem;
    font-weight: 700;
    padding: .5rem .75rem;
    white-space: nowrap;
}

.snap-cohort-lesson-navigation__status.is-complete {
    background: #ecfdf3;
    color: #067647;
}

.snap-cohort-lesson-navigation__progress {
    appearance: none;
    background: #eef0f4;
    border: 0;
    display: block;
    height: 5px;
    inline-size: 100%;
}

.snap-cohort-lesson-navigation__progress::-webkit-progress-bar {
    background: #eef0f4;
}

.snap-cohort-lesson-navigation__progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--snap-cohort-accent, #5b4bdb), #8b7cf6);
}

.snap-cohort-lesson-navigation__progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--snap-cohort-accent, #5b4bdb), #8b7cf6);
}

.snap-cohort-lesson-navigation__completion {
    border-block-end: 1px solid var(--snap-cohort-border, #e4e7ec);
    padding: 1.125rem clamp(1.25rem, 4vw, 2rem);
}

.snap-cohort-lesson-navigation__completion .snap-cohort-lesson-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

/* Some WordPress themes reset native buttons to transparent. The completion
 * action is the primary next step in this card, so retain its explicit state. */
.snap-cohort-lesson-navigation__completion .snap-cohort-button:not(.snap-cohort-button--secondary) {
    background: var(--snap-cohort-accent, #635bff) !important;
    border-color: var(--snap-cohort-accent, #635bff) !important;
    color: var(--snap-cohort-on-accent, #fff) !important;
}

.snap-cohort-lesson-navigation__completion .snap-cohort-button:not(.snap-cohort-button--secondary):hover,
.snap-cohort-lesson-navigation__completion .snap-cohort-button:not(.snap-cohort-button--secondary):focus-visible {
    background: var(--snap-cohort-accent-dark, #5148d8) !important;
    border-color: var(--snap-cohort-accent-dark, #5148d8) !important;
}

.snap-cohort-lesson-navigation__completion .snap-cohort-lesson-actions p,
.snap-cohort-lesson-navigation__completion .snap-cohort-lesson-actions span,
.snap-cohort-lesson-navigation__completion > p {
    margin: 0;
}

.snap-cohort-lesson-navigation__completion.is-complete {
    align-items: center;
    color: #067647;
    display: flex;
    font-weight: 650;
    gap: .75rem;
}

.snap-cohort-lesson-navigation__completion.is-complete > span {
    align-items: center;
    background: #dcfae6;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 2rem;
    block-size: 2rem;
    inline-size: 2rem;
    justify-content: center;
}

.snap-cohort-lesson-navigation__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.snap-cohort-lesson-navigation--orientation-vertical .snap-cohort-lesson-navigation__links {
    grid-template-columns: minmax(0, 1fr);
}

.snap-cohort-lesson-navigation__link {
    align-items: center;
    color: inherit;
    display: flex;
    gap: .875rem;
    min-block-size: 6.25rem;
    min-inline-size: 0;
    padding: clamp(1.125rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
    text-decoration: none;
}

a.snap-cohort-lesson-navigation__link {
    transition: background-color 160ms ease, color 160ms ease;
}

a.snap-cohort-lesson-navigation__link:hover {
    background: var(--snap-cohort-navigation-soft);
    color: var(--snap-cohort-navigation-accent-ink);
}

a.snap-cohort-lesson-navigation__link:focus-visible {
    border-radius: 10px;
    outline: 3px solid color-mix(in srgb, var(--snap-cohort-accent, #5b4bdb) 58%, #fff);
    outline-offset: -5px;
}

.snap-cohort-lesson-navigation__link--next {
    border-inline-start: 1px solid var(--snap-cohort-border, #e4e7ec);
    flex-direction: row-reverse;
    text-align: end;
}

.snap-cohort-lesson-navigation--orientation-vertical .snap-cohort-lesson-navigation__link--next {
    border-block-start: 1px solid var(--snap-cohort-border, #e4e7ec);
    border-inline-start: 0;
    flex-direction: row;
    text-align: start;
}

.snap-cohort-lesson-navigation__link > span:not(.snap-cohort-lesson-navigation__arrow) {
    display: grid;
    gap: .35rem;
    min-inline-size: 0;
}

.snap-cohort-lesson-navigation__link strong {
    display: -webkit-box;
    font-size: .975rem;
    line-height: 1.45;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.snap-cohort-lesson-navigation__arrow {
    align-items: center;
    background: #f2f4f7;
    border-radius: 12px;
    display: inline-flex;
    flex: 0 0 2.5rem;
    block-size: 2.5rem;
    inline-size: 2.5rem;
    justify-content: center;
}

.snap-cohort-lesson-navigation__link.is-locked,
.snap-cohort-lesson-navigation__link.is-boundary {
    color: var(--snap-cohort-navigation-muted);
}

.snap-cohort-lesson-navigation__link.is-locked .snap-cohort-lesson-navigation__arrow {
    background: #fff7ed;
    color: #b54708;
}

.snap-cohort-lesson-navigation--locked {
    align-items: center;
    background: #fffcf5;
    border-color: #fedf89;
    display: flex;
    gap: 1rem;
    padding: clamp(1.25rem, 4vw, 2rem);
}

.snap-cohort-lesson-navigation--locked p {
    color: var(--snap-cohort-navigation-muted);
    margin: .25rem 0 0;
}

.snap-cohort-lesson-navigation__lock {
    align-items: center;
    background: #fef0c7;
    border-radius: 14px;
    color: #b54708;
    display: inline-flex;
    flex: 0 0 2.75rem;
    block-size: 2.75rem;
    inline-size: 2.75rem;
    justify-content: center;
}

body.snap-cohort-theme-dark .snap-cohort-lesson-navigation {
    --snap-cohort-navigation-ink: #e5e7eb;
    --snap-cohort-navigation-muted: #aab5c8;
    --snap-cohort-navigation-soft: color-mix(in srgb, var(--snap-cohort-accent, #7f93ff) 18%, #0f172a);
    --snap-cohort-navigation-accent-ink: color-mix(
        in srgb,
        var(--snap-cohort-link, var(--snap-cohort-accent-dark, #9facff)) 78%,
        #fff 22%
    );
}

body.snap-cohort-theme-dark .snap-cohort-lesson-navigation__progress,
body.snap-cohort-theme-dark .snap-cohort-lesson-navigation__progress::-webkit-progress-bar {
    background: #25365f;
}

body.snap-cohort-theme-dark .snap-cohort-lesson-navigation__arrow {
    background: #1d2a49;
}

body.snap-cohort-theme-dark .snap-cohort-lesson-navigation__status.is-complete,
body.snap-cohort-theme-dark .snap-cohort-lesson-navigation__completion.is-complete > span {
    background: #153d2b;
    color: #86efac;
}

body.snap-cohort-theme-dark .snap-cohort-lesson-navigation--locked {
    background: #281b0f;
    border-color: #7c4a1d;
}

body.snap-cohort-theme-dark .snap-cohort-lesson-navigation__lock,
body.snap-cohort-theme-dark .snap-cohort-lesson-navigation__link.is-locked .snap-cohort-lesson-navigation__arrow {
    background: #3a2514;
    color: #fdba74;
}

@container (max-width: 620px) {
    .snap-cohort-lesson-navigation__overview {
        align-items: flex-start;
        flex-direction: column;
    }

    .snap-cohort-lesson-navigation__links {
        grid-template-columns: 1fr;
    }

    .snap-cohort-lesson-navigation__link--next {
        border-block-start: 1px solid var(--snap-cohort-border, #e4e7ec);
        border-inline-start: 0;
    }
}

@media (max-width: 520px) {
    .snap-cohort-lesson-navigation {
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.snap-cohort-lesson-navigation__link {
        transition: none;
    }
}

@media (forced-colors: active) {
    .snap-cohort-lesson-navigation,
    .snap-cohort-lesson-navigation__arrow,
    .snap-cohort-lesson-navigation__status {
        forced-color-adjust: auto;
    }
}