/* VAT / sales-tax calculator - direction toggle, inputs, then a net/tax/gross result row.
   Reuses base .field and .seg; colors come from theme tokens only. */

.vat-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.vat-mode { margin-bottom: 2px; }
.vat-field { display: flex; flex-direction: column; gap: 8px; }
.vat-field-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.vat-field > .field { max-width: 12rem; font-variant-numeric: tabular-nums; }

.vat-rate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vat-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.vat-chips button {
    font: inherit; font-size: 14px; padding: 6px 12px; cursor: pointer;
    border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--surface); color: var(--text);
    transition: border-color .15s, background .15s, color .15s;
}
.vat-chips button:hover { border-color: var(--accent); color: var(--accent-strong); }
.vat-chips button.is-active { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }

.vat-input-unit { display: inline-flex; align-items: center; gap: 6px; }
.vat-rate { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.vat-unit { font-size: 14px; color: var(--muted); }

.vat-results {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 8px;
}
.vat-res { display: flex; flex-direction: column; gap: 2px; min-width: 6rem; }
.vat-res-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.vat-res-value { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vat-res-accent { flex: 1; padding-left: 12px; border-left: 1px solid var(--border); }
.vat-res-accent .vat-res-value { color: var(--accent-strong); }

.vat-copy { align-self: flex-start; }