/* P26 — mobile layout fixes (platform.mathla.org) */

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100%;
}

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

/* Safe areas (notched phones) */
.mathla-site-header,
.mathla-app-mobile-header,
.mobile-bottom-nav {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0));
}

.mathla-site-header {
    padding-top: env(safe-area-inset-top, 0);
}

.mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Marketing header — compact logo on narrow screens */
.mathla-site-header__actions .mathla-header-signin-link {
    display: inline-flex;
}

@media (max-width: 479px) {
    .mathla-site-header__brand .mathla-header-logo > span {
        display: none !important;
    }

    .mathla-site-header__brand {
        max-width: 3rem;
    }

    .mathla-site-header__actions .mathla-header-signin-link {
        display: none !important;
    }

    .mathla-locale-switcher .mathla-locale-btn {
        min-width: 40px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.75rem;
    }
}

/* App shell top bar — hide wordmark + redundant Collect on xs */
@media (max-width: 399px) {
    .mathla-app-mobile-header__wordmark {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .mathla-app-header-collect-btn {
        display: none !important;
    }
}

/* Mobile nav drawers — explicit CSS (reliable on all mobile browsers) */
#mathla-nav-open:checked ~ #mathla-mobile-nav,
#mathla-app-nav-open:checked ~ #mathla-app-mobile-nav {
    display: block !important;
}

#mathla-mobile-nav,
#mathla-app-mobile-nav {
    overscroll-behavior: contain;
}

#mathla-mobile-nav nav,
#mathla-app-mobile-nav nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* App content clearance above bottom tab bar */
@media (max-width: 1023px) {
    .mathla-app-main {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
    }
}

.mobile-bottom-nav {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.mobile-nav-item {
    min-width: 0;
    flex: 1 1 0;
    max-width: 5.5rem;
    font-size: 0.65rem;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}

.mobile-nav-item span:last-child {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Notification dropdown fits narrow screens */
.mathla-notification-panel {
    width: min(20rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    inset-inline-end: 0;
}

/* Leaflet map inside hero */
#mathla-contributor-map,
.leaflet-container {
    width: 100% !important;
    height: 100% !important;
}

/* Collect stepper horizontal scroll on tiny screens */
.mathla-collect-stepper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 0.25rem;
}

/* Prevent tables/cards from blowing out viewport */
.mathla-card,
.mathla-page-content {
    max-width: 100%;
}

.overflow-touch {
    -webkit-overflow-scrolling: touch;
}

/* Touch targets */
button,
a,
label,
input,
select,
textarea {
    touch-action: manipulation;
}