/*
 * hreflang-generator.css — per-tool styles.
 * Only defines classes not covered by tokens/components/utilities.
 * The row is a LIGHT group (not a nested card): a thin divider between rows,
 * comfortable vertical rhythm, controls that line up inline and wrap gracefully.
 */

/* One editable URL/language row. Grouped, divided — NOT a card. */
.hf-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--neutral-100);
}
.hf-row:first-child { padding-top: 0; }
.hf-row:last-child { border-bottom: 0; padding-bottom: 0; }

/* Inner flow wrapper (has utility classes in markup): let the row controls wrap. */
.hf-row > .flex { flex: 1 1 auto; min-width: 0; }

/* The URL spans the full row width; the lang/region/options wrap onto the next line. */
.hf-row .hf-url { width: 100%; }

/* Compact, inline sizing for the secondary controls so they sit on one line. */
.hf-row .hf-lang { flex: 0 0 auto; width: auto; min-width: 8.5rem; }
.hf-row .hf-lang-custom { flex: 0 0 auto; width: 5rem; text-transform: lowercase; }
.hf-row .hf-region { flex: 0 0 auto; width: 4.5rem; text-transform: uppercase; }

/* Region/custom codes are short codes — monospace reads them clearly. */
.hf-row .hf-lang-custom,
.hf-row .hf-region { font-family: var(--font-mono); }

/* x-default toggle sits inline; push the remove button to the far end. */
.hf-row .field-checkbox { flex: 0 0 auto; height: 40px; }
.hf-row .field-checkbox span { font-family: var(--font-mono); font-size: 13px; }
.hf-row .hf-remove { flex: 0 0 auto; margin-left: auto; color: var(--text-muted); }
.hf-row .hf-remove:hover { color: var(--error-600); background: var(--error-50); }

/* Generated tag output: monospace, wraps long URLs, never causes page scroll. */
#hf-code-html,
#hf-code-xml {
  font-family: var(--font-mono);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}