/* Tool-specific: XML Formatter */

#input-panel #input,
#output-panel #output {
  font-family: var(--font-mono, monospace);
  min-height: 12rem;
  overflow: auto;
}

/* Options row — fieldset per option group. Stacks on mobile, lays out
   horizontally on wide viewports via flex-wrap. */
.xml-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.xml-options__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2);
  padding: var(--space-2) var(--space-3);
  margin: 0;
}

.xml-options__group legend {
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  padding: 0 var(--space-2);
}

.xml-options__group label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.9375rem;
}

/* Error strip — hidden by default. Becomes visible when JS toggles
   data-error="true" on the strip element. Uses the shared --color-danger
   token only (no new hex/rgb/hsl values). */
.xml-error-strip {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-2);
  color: var(--color-danger);
}

.xml-error-strip[data-error="true"] {
  display: block;
}

.xml-error-strip__heading {
  margin: 0 0 var(--space-2) 0;
  font-weight: 600;
}

.xml-error-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-mono, monospace);
  font-size: 0.9375rem;
  color: var(--color-ink);
}

.xml-error-strip__label {
  color: var(--color-ink-muted);
}