/* Shared by the direct onboarding page and every HTMX onboarding modal. */
@media (max-width: 767px) {
    .onboarding-page {
        align-items: flex-start;
        padding: 12px;
        overflow: visible;
    }

    .onboarding-page > .absolute { display: none; }
    .onboarding-shell { border-radius: 24px; overflow: visible; }
    .onboarding-step-layout { max-height: none; min-height: 0; }
    .onboarding-step-sidebar { padding: 16px 12px; overflow-x: auto; overflow-y: hidden; }
    .onboarding-step-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(52px, 1fr));
        gap: 8px;
        min-width: 300px;
    }
    .onboarding-step-list > div { flex-direction: column; gap: 5px; text-align: center; min-width: 0; }
    .onboarding-step-list > div > div:last-child { align-items: center; }
    .onboarding-step-list > div > div:last-child span:first-child { display: none; }
    .onboarding-step-list > div > div:last-child span:last-child { font-size: 9px; line-height: 1.2; }
    .onboarding-step-list .w-9.h-9 { width: 32px; height: 32px; }
    .onboarding-step-main { overflow: visible; min-width: 0; }
    .onboarding-form-scroll { overflow: visible; padding: 20px; }
    .onboarding-step-main > div:first-child { padding: 20px; gap: 12px; }
    .onboarding-step-main > div:first-child h2 { font-size: 20px; line-height: 1.2; }
    .onboarding-step-main form .flex.items-center.justify-between { gap: 12px; flex-wrap: wrap; }
    .onboarding-step-main form button[type="submit"] {
        min-height: 44px;
        flex: 1 1 auto;
        justify-content: center;
    }
    .onboarding-step-main input,
    .onboarding-step-main select,
    .onboarding-step-main textarea { font-size: 16px; }

    #wizard-modal > .relative {
        align-items: flex-start;
        min-height: 0;
        height: 100dvh;
        padding: 8px;
    }
    #wizard-modal > .relative > div {
        max-height: calc(100dvh - 16px);
        border-radius: 20px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #wizard-modal #wizard-content {
        padding: 0 !important;
        overflow: visible !important;
    }
}