.reconciliation-heading {
  align-items: center;
  justify-content: flex-start;
}

.reconciliation-heading-status {
  min-width: 150px;
  order: -1;
}

.reconciliation-heading-copy {
  flex: 1;
}

.reconciliation-heading-action {
  margin-left: auto;
}

.status-badge,
.readiness-state {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.status-badge-queued,
.status-badge-running {
  border-color: #93c5fd;
  color: #1e3a8a;
  background: #dbeafe;
}

.status-badge-completed,
.readiness-state-ready {
  border-color: #86efac;
  color: #166534;
  background: #dcfce7;
}

.status-badge-completed-with-warnings {
  border-color: #fcd34d;
  color: #854d0e;
  background: #fef9c3;
}

.status-badge-failed,
.readiness-state-blocked {
  border-color: #fca5a5;
  color: #991b1b;
  background: #fee2e2;
}

.readiness-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.readiness-checklist {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.readiness-check {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 4px 16px;
  padding: 16px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
}

.readiness-check p {
  grid-column: 1 / -1;
  margin: 0;
}

.readiness-check-passed {
  border-color: #86efac;
  background: #f0fdf4;
}

.readiness-check-required {
  border-color: #fcd34d;
  background: #fffbeb;
}

.readiness-blocked-message {
  font-weight: 700;
}

@media (max-width: 720px) {
  .reconciliation-heading-status {
    min-width: 0;
  }

  .reconciliation-heading-action {
    margin-left: 0;
  }

  .readiness-heading {
    flex-direction: column;
  }

  .readiness-check {
    grid-template-columns: 1fr;
  }

  .readiness-check p {
    grid-column: auto;
  }
}