/*
 * The demo sign-in boxes on the login page of a live demo (the Kit's [data-demo-logins] at the top, POS's
 * [data-pos-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 760 px wide. Here they are one under another, and a long
 * e-mail address wraps. Loaded only on that page (resources/views/pos/ship/demo-logins.php); Kit files stay untouched.
 */
.alert.stack[data-demo-logins],
.alert.stack[data-pos-demo-logins] {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

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

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

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

.alert.stack[data-pos-demo-logins] [data-pos-demo-pins] .badge {
  display: inline-block;
  margin: var(--space-1) var(--space-1) 0 0;
  white-space: normal;
}

/* The Kit puts footer partials inside the footer grid: without this its one column grows to the box's widest line. */
.pos-demo-wrap {
  min-width: 0;
  max-width: 100%;
}

.alert.stack[data-pos-demo-logins] [data-pos-demo-pins] {
  overflow-wrap: anywhere;
}

/* "Sign in as Store manager (Demo Kirana only)" is longer than a phone's box: the button wraps instead. */
.alert.stack[data-demo-logins] .btn,
.alert.stack[data-pos-demo-logins] .btn {
  white-space: normal;
  max-width: 100%;
  height: auto;
  text-align: start;
}