/* Public marketing + auth shells — full mobile responsiveness.
   Loaded after styles.css on landing, submit, and sign-in pages. */

html:has(.mk-wrap),
html:has(.login-wrap),
html:has(.join-wrap),
html:has(.auth-wrap),
html:has(.submit-wrap),
html:has(.select-wrap) {
    min-width: 0;
}

html:has(.mk-wrap) body,
html:has(.login-wrap) body,
html:has(.join-wrap) body,
html:has(.auth-wrap) body,
html:has(.submit-wrap) body,
html:has(.select-wrap) body {
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
}

html:has(.mk-wrap) .btn,
html:has(.login-wrap) .btn,
html:has(.join-wrap) .btn,
html:has(.auth-wrap) .btn,
html:has(.submit-wrap) .btn,
html:has(.select-wrap) .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
}

/* ── Marketing landing ─────────────────────────────────────────────────────── */

.mk-wrap {
    width: 100%;
}

@media (max-width: 720px) {
    .mk-wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mk-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        padding: 1rem 0;
        text-align: center;
    }

    .mk-brand-wrap {
        justify-content: center;
    }

    .mk-top .mk-actions {
        margin-top: 0;
        justify-content: center;
    }

    .mk-top .mk-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .mk-proof {
        grid-template-columns: 1fr;
    }

    .mk-main {
        padding: 1.25rem 0 2rem;
    }

    .mk-block {
        padding: 1rem;
    }

    .mk-actions .btn {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .mk-brand-icon {
        width: 48px;
        height: 48px;
    }

    .mk-proof-item {
        font-size: 1rem;
        padding: 1rem 0.85rem;
    }
}

/* ── Submit / intake ───────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .submit-wrap {
        align-items: flex-start;
        padding: max(1rem, env(safe-area-inset-top)) 0.85rem max(1rem, env(safe-area-inset-bottom));
    }

    .submit-card {
        padding: 1.25rem 1rem;
        border-radius: 16px;
    }

    .submit-links {
        flex-direction: column;
    }

    .submit-links .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Login / join / author auth ──────────────────────────────────────────── */

@media (max-width: 480px) {
    .login-wrap,
    .join-wrap,
    .auth-wrap,
    .select-wrap {
        align-items: flex-start;
        padding:
            max(1rem, env(safe-area-inset-top))
            max(0.85rem, env(safe-area-inset-right))
            max(1rem, env(safe-area-inset-bottom))
            max(0.85rem, env(safe-area-inset-left));
    }

    .login-card,
    .join-card,
    .auth-card,
    .select-card {
        padding: 1.5rem 1.1rem;
        border-radius: 12px;
        max-width: 100%;
    }

    .login-card .btn,
    .join-card .btn,
    .auth-card .btn {
        width: 100%;
        justify-content: center;
    }

    .otp-code-row {
        gap: 0.28rem;
        width: 100%;
        max-width: 100%;
    }

    .otp-digit-input,
    .otp-code-row .auth-field {
        width: auto !important;
        flex: 1 1 0;
        min-width: 0;
        max-width: 2.45rem;
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .otp-digit-input,
    .otp-code-row .auth-field {
        max-width: 2.15rem;
        font-size: 0.95rem;
    }
}