@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.kanban-demo {
  width: 100%;
}

.kanban-demo-short {
  --kanban-column-max-height: 18rem;
}

.kanban-demo-narrow {
  --kanban-column-width: 16rem;
}

.kanban-demo-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
  flex:           1 1 auto;
}

.kanban-demo-title {
  overflow-wrap: break-word;
  min-width:     0;
  flex:          1 1 auto;
}

.kanban-demo-meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  color:       var(--ink-dim);
  font-size:   var(--text-ui-sm);
}

.kanban-demo-tag {
  display:       inline-flex;
  align-items:   center;
  height:        var(--tag-height);
  padding:       0 var(--tag-padding-x);
  border-radius: var(--radius-tag);
  background:    var(--bg-muted);
  color:         var(--ink-soft);
  font-size:     var(--tag-font-size);
  font-weight:   var(--tag-weight);
}

.kanban-demo-tag.is-bug {
  background: var(--danger-soft);
  color:      var(--danger-ink);
}

.kanban-demo-tag.is-feature {
  background: var(--accent-soft);
  color:      var(--accent-deep);
}

.kanban-demo-log {
  width:       100%;
  margin:      0;
  min-height:  2lh;
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  line-height: var(--leading-snug);
  color:       var(--ink-dim);
  white-space: pre-wrap;
}

/* Each log reserves the lines its longest text takes, so a move, a drag or a
   refusal changes the text and never the demo's height. The event log holds
   the last four events. */
.kanban-demo-log.is-events {
  min-height: 4lh;
}

/* On a phone a board summary wraps to three lines, and the summary that also
   names the card in flight to four. */
@media (max-width: 40rem) {
  .kanban-demo-log {
    min-height: 3lh;
  }

  .kanban-demo-log.is-long,
  .kanban-demo-log.is-events {
    min-height: 4lh;
  }
}

.kanban-demo-add {
  margin: 0 var(--surface-padding-sm) var(--surface-padding-sm);
}

.kanban-demo-overlay {
  display:         grid;
  place-items:     center;
  width:           100%;
  height:          100%;
  border:          var(--control-border-width) solid var(--accent);
  border-radius:   var(--radius-surface);
  background:      var(--accent-soft);
  color:           var(--ink);
  box-shadow:      var(--overlay-shadow);
  font-weight:     var(--weight-strong);
}

.kanban-demo-controls {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-3);
  font-size:   var(--text-ui-sm);
}

.kanban-demo-header {
  margin:      0;
  padding:     var(--surface-padding-sm) var(--surface-padding-sm) 0;
  color:       var(--ink-dim);
  font-size:   var(--text-ui-sm);
  font-weight: var(--weight-strong);
}