/* Tool-specific: JSON ↔ CSV Converter
   Split-panel layout, options row, mode-aware fieldset visibility.
   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. */
.csv-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.csv-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);
}

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

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

/* Mode-aware visibility: each fieldset declares the modes it applies to via
   data-only-mode. The parent <form> carries data-mode set by main.js when the
   radio toggle changes. */
.csv-options__group[data-only-mode="json-to-csv"] { display: none; }
.csv-options__group[data-only-mode="csv-to-json"] { display: none; }

form[data-mode="json-to-csv"] .csv-options__group[data-only-mode="json-to-csv"] {
  display: flex;
}
form[data-mode="csv-to-json"] .csv-options__group[data-only-mode="csv-to-json"] {
  display: flex;
}

/* Delimiter "auto" only makes sense for CSV-to-JSON; hide it in the other mode. */
form[data-mode="json-to-csv"] .csv-options__opt[data-modes="csv-to-json"] {
  display: none;
}

/* Task 0212: inline cross-link to the reverse-direction tool (csv-to-json). */
.cross-link {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.9rem;
}
.cross-link a {
  color: var(--color-signal);
  text-decoration: none;
}
.cross-link a:hover {
  text-decoration: underline;
}

/* Status line under the output (validation message or success ack). */
.csv-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);
}

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

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