/* Tour interactive mockups — no scroll entrance animations */

.tour-hint {
  font-size: 0.75rem;
  color: var(--muted, #64748b);
  margin-top: 10px;
  text-align: center;
}

.tour-toast {
  display: none;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
}

.tour-toast.is-visible {
  display: block;
}

.tour-toast.success {
  background: rgba(22, 163, 74, 0.1);
  color: var(--green, #16a34a);
}

.tour-toast.info {
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue, #2563eb);
}

.tour-toast.warn {
  background: rgba(217, 119, 6, 0.1);
  color: var(--amber, #d97706);
}

/* ── Shared interactive affordances ─────── */
.app-window [type="button"],
.app-window .palette-item,
.app-window .c-field,
.app-window .browse-card,
.app-window .scrubber-track,
.app-window .tester-claim-row {
  cursor: pointer;
}

.app-window button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Post: slot stepper */
.slot-stepper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.slot-step {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1.5px solid var(--border, #e2e6ed);
  background: var(--white, #fff);
  font-size: 1rem;
  line-height: 1;
  color: var(--navy, #0f1724);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-step:hover {
  border-color: var(--blue, #2563eb);
  color: var(--blue, #2563eb);
}

.post-publish-btn.is-done {
  background: var(--green, #16a34a);
}

/* Builder */
.palette-item {
  transition: background 0.15s, border-color 0.15s;
}

.palette-item.selected {
  background: rgba(14, 165, 160, 0.1);
  border-color: rgba(14, 165, 160, 0.35);
}

.palette-item:active {
  transform: scale(0.98);
}

.c-field {
  transition: border-color 0.15s, box-shadow 0.15s;
}

.c-field.is-selected {
  border-color: var(--blue, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.c-field.dropping {
  border: 2px dashed var(--teal, #0ea5a0);
  background: rgba(14, 165, 160, 0.04);
}

.c-field-remove {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--border, #e2e6ed);
  background: var(--white, #fff);
  color: var(--muted, #64748b);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.c-drop-zone.is-active {
  border-color: var(--teal, #0ea5a0);
  color: var(--teal, #0ea5a0);
  background: rgba(14, 165, 160, 0.04);
}

/* Claims */
.progress-fill {
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.tour-sim-btn {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  border-radius: 8px;
  border: 1.5px dashed var(--border, #e2e6ed);
  background: var(--white, #fff);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  cursor: pointer;
}

.tour-sim-btn:hover {
  border-color: var(--green, #16a34a);
  color: var(--green, #16a34a);
}

.tester-claim-row.is-new {
  animation: claimPop 0.35s ease;
}

@keyframes claimPop {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Review */
.play-btn {
  cursor: pointer;
  padding: 0;
}

.recording-player.is-playing .play-btn svg {
  display: none;
}

.recording-player.is-playing .play-btn::after {
  content: '';
  display: block;
  width: 12px;
  height: 14px;
  border-left: 4px solid white;
  border-right: 4px solid white;
}

.scrubber-fill {
  transition: width 0.12s linear;
}

.scrubber-track {
  cursor: pointer;
}

.btn-approve.is-done {
  background: #15803d;
}

.btn-reject.is-done {
  border-color: #fca5a5;
  color: #dc2626;
}

/* Browse */
.browse-card {
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.browse-card.is-selected {
  border-color: var(--teal, #0ea5a0);
  box-shadow: 0 0 0 3px rgba(14, 165, 160, 0.12);
}

.browse-claim-btn.is-claimed {
  background: var(--navy, #0f1724);
}

/* Recording */
.rec-dot.is-paused {
  background: #fbbf24;
  animation: none;
}

.rec-dot.is-recording {
  animation: recBlink 1.2s ease-in-out infinite;
}

@keyframes recBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.rec-action-btn {
  font-family: var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
}

.rec-action-btn.is-primary {
  background: var(--teal, #0ea5a0) !important;
}

/* Submit */
.submit-answer-v.is-editable {
  cursor: text;
}

.submit-answer-v.is-editable:focus {
  outline: none;
  border-color: var(--teal, #0ea5a0);
  color: var(--navy, #0f1724);
}

.submit-btn.is-sent {
  background: var(--green, #16a34a);
}

/* Earnings */
.payout-btn.is-sent {
  background: #15803d;
}

.earnings-row.is-new {
  animation: claimPop 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tester-claim-row.is-new,
  .earnings-row.is-new {
    animation: none;
  }

  .progress-fill,
  .scrubber-fill {
    transition: none;
  }
}