/* Roman numeral converter - two fields with a swap glyph between them.
   Reuses base .field; colors come from theme tokens only. */

.roman-convert {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 16px;
}
.roman-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
.roman-field-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.roman-input { width: 100%; box-sizing: border-box; font-size: 20px; font-variant-numeric: tabular-nums; }
.roman-letters { letter-spacing: 2px; text-transform: uppercase; }

.roman-swap {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); padding-bottom: 12px; font-size: 18px;
}
@media (max-width: 460px) {
    .roman-swap { transform: rotate(90deg); padding: 0; }
}

.roman-error { margin: 4px 0 0; }