/* /assets/css/responsive.css — site-wide mobile guards.
 *
 * Include AFTER each page's main stylesheet so these rules win. Hits two
 * iPhone-specific gotchas that affect every app:
 *
 *   1. iOS Safari auto-zooms when you focus an <input> or <textarea> whose
 *      computed font-size is below 16px. Bumping to 16px at phone widths
 *      keeps the user in their current zoom level.
 *
 *   2. Rogue elements (canvases at fixed pixel sizes, long URLs in posts,
 *      etc.) can push the document past viewport width on phones, causing
 *      an annoying horizontal scrollbar. `overflow-x: clip` clamps that
 *      without breaking `position: sticky` (which `overflow: hidden` would).
 */

html, body {
    max-width: 100vw;
    overflow-x: hidden;   /* fallback */
    overflow-x: clip;     /* preferred — preserves sticky positioning */
}

@media (max-width: 640px) {
    input[type=text],
    input[type=url],
    input[type=email],
    input[type=tel],
    input[type=number],
    input[type=search],
    input[type=password],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Media should never push the layout wider than its parent. */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Pre/code blocks scroll INSIDE the container, not as part of the page. */
pre {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
code {
    word-break: break-word;
}