/* ============================================================
   Utilities Bunker — Mortgage Payoff Calculator (v2.1)
   File: /assets/css/modules/calculators/financialcalculators/mortgage-payoff-calculator.v2.1.css
   Purpose:
   - Tool-only layout and payoff dashboard styling
   - Keeps all custom visuals out of ub-toolkit.v2.1.css
   - Mobile-first, responsive, dark-mode friendly
   ============================================================ */

:root{
  --mp-radius: 16px;
  --mp-gap: 14px;
  --mp-soft: rgba(0,0,0,.06);
  --mp-soft-2: rgba(0,0,0,.10);
  --mp-accent: rgba(249,58,19,.14);
  --mp-accent-strong: rgba(249,58,19,.22);
  --mp-grid-min: 120px;
}

/* Main header strip */
.mp-headerbar{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

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

/* How to use */
.mp-howto{
  margin:0;
  padding-left:18px;
}

.mp-howto li + li{
  margin-top:6px;
}

/* Two-column hero area */
.mp-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--mp-gap);
  align-items:start;
}

@media (max-width: 980px){
  .mp-hero{
    grid-template-columns:1fr;
  }
}

/* Left payoff visual card */
.mp-visual-card{
  background:linear-gradient(180deg, var(--ub-surface-2), var(--ub-card-bg));
  border:1px solid var(--ub-border);
  border-radius:var(--mp-radius);
  padding:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.mp-visual-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.mp-eyebrow{
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ub-muted);
}

.mp-visual-title{
  margin-top:4px;
  font-size:clamp(18px, 1.2rem + .4vw, 22px);
  font-weight:950;
  letter-spacing:-.02em;
}

.mp-visual-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--ub-muted);
}

/* KPI cards */
.mp-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.mp-kpi{
  min-width:118px;
  padding:9px 10px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.mp-kpi .k{
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ub-muted);
}

.mp-kpi .v{
  margin-top:3px;
  font-family:var(--ub-mono);
  font-weight:950;
  font-size:14px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

/* Comparison progress */
.mp-progress-wrap{
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
}

.mp-progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:900;
  color:var(--ub-muted);
}

.mp-progress{
  position:relative;
  width:100%;
  height:14px;
  margin-top:8px;
  border-radius:999px;
  border:1px solid var(--ub-border);
  background:var(--ub-surface-3);
  overflow:hidden;
}

.mp-progress-bar{
  height:100%;
  border-radius:999px;
  min-width:0;
  transition:width .22s ease;
}

.mp-progress-bar--standard{
  background:linear-gradient(90deg, rgba(107,114,128,.85), rgba(107,114,128,.58));
}

.mp-progress-bar--accelerated{
  background:linear-gradient(90deg, var(--ub-btn-grad-a), var(--ub-btn-grad-b));
  box-shadow:0 0 14px rgba(249,58,19,.20);
}

@media (prefers-reduced-motion: reduce){
  .mp-progress-bar{
    transition:none;
  }
}

/* Scenario buttons */
.mp-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.mp-badges .ub-chip[aria-pressed="true"]{
  border-color:rgba(249,58,19,.55);
  box-shadow:0 0 0 4px rgba(249,58,19,.12);
}

/* Summary mini tiles */
.mp-comparison-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

@media (max-width: 560px){
  .mp-comparison-grid{
    grid-template-columns:1fr;
  }
}

.mp-mini{
  min-height:82px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
}

.mp-mini .k{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ub-muted);
}

.mp-mini .v{
  margin-top:6px;
  font-family:var(--ub-mono);
  font-weight:950;
  font-size:clamp(14px, .95rem + .25vw, 16px);
  line-height:1.25;
  overflow-wrap:anywhere;
}

/* Presets */
.mp-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.mp-preset-row .ub-chip{
  min-height:44px;
}

/* Form card */
.mp-form-card{
  margin-bottom:0;
}

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

/* Switch rows */
.mp-switches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Slider area */
.mp-sliders{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--ub-border);
  border-radius:14px;
  background:var(--ub-surface-2);
}

.mp-slider-label{
  min-width:150px;
  font-weight:950;
}

.mp-slider-out{
  min-width:92px;
  text-align:right;
  font-family:var(--ub-mono);
  font-weight:950;
}

/* Actions */
.mp-actions{
  margin-top:12px;
}

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

.mp-work-note{
  margin-top:10px;
  color:var(--ub-muted);
  font-size:12px;
}

/* Formula list */
.mp-formula-list{
  margin:0;
  padding-left:18px;
}

.mp-formula-list li + li{
  margin-top:6px;
}

.mp-reference-note{
  margin-top:10px;
  font-size:12px;
  color:var(--ub-muted);
}

/* FAQ */
.mp-faq-q{
  margin:12px 0 6px;
  font-size:var(--ub-fs-2);
}

.mp-faq-a{
  margin:0 0 10px;
}

/* Improve output readability */
#outNote{
  overflow-wrap:anywhere;
}

/* Fine tune shared field stacks */
.ub-field .ub-inputrow{
  display:block !important;
}

.ub-field .ub-inputrow > input,
.ub-field .ub-inputrow > select{
  display:block !important;
  width:100% !important;
}

.ub-field .ub-inputrow > select{
  margin-top:6px;
}

/* Right rail polish */
.ub-rail-actions .ub-btn--block + .ub-btn--block{
  margin-top:10px;
}

/* Card focus polish */
.mp-badges .ub-chip:focus,
.mp-preset-row .ub-chip:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ub-focus);
}

/* Tool-specific button presence */
.ub-btn--block{
  width:100%;
}

/* Dark mode adjustments */
html.ub-theme-dark .mp-visual-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

html.ub-theme-dark .mp-kpi,
html.ub-theme-dark .mp-mini,
html.ub-theme-dark .mp-progress-wrap{
  background:rgba(255,255,255,.03);
}

html.ub-theme-dark .mp-progress-bar--standard{
  background:linear-gradient(90deg, rgba(156,163,175,.75), rgba(156,163,175,.42));
}

html.ub-theme-dark .mp-progress-bar--accelerated{
  box-shadow:0 0 16px rgba(249,58,19,.24);
}

/* Mobile refinements */
@media (max-width: 640px){
  .mp-kpis{
    justify-content:flex-start;
  }

  .mp-kpi{
    min-width:calc(50% - 4px);
    flex:1 1 calc(50% - 4px);
  }

  .mp-slider-label{
    min-width:100%;
  }

  .mp-slider-out{
    min-width:100%;
    text-align:left;
  }
}

@media (max-width: 420px){
  .mp-kpi{
    min-width:100%;
    flex:1 1 100%;
  }

  .mp-progress-head{
    flex-direction:column;
    align-items:flex-start;
  }
}