/* Demo 002 specific surfaces: records checklist rows and their status badges.
   Shared demo layout (disclosure, intro, card, pain, result, controls, details)
   lives in css/demo.css. */

.demo-checklist {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-checklist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(16, 38, 42, 0.1);
}

.demo-checklist li:first-child {
  border-top: none;
}

.demo-item-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

/* Status badge variants for checklist rows */
.demo-checklist .demo-state-badge[data-state="MISSING"] {
  border-color: rgba(16, 38, 42, 0.28);
  background: rgba(16, 38, 42, 0.05);
  color: var(--text-muted);
}

.demo-checklist .demo-state-badge[data-state="OUTSTANDING"] {
  border-color: rgba(198, 60, 60, 0.4);
  background: rgba(198, 60, 60, 0.08);
  color: #8a2c2c;
}

.demo-checklist .demo-state-badge[data-state="RECEIVED"] {
  border-color: #00795e;
  background: rgba(0, 233, 176, 0.12);
  color: #00674f;
}

/* Flags the email as having landed somewhere the practice isn't watching */
.demo-email-flag {
  display: inline-flex;
  padding: 0.15rem 0.6rem;
  border: 1px solid rgba(198, 60, 60, 0.28);
  border-radius: 999px;
  background: rgba(198, 60, 60, 0.08);
  color: #8a2c2c;
  font-size: 0.78rem;
  font-weight: 600;
}

/* The four-step "after Enarra" sequence: a numbered story, not a flat result */
.demo-sequence-heading {
  margin: 0;
  font-size: 1.05rem;
}

.demo-sequence {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: demo-step;
}

.demo-sequence-step {
  counter-increment: demo-step;
}

.demo-sequence-step .demo-card-label::before {
  content: counter(demo-step) ". ";
}

.demo-route-path {
  display: inline-flex;
  padding: 0.4rem 0.75rem;
  margin: 0 0 0.9rem;
  border-radius: 8px;
  background: rgba(16, 38, 42, 0.05);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Chase card mirrors the task-card treatment from demo.css */
.demo-chase-card {
  border-left: 4px solid #00795e;
}

.demo-chase-card:focus {
  outline: none;
}

.demo-chase-card:focus-visible {
  outline: 3px solid #00795e;
  outline-offset: 4px;
}

@media (max-width: 420px) {
  .demo-checklist li {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
}