/* Slugify — an options card (separator and case as rows with trailing
   segments, then the Options tray), and the input and slug panes side by
   side as two cards (layout from styles/components/form.css). The text
   area is styles/components/editor.css and the length pill
   styles/components/tag.css; option controls use form.css's shared wrapping
   row. Only the slug readout is the page's own. */

textarea.sl-textarea {
  min-height: 160px;
}

/* The slug is the deliverable: accent mono, wraps anywhere, one click
   selects all of it. */
.sl-output {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--accent);
  word-break: break-all;
  white-space: pre-wrap;
  user-select: all;
}

.sl-readout {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}