/* ============================================================
   Tool Styles — Debt Payoff Calculator v2.1
   File: /assets/css/modules/calculators/financialcalculators/debt-payoff-calculator.v2.1.css
   Purpose:
   - Tool-only layout polish for debts table + results + work output
   - No changes to ub-toolkit.v2.1.css required
   - Mobile-first, 44x44 touch targets, clamp typography
   ============================================================ */

/* Tool-scoped tokens */
:root{
  --dpc-radius: 16px;
  --dpc-gap: 14px;
}

/* Table wrap helper */
.ub-table-wrap{
  border-radius: var(--dpc-radius);
}

/* Make table inputs a little tighter inside cells without breaking 44px */
#debtTable .ub-field input{
  min-height: var(--ub-hit);
  padding: 10px 12px;
}

/* Compact remove button (still 44px tall) */
#debtTable .ub-mini-remove{
  padding: 10px 14px;
}

/* Improve readability on dense tables */
#debtTable th,
#debtTable td{
  vertical-align: top;
}

/* Sticky header in wide scroll areas (nice-to-have; safe fallback) */
@supports (position: sticky){
  #debtTable thead th{
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* Subtle header contrast depending on theme */
html.ub-theme-light #debtTable thead th{
  background: var(--ub-surface-2);
}
html.ub-theme-dark #debtTable thead th{
  background: rgba(255,255,255,.04);
}

/* Make summary table a bit more compact */
#summaryTable td, #summaryTable th{
  padding: 10px 12px;
}

/* “Live Rates” output box spacing */
#liveRateValue{
  font-variant-numeric: tabular-nums;
}

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

/* Buttons in rail should feel consistent */
.ub-rail-actions .ub-btn{
  width: 100%;
  margin-bottom: 10px;
}

/* Slightly nicer chip checkbox alignment (tool-only) */
.ub-chip input[type="checkbox"]{
  margin: 0;
}

/* Mobile polish */
@media (max-width: 520px){
  /* Slightly reduce padding in very small screens */
  #debtTable .ub-field input{
    padding: 10px 10px;
  }
}

/* Reduce motion support (tool-only, extra safe) */
@media (prefers-reduced-motion: reduce){
  #debtTable thead th{
    scroll-margin-top: 0;
  }
}