.playground-page {
  max-width: 72rem;
}

.playground-section-heading,
.playground-chips,
.playground-page .template-actions {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.playground-section-heading h2,
.playground-section-heading p,
.playground-answer-text,
.playground-failure p,
.playground-debug h3,
.playground-detail p,
.playground-detail ul,
.playground-test-meta p,
.playground-run-line {
  margin-block: 0;
}

.playground-test-answers {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.playground-test-answer {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.playground-test-answer__summary {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
}

.playground-test-answer__summary::-webkit-details-marker {
  display: none;
}

.playground-test-answer__summary:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.playground-test-answer__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.playground-test-answer__summary::after {
  content: "›";
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 1.25rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 150ms ease;
}

.playground-test-answer[open] > .playground-test-answer__summary::after {
  transform: rotate(90deg);
}

.playground-test-status {
  display: inline-flex;
  width: 1.25rem;
  flex: 0 0 1.25rem;
  justify-content: center;
  font-weight: 750;
}

.playground-test-status::before {
  line-height: 1;
}

.playground-test-status--passed::before {
  content: "✓";
  color: var(--ok);
}

.playground-test-status--failed::before {
  content: "✕";
  color: var(--danger);
}

.playground-test-status--error::before {
  content: "!";
  color: var(--danger);
}

.playground-test-status--queued::before,
.playground-test-status--running::before {
  content: "●";
  color: var(--warn);
}

.playground-test-status--untested::before {
  content: "○";
  color: var(--ink-muted);
}

.playground-test-title {
  min-width: 0;
  flex: 1 1 18rem;
  color: var(--ink);
  font-weight: 650;
}

.playground-test-title--passed {
  color: var(--ok);
}

.playground-test-title--failed,
.playground-test-title--error {
  color: var(--danger);
}

.playground-test-answer__body {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--line);
}

.playground-answer-text {
  max-width: 48rem;
  white-space: pre-wrap;
}

.playground-chips {
  margin-inline-start: auto;
  justify-content: flex-end;
  gap: var(--space-2);
}

.playground-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  color: var(--ink-muted);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 650;
}

.playground-chip--queued,
.playground-chip--running,
.playground-chip--stale,
.playground-stale {
  color: var(--warn);
  background: var(--accent-soft);
}

.playground-failure {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-inline-start: var(--space-2) solid var(--danger);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.playground-failure strong {
  color: var(--danger);
}

.playground-failure p {
  margin-top: var(--space-2);
  white-space: pre-wrap;
}

.playground-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}

.playground-detail {
  padding: var(--space-3);
  border-inline-start: var(--space-1) solid var(--line);
}

.playground-detail p,
.playground-detail ul {
  margin-top: var(--space-1);
  white-space: pre-wrap;
}

.playground-debug {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.playground-debug h3 {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.playground-test-meta {
  display: grid;
  gap: var(--space-2);
}

.playground-stale {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
}

.playground-run-line {
  margin-top: var(--space-3);
  font-weight: 650;
}

.playground-run-line--failed {
  color: var(--danger);
}

.playground-run-line--passed {
  color: var(--ok);
}

.playground-run-line--neutral {
  color: var(--ink-muted);
}

.playground-expectation {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}

.playground-expectation label {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

@media (max-width: 40rem) {
  .playground-section-heading {
    display: grid;
  }

  .playground-test-answer__summary {
    align-items: flex-start;
    padding-inline: var(--space-4);
  }

  .playground-test-title {
    flex-basis: calc(100% - 5rem);
  }

  .playground-chips {
    flex-basis: 100%;
    margin-inline-start: calc(1.25rem + var(--space-3));
    justify-content: flex-start;
  }

  .playground-test-answer__body {
    padding-inline: var(--space-4);
  }
}