/*
 * Mobile adaptations of the vendored AlisQI global styles (PLAN.md §4, §11.3).
 * Only overrides live here; every deviation from the main app is listed in docs/styling-inventory.md.
 */

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

html,
body {
    height: 100%;
}

/* styles.css makes body an inline-flex column for the desktop layout; the capture shell is a grid. */
body {
    display: block;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Inputs: full width (MAP-1696) and at least 16px so iOS doesn't zoom in on focus. */
input:not([type='checkbox'], [type='radio'], [type='hidden']),
select,
textarea {
    width: 100%;
    min-height: var(--capture-tap-target);
    font-size: var(--capture-font-size-input);
}

/* The main app's custom checkbox/radio is 20x20; give it a 44px hit area without changing the drawing. */
input[type='checkbox'],
input[type='radio'] {
    margin: 12px;
}

/* Hover-only affordances don't exist on touch: no scale-on-hover for icons (styles.css .icon.hasrole:hover). */
@media (hover: none) {
    .icon.hasrole:not(.help):hover,
    a > .icon:last-child:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* No browser pull-to-refresh or overscroll glow on the shell; the app has its own (PLAN.md §11.3). */
html {
    overscroll-behavior: none;
}