/* Mobile comfort pass (2026-08-15) — founding feedback: "everything
 * feels crammed and claustrophobic on mobile."
 *
 * Philosophy: at phone width, LESS per screen and MORE air. This file
 * is loaded on every shell (via _pwa.html) and scoped entirely to
 * small screens, so desktop/laptop rendering is untouched. Overrides
 * use !important deliberately: most templates carry their own <style>
 * blocks, and this layer must win at phone width.
 *
 * Surfaces this pass covers: arcade hub, arcade gameplay, Academy
 * student dashboard, guided lessons. (Parent dashboards are a
 * follow-up — heavy inline styling needs in-template passes.)
 */

@media (max-width: 520px) {

    /* ---------- Global breathing room ---------- */
    body { -webkit-text-size-adjust: 100%; }

    /* Main content containers never touch the screen edge */
    .main-content, .container, .lesson-container, .arcade-container,
    .cq-wrap, .cp-wrap {
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
    }

    /* Primary action buttons: comfortable thumb size */
    .submit-btn, .continue-btn, .cq-submit, .cp-approve, .option-btn,
    .tutorial-try, .lesson-cta {
        min-height: 48px !important;
    }

    /* ---------- Arcade hub ---------- */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .game-card { padding: 18px 16px !important; }
    .arcade-header { padding: 14px 12px !important; }

    /* ---------- Arcade gameplay ---------- */
    .question-card {
        padding: 22px 16px !important;
        margin: 0 2px 16px !important;
    }
    .question-text {
        font-size: 1.15rem !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }
    .options-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .option-btn {
        padding: 15px 16px !important;
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
    }
    .game-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .answer-input {
        min-height: 48px !important;
        font-size: 16px !important;   /* 16px+ stops iOS zoom-on-focus */
    }
    .powerup-bar { gap: 10px !important; padding: 8px 4px !important; }

    /* ---------- Academy student dashboard ---------- */
    .subjects-grid { gap: 14px !important; }
    .subject-tile { padding: 16px 14px !important; }
    .today-lessons-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .today-lesson { padding: 16px !important; }
    .school-day-banner, .memory-work-card, .today-card,
    .today-lessons-card {
        padding: 16px 14px !important;
        margin: 14px 0 !important;
    }
    .entry-tiles { gap: 12px !important; }
    .entry-tile { padding: 16px 14px !important; }

    /* ---------- Guided lessons ---------- */
    .bubble {
        max-width: 92% !important;
        padding: 14px 16px !important;
        font-size: 1.02rem !important;
        line-height: 1.55 !important;
    }
    .bubble-row { margin: 12px 0 !important; }
    .lesson-controls {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .lc-btn { min-height: 42px !important; }

    /* Inputs across lesson/quiz surfaces: 16px font stops iOS's
       auto-zoom-on-focus, which is a big "cramped and jumpy" feeling */
    input[type="text"], input[type="email"], input[type="password"],
    textarea, select {
        font-size: 16px !important;
    }
}

/* ---------- Lite shell: desktop icon rail -> bottom tab bar ----------
 * THE big "crammed" fix (2026-08-15): the fixed left rail ate ~30% of a
 * phone's width on every Lite page (arcade, subjects, dashboard). At
 * phone width it becomes a standard bottom tab bar, icons only, and
 * content gets the full screen width back.
 * Selectors are #iconRail-scoped: the rail's own <style> ships !important
 * rules later in the document, so we must win on SPECIFICITY. */
@media (max-width: 520px) {
    nav.icon-rail#iconRail {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        flex-direction: row !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 8px !important;
        border-top: 1px solid rgba(139, 92, 246, 0.35) !important;
        border-right: none !important;
    }
    #iconRail .rail-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
        height: 100% !important;
        justify-content: space-around !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #iconRail .rail-item {
        flex-direction: column !important;
        padding: 8px 10px !important;
        min-width: 44px !important;
        margin: 0 !important;
    }
    #iconRail .rail-label, #iconRail .rail-toggle,
    #iconRail .rail-logo, #iconRail .rail-divider,
    #iconRail .rail-section-label {
        display: none !important;
    }
    /* Content reclaims the full width the rail used to eat */
    div.main-content {
        padding: 18px 14px 86px 14px !important;
    }
    /* Floating widgets ride above the new bottom bar */
    #fbWidget { bottom: 74px !important; }
    .help-fab, #helpFab, .help-fab-wrap { bottom: 74px !important; }
    #cozmicPwaBanner { bottom: 62px !important; }
    #cozmoRaBar { bottom: 96px !important; }
}

/* Homeschool dashboard topbar (2026-08-18): .topbar-left (logo + nav)
   didn't wrap, overflowing 18px at iPhone-SE width — caught by
   scripts/mobile_check.py. */
@media (max-width: 520px) {
    .topbar { padding: 12px 14px !important; }
    .topbar-left { flex-wrap: wrap !important; gap: 10px !important; }
}