/* Multi-Loan Payoff Calculator — page-specific styling on top of shared
   calculator components. Loan row styling reused/adapted from the debt
   payoff calculator's pattern. */



.loan-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.loan-row .loan-name-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.loan-row .loan-name-row input {
  border: none; background: none; font: inherit; font-weight: 700; color: var(--color-text); padding: 0; flex: 1; min-width: 0;
}
.loan-row .loan-name-row input:focus { outline: none; }
.loan-row .loan-remove {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-border);
  color: var(--color-text-subtle); display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: border-color 0.2s ease, color 0.2s ease;
}
.loan-row .loan-remove:hover { border-color: var(--color-error); color: var(--color-error); }
.loan-row .loan-remove svg { width: 10px; height: 10px; }
.loan-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.loan-fields .calc-input-group .affix { padding: 0 8px; font-size: var(--text-xs); }
.loan-fields .calc-input-group input { padding: 8px; font-size: var(--text-sm); }

.payoff-order-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.payoff-order-row:last-child { border-bottom: none; }
.payoff-order-row .rank {
  width: 22px; height: 22px; border-radius: 50%; background: var(--color-brand); color: var(--color-bg);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.payoff-order-row .name { font-weight: 600; color: var(--color-text); flex: 1; }
.payoff-order-row .when { color: var(--color-text-subtle); font-size: var(--text-xs); }