/* ==========================================================================
   DIRA GLOBAL RESPONSIVE OVERRIDE
   Load this file LAST, after every module/theme stylesheet.

   Goals
   - Preserve all existing class names and IDs.
   - Prevent mobile/iPhone clipping caused by fixed 100vh + overflow:hidden.
   - Keep auth information visible on phones by stacking it above the form.
   - Make the complete application sidebar scrollable, including bottom groups.
   - Improve generic module pages, forms, tables, grids, and modals.
   ========================================================================== */

/* ---------- Global defensive rules ---------- */

html {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
}

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

img,
video,
canvas {
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

input,
select,
textarea {
    min-width: 0;
}

/* iOS zooms focused inputs when their font-size is below 16px. */
@media (max-width: 900px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Modern viewport-height support with safe fallback. */
:root {
    --dira-screen-height: 100vh;
    --dira-safe-top: env(safe-area-inset-top, 0px);
    --dira-safe-right: env(safe-area-inset-right, 0px);
    --dira-safe-bottom: env(safe-area-inset-bottom, 0px);
    --dira-safe-left: env(safe-area-inset-left, 0px);
}

@supports (height: 100dvh) {
    :root {
        --dira-screen-height: 100dvh;
    }
}

/* ==========================================================================
   LANDING PAGE
   ========================================================================== */

@media (max-width: 1100px) {
    body.landing-active,
    #landing-page {
        min-height: var(--dira-screen-height) !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

        #landing-page .page,
        #landing-page .hero-shell,
        #landing-page .left-fixed-grid,
        #landing-page .right-panel,
        #landing-page .content-shell,
        #landing-page .content-panel,
        #landing-page .panel-body {
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }

        #landing-page .page {
            display: block !important;
            overflow: visible !important;
        }

        #landing-page .hero-shell {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            overflow: visible !important;
        }

        #landing-page .left-fixed-grid {
            position: relative !important;
            top: auto !important;
            width: 100% !important;
            padding: clamp(24px, 5vw, 42px) max(20px, calc(5vw + var(--dira-safe-right))) clamp(20px, 4vw, 34px) max(20px, calc(5vw + var(--dira-safe-left))) !important;
            border-right: 0 !important;
            border-bottom: 1px solid var(--border, #d7dde8) !important;
            align-items: flex-start !important;
            overflow: visible !important;
        }

        #landing-page .right-panel {
            width: 100% !important;
            padding: clamp(18px, 4vw, 32px) max(16px, calc(4vw + var(--dira-safe-right))) max(24px, calc(4vw + var(--dira-safe-bottom))) max(16px, calc(4vw + var(--dira-safe-left))) !important;
            align-items: stretch !important;
            overflow: visible !important;
        }

        #landing-page .content-panel,
        #landing-page .panel-body {
            overflow: visible !important;
        }

        #landing-page .solution-grid,
        #landing-page .tiles,
        #landing-page .video-grid,
        #landing-page .team-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        #landing-page .metric-grid,
        #landing-page .workflow,
        #landing-page .workflow-animation {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
}

@media (max-width: 680px) {
    #landing-page .topbar {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        padding: max(10px, var(--dira-safe-top)) max(14px, var(--dira-safe-right)) 10px max(14px, var(--dira-safe-left)) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    #landing-page .header-left {
        min-width: 0 !important;
        width: 100% !important;
    }

    #landing-page .brand img {
        height: clamp(40px, 12vw, 52px) !important;
        max-width: min(190px, 68vw) !important;
    }

    #landing-page .nav {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        white-space: normal !important;
    }

    #landing-page .nav-item,
    #landing-page .nav-button {
        width: 100% !important;
    }

    #landing-page .nav-button {
        min-height: 44px !important;
        padding: 8px 10px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    #landing-page .dropdown {
        position: fixed !important;
        left: max(12px, var(--dira-safe-left)) !important;
        right: max(12px, var(--dira-safe-right)) !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: min(60vh, 430px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 100000 !important;
    }

    #landing-page .hero-copy h1 {
        font-size: clamp(32px, 10.5vw, 48px) !important;
        line-height: 1.02 !important;
        letter-spacing: -1.3px !important;
    }

    #landing-page .hero-info-grid,
    #landing-page .solution-grid,
    #landing-page .tiles,
    #landing-page .video-grid,
    #landing-page .team-grid,
    #landing-page .feature-grid,
    #landing-page .metric-grid,
    #landing-page .workflow,
    #landing-page .workflow-animation {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #landing-page .subtabs {
        width: 100% !important;
        border-radius: 18px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #landing-page .subtab {
        width: 100% !important;
    }
}

/* ==========================================================================
   AUTH / LOGIN MODAL
   Keep the information panel visible instead of hiding it on mobile.
   ========================================================================== */

body #login-modal.auth-overlay:not(.hidden) {
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    padding: max(8px, var(--dira-safe-top)) max(8px, var(--dira-safe-right)) max(8px, var(--dira-safe-bottom)) max(8px, var(--dira-safe-left)) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body #login-modal .auth-shell {
    width: min(1120px, calc(100vw - 24px)) !important;
    height: min(900px, calc(var(--dira-screen-height) - 16px)) !important;
    min-height: 0 !important;
    max-height: calc(var(--dira-screen-height) - 16px) !important;
    overflow: hidden !important;
}

body #login-modal .auth-panels {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

body #login-modal .auth-info-panel,
body #login-modal .auth-form-panel,
body #login-modal .auth-info-panel-inner,
body #login-modal .auth-form-card {
    min-width: 0 !important;
    min-height: 0 !important;
}

body #login-modal .auth-info-panel,
body #login-modal .auth-form-panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 980px) {
    body #login-modal.auth-overlay:not(.hidden) {
        align-items: flex-start !important;
    }

    body #login-modal .auth-shell {
        width: min(760px, calc(100vw - 16px)) !important;
        height: auto !important;
        min-height: min(calc(var(--dira-screen-height) - 16px), 620px) !important;
        max-height: none !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        overflow: visible !important;
        margin: auto !important;
    }

    body #login-modal .auth-panels {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Overrides the old mobile rule that used display:none. */
    body #login-modal .auth-info-panel {
        display: flex !important;
        height: auto !important;
        max-height: none !important;
        padding: clamp(22px, 5vw, 38px) !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-bottom: 1px solid #d7dde8 !important;
    }

    body #login-modal .auth-info-panel-inner {
        height: auto !important;
        overflow: visible !important;
    }

    body #login-modal .auth-form-panel {
        height: auto !important;
        max-height: none !important;
        padding: clamp(22px, 5vw, 38px) !important;
        overflow: visible !important;
    }

    body #login-modal .auth-form-card {
        width: 100% !important;
        max-width: none !important;
        padding-bottom: max(24px, var(--dira-safe-bottom)) !important;
    }
}

@media (max-width: 560px) {
    body #login-modal.auth-overlay:not(.hidden) {
        padding: 0 !important;
        background: #ffffff !important;
    }

    body #login-modal .auth-shell {
        width: 100% !important;
        min-height: var(--dira-screen-height) !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        margin: 0 !important;
    }

    body #login-modal .auth-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        min-height: 66px !important;
        padding: max(8px, var(--dira-safe-top)) max(12px, var(--dira-safe-right)) 8px max(12px, var(--dira-safe-left)) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    body #login-modal .auth-info-panel {
        padding: 22px max(18px, var(--dira-safe-right)) 24px max(18px, var(--dira-safe-left)) !important;
    }

    body #login-modal .auth-form-panel {
        padding: 22px max(16px, var(--dira-safe-right)) max(32px, calc(20px + var(--dira-safe-bottom))) max(16px, var(--dira-safe-left)) !important;
    }

    body #login-modal .auth-mode-tabs,
    body #login-modal .auth-role-tabs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body #login-modal .auth-mode-tab,
    body #login-modal .auth-role-tab {
        min-width: 0 !important;
        padding-inline: 6px !important;
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    body #login-modal .auth-social-button,
    body #login-modal .auth-submit,
    body #login-modal input,
    body #login-modal select {
        min-height: 46px !important;
    }
}

/* Very short screens, including landscape phones. */
@media (max-height: 560px) and (max-width: 980px) {
    body #login-modal .auth-shell {
        min-height: var(--dira-screen-height) !important;
    }

    body #login-modal .auth-info-panel {
        padding-block: 18px !important;
    }

    body #login-modal .auth-form-panel {
        padding-block: 18px max(24px, var(--dira-safe-bottom)) !important;
    }
}

/* ==========================================================================
   MAIN APPLICATION SHELL AND COMPLETE SIDEBAR
   ========================================================================== */

.container.curtain-layout {
    min-width: 0;
    min-height: 0;
}

.curtain,
.left-panel,
.left-stack,
.left-footer,
.right-panel,
#main-content {
    min-width: 0;
    min-height: 0;
}

.left-panel {
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/*
   Critical sidebar correction:
   left-stack must be allowed to grow to its complete content height.
   The left-panel—not a nested section—owns the vertical scrollbar.
*/
.left-stack {
    flex: 0 0 auto !important;
    min-height: min-content !important;
}

.left-footer {
    flex: 0 0 auto !important;
    margin-top: 12px !important;
    padding-bottom: max(10px, var(--dira-safe-bottom)) !important;
}

/* Keep expanded groups from being clipped by a fixed max-height. */
.nav-collapse-content.open {
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) {
    body.mobile-sidebar-open {
        overflow: hidden !important;
        touch-action: none;
    }

    .container.curtain-layout {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: var(--dira-screen-height) !important;
        min-height: var(--dira-screen-height) !important;
        padding: max(8px, var(--dira-safe-top)) max(8px, var(--dira-safe-right)) max(8px, var(--dira-safe-bottom)) max(8px, var(--dira-safe-left)) !important;
        overflow: hidden !important;
    }

    .curtain {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 10010 !important;
        width: min(88vw, 340px) !important;
        max-width: 340px !important;
        height: var(--dira-screen-height) !important;
        min-height: var(--dira-screen-height) !important;
        flex: none !important;
        padding-top: var(--dira-safe-top) !important;
        padding-bottom: var(--dira-safe-bottom) !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        overflow: hidden !important;
    }

    .left-panel {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 18px 12px max(24px, calc(14px + var(--dira-safe-bottom))) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .left-stack {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: min-content !important;
        overflow: visible !important;
        padding-bottom: 10px !important;
    }

    .left-footer {
        margin-top: 12px !important;
        padding-bottom: max(12px, var(--dira-safe-bottom)) !important;
    }

    .right-panel {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: calc(var(--mobile-header-height, 58px) + var(--dira-safe-top)) 10px max(12px, var(--dira-safe-bottom)) !important;
        overflow: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .container.nav-collapsed .curtain {
        width: min(88vw, 340px) !important;
        flex-basis: auto !important;
    }

    .container.nav-collapsed .nav-button .label,
    .container.nav-collapsed .exit-button .label,
    .container.curtain-layout .curtain .nav-button .label,
    .container.curtain-layout .curtain .exit-button .label {
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
    }

    .nav-button,
    .exit-button,
    .nav-collapse-toggle {
        min-height: 44px !important;
    }
}

/* ==========================================================================
   GENERIC MODULE RESPONSIVENESS
   Covers the other app modules without modifying their existing CSS files.
   ========================================================================== */

@media (max-width: 900px) {
    /* Common horizontal layouts become vertical only when space is limited. */
    .page-layout,
    .main-layout,
    .content-layout,
    .workspace-layout,
    .dashboard-layout,
    .split-layout,
    .two-column-layout,
    .form-row,
    .toolbar-row,
    .action-row,
    .button-row {
        min-width: 0;
    }

    .toolbar,
    .actions,
    .button-group,
    .toolbar-row,
    .action-row {
        flex-wrap: wrap !important;
    }

        .toolbar > *,
        .actions > *,
        .button-group > * {
            min-width: 0;
        }

    /* Responsive cards and grids; selectors only apply where those classes exist. */
    .card-grid,
    .dashboard-grid,
    .module-grid,
    .stats-grid,
    .form-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    }

    /* Tables remain tables and gain a horizontal scroll container behavior. */
    .table-wrapper,
    .table-container,
    .data-table-wrapper,
    .grid-wrapper,
    .results-table-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    table {
        max-width: none;
    }

    /* Generic modals stay inside the visual viewport. */
    .modal,
    .modal-dialog,
    .modal-content,
    .dialog,
    .dialog-panel,
    .popup,
    .overlay-panel {
        max-width: calc(100vw - 20px) !important;
    }

    .modal-content,
    .dialog-panel,
    .popup,
    .overlay-panel {
        max-height: calc(var(--dira-screen-height) - 20px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 600px) {
    .form-row,
    .field-row,
    .input-row,
    .filter-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

        .form-row > *,
        .field-row > *,
        .input-row > *,
        .filter-row > * {
            width: 100% !important;
            min-width: 0 !important;
        }

    .toolbar,
    .actions,
    .button-group,
    .toolbar-row,
    .action-row,
    .button-row {
        gap: 8px !important;
    }

    .modal,
    .modal-dialog,
    .dialog,
    .popup {
        margin: max(8px, var(--dira-safe-top)) max(8px, var(--dira-safe-right)) max(8px, var(--dira-safe-bottom)) max(8px, var(--dira-safe-left)) !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY / DEVICE PREFERENCES
   ========================================================================== */

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

@media (hover: none) and (pointer: coarse) {
    button,
    [role="button"],
    a,
    input,
    select {
        touch-action: manipulation;
    }
}

/* ==========================================================================
   MOBILE AUTH/LIBRARY DRAWER — CLICKABLE FINAL LAYER FIX
   Keep this block at the absolute end of this stylesheet.
   ========================================================================== */
@media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) {

    #mobile-sidebar-button.mobile-sidebar-button {
        display: grid !important;
        z-index: 10030 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    #mobile-sidebar-backdrop.mobile-sidebar-backdrop {
        display: block !important;
        z-index: 10000 !important;
    }

    body.auth-mobile-info-open #mobile-sidebar-backdrop,
    body.mobile-sidebar-open #mobile-sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.auth-mobile-info-open #login-modal.auth-overlay {
        z-index: 10010 !important;
        pointer-events: none !important;
    }

    body.auth-mobile-info-open #login-modal .auth-shell,
    body.auth-mobile-info-open #login-modal .auth-panels,
    body.auth-mobile-info-open #login-modal .auth-form-panel {
        pointer-events: none !important;
    }

    body.auth-requested #login-modal .auth-info-panel {
        display: flex !important;
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 10020 !important;
        width: min(88vw, 340px) !important;
        max-width: 340px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #f5f8ff !important;
        box-shadow: 22px 0 52px rgba(15, 23, 42, 0.24) !important;
        transform: translate3d(-105%, 0, 0) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.auth-mobile-info-open #login-modal .auth-info-panel {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

        body.auth-mobile-info-open #login-modal .auth-info-panel,
        body.auth-mobile-info-open #login-modal .auth-info-panel *,
        body.auth-mobile-info-open #login-modal .library-mini-tile,
        body.auth-mobile-info-open #login-modal [data-library-dataset],
        body.auth-mobile-info-open #login-modal [data-library-key],
        body.auth-mobile-info-open #login-modal button,
        body.auth-mobile-info-open #login-modal a,
        body.auth-mobile-info-open #login-modal input,
        body.auth-mobile-info-open #login-modal select,
        body.auth-mobile-info-open #login-modal [role="button"] {
            pointer-events: auto !important;
            touch-action: manipulation !important;
        }

    body.auth-requested:not(.auth-mobile-info-open) #login-modal.auth-overlay,
    body.auth-requested:not(.auth-mobile-info-open) #login-modal .auth-shell,
    body.auth-requested:not(.auth-mobile-info-open) #login-modal .auth-panels,
    body.auth-requested:not(.auth-mobile-info-open) #login-modal .auth-form-panel {
        pointer-events: auto !important;
    }

    body.mobile-sidebar-open .curtain {
        z-index: 10020 !important;
        pointer-events: auto !important;
    }

        body.mobile-sidebar-open .curtain,
        body.mobile-sidebar-open .curtain * {
            pointer-events: auto !important;
        }
}

@media (max-width: 480px) {
    body.auth-requested #login-modal .auth-info-panel {
        width: min(92vw, 330px) !important;
    }
}

/* ==========================================================================
   FINAL MOBILE SCROLL + EDUCATION LIBRARY SELECTOR FIX
   Keep this block at the absolute end of this stylesheet.
   ========================================================================== */
@media (max-width: 900px), (max-width: 1180px) and (orientation: portrait) {

    /*
       Public landing page must use the document as its scroll container.
       This overrides desktop height:100vh and overflow:hidden rules.
    */
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }

        body.landing-active,
        body.landing-active #landing-page,
        body.landing-active #landing-page .page,
        body.landing-active #landing-page .hero-shell,
        body.landing-active #landing-page .left-fixed-grid,
        body.landing-active #landing-page .right-panel,
        body.landing-active #landing-page .content-shell,
        body.landing-active #landing-page .content-panel,
        body.landing-active #landing-page .panel-body {
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
        }

            body.landing-active #landing-page {
                min-height: var(--dira-screen-height, 100dvh) !important;
                overflow-x: hidden !important;
                overflow-y: visible !important;
            }

                body.landing-active #landing-page .page {
                    display: block !important;
                    min-height: var(--dira-screen-height, 100dvh) !important;
                }

                body.landing-active #landing-page .hero-shell {
                    display: grid !important;
                    grid-template-columns: minmax(0, 1fr) !important;
                }

        /*
       The authentication overlay may stay fixed, but its panel must be an
       independent scroll area with momentum scrolling.
    */
        body.auth-requested #login-modal.auth-overlay:not(.hidden) {
            overflow: hidden !important;
            touch-action: auto !important;
        }

        body.auth-requested #login-modal .auth-info-panel {
            display: flex !important;
            position: fixed !important;
            top: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            right: auto !important;
            width: min(92vw, 380px) !important;
            max-width: 380px !important;
            height: var(--dira-screen-height, 100dvh) !important;
            min-height: 0 !important;
            max-height: var(--dira-screen-height, 100dvh) !important;
            padding: max(70px, calc(54px + env(safe-area-inset-top, 0px))) 16px max(36px, calc(22px + env(safe-area-inset-bottom, 0px))) 16px !important;
            overflow-y: scroll !important;
            overflow-x: hidden !important;
            overscroll-behavior-y: contain !important;
            -webkit-overflow-scrolling: touch !important;
            touch-action: pan-y !important;
            scrollbar-gutter: auto !important;
        }

        body.auth-mobile-info-open #login-modal .auth-info-panel {
            transform: translate3d(0, 0, 0) !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }

        body.auth-mobile-info-open #login-modal .auth-info-panel-inner {
            display: block !important;
            flex: 0 0 auto !important;
            width: 100% !important;
            height: auto !important;
            min-height: max-content !important;
            max-height: none !important;
            overflow: visible !important;
            pointer-events: auto !important;
            touch-action: pan-y !important;
        }

        body.auth-mobile-info-open #login-modal .library-tile-grid,
        body.auth-mobile-info-open #login-modal .education-library-grid {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            grid-auto-rows: minmax(96px, auto) !important;
            gap: 12px !important;
            width: 100% !important;
            height: auto !important;
            min-height: min-content !important;
            max-height: none !important;
            overflow: visible !important;
            pointer-events: auto !important;
            touch-action: pan-y !important;
        }

        body.auth-mobile-info-open #login-modal .library-mini-tile {
            min-height: 96px !important;
            height: auto !important;
            flex: 0 0 auto !important;
            pointer-events: auto !important;
            touch-action: manipulation !important;
        }

    .education-library-selector {
        width: 100% !important;
        margin-top: 18px !important;
        padding: 14px !important;
        border: 1px solid #d7dde8 !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.82) !important;
    }

    .education-library-selector-heading {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

        .education-library-selector-heading h3 {
            margin: 0 0 4px !important;
            font-size: 15px !important;
            line-height: 1.25 !important;
        }

        .education-library-selector-heading p {
            margin: 0 !important;
            font-size: 12px !important;
            line-height: 1.45 !important;
        }

    .education-library-selector-icon {
        flex: 0 0 auto !important;
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    body.auth-requested #login-modal .auth-info-panel {
        width: min(94vw, 360px) !important;
    }
}