/* ============================================================
   Tool Styles — Credit Cards Payoff Calculator v2.1
   File: /assets/css/modules/calculators/financialcalculators/credit-cards-payoff.v2.1.css
   Purpose:
   - Tool-only layout + payoff table + work formatting
   - No changes to ub-toolkit.v2.1.css
   - Mobile-first, 44x44 touch targets, clamp typography
   ============================================================ */

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

/* Header alignment */
.ccp-head{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}
.ccp-h1{ margin:0; font-size: var(--ub-fs-5); }
.ccp-sub{ margin:6px 0 0; }

/* How-to list spacing */
.ccp-ol{ margin:0; padding-left:18px; }
.ccp-ol li{ margin: 6px 0; }

/* Main hero layout */
.ccp-hero{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--ccp-gap);
}
@media (max-width: 980px){
  .ccp-hero{ grid-template-columns: 1fr; }
}

/* Inputs panel polish */
.ccp-panel{
  padding: 14px;
}

/* Mode buttons row */
.ccp-modebar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 12px;
}
.ccp-modebar .ub-chip{
  min-height: var(--ub-hit);
}

/* Money input row */
.ccp-moneyrow{
  position: relative;
}
.ccp-money{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 950;
  color: var(--ub-muted);
  pointer-events:none;
}
.ccp-moneyrow input{
  padding-left: 26px;
}

/* Percent/month unit rows */
.ccp-unitrow{
  position: relative;
}
.ccp-unit{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 950;
  color: var(--ub-muted);
  pointer-events:none;
}
.ccp-unitrow input{
  padding-right: 44px;
}

/* Divider */
.ccp-hr{
  border:none;
  border-top:1px solid var(--ub-border);
  margin:14px 0;
}

/* Toggle chips */
.ccp-toggles{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.ccp-chipcheck{
  display:flex;
  gap:8px;
  align-items:center;
}
.ccp-actions{
  margin-top:12px;
}

/* Schedule header */
.ccp-sched-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ccp-sched-meta{
  display:flex;
  gap:8px;
  align-items:center;
  font-size: 12px;
}
.ccp-mono{
  font-family: var(--ub-mono);
  font-weight: 950;
}

/* Table wrap (horizontal scroll on small screens) */
.ccp-tablewrap{
  overflow:auto;
  border-radius: var(--ub-radius-2);
  -webkit-overflow-scrolling: touch;
}
.ccp-tablewrap:focus{
  outline:none;
  box-shadow: 0 0 0 4px var(--ub-focus);
  border-radius: 14px;
}

/* Make table slightly more compact without harming tap targets */
.ub-table th,
.ub-table td{
  padding: 10px 12px;
}

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

/* Right-side content typography tweaks */
.ccp-ul{
  margin: 0;
  padding-left: 18px;
}
.ccp-ul li{
  margin: 8px 0;
}
.ccp-h3{
  margin: 12px 0 6px;
  font-size: var(--ub-fs-2);
  font-weight: 950;
}
.ccp-p{
  margin: 0 0 10px;
  font-size: var(--ub-fs-1);
  color: var(--ub-text);
}

/* Ensure buttons look consistent in rail for this tool too */
.ub-btn--block{ width:100%; }

/* Small-screen fine-tuning */
@media (max-width: 520px){
  .ccp-modebar{ gap: 8px; }
  .ub-table th, .ub-table td{ padding: 10px 10px; }
}