/*
 * anyWeblink — mobile navigation for every page that has the top bar.
 * Below 1300px the desktop nav no longer fits (and the page's own CSS hides it on tablets and phones); this turns them into a slide-in
 * menu opened by a hamburger button (added by mobile-nav.js). Wide screens are untouched.
 * Linked from each page's <head>:
 *   <link rel="stylesheet" href="/mobile-nav.css?v=1">  +  <script src="/mobile-nav.js?v=1" defer></script>
 */

.m-nav-toggle, .m-nav-backdrop { display: none; }
.m-nav-built { display: none; }

@media (max-width: 1300px) {

    /* ── top bar: compact, nothing may push the page wider than the screen ── */
    .topbar { padding: 0 14px !important; gap: 10px !important; max-width: 100vw; }
    .topbar-nav, .topbar-divider { display: none !important; }
    .topbar-right { gap: 8px !important; min-width: 0; }
    .topbar-right .user-pill, .topbar-right .logout-btn { display: none !important; }  /* live in the menu instead */
    .credits-pill { padding: 5px 10px !important; font-size: 0.75rem !important; white-space: nowrap; }
    .topbar-logo { min-width: 0; white-space: nowrap; }

    /* ── hamburger ── */
    .m-nav-toggle {
        display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
        width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
        background: rgba(245, 166, 35, 0.10); border: 1px solid rgba(245, 166, 35, 0.30); border-radius: 9px;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s, border-color 0.2s;
    }
    .m-nav-toggle:hover, .m-nav-toggle:focus-visible { background: rgba(245, 166, 35, 0.2); outline: none; }
    .m-nav-toggle span {
        display: block; width: 18px; height: 2px; border-radius: 2px; background: #f5a623;
        transition: transform 0.25s, opacity 0.2s;
    }
    html.m-nav-open .m-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    html.m-nav-open .m-nav-toggle span:nth-child(2) { opacity: 0; }
    html.m-nav-open .m-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── the menu panel (the page's own sidebar, or one built from the top-bar links) ── */
    .m-nav-drawer {
        display: flex !important; flex-direction: column; gap: 4px;
        position: fixed !important; top: var(--m-top, 60px) !important; left: 0 !important; bottom: 0 !important;
        height: auto !important; width: min(86vw, 320px) !important; max-width: 100%;
        margin: 0 !important; padding: 18px 14px calc(28px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        background: var(--ink-mid, #1a1d26); border-right: 1px solid var(--ink-line, rgba(255, 255, 255, 0.07));
        z-index: 260; box-sizing: border-box;
        transform: translateX(-105%); visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.28s;
    }
    html.m-nav-open .m-nav-drawer {
        transform: none; visibility: visible; box-shadow: 14px 0 44px rgba(0, 0, 0, 0.6);
        transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
    }
    .m-nav-drawer .sidebar-link, .m-nav-drawer .m-link { min-height: 46px; }

    /* links in a menu we had to build ourselves (pages with no sidebar) */
    .m-nav-built .m-label {
        font-family: 'DM Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--slate, #8b93a8); opacity: 0.8; padding: 14px 12px 6px;
    }
    .m-nav-built .m-label:first-child { padding-top: 2px; }
    .m-nav-built .m-link {
        display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 9px;
        font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 500; text-decoration: none;
        color: var(--slate, #8b93a8); border: 1px solid transparent; transition: background 0.2s, color 0.2s;
    }
    .m-nav-built .m-link i { width: 18px; text-align: center; font-size: 0.9rem; color: inherit; opacity: 0.9; }
    .m-nav-built .m-link:hover, .m-nav-built .m-link:focus-visible { color: var(--white, #f0f2f7); background: rgba(255, 255, 255, 0.06); outline: none; }
    .m-nav-built .m-link.active { color: var(--amber, #f5a623); background: rgba(245, 166, 35, 0.10); border-color: rgba(245, 166, 35, 0.22); }
    .m-nav-built .m-link.m-danger { color: #f87171; }

    .m-nav-backdrop {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--m-top, 60px);
        background: rgba(5, 6, 9, 0.66); z-index: 250;
        opacity: 0; pointer-events: none; transition: opacity 0.25s;
    }
    html.m-nav-open .m-nav-backdrop { opacity: 1; pointer-events: auto; }
    html.m-nav-open, html.m-nav-open body { overflow: hidden; }

    /* pages that built their own menu need it present in the DOM at this size */
    .m-nav-built { display: flex; }
}

@media (max-width: 400px) {
    .topbar { padding: 0 10px !important; gap: 8px !important; }
    .credits-pill { padding: 5px 8px !important; }
    .credits-pill i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .m-nav-drawer, .m-nav-backdrop, .m-nav-toggle span { transition: none !important; }
}