/*
 * The demo sign-in boxes on the login page of a live demo (the Kit's [data-demo-logins] at the top, HR's
 * [data-hr-demo-logins] below the form). The Kit's .alert is a flex row, so ".alert.stack" put the title and every
 * sign-in side by side and a phone's page became about 1,100 px wide. Here they are one under another, and a long
 * e-mail address wraps. Loaded only on that page (resources/views/hr/ship/demo-logins.php); Kit files stay untouched.
 */
.alert.stack[data-demo-logins],
.alert.stack[data-hr-demo-logins] {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

.alert.stack[data-demo-logins] > *,
.alert.stack[data-hr-demo-logins] > * {
  min-width: 0;
  max-width: 100%;
}

.alert.stack[data-demo-logins] .cluster,
.alert.stack[data-hr-demo-logins] .cluster {
  --cluster-gap: var(--space-2);
}

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