/* AiEGIS Grid mobile overrides — v2.
 * Single source of truth for mobile-only layout rules. Every /grid/*
 * HTMLResponse gets a <link rel=stylesheet> pointing here (injected
 * by MobileStylesheetMiddleware on agent_platform + nginx sub_filter
 * on aegis_api proxied routes). Rules inside @media(max-width:768px)
 * do NOT affect desktop at 769px+.
 *
 * v2 adds: .logo 8px variant for /grid/login, h1 tightening for
 * /grid/how-it-works, and /grid/login-specific .login-card sizing.
 */

@media (max-width: 768px) {
    /* Landing hero — /grid/ ONLY — logo bumped for mobile readability (Trav 2026-04-18).
     * Scoped to .grid-landing body class to avoid bleeding to /grid/login,
     * /grid/terms, etc. Nel red-team 2026-04-18. */
    .grid-landing .logo {
        font-size: 3.9em;
        letter-spacing: 14px;
    }

    /* 'the agent economy' typewriter subtitle — match footer size on mobile
     * (Trav 2026-04-18). Scoped to /grid/ landing only. */
    .grid-landing .term {
        font-size: 0.55em !important;
        letter-spacing: 1px;
    }

    /* Top-left ENTER/EXIT button glow fits in 320px */
    .grid-login-btn {
        letter-spacing: 1px;
        left: 16px;
        top: 14px;
        font-size: 0.78em;
    }

    /* Footer stacked on mobile — avoids left-right collision at 375.
     * Scoped to body:not(.has-results) so /grid/search results-state
     * keeps its own full-width footer-bar. Nel red-team 2026-04-18. */
    body:not(.has-results) .footer-links {
        left: 12px;
        right: 12px;
        bottom: 32px;
        font-size: 0.55em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        overflow: hidden;
    }
    body:not(.has-results) .footer-links a {
        margin-right: 0 !important;
        flex: 0 0 auto;
    }

    /* .back a color now handled at desktop template level (app.py lines 1954-2132). Trav 2026-04-18. */
    body:not(.has-results) .footer-right {
        left: 12px;
        right: auto;
        bottom: 10px;
        font-size: 0.55em;
    }

    /* Block-cursor visible again on mobile — .sb margin-top:24px places it
     * below the subtitle, no longer overlaps ENTER. Trav 2026-04-18. */

    /* Generic fix for fixed-width tables on admin dashboards */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Search box: desktop has margin-top:-40vh which pulls search ABOVE
     * the GRID title on tall narrow viewports. On mobile, place it below
     * the subtitle instead. Trav feedback 2026-04-18.
     *
     * WARNING: load-bearing dep for .block-cursor positioning. Removing or
     * changing this rule will cause the green cursor to overlap ENTER again.
     * If you remove this, ALSO restore .block-cursor { display:none !important }
     * in this file. See Nel red-team 2026-04-18. */
    .grid-landing .sb {
        margin-top: 24px !important;
    }

    /* Mobile: add padding-left to search input so both cursor + text start
     * further right. JS cursor-position formula (padding + textwidth) auto-
     * tracks because it reads computed padding. Trav 2026-04-18. */
    .sb input {
        padding-left: 100px !important;
    }

    /* /grid/how-it-works — h1 letter-spacing at 4px overflows narrow */
    h1 {
        letter-spacing: 2px !important;
        word-spacing: 0;
    }

    /* /grid/login — .logo is 2.2em + letter-spacing 8px, overflows at 375 */
    .login-card {
        max-width: 100% !important;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    /* Extra narrow (iPhone SE portrait) — still readable. Scoped to landing. */
    .grid-landing .logo {
        font-size: 3em;
        letter-spacing: 10px;
    }

    h1 {
        font-size: 1.1em !important;
        letter-spacing: 1.5px !important;
    }
}