/* Online Exam Web Portal 1.0.0: the login page of a live demo fits a phone (320 / 390 px, AI-HANDOFF RULE 2).
   Linked by resources/views/partials/exam-demo-logins.php only, so it is on a demo's /login and nowhere else.
   - the sign-in card: the Kit's grid track takes the card's 440 px as its smallest size, so the card would stick out
     of a 390 px screen; the track is the screen's width and the card at most that wide;
   - the demo sign-in boxes (the Kit's in the card, the institute's under the page): .alert is a row, so every sign-in
     would sit side by side; they are one column, and long e-mail addresses wrap. */

.auth-wrap {
  grid-template-columns: minmax(0, 1fr);
}

.auth-wrap > .auth-card {
  max-width: 100%;
}

[data-demo-logins],
[data-exam-demo-logins] {
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

[data-demo-logins] > *,
[data-exam-demo-logins] > * {
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
}

[data-demo-logins] .small,
[data-exam-demo-logins] .small {
  overflow-wrap: anywhere;
}

.exam-demo-logins {
  grid-column: 1 / -1;
  min-width: 0;
  margin-block: var(--space-3, 0.75rem);
}

.exam-demo-login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  min-width: 0;
}

/* the Kit's info alert has no rule of its own (KIT-REQUESTS KR-24) */
.alert-info {
  background: var(--info-soft, var(--surface-2));
}