/* YAML ↔ JSON — a toolbar bar, then the input and output panes side by side
   as two cards (layout from styles/components/form.css + uploader.css), the
   same shape as csv-json. The input pane is also the file drop surface; the
   output card ends with the status caption and the Download / Copy tray.
   The text areas are styles/components/editor.css panes and the line-count
   pills styles/components/tag.css; only the error caption's preserved line
   breaks are the page's own. */

textarea.yj-textarea {
  min-height: 56vh;
}

/* js-yaml errors carry a multi-line line / caret diagram: keep its breaks
   and columns. */
.yj-status {
  font-family: var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  /* Give the output (the payoff) more height than the input on a phone so
     the conversion result isn't pushed below the fold. */
  #yj-input { min-height: 30vh; }
  #yj-output { min-height: 46vh; }
}