.cloud-auth {
  margin-bottom: 1rem;
}

.cloud-auth[hidden],
.cloud-login-form[hidden],
.cloud-session-actions[hidden],
.cloud-match-access[hidden] {
  display: none;
}

.cloud-match-access { margin-bottom: 1rem; }
.cloud-match-access output, .cloud-match-access small { display: block; overflow-wrap: anywhere; }
.cloud-match-access output { margin: 0.4rem 0; user-select: all; }
.cloud-resume-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin-top: 0.75rem; }
.cloud-resume-form label { display: grid; gap: 0.35rem; flex: 1 1 18rem; min-width: 0; }
.cloud-resume-form input { width: 100%; min-width: 0; min-height: 2.6rem; }

.cloud-auth > header,
.cloud-session-actions,
.cloud-login-form {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cloud-auth > header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.cloud-login-form label {
  display: grid;
  gap: 0.35rem;
  min-width: min(100%, 15rem);
  flex: 1 1 15rem;
}

.cloud-login-form input {
  min-height: 2.6rem;
}

.cloud-session-actions {
  justify-content: space-between;
  align-items: center;
}

#cloud-auth-status {
  opacity: 0.75;
  font-size: 0.9rem;
}

#cloud-user {
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .cloud-login-form button,
  .cloud-session-actions button {
    width: 100%;
  }
}