/* 33 — uzupełnianie danych uczestników: metryczka zgłoszenia i pasek postępu.
   Źródło: makieta journey.css l. 451–494, 760–770
   (bez .demo-states, .state-buttons i .prototype-note — elementy makietowe). */

.participants-page {
  max-width: 1020px;
}
.participant-meta {
  display: grid;
  grid-template-columns: 1.5fr 0.75fr 1fr;
  gap: 20px;
  padding: 24px;
  background: var(--ai-bg-alt);
  border: 1px solid var(--ai-line-strong);
  margin: 30px 0;
}
.participant-meta small {
  display: block;
  color: var(--ai-text-mute);
  font-size: 0.75rem;
  margin-bottom: 5px;
}
.participant-meta strong {
  font-size: 0.9375rem;
  color: var(--ai-heading);
}
.participant-status {
  margin: 30px 0;
  font-size: 0.8125rem;
}
.progress-track {
  height: 4px;
  background: var(--ai-line);
  margin-top: 12px;
}
.progress-track > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ai-akcent);
  transition: width 0.2s;
}
#participants-form > .button {
  margin-top: 25px;
}
@media (max-width: 760px) {
  .participant-meta {
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    gap: 18px;
  }
  .participant-meta > div:first-child {
    grid-column: 1/-1;
  }
  .participant-meta strong {
    font-size: 0.875rem;
  }
}