.role-workspace-strip {
    display: none;
}

@media (max-width: 1180px) {
    .role-workspace-body {
        /* In role-workspace mobile mode we hide row-2 and term strip from header. */
        --header-offset: 64px;
    }

    .role-workspace-body {
        overflow-x: clip;
    }

    .role-workspace-body > main {
        overflow-x: clip;
    }

    .role-workspace-body .main-header .header-row-2,
    .role-workspace-body .curriculum-term-strip {
        display: none;
    }

    .role-workspace-body .main-header .header-row-1 {
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }

    .role-workspace-strip {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 10px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(8, 16, 34, 0.94);
        backdrop-filter: blur(12px);
        position: sticky;
        top: var(--header-offset, 64px);
        z-index: 25;
        width: 100%;
        max-width: 100%;
    }

    .role-workspace-strip::-webkit-scrollbar {
        display: none;
    }

    .role-workspace-strip a {
        flex: 0 0 auto;
        text-decoration: none;
        color: #dbeafe;
        border: 1px solid rgba(148, 163, 184, 0.24);
        background: rgba(15, 23, 42, 0.6);
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 0.78rem;
        font-weight: 700;
        position: relative;
        white-space: nowrap;
    }

    .role-workspace-strip a.active {
        color: #ffffff;
        border-color: rgba(56, 189, 248, 0.56);
        background: linear-gradient(130deg, rgba(37, 99, 235, 0.85), rgba(14, 116, 144, 0.8));
    }

    .role-workspace-strip a.active::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -7px;
        height: 3px;
        border-radius: 999px;
        background: rgba(56, 189, 248, 0.95);
    }
}

@media (max-width: 640px) {
    .role-workspace-strip {
        gap: 6px;
        padding-inline: 10px;
    }

    .role-workspace-strip a {
        font-size: 0.74rem;
        padding: 7px 10px;
    }
}

@media (max-width: 900px) {
    body.has-mobile-bottom-nav .role-workspace-strip {
        display: none;
    }
}