/* RAIMBALT Learn 2.0.29 — final mobile/UX QA overrides */

html {
    scroll-behavior: smooth;
}

html,
body {
    max-width: 100%;
}

body {
    overflow-x: clip;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

pre,
code,
textarea,
input,
select,
button {
    max-width: 100%;
}

pre {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

:where(.page, main, section, article, aside, header, footer, nav, div) {
    min-width: 0;
}

:where(h1, h2, h3, p, a, span, b, strong, small, label) {
    overflow-wrap: anywhere;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(154, 124, 255, .78);
    outline-offset: 3px;
}

.rb-skip-link {
    position: fixed;
    z-index: 9999;
    top: 12px;
    left: 12px;
    transform: translateY(-160%);
    padding: 10px 14px;
    border-radius: 12px;
    background: #f4f0ff;
    color: #161020;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    transition: transform .15s ease;
}

.rb-skip-link:focus {
    transform: translateY(0);
}

#main-content:focus {
    outline: none;
}

/* Friendly route and access states. */
.rb-route-state-page {
    min-height: min(72vh, 760px);
    display: grid;
    place-items: center;
    padding-top: 56px;
    padding-bottom: 72px;
}

.rb-route-state-card {
    width: min(100%, 760px);
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(119, 83, 255, .16), transparent 34%),
        linear-gradient(145deg, rgba(16, 23, 37, .96), rgba(8, 12, 21, .98));
    box-shadow: 0 28px 70px rgba(0,0,0,.28);
}

.rb-route-state-card h1 {
    margin: 12px 0 12px;
}

.rb-route-state-card .lead {
    max-width: 650px;
    margin-bottom: 0;
}

.rb-route-state-code {
    font-size: clamp(58px, 12vw, 112px);
    line-height: .9;
    font-weight: 950;
    letter-spacing: -.07em;
    color: rgba(180, 162, 255, .9);
    margin-bottom: 18px;
}

.rb-route-state-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 18px;
    background: rgba(119, 83, 255, .14);
    border: 1px solid rgba(154, 124, 255, .25);
    font-size: 28px;
    color: #c7baff;
}

.rb-route-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

/* Flexible action rows should wrap before they overflow. */
:where(
    .moderation-actions,
    .student-hero-actions-v44,
    .dashboard-route-actions204,
    .practice-session-actions-v51,
    .lesson-lab-actions-v47,
    .quiz-control-actions-v52,
    .verified-quiz-actions-v61,
    .rb-project-complete-actions,
    .admin-actions,
    .admin-hero-actions,
    .auth-actions
) {
    flex-wrap: wrap;
}

/* Data-like blocks may scroll horizontally instead of widening the whole page. */
:where(.settings-list, .quiz-history-list-v52, .recent-activity-v45) {
    max-width: 100%;
}

@media (max-width: 900px) {
    .page {
        width: min(100%, 100vw);
        padding-left: 18px;
        padding-right: 18px;
    }

    :where(.section-line, .rb-outline-head) {
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }

    :where(.student-hero-v44, .rb-course-hero, .project-hero-v46) {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(.catalog-toolbar-v44, .quiz-filters-v52) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(.admin-stat-grid, .student-stat-grid-v44, .projects-summary-v46, .quiz-summary-v52) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer-v45 nav {
        gap: 10px 14px;
        flex-wrap: wrap;
    }
}

@media (max-width: 700px) {
    .page {
        padding-left: 14px;
        padding-right: 14px;
    }

    :where(input, select, textarea) {
        font-size: 16px;
    }

    :where(
        .catalog-toolbar-v44,
        .quiz-filters-v52,
        .admin-stat-grid,
        .student-stat-grid-v44,
        .projects-summary-v46,
        .quiz-summary-v52,
        .student-course-grid-v44,
        .student-action-grid-v44,
        .project-catalog-v46,
        .practice-grid-v51
    ) {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(
        .rb-dashboard-next,
        .rb-focus-panel,
        .rb-project-next,
        .rb-flow-context,
        .rb-mastery-next,
        .project-complete-v46,
        .admin-hero,
        .admin-access-card
    ) {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(
        .rb-dashboard-next > a,
        .rb-focus-panel > a,
        .rb-project-next > a,
        .rb-flow-context > a,
        .rb-mastery-next > a
    ) {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    :where(
        .moderation-actions,
        .student-hero-actions-v44,
        .dashboard-route-actions204,
        .practice-session-actions-v51,
        .lesson-lab-actions-v47,
        .quiz-control-actions-v52,
        .verified-quiz-actions-v61,
        .rb-project-complete-actions
    ) {
        width: 100%;
        align-items: stretch;
    }

    :where(
        .moderation-actions,
        .student-hero-actions-v44,
        .dashboard-route-actions204,
        .practice-session-actions-v51,
        .quiz-control-actions-v52,
        .verified-quiz-actions-v61,
        .rb-project-complete-actions
    ) > :where(a, button) {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    :where(.btn, .ghost, .rb-btn-primary, .rb-btn-secondary) {
        min-height: 44px;
    }

    .rb-route-state-page {
        min-height: 62vh;
        padding-top: 28px;
        padding-bottom: 44px;
    }

    .rb-route-state-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .rb-route-state-actions {
        width: 100%;
        align-items: stretch;
    }

    .rb-route-state-actions > a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .site-footer-v45 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 480px) {
    .page {
        padding-left: 12px;
        padding-right: 12px;
    }

    h1 {
        font-size: clamp(28px, 9vw, 40px);
    }

    :where(.card, .rb-course-progress-panel, .practice-card-v51, .quiz-question-v52, .project-card-v46) {
        border-radius: 16px;
    }

    .rb-skip-link {
        right: 12px;
        left: 12px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}