/* One scrolling document for mobile forms. The keyboard changes the visible
   viewport, not the geometry of the page Safari is trying to scroll. */
@media (max-width: 768px) {
    html, body, body.djq-layout {
        position: static !important;
        inset: auto !important;
        height: auto !important;
        min-height: 100svh !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    #mainContainer,
    #contentWrapper,
    #authModal,
    #djHome,
    #profileSetup,
    body.submission-flow #mainContainer,
    body.submission-flow #contentWrapper,
    #songRequestForm.submission-flow,
    .submission-form,
    .submission-step:not(.hidden),
    .submission-tip-step {
        height: auto;
        min-height: 0 !important;
        max-height: none;
        overflow: visible;
    }

    #mainContainer {
        min-height: 100svh !important;
        align-items: flex-start !important;
    }

    .dj-home-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
        gap: 0.75rem;
        padding: 0.75rem;
    }
    .dj-home-logo-wrap {
        order: 1;
        width: 100%;
        min-width: 0;
        margin-top: 1rem;
    }
    .dj-home-logo {
        width: clamp(62px, 16svh, 132px);
        height: clamp(62px, 16svh, 132px);
    }
    .dj-home-logo img { animation: none; }
    .dj-home-panel-slot,
    #authModal .dj-home-container > .dj-home-content {
        order: 2;
        flex: 0 0 auto;
        overflow: visible;
        padding: 0.25rem;
    }
    .partner-logos-desktop { display: none !important; }
    .partner-logos-mobile {
        order: 3;
        max-height: none;
    }

    .submission-scroll,
    .submission-step--centered .submission-scroll {
        height: auto;
        overflow: visible;
        flex: 0 0 auto;
    }
    .submission-centerpiece { min-height: 45svh; }
    .submission-step--centered .submission-scroll { min-height: 90svh; }

    /* Keep dialogs in the visible viewport, with exactly one inner scroller. */
    #settingsOverlay,
    #mySessionsModal,
    #successModal {
        inset: auto 0 auto 0 !important;
        top: var(--djq-viewport-offset-top, 0px) !important;
        height: var(--djq-viewport-height, 100svh) !important;
        min-height: 0 !important;
        align-items: flex-start !important;
        padding: 0.75rem !important;
        overflow: hidden;
        transform: none;
    }
    #settingsOverlay > .settings-panel,
    #mySessionsModal > div,
    #successModal > div {
        max-height: 100% !important;
        min-height: 0;
        overflow-y: auto;
        scroll-padding-block: 1rem;
        animation: none;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea, select {
        font-size: max(16px, 1rem) !important;
        max-width: 100%;
        min-width: 0;
        scroll-margin-block: 1.5rem;
    }
    input:focus, textarea:focus, select:focus {
        transform: none !important;
        outline: none !important;
        box-shadow: inset 0 0 0 2px rgba(255,255,255,0.65) !important;
    }
    /* Do not focus inside a moving/transform-containing ancestor on iOS. */
    .fade-in, .step-enter.visible {
        animation: none;
        transform: none;
        opacity: 1;
    }
}