/* =============================================================
   mobile.css -- phone & tablet polish shared by EVERY page.

   Linked last in each page's <head> so it can correct the per-page
   <style> blocks without editing a dozen copies of the same rule.
   Everything here is scoped to touch devices or small viewports, so
   the desktop layout is untouched.

   What it fixes, and why each matters on a real phone:
     1. iOS text inflation in landscape.
     2. iOS/iPadOS zooming the whole page when an input under 16px
        gets focus -- the admin filters (14px) did this on iPad.
     3. Dashboard modals sized in `vh`: on iOS Safari 88vh is measured
        against the toolbar-hidden viewport, so the Save button at the
        bottom of a long form sat under the toolbar. `dvh` tracks the
        real visible height.
     4. Tap targets under ~44px (close buttons, colour swatches,
        reorder arrows, access links) -- Apple/Google minimums.
     5. Scroll chaining: flicking to the end of a modal or drawer
        scrolled the page behind it.
     6. Installed-app mode (display: standalone): respect the notch /
        home-indicator safe areas and drop the browser-only chrome.
   ============================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 3 + 5 -- modals and drawers */
.ds-modal {
    max-height: 88vh;
    max-height: 88dvh;
    overscroll-behavior: contain;
}
.ds-modal-body,
.mobile-menu-scroll,
.mobile-menu {
    overscroll-behavior: contain;
}

@media (hover: none) and (pointer: coarse) {
    /* 2 -- 16px is the size at which Safari stops auto-zooming. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* 4 -- comfortable touch targets */
    .ds-modal-close,
    .ds-uploader-remove,
    .mobile-close {
        min-width: 44px;
        min-height: 44px;
    }
    .ds-swatch {
        min-width: 40px;
        min-height: 40px;
    }
    .tr-order-btn {
        min-width: 40px;
    }
    .ac-access-link,
    .panel-where {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Hover-only affordances never fire on touch; stop the "sticky
       hover" lift that stays stuck after a tap. */
    a, button, [role="button"] {
        -webkit-tap-highlight-color: rgba(85, 184, 120, 0.18);
    }
}

/* Phones: modals use the full width and slide up from the bottom,
   where the thumb is -- the same pattern as native sheets. */
@media (max-width: 560px) {
    .ds-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .ds-modal-overlay .ds-modal {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        max-height: 92vh;
        max-height: 92dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* 6 -- launched from the home screen */
@media (display-mode: standalone) {
    body {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    /* No address bar to long-press, so selecting UI chrome by
       accident is the only thing a long-press on a button does. */
    button, .ds-btn, nav a {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* "Install app" entry points (buttons are built by pwa.js and stay
   hidden on desktop and inside the installed app). */
.pwa-install-row {
    display: flex;
    justify-content: center;
}
.pwa-install-row .ynpwa-entry {
    margin: 8px 16px 22px;
}
.mobile-menu-install {
    margin: 10px 12px 4px;
    flex: none;
}
.mobile-menu-install .ynpwa-entry {
    width: 100%;
}

/* Touch reordering (dashboard-crud.js enableDragReorder): the handle
   must own the gesture, or sliding it scrolls the page instead. */
.ds-drag-handle {
    touch-action: none;
}
@media (hover: none) and (pointer: coarse) {
    .ds-drag-handle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }
}

/* Roster / certificate multi-select checkboxes: 19px is a fiddly
   target for a thumb working through a list of students. */
@media (hover: none) and (pointer: coarse) {
    .tr-check,
    #rosterSelectAll,
    .ac-card-checkbox {
        width: 24px;
        height: 24px;
    }
    .tr-cert-link {
        display: inline-block;
        padding-block: 8px;
    }
}

/* Course application form (courses-public.js): each option row had
   8px of padding that did nothing -- only the 21px-tall text label was
   tappable. The label now fills the row so the whole row answers. */
@media (hover: none) and (pointer: coarse) {
    .choice {
        padding-block: 0 !important;
    }
    .choice-label {
        flex: 1;
        padding-block: 12px;
        cursor: pointer;
    }
    .choice input[type="radio"],
    .choice input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
    }
}
