@media (max-width: 640px) {
  /* Setting where a follow-up stands: thumb-sized on a phone. */
  .cf_status_set { flex-direction: column; align-items: stretch; gap: 0.375rem; }
  .cf_status_select { width: 100%; min-height: 44px; font-size: 1rem; }

    .contact_header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (min-width: 1024px) {
  #desktop_sidebar {
    display: flex;
    position: fixed;
    left: 0px;
    top: 0px;
    height: calc(100vh);
    background: var(--chrome);
    padding: 0px;
    box-sizing: border-box;
    z-index: 50;
    width: 16rem;
  }

  #root { align-items: flex-start; }
  #app_container {
    margin-left: 260px; 
    width: calc(100% - 260px) !important; 
  }

  .mobile {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  #desktop_sidebar {
    display: none;
  }
  .mobile {
    display: block;
  }
  
  .login_hero_panel {
      display: none;
  }
}

@media (max-width: 850px) {
    #app_container #main_content {
        padding: 16px;
    }
    div.onboarding_content {
        padding: .15rem;
        padding-top: 0px;
    }
    div.onboarding_container {
        padding: .25rem;
    }
    div.onboarding_controls {
        padding-top: .25rem;
    }
    div.add_additional_leaders .form {
        margin-top: 0.75rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid {
        gap: 16px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .leader-form-grid > .grid {
        padding-left: 0;
        padding-right: 0;
        gap: 0rem;
    }

}

@media (max-width: 650px) {
    div.onboarding_content {
        padding: .15rem;
        padding-top: 0px;
    }
    div.onboarding_container {
        padding: .15rem;
    }
    div.onboarding_controls {
        padding-top: .15rem;
    }
    div.add_additional_leaders .form {
        margin-top: 0.75rem;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
    }

    .grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .leaders_header {
        flex-direction: column;
    }

    .leaders_container {
        padding: 0 0.5rem;
    }  
}

@media (max-width: 640px) {
    .careflows_list {
        grid-template-columns: 1fr;
    }

    .leader_list {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 1279px) {
    .careflows_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .leader_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }  
}

@media (min-width: 768px) {
    .home_page .welcome {
        padding: 32px; 
    }

    .home_page .welcome_container .welcome_content {
        flex-direction: row;
        align-items: center;
    }
    .home_page .welcome_content_left {
        max-width: min(900px, 72%);
    }
    .home_page .welcome_cta {
        justify-content: flex-end;
        min-width: 220px;
        width: auto;
    }
}

@media (max-width: 768px) {
    .create-careflow {
        margin-top: 0.5rem;
    }    
    .leader_form_page {
        padding-bottom: 2rem;
    }
    .leader-form-grid {
        grid-template-columns: 1fr;
    }
    .leader_profile_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .leader_profile_header_left {
        flex-direction: column;
        width: 100%;
    }
    .leader_profile_hero {
        margin-left: 0 !important;
    }
    .leader_profile_header_right {
        width: 100%;
    }
    .leader_profile_edit {
        width: 100%;
        justify-content: center;
    }
    .leader_profile_content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1023px) {
    .careflows_header {
      flex-direction: column;
    }

    .login_layout {
        flex-direction: column;
    }

    .login_auth_panel,
    .login_hero_panel {
        min-height: auto;
    }

    .login_hero_panel {
        padding-top: 3rem;
        padding-bottom: 4.5rem;
    }
}

@media (max-width: 640px) {
    .login_card {
        padding: 1.5rem;
        border-radius: 1.25rem;
    }

    .login_brand {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1023px) {
    .organization_content {
        display: flex;
        flex-direction: column;
    }

    .organization_grid {
        grid-template-columns: none;
    }

    .organization_input input,
    .organization_input select {
        font-size: var(--text-input-mobile);
    }
}
@media (max-width: 1023px) {
    .guests_page,
    .home_page,
    .contact_page {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

@media (max-width: 850px) {
    .guests_container {
        overflow-x: hidden;
    }

    .guests_header {
        flex-wrap: wrap;
    }

    .guests_actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .guests_filters {
        flex-direction: column;
    }

    .guests_notice {
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;
        padding: 0.75rem 0.875rem;
    }

    .guests_notice_subtitle {
        display: none;
    }

    .guests_notice_icon {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 640px) {
    .contact_methods {
        grid-template-columns: 1fr;
    }

    .contact_card_link {
        word-break: break-all;
    }

    .careflow-title {
        font-size: 1.25rem;
    }
}