/* ═══════════════════════════════════════════════════════════════════
   Components: Stepper (Step-by-step wizard)
   ═══════════════════════════════════════════════════════════════════ */

.analyze-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--fluid-grid-gap);
  margin: 0 0 18px;
}

.step-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid rgba(25, 38, 43, 0.14);
  border-radius: var(--radius-full);
  background: rgba(255, 250, 241, 0.72);
  color: var(--color-ink-soft);
  cursor: pointer;
  font-weight: var(--weight-extrabold);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.step-button span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(40, 72, 66, 0.1);
  color: var(--color-accent-600);
  font-family: var(--font-mono);
}

.step-button:hover,
.step-button:focus-visible {
  transform: translateY(-1px);
  outline: 3px solid rgba(168, 78, 47, 0.16);
  outline-offset: 2px;
}

.step-button.active {
  background: var(--color-paper-light);
  border-color: rgba(168, 78, 47, 0.32);
  color: var(--color-ink);
  box-shadow: 0 14px 32px rgba(36, 31, 23, 0.08);
}

.step-button.active span {
  background: linear-gradient(135deg, var(--color-brand-700), var(--color-brand-800));
  color: #fff9f4;
}

/* Step panels */
.step-panel { display: none; }

.step-panel.active {
  display: block;
  animation: rise 0.28s ease both;
}

.step-panel h2 {
  margin: 12px 0 8px;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.22;
}

/* Responsive */
@media (max-width: 940px) {
  .analyze-stepper { grid-template-columns: 1fr; }
  .step-button { justify-content: flex-start; padding: 0 18px; }
}