/* Demo-only layout ------------------------------------------------------- */
.demo {
  max-inline-size: 58rem;
  margin: 3rem auto;
  padding: 0 1rem 5rem;
  font:
    16px / 1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}

.demo-grid {
  display: grid;
  gap: 2rem;
}

.demo-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
}

.demo-card > :where(h2, p) {
  margin: 0;
}

.demo-note {
  color: #6c757d;
}

.demo-status {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #f1f3f5;
}

.demo-events {
  min-block-size: 7rem;
  max-block-size: 12rem;
  overflow: auto;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: #f8f9fa;
  font:
    0.875rem / 1.45 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  white-space: pre-wrap;
}

.demo-reset {
  justify-self: start;
}

.demo-badge {
  color: #b8860b;
}

.demo-card button,
.demo-card .demo-reset {
  justify-self: start;
  padding: 0.375rem 0.875rem;
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  background: white;
  cursor: pointer;
}