/* Mobile safety net for the standalone os-* tool demos.
   Each os-* page is a self-contained document with its own <style>; they share
   a `.<prefix>-top` flex header bar with a fixed height and no wrapping, which
   overflows on phones. These low-specificity rules only bite below 720px. */

@media (max-width: 720px) {
    html, body { overflow-x: clip; max-width: 100%; }

    /* header bars: .dc-top .gf-top .pl-top … all end in "-top" */
    [class$="-top"] {
        height: auto !important;
        flex-wrap: wrap !important;
        row-gap: 6px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    [class$="-top"] input {
        width: auto !important;
        min-width: 0;
        flex: 1 1 140px;
        margin-left: 0 !important;
    }
    [class$="-top"] .pill,
    [class$="-top"] .filters { margin-left: 0 !important; }
    [class$="-top"] .filters { flex-wrap: wrap; }

    /* wide data tables scroll instead of stretching the page */
    table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    code, pre { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; }

    select, textarea { max-width: 100%; }
}