/* Shared mobile corrections. Loaded after shell/page styles; desktop keeps its existing design. */
@media (max-width: 991.98px) {
    /* Flex children must shrink below their text/input intrinsic width. */
    .auth-form-panel,
    .auth-form-inner,
    .auth-lite-card,
    .app-more-profile-copy,
    .mp-contact-info-item > div {
        min-width: 0;
        max-width: 100%;
    }

    .auth-form-inner { width: 100%; }
    /* A horizontal entrance moves the narrow form beyond the viewport. */
    .auth-entry { animation-name: auth-mobile-entry; }
    .auth-form-inner form,
    .auth-field,
    .auth-input-wrap { min-width: 0; }

    .auth-form-header,
    .auth-lite-card,
    .mp-contact-info-value,
    .app-more-profile-copy { overflow-wrap: anywhere; }

    /* 16px prevents focus zoom on iOS; excludes checkbox/radio/hidden inputs. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
        min-width: 0;
    }

    .btn,
    .form-control,
    .form-select,
    .mp-form-control,
    .nav-toggle,
    .mp-nav-toggle,
    .mood-chip,
    .phase-tab,
    .auth-mode-tab,
    .auth-region-tab,
    .auth-input-toggle,
    .cycle-info-button,
    .cal-legend-info,
    .app-theme-segment button,
    .app-footer-group summary,
    .supporter-tabs [role="tab"],
    .auth-lite-submit,
    .modal .btn-close {
        min-width: 44px;
        min-height: 44px;
    }

    .auth-input-toggle { right: 4px; }
    .auth-input-wrap:has(.auth-input-toggle) .auth-input { padding-right: 52px; }

    /* Keep the mobile menu reachable with a short viewport or the keyboard open. */
    .app-more-sheet {
        max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .app-more-handle { height: 44px; background: transparent; }
    .app-more-handle::before {
        inset: auto;
        width: 56px;
        height: 5px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 999px;
        background: color-mix(in srgb, var(--mp-ink-900) 18%, transparent);
    }
    .app-more-handle:hover,
    .app-more-handle:focus-visible { background: transparent; }
    .app-more-handle:focus-visible { outline: 2px solid var(--mp-pink-500); outline-offset: 2px; }

    /* Seven 44px days need a small internal scroller on the narrowest screens. */
    .cal-grid-card.cal-grid-card { overflow-x: auto; }
    .cal-grid-card .cal-dow-row,
    .cal-grid-card .cal-days-grid {
        grid-template-columns: repeat(7, minmax(44px, 1fr));
        gap: 8px;
        padding-inline: 4px;
        min-width: 328px;
    }
    .cal-grid-card .cal-day { min-height: 44px; }
    .cal-grid-card:focus-visible { outline: 2px solid var(--mp-pink-500); outline-offset: 2px; }

    .modal-dialog { width: calc(100% - 16px); margin: 8px auto; }
    .modal-content { max-height: calc(100dvh - 16px); }
    .modal-header,
    .modal-footer { flex-shrink: 0; }
    .modal-body { overflow-y: auto; overscroll-behavior: contain; }
    .modal-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (max-width: 575.98px) {
    .auth-form-panel { padding-inline: 16px; }
}

@keyframes auth-mobile-entry {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-entry { animation: none; }
}