/* mobile-overflow.css — nothing may make a page wider than a phone.
 *
 * 2026-09-28: 148 of 543 pages scrolled (or were silently clipped) sideways
 * at 360px, 76 at 390px: tables with no scroll container, form grids that
 * could not shrink, long unbreakable links and code, and garbled KaTeX. This
 * sheet holds the shared fix. A page links it when it has content that can be
 * wider than a phone (tables, code, formulas, form grids); generators that
 * emit such pages link it too. scripts/check_mobile_overflow.py keeps every
 * page fixed: it checks every sitemap page, the apps and the embeds at 390px
 * and runs in scripts/gates_local.sh.
 *
 * Every rule sits under max-width 900px, so the desktop layout is unchanged:
 * on a wide screen the .qc-scroll-x wrapper is a plain div whose margins
 * collapse exactly as before.
 *
 * Usage
 *   <div class="qc-scroll-x"><table>…</table></div>
 *     A table that can be wider than a phone scrolls inside this wrapper and
 *     keeps its natural column widths; a table that fits still fills 100%.
 */
@media (max-width: 900px) {
    .qc-scroll-x {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Form controls size to their longest option or `size` attribute; a
       percentage cap makes their min-content contribution zero, so the
       grid/flex row that holds them can shrink to the screen. */
    input, select, textarea {
        max-width: 100%;
    }

    /* Rows of form fields and result boxes are grids whose `1fr` tracks
       cannot shrink below an item's min-content; let the items shrink. */
    .calc-grid > *, .calc-results-grid > *, .ws-row > *,
    .branding-row > *, .input-grid > * {
        min-width: 0;
    }

    pre {
        max-width: 100%;
        overflow-x: auto;
    }

    /* A display formula wider than the column scrolls on its own line. */
    .katex-display {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* A bare URL or long identifier in running text breaks rather than
       running past the column (only when it cannot fit on a line). */
    p, li, dd, blockquote, figcaption {
        overflow-wrap: break-word;
    }

    /* Long URLs, file names and identifiers in running text wrap instead of
       pushing the column wider. `anywhere` (unlike break-word) also lowers
       the min-content width, which is what widens flex/grid parents. Table
       cells are left alone so numbers are never split mid-figure. */
    p a, li a, p code, li code, dd a, dd code {
        overflow-wrap: anywhere;
    }
}