.guest-result {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm);
  overflow-wrap: anywhere;
}

.guest-result[hidden] {
  display: none;
}

.guest-result__row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.guest-result a {
  color: var(--color-accent);
  font-weight: 700;
}

.guest-progress {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm);
}

.guest-progress[hidden] {
  display: none;
}

.guest-progress__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.guest-progress__heading {
  margin: 0;
  color: var(--color-text);
  font-weight: 700;
}

.guest-progress__spinner {
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.15rem solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: guest-progress-spin 0.8s linear infinite;
}

.guest-progress__spinner[hidden] {
  display: none;
}

.guest-progress__track {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
}

.guest-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width 200ms ease;
}

.guest-progress__bar[data-indeterminate="true"] {
  width: 30%;
  max-width: 30%;
  transition: none;
  animation: guest-progress-indeterminate 1.4s ease-in-out infinite;
}

.guest-progress__steps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: 1.25rem;
}

.guest-progress__steps li.is-done {
  color: var(--color-text);
}

.guest-progress__steps li.is-current {
  color: var(--color-accent);
  font-weight: 700;
}

.guest-progress__detail {
  margin: 0;
  overflow-wrap: anywhere;
}

@keyframes guest-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes guest-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(233%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .guest-progress__spinner,
  .guest-progress__bar[data-indeterminate="true"] {
    animation: none;
  }

  .guest-progress__bar[data-indeterminate="true"] {
    width: 100%;
    max-width: 100%;
    transform: none;
  }
}