/* Guide editor: readable preview and playground (docs/leitfaden.md, "Editor: preview and
   playground") — the guide fieldset of the template form (_form.html.erb) and its preview
   partial (_guide_preview.html.erb, guide_editor_controller.js). Reuses the backend's existing
   tokens (application.css), .card/.badge/.field-hint/.empty-state (dashboard.css) and the aspect
   list already used by the interview show page's guide partial (dashboard.css, .guide-aspects,
   .guide-aspect, .harness-coverage__quote) and the "thinking" spinner from the Sprechansicht
   (participation.css, .participation-spinner) — only what those do not already cover lives here. */

.guide-editor__preview-section {
  margin-top: var(--space-4);
}

.guide-editor__preview-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.guide-editor__preview-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.guide-editor__stale {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--danger);
  border-radius: var(--radius-s);
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 650;
  background: var(--surface);
}

.guide-editor__stale[hidden] {
  display: none;
}

.guide-editor__preview {
  display: grid;
  gap: var(--space-4);
}

.guide-preview__errors ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--danger);
  line-height: 1.6;
}

.guide-preview__errors-heading {
  margin: 0;
  color: var(--danger);
  font-weight: 650;
}

.guide-preview__meta p {
  margin: 0 0 var(--space-1);
}

.guide-preview__block {
  padding: var(--space-5);
}

.guide-preview__block h3 {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
}

.guide-preview__goal {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
}

.guide-preview__transition {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  font-style: italic;
}

.guide-preview__questions {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding-left: var(--space-5);
}

.guide-preview__question-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.guide-preview__label {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-preview__phrasings,
.guide-preview__aspects {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
  line-height: 1.55;
}

.guide-editor__playground {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}

.guide-editor__answer {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  font: inherit;
  background: var(--surface);
  resize: vertical;
}

.guide-editor__result {
  margin-top: var(--space-2);
  font-size: 0.85rem;
}

.guide-editor__result:empty {
  display: none;
}

.guide-editor__error {
  margin: 0;
  color: var(--danger);
  font-weight: 650;
}

@media (max-width: 48rem) {
  .guide-preview__questions {
    padding-left: var(--space-4);
  }
}

/* The shared spinner only rotates as a box (inside flex containers elsewhere); here it sits in a
   plain block, so it needs its own display. */
.guide-editor__result .participation-spinner {
  display: inline-block;
  vertical-align: middle;
}