/* Rota Generator hotfix: visible Turnstile + viewport-safe mobile drawer */

.turnstile-wrap {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 2px 0 4px;
}
.turnstile-label {
    color: #294c69;
    font-size: .79rem;
    font-weight: 700;
}
.turnstile-wrap .cf-turnstile {
    width: 100%;
    min-height: 65px;
}
.turnstile-error {
    color: #9b302a;
    font-size: .78rem;
    font-weight: 650;
}

@media (max-width: 900px) {
    /* The old drawer lived inside a backdrop-filtered sticky header. That made
       fixed positioning resolve against the header instead of the viewport in
       Chromium. The drawer now lives outside the header, and these rules make
       its viewport dimensions explicit. */
    .mobile-nav-backdrop {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        z-index: 2090 !important;
        background: rgba(6,37,79,.38) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .mobile-nav-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: min(88vw, 330px) !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 2100 !important;
        background: #fff !important;
        border-right: 1px solid #dce7ed !important;
        border-radius: 0 !important;
        box-shadow: 24px 0 56px rgba(6,37,79,.20) !important;
        transform: translate3d(-104%,0,0) !important;
        transition: transform .2s ease !important;
    }
    .mobile-nav-drawer.is-open {
        transform: translate3d(0,0,0) !important;
    }
    .mobile-nav-header {
        flex: 0 0 auto !important;
        padding: 17px 15px 14px !important;
        background: #fff !important;
    }
    .mobile-nav-links {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 3px !important;
        padding: 10px 10px calc(28px + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
    }
    .mobile-nav-links a {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 46px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 380px) {
    .mobile-nav-drawer { width: min(91vw, 316px) !important; }
}