/**
 * Site-wide mobile primitives — injected via common.php
 * Keep feature-specific rules in student_mega_nav / growth_rail / design_studio CSS.
 */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

iframe {
    max-width: 100%;
}

@media (max-width: 900px) {
    html,
    body {
        overflow-x: clip;
    }

    /* iOS zoom on focus */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Generic table scroll */
    .table-scroll,
    .sp-table-wrap,
    .ssa-table-wrap,
    .dashboard-table-wrap,
    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.sp-table,
    table.ssa-table,
    table.dashboard-table,
    .dashboard-table,
    .data-table {
        max-width: none;
    }

    /* Touch-friendly controls */
    button,
    .button,
    .mega-trigger,
    a.btn,
    .sp-btn {
        min-height: 40px;
    }

    /* Stack common action rows */
    .filter-container,
    .sp-actions,
    .toolbar-row,
    .btn-row {
        flex-wrap: wrap !important;
    }
}

/* Bottom FAB ladder: left comm, right growth, chatbot above */
@media (max-width: 720px) {
    .sp-comm-rail__fab,
    .sp-communication-rail__fab,
    #spCommRailFab {
        bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        z-index: 9400 !important;
    }

    .sp-growth-rail__fab,
    #spGrowthRailFab {
        bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        z-index: 9400 !important;
    }

    #z3aChatbot,
    .z3a-chatbot-fab,
    .z3a-chatbot__fab,
    #z3aChatbotFab {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        z-index: 9500 !important;
    }
}

@media (max-width: 480px) {
    .container,
    .wrap,
    .sh-wrap,
    .sp-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    h1 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
    h2 { font-size: clamp(1.1rem, 4.5vw, 1.45rem); }
}

.u-hide-sm {
    display: none !important;
}

@media (min-width: 721px) {
    .u-hide-sm { display: initial !important; }
    .u-show-sm { display: none !important; }
}

@media (max-width: 720px) {
    .u-show-sm { display: initial !important; }
}