/* ============================================================
   Tool Styles — Debt-to-Income (DTI) Ratio Calculator v2.1
   File: /assets/css/modules/calculators/financialcalculators/debt-to-income-ratio-calculator.v2.1.css
   Purpose:
   - Tool-only layout polish + work formatting + small utilities
   - No changes to ub-toolkit.v2.1.css required
   - Mobile-first, 44x44 touch targets, clamp typography
   ============================================================ */

/* Tool-scoped tokens */
:root{
  --dti-radius: 16px;
  --dti-gap: 14px;
  --dti-soft: rgba(0,0,0,.06);
}

/* Header row (keeps the Ohm’s Law “title left / theme right” vibe) */
.ub-headrow{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.ub-title-tight{
  margin:0;
  font-size:var(--ub-fs-5);
}

.ub-sub-tight{
  margin:6px 0 0;
}

/* Form card actions row */
.dti-actions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Chip alignment helper */
.dti-chip{
  min-height:44px;
}

/* Work box formatting */
.ub-work{
  font-family: var(--ub-mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Tight, readable lists for How-to + Reference */
.ub-ol{
  margin:0;
  padding-left:18px;
}
.ub-ul{
  margin:0;
  padding-left:18px;
}

/* FAQ typography (tool-focused, not bloggy) */
.ub-q{
  margin:12px 0 6px;
  font-size: clamp(14px, 0.9rem + 0.15vw, 16px);
  font-weight: 950;
}
.ub-a{
  margin:0 0 10px;
  color: var(--ub-text);
}

/* Mini output grid tweaks */
.dti-mini .ub-v{
  font-size: var(--ub-fs-3);
}

/* Make sure rail buttons always full width (tool-only helper) */
.ub-btn--block{ width: 100%; }

/* Small screens: reduce title wrap pressure */
@media (max-width: 520px){
  .ub-title-tight{ font-size: clamp(20px, 5.6vw, 26px); }
}

/* Dark-mode subtle soft token */
html.ub-theme-dark:root{
  --dti-soft: rgba(255,255,255,.06);
}