/* Golden Path activation card (#10761) — Mission section-card chrome. */

[data-activation-card] {
  display: block;
  margin-bottom: var(--ww-sp-4);
}

.ww-activation-head {
  margin-bottom: var(--ww-sp-3);
}

.ww-activation-title {
  font-family: var(--ww-font-display);
  font-weight: var(--ww-fw-bold);
  font-size: var(--ww-fs-h4);
  color: var(--ww-ink-900);
  letter-spacing: var(--ww-tracking-tight);
  margin: 0;
}

.ww-activation-tag,
.ww-activation-detail,
.ww-activation-progress-label,
.ww-activation-step-detail,
.ww-activation-complete {
  margin: var(--ww-sp-1) 0 0;
  color: var(--ww-ink-500);
  font-size: var(--ww-fs-small);
}

.ww-activation-progress-wrap {
  margin: var(--ww-sp-3) 0;
}

.ww-activation-progress {
  width: 100%;
  height: 0.5rem;
  accent-color: var(--ww-accent);
}

.ww-activation-cta-wrap {
  margin: var(--ww-sp-3) 0;
}

.ww-activation-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-accent);
  color: var(--ww-text-on-accent);
  text-decoration: none;
  font-weight: var(--ww-fw-semibold);
}

.ww-activation-cta:focus-visible,
.ww-activation-step-link:focus-visible,
.ww-activation-disclosure > summary:focus-visible {
  outline: 2px solid var(--ww-focus, var(--ww-accent));
  outline-offset: 2px;
}

.ww-activation-disclosure {
  margin-top: var(--ww-sp-3);
}

.ww-activation-disclosure > summary {
  cursor: pointer;
  font-size: var(--ww-fs-small);
  color: var(--ww-ink-700);
}

.ww-activation-steps {
  margin: var(--ww-sp-2) 0 0;
  padding-left: 1.25rem;
}

.ww-activation-step {
  margin: var(--ww-sp-2) 0;
}

.ww-activation-step-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--ww-ink-900);
  text-decoration: none;
}

.ww-activation-step-state {
  font-size: var(--ww-fs-micro);
  color: var(--ww-ink-500);
  text-transform: lowercase;
}

.ww-activation-score {
  font-size: var(--ww-fs-micro);
  color: var(--ww-ink-700);
}

.ww-activation-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  color: var(--ww-ink-700);
}

.ww-activation-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--ww-ink-200);
  border-top-color: var(--ww-accent);
  border-radius: 50%;
  animation: ww-activation-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ww-activation-spinner {
    animation: none;
  }
}

@keyframes ww-activation-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 390px) {
  [data-activation-card] {
    padding-inline: 0;
  }

  .ww-activation-cta {
    width: 100%;
  }
}