/* pb6451 — mobile ergonomics.
 *
 * Primary goal: stop iOS Safari from auto-zooming when a form input
 * receives focus.
 *
 * Safari does this whenever the input's computed font-size is under 16px,
 * and the zoom is sticky — users get stuck zoomed in and the page overflows
 * the viewport. Tailwind's `text-sm` utility (14px) triggers it on every
 * input in this app.
 *
 * The fix is to force form controls to at least 16px on narrow viewports.
 * We keep the desktop layout untouched because desktop users don't have
 * this behavior and the 2px difference would be noticeable.
 */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="url"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Keep Safari from auto-rescaling text when rotating between portrait and
 * landscape (which can occasionally confuse the zoom heuristics and has
 * no benefit when we already control font sizes). */
html {
    -webkit-text-size-adjust: 100%;
}

/* Bottom-anchored "sheet" modals are positioned with `left-1/2 -translate-x-1/2`
 * and sized with inline `width: max-content; min-width: 340px; max-width: 520px`.
 * That works on desktop but on narrow phones the content can exceed the
 * viewport width (especially now that inputs are 16px to prevent iOS
 * auto-zoom), and the centered-translate clips content off both sides.
 *
 * On narrow screens we pin them edge-to-edge with a small gutter and cancel
 * the X-axis translate (keeping Y so the slide-up animation still works).
 *
 * The !important overrides are necessary because the affected elements
 * carry conflicting inline `style` attributes. */
@media (max-width: 640px) {
    #personal-info-modal,
    #password-modal,
    #groups-modal,
    #help-modal,
    #about-modal,
    #detail-panel {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        --tw-translate-x: 0 !important;
    }
}