/* Mobile safety layer.
   Loaded last on every page, after Bootstrap and after the inline theme styles.
   This is a net, not a fix. The overflow probe in the design-system skill names the real
   offender; these rules only stop the recurring classes of breakage from reaching the user.

   Do not add decorative styles here. Structural invariants only. */

*, *::before, *::after { box-sizing: border-box; }

/* clip, not hidden: hidden creates a scroll container and breaks position: sticky.
   clip keeps the page from scrolling sideways without changing sticky behaviour. */
html { overflow-x: clip; }

body {
    max-width: 100%;
    /* Long unbroken strings (URLs, LaTeX, tokens, hashes) are a top overflow cause. */
    overflow-wrap: break-word;
}

img, video, iframe, embed, object, svg, canvas {
    max-width: 100%;
}

/* Flex and grid children default to min-width: auto, so they refuse to shrink below their
   content and push the layout wider than the screen. This is the single most common cause
   of "one card is outside the screen" on Bootstrap pages. */
[class*="col-"],
.card,
.card-body,
.card-header,
.card-footer,
.list-group,
.list-group-item,
.d-flex > *,
.row > *,
.nav-item {
    min-width: 0;
}

pre, code, .katex-display, .table-responsive, .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tables keep their intrinsic width and scroll inside their wrapper. Never force a table to
   shrink; give it a scroll parent instead. */
.table-responsive > table,
.table-wrap > table {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    /* Bootstrap containers and negative gutters are the second most common cause: a 98% wide
       page plus a negative margin equals a horizontally scrolling page. */
    .container,
    .container-fluid,
    .container-sm {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row > * {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Fluid type replaces fixed display sizes that overflow narrow screens. */
    .display-1,
    .display-2,
    .display-3,
    .display-4 {
        font-size: clamp(1.75rem, 9vw, 3rem) !important;
    }

    h1 { font-size: clamp(1.5rem, 7vw, 2.25rem); }
    h2 { font-size: clamp(1.25rem, 6vw, 1.875rem); }

    /* Buttons that carry a long label must wrap instead of pushing their parent wider. */
    .btn { white-space: normal; }

    /* Nothing may sit outside the viewport on a phone. */
    .modal,
    .modal-dialog,
    .offcanvas,
    [class*="overlay"],
    [class*="backdrop"] {
        max-width: 100% !important;
    }
}