/* Mobile behaviour that belongs everywhere, not per page.
   Loaded by every layout including the marketing shell. */

/* Safari on iOS zooms the whole page when a focused field is under 16px.
   The app uses text-xs and text-sm fields throughout, so without this every
   tap into a form yanks the viewport. Bumping to 16px on phones costs a
   little density and buys back a usable form. */
@media (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Stop Safari inflating text when a phone is rotated to landscape. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Deliberately NOT setting body { overflow-x: hidden } here. It would hide
   the symptom by clipping whatever sticks out, which turns a visible bug into
   unreachable content, and it breaks position: sticky on descendants (the
   marketing header). Overflow is fixed per page instead, with wide content
   scrolling inside its own overflow-x-auto container. */

/* Hover tooltips built for a mouse have no dismiss path on touch, so they
   stick over the content after a tap. Suppress them where there is no
   hover-capable pointer. */
@media (hover: none) {
    [data-tooltip]::after,
    [data-tooltip]::before {
        display: none !important;
    }
}

/* Touch targets. Sidebar and nav links are sized for a cursor; on a phone
   they need a finger's worth of height. */
@media (max-width: 1024px) {
    .sidebar-link {
        min-height: 2.75rem;
    }
}

/* Momentum scrolling inside the horizontal containers we wrap tables in. */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}