/* Read-only demo additions layered over app.css. */

.demo-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(31, 111, 120, 0.35);
  background: rgba(31, 111, 120, 0.08);
  color: var(--accent, #1f6f78);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Locked stages: visible so the workflow shape reads, blurred so the demo
   makes no promise about their contents. */
.step-button.locked {
  cursor: default;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
}

.step-button.locked .step-blur-group {
  filter: blur(4px);
  opacity: 0.65;
  user-select: none;
  pointer-events: none;
}

.step-button.locked .step-index {
  color: var(--muted, #86868b);
}

.step-button.locked:hover {
  border-color: var(--line, #e2e2e6);
  box-shadow: none;
}

.step-lock {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.step-lock::before {
  content: "🔒";
  margin-right: 5px;
  font-size: 9px;
}

@media (max-width: 900px) {
  .step-lock {
    right: 6px;
    padding: 2px 6px;
  }
}