/* /debt-to-income-ratio-calculator only: two-column payment fields and the
   ratio gauge with limit markers. Scoped under #dtiApp. */
#dtiApp .dti-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; }
#dtiApp .dti-gauge { position: relative; padding: 22px 0 6px; }
#dtiApp .dti-track { position: relative; height: 14px; border-radius: 999px; background: var(--bm-line-2); overflow: hidden; }
#dtiApp .dti-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--ic-ok); }
#dtiApp .dti-fill.is-warn { background: var(--ic-warn); }
#dtiApp .dti-fill.is-bad { background: var(--ic-bad); }
#dtiApp .dti-mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--bm-ink-2); }
#dtiApp .dti-mark span { position: absolute; top: 0; transform: translateX(-50%); font-size: .72rem; font-weight: 700; color: var(--bm-ink-2); white-space: nowrap; }
#dtiApp .dti-scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--bm-ink-3); margin-top: 4px; }
@media (forced-colors: active) { #dtiApp .dti-fill { background: Highlight; } #dtiApp .dti-track { border: 1px solid CanvasText; } }
#dtiApp .dti-gauge { padding-bottom: 22px; }
#dtiApp .dti-mark.is-low span { top: auto; bottom: 0; }
#dtiApp .dti-scale { margin-top: 2px; }