/* css/mobile.css - phone layout (screens up to 767px wide). Wide screens are not touched. */

/* things added by js/mobile.js stay hidden on wide screens */
.m-topbar, .m-bottomnav, .m-scrim, .m-sheet-close { display: none; }

@media (max-width: 767px) {
    body.m-ready { --m-top: 48px; padding-top: 48px; overscroll-behavior-y: none; }
    body.m-ready.m-top-hidden { --m-top: 0px; }
    body.m-lock { overflow: hidden; }

    /* the feed (or page) uses the whole screen */
    body.m-ready div.max-w-7xl { display: block !important; max-width: none !important; width: 100% !important; }
    body.m-ready div.max-w-7xl > main { width: 100% !important; max-width: 100% !important; min-width: 0; border-right: 0 !important; }
    body.m-ready:not(.m-admin) div.max-w-7xl > main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    /* page headers stick just under the top bar and follow it when it hides */
    body.m-ready div.max-w-7xl main .sticky.top-0 { top: var(--m-top, 48px) !important; transition: top .2s ease; }

    /* side panel becomes a slide-in drawer */
    body.m-ready div.max-w-7xl > header {
        position: fixed !important; top: 0; left: 0; bottom: 0;
        height: 100vh !important; height: 100dvh !important;
        width: min(84vw, 300px) !important; max-width: none;
        z-index: 80; background: #000; overflow-y: auto;
        border-right: 1px solid #1d1d22 !important;
        transform: translateX(-105%); transition: transform .22s ease;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
    }
    body.m-nav-open div.max-w-7xl > header { transform: none; box-shadow: 12px 0 40px rgba(0, 0, 0, .6); }

    .m-scrim {
        display: block; position: fixed; inset: 0; z-index: 70;
        background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    body.m-nav-open .m-scrim, body.m-search-open .m-scrim { opacity: 1; pointer-events: auto; }

    /* top bar: menu button and name */
    .m-topbar {
        display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
        position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 50;
        padding-top: env(safe-area-inset-top, 0px);
        background: rgba(0, 0, 0, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-bottom: 1px solid #1d1d22; transition: transform .2s ease;
    }
    body.m-top-hidden:not(.m-nav-open):not(.m-search-open) .m-topbar { transform: translateY(-100%); }
    .m-topbar button, .m-topbar a, .m-bottomnav a, .m-bottomnav button, .m-sheet-close { text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
    .m-topbar button, .m-topbar a { display: flex; align-items: center; justify-content: center; color: #fff; }
    .m-menu { width: 48px; height: 48px; }
    .m-logo { font-weight: 900; font-size: 1.15rem; letter-spacing: .02em; text-align: center; }
    .m-avatar {
        display: flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; border-radius: 9999px; overflow: hidden;
        background: #374151; color: #fff; font-weight: 700; font-size: .85rem;
    }
    .m-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }
    .m-bottomnav .m-profile.is-on .m-avatar { box-shadow: 0 0 0 2px #fff; }

    /* every sidebar button moves to the bottom; the round profile picture is the centre button */
    .m-bottomnav {
        display: flex; justify-content: space-around; align-items: stretch;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(0, 0, 0, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-top: 1px solid #1d1d22;
    }
    body.m-admin .m-bottomnav { display: none; }
    .m-bottomnav a, .m-bottomnav button {
        position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
        color: #8b8b94; -webkit-tap-highlight-color: transparent;
    }
    .m-bottomnav .is-on { color: #fff; }
    .m-bottomnav svg { width: 26px; height: 26px; }
    .m-badge {
        position: absolute; top: 7px; left: calc(50% + 4px); min-width: 17px; height: 17px; padding: 0 4px;
        border-radius: 9999px; background: #fff; color: #000; font-size: 10px; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
    }
    .m-hide { display: none !important; }

    /* search: opens as a full screen sheet */
    body.m-ready div.max-w-7xl > aside { display: none !important; }
    body.m-search-open div.max-w-7xl > aside {
        display: block !important; position: fixed !important; inset: 0; z-index: 75;
        width: 100% !important; height: 100vh !important; height: 100dvh !important;
        background: #000; overflow-y: auto; padding: calc(60px + env(safe-area-inset-top, 0px)) 16px 24px;
    }
    body.m-search-open .m-sheet-close {
        display: flex; align-items: center; justify-content: center; position: absolute;
        top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; width: 44px; height: 44px;
        color: #fff; font-size: 20px; font-weight: 700;
    }

    /* feed header and pages that were laid out for a wide screen */
    #main-feed-view > .sticky > div { flex-wrap: wrap; row-gap: .4rem; }
    #loc-scope { max-width: 9.5rem; }
    #ui-toasts { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
    body.m-admin #ui-toasts { bottom: 24px !important; }

    /* 16px text in fields stops the phone from zooming in on focus */
    body.m-ready input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    body.m-ready select, body.m-ready textarea { font-size: 16px !important; }

    /* admin portal: tables and tab bars scroll sideways instead of breaking the page */
    body.m-admin main { overflow-x: hidden; }
    body.m-admin .px-6 { padding-left: 1rem; padding-right: 1rem; }
    body.m-admin .adm-btn span:first-child:not(:last-child) { display: none; }
    body.m-admin #last-updated { display: none; }
}