/*
 * LANTITE mobile mode — a structurally independent mobile layer.
 *
 * CONTRACT (enforced by tools/check_mobile_css.py — run it after editing):
 *   1. Every rule lives inside an `@media (max-width: 767px)` block.
 *      No min-width queries. This file can therefore never affect
 *      desktop-width rendering, no matter what is written in it.
 *   2. Every selector is prefixed `body.mobile-mode` (or
 *      `body:not(.mobile-mode)` for the opt-in switch link), so a user
 *      who picked "Switch to desktop site" gets the untouched desktop
 *      rendering even on a small screen.
 *   3. Never edit desktop stylesheets or remove template classes for a
 *      mobile reason — mobile behaviour is only ever ADDED here.
 *
 * The body class comes from core.context_processors.view_mode (cookie
 * `lantite_view`, default = mobile mode on). Toggle endpoint: /set-view/,
 * linked from the footer (visible on small screens only).
 */

@media (max-width: 767px) {

    /* ---- View toggle in the footer: shown on small screens in BOTH ----
       ---- states so users can always switch back and forth.        ---- */
    body.mobile-mode #view-mode-toggle,
    body:not(.mobile-mode) #view-mode-toggle {
        display: block !important;
    }

    /* ---- Question visuals: scale what can scale, scroll the rest. ----
       Bank questions emit fixed-width markup (e.g. <svg width="450">),
       which is wider than a phone viewport. SVGs with a viewBox scale
       cleanly to fit; anything else scrolls inside its wrapper instead
       of pushing the whole page wider than the screen.
       .q-visual       = practice-exam sit + results templates
       .q-visual-wrap  = exam mode + skill practice question partials   */
    body.mobile-mode .q-visual-wrap {
        overflow-x: auto;
    }
    body.mobile-mode .q-visual svg[viewBox],
    body.mobile-mode .q-visual-wrap svg[viewBox] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ---- Action button rows (exam mode + skill practice): the three-
       and four-across rows can't fit at 375px, so let them wrap into a
       2-per-row grid and give each button a comfortable tap height.  ---- */
    body.mobile-mode .q-actions-row {
        flex-wrap: wrap;
    }
    body.mobile-mode .q-actions-row > * {
        flex: 1 1 45%;
        min-height: 44px;
    }

    /* (The numeracy dashboard hero now stacks + centres on phones via the
       same Tailwind flex-col/text-center classes literacy uses, so the old
       .hero-top-row wrap rule is no longer needed.) */

    /* Numeracy dashboard title: the text-4xl (36px) "LANTITE Numeracy"
       heading plus the icon and Premium/Upgrade badge is ~6px too wide at
       375px. Trim the title a touch on phones (also reads better small). */
    body.mobile-mode .num-dash h1 {
        font-size: 1.9rem;
    }

    /* ---- Literacy module header: the breadcrumb (back | module > section)
       and the progress cluster (Saved · Item N of M · bar · %) share one
       non-wrapping justify-between bar whose combined min-content exceeds
       phone width. Let the bar and both clusters wrap.                 ---- */
    body.mobile-mode .module-header-row {
        flex-wrap: wrap;
        row-gap: 0.375rem;
    }
    body.mobile-mode .module-header-row > div {
        flex-wrap: wrap;
    }

    /* ---- Literacy exam mode: some questions embed an HTML data table
       (in a cluster passage or the optional visual). The exam uses a CSS
       grid (1fr) whose track has min-width:auto, so a wide table blew the
       whole question column past the viewport. Two levers fix it:
       (a) let the grid items shrink below their content min-content, and
       (b) scroll the passage box so a wide table scrolls in place while
       the surrounding prose keeps wrapping. The optional visual is already
       wrapped in .q-visual-wrap (scrolls, see above).                   ---- */
    body.mobile-mode #lit-question-area,
    body.mobile-mode #lit-cluster-passage {
        min-width: 0;
    }
    body.mobile-mode .lit-inline-passage-body {
        overflow-x: auto;
    }
    /* Long unbroken tokens in question / solution prose can't push the card
       wide either. */
    body.mobile-mode .lit-md-body {
        overflow-wrap: anywhere;
    }
}