/* H33 mobile containment — 2026-09-25
 *
 * Cures measured horizontal overflow below 768px. Overflow here is not a
 * cosmetic issue: the site header is position:fixed with left:0;right:0, so it
 * is sized by the layout viewport. When page content forces that viewport
 * wider than the device, the header widens with it and carries the hamburger
 * off the right edge of the screen, leaving the page with no reachable
 * navigation at all.
 *
 * Every rule below exists because a page measured in a real iPhone-emulated
 * viewport needed it. Linked only from pages that actually overflow, so the
 * blast radius is the evidence.
 */

@media (max-width: 768px) {

    /* ── inline multi-column grids collapse to one column ──
       The markup declares these in a style attribute
       (style="display:grid;grid-template-columns:repeat(5,1fr)"), so no class
       selector can reach them; an attribute selector is the only lever. */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* A 1fr track cannot shrink below its item's min-content width unless the
       item is permitted to. Without this the tracks grow past the container
       even after collapsing. */
    [style*="grid-template-columns"] > * {
        min-width: 0 !important;
    }

    /* ── wide tables and code blocks scroll inside their own box ──
       rather than widening the document.

       RECORDED TRADE-OFF: display:block is what makes a <table> scrollable;
       there is no pure-CSS way to keep display:table AND contain the overflow.
       Block display can weaken the table's implicit semantics for assistive
       technology. It is accepted here because the alternative is worse: with
       body{overflow-x:hidden} the overflowing columns are CLIPPED and
       unreachable by any user, and the widened layout viewport also carries the
       fixed nav's hamburger off-screen. This follows the precedent already set
       by orphan-mobile-fix.css. The semantics-preserving fix is to wrap each
       table in a scroll container in the markup; that is a per-page structural
       change across ~155 pages and is not attempted here. */
    table, pre {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Inline flex/grid containers must not be sized by their content.
       Without this, a nowrap descendant widens every ancestor in turn and
       max-width:100% on the descendant resolves against an already-too-wide
       parent, so the cap has no effect. */
    [style*="display:flex"], [style*="display: flex"],
    [style*="display:grid"], [style*="display: grid"] {
        max-width: 100%;
        min-width: 0;
    }
    [style*="display:flex"] > *, [style*="display: flex"] > * {
        min-width: 0;
    }

    /* Block-level <code> with white-space:nowrap cannot wrap, so it must be
       able to scroll instead. On inline <code> overflow-x has no effect, so
       this is safe for both uses. */
    code {
        max-width: 100%;
        overflow-x: auto;
    }

    /* ── defeat inline fixed/minimum widths on layout containers ── */
    [style*="min-width:4"], [style*="min-width: 4"],
    [style*="min-width:5"], [style*="min-width: 5"],
    [style*="min-width:6"], [style*="min-width: 6"],
    [style*="min-width:7"], [style*="min-width: 7"],
    [style*="min-width:8"], [style*="min-width: 8"],
    [style*="min-width:9"], [style*="min-width: 9"],
    [style*="min-width:10"], [style*="min-width: 10"],
    [style*="min-width:11"], [style*="min-width: 11"],
    [style*="min-width:12"], [style*="min-width: 12"] {
        min-width: 0 !important;
    }

    /* ── long unbreakable text wraps instead of overflowing its box ──
       A heading whose box fits can still push the document wider when its
       text cannot break; measured on /agent-governance/ where a 255px h2
       extended the layout viewport to 388px on a 375px device. */
    h1, h2, h3, h4, h5, h6,
    p, li, dt, dd, blockquote, td, th, figcaption, summary,
    a, span, strong, em, b, i, label, small {
        overflow-wrap: break-word;
    }

    /* Media stays inside its column. Site chrome is excluded: nav and footer
       logos carry an explicit height, and constraining their width is enough
       (see orphan-mobile-fix.css for the same exclusion and why). */
    img:not([class*="logo"]), svg:not([class*="logo"]),
    video, iframe, canvas {
        max-width: 100%;
    }


    /* ── layout containers never exceed their parent ──
       The residual causes after the first iteration were class-based layouts
       (div.form-area, div.sdk-flow-steps, main#content, footer, secondary
       <nav> bars), which no attribute selector reaches. This is the same
       containment orphan-mobile-fix.css already applies on 23 pages.
       min-width:0 is what actually lets a flex or grid item shrink below its
       content's min-content width; max-width alone does not. */
    main, section, article, header, footer, aside,
    div[class], div[style], ul, ol, dl, figure, form, fieldset {
        max-width: 100% !important;
    }
    main, section, article, header, footer, aside,
    div[class], div[style], li {
        min-width: 0;
    }

    /* A table with a CSS min-width defeats max-width:100% (min wins), so the
       box stays wider than the viewport even with overflow-x:auto. */
    table {
        min-width: 0 !important;
    }

    /* Secondary navs - breadcrumb trails, topic bars - are not the site
       header and must wrap or scroll rather than extend the page. */
    nav:not([role="navigation"]) {
        max-width: 100% !important;
        flex-wrap: wrap;
    }



    /* Inline <code> holding a long hash cannot wrap at a space that is not
       there, and overflow-x has no effect on an inline box - so it needs an
       explicit break opportunity. Measured on /proofs/* where a 570px inline
       code span widened the page. */
    code, kbd, samp {
        overflow-wrap: anywhere;
    }

    /* A button must not be sized by its label. */
    button, .btn, [class*="btn-"] {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* ── the site header always wins the stack ──
       Measured occlusions of the hamburger below 768px: nav.breadcrumb on 4
       blog pages, nav.topic-nav on /faq/, nav.ent-nav on 5 marketing pages,
       .h33-paper-bar on 2 whitepapers, plus a full-screen demo modal and a
       transient presentation gate. Every one of those paints at z-index 1000
       or 9999, i.e. at or above the site header, so the button underneath
       could not be tapped. Raising the header - and its menu, keeping their
       existing relative order - makes the control reachable regardless of what
       a page stacks at the top. */
    nav[role="navigation"] {
        z-index: 10000 !important;
    }
    .mobile-menu {
        z-index: 9999 !important;
    }

    /* Page-level bars that sit at top:0 would now be painted underneath the
       header, so move the ones measured doing it to just below it and let them
       stay usable rather than hidden. */
    nav.ent-nav {
        top: 64px !important;
        height: auto !important;
        flex-wrap: wrap;
    }
    .ent-nav-links {
        flex-wrap: wrap;
        gap: 14px !important;
    }
    .h33-paper-bar {
        top: 64px !important;
        z-index: 900 !important;
    }

    /* A breadcrumb or topic bar is not a header and must not be fixed over
       one; in flow it also stops extending the page sideways. */
    nav.breadcrumb, nav.topic-nav {
        position: static !important;
        z-index: auto !important;
        margin-top: 64px;
        max-width: 100% !important;
    }

    /* ── flex rows wrap instead of extending past the viewport ──
       CSS cannot select on computed display, so class-based flex rows are
       listed explicitly; each name here was measured overflowing. */
    [style*="display:flex"]:not([style*="wrap"]),
    [style*="display: flex"]:not([style*="wrap"]) {
        flex-wrap: wrap;
    }
    .cta-buttons,
    .cc-cta-buttons {
        flex-wrap: wrap;
    }
}