/* Tool-specific: JSON ↔ YAML Converter
   Two-panel layout, mode + options row.
   Uses tokens from src/shared/css/base.css only — no new color literals. */

#text-convert #input,
#output-panel #output {
  font-family: var(--font-mono, monospace);
  min-height: 18rem;
}

/* Mode toggle — single horizontal row of radio buttons. */
.mode-toggle {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.mode-toggle legend {
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  padding: 0 var(--space-2);
}

.mode-toggle .option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.9375rem;
}

/* Options row — wraps on narrow viewports. */
.yaml-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.yaml-options__group {
  flex: 1 1 14rem;
  min-width: 12rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.yaml-options__group legend {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  padding: 0 var(--space-1);
}

.yaml-options__group .option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  cursor: pointer;
}

/* Status line under the output (validation message or success ack). */
.yaml-status {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  border-radius: var(--radius-2);
  background: var(--color-bg-elevated);
  color: var(--color-ink-muted);
  border: 1px solid var(--color-rule);
}

.yaml-status[data-state="error"] {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.yaml-status[data-state="success"] {
  background: var(--color-success-soft);
  color: var(--color-success);
  border-color: var(--color-success);
}