/* css/sandbox.css — shared sandbox chrome (Phase 0 spine + example sandbox) */

.step-sandbox { margin-top: 1rem; }

/* Task goal: one labeled line, not a callout box. The accent label is the only
   signal it needs — no side-stripe, no container, no background tint. */
.sandbox-task-goal { margin-bottom: 0.75rem; line-height: 1.5; }
.sandbox-task-label { color: var(--color-accent-text); font-weight: 600; }

.sandbox-host { margin-block: 0.75rem; }

.sandbox {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  background: var(--color-surface);
}

.sandbox-example-log {
  min-height: 4rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.sandbox-example-line { padding: 0.1rem 0; }

.sandbox-example-input {
  width: 100%;
  font-family: var(--font-mono);
  padding: 0.4rem 0.6rem;
  background: var(--terminal-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.sandbox-task-feedback { margin-top: 0.5rem; font-size: 0.9rem; min-height: 1.25rem; }
.sandbox-task-feedback[data-state="ok"]    { color: var(--color-success); }
.sandbox-task-feedback[data-state="retry"] { color: var(--color-warning); }

@media (prefers-reduced-motion: reduce) {
  .sandbox, .sandbox-host { transition: none !important; }
}