/* 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;
}

/* Companion to .demo-pill, matching its geometry so the two read as one pair.
   The pill is a status label; this is the only actionable control in the
   topbar, so it takes the solid fill to keep that distinction obvious. */
.demo-link {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent, #1f6f78);
  background: var(--accent, #1f6f78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
}

.demo-link:hover {
  background: #17565d;
  border-color: #17565d;
}

.demo-link:focus-visible {
  outline: 2px solid var(--accent, #1f6f78);
  outline-offset: 2px;
}

/* Locked stages: named, described, and not clickable.
   These were blurred, on the reasoning that the demo should make no promise
   about their contents. But blurring the *name* withholds the wrong thing — a
   visitor learnt only that something was hidden, not that the workspace has an
   intake, a causal canvas and a report. Those are capabilities, and stating
   them promises nothing about results. The lock badge and the dead click carry
   the "not in this demo" message on their own. */
.step-button.locked {
  cursor: default;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
}

.step-button.locked .step-blur-group {
  opacity: 0.62;
  user-select: none;
  pointer-events: none;
  /* Room for the badge, which is absolutely positioned over the right edge. */
  padding-right: 92px;
}

.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;
  }
}