/* CRM Software Pro 1.0.0: the login page of a live demo fits a phone (320 and 390 px, RULE 2).
   Loaded by resources/views/partials/crm-demo-login.php on a demo's /login only.
   - the Kit's demo box is an .alert (a flex row), so its sign-in rows (form.cluster) sat side by side and the card grew
     past a 390 px screen; they are one column now and the addresses wrap;
   - the card's grid track is the screen's width, the card min(440 px, that width);
   - the CRM's own demo roles are listed under the card, one per row. */

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

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

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

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

[data-demo-logins] form.cluster {
  flex-wrap: wrap;
  margin-top: 0;
}

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

.crm-demo-roles {
  max-width: 440px;
  margin: 0 auto var(--space-8, 2rem);
  font-size: var(--text-sm, .875rem);
}

.crm-demo-roles h2 {
  margin: 0 0 var(--space-2, .5rem);
  font-size: var(--text-base, 1rem);
}

.crm-demo-roles ul {
  display: grid;
  gap: var(--space-2, .5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-demo-roles form.cluster {
  flex-wrap: wrap;
  margin: 0;
}

.crm-demo-roles li,
.crm-demo-roles .small,
.crm-demo-roles code {
  min-width: 0;
  overflow-wrap: anywhere;
}