/* ============================================================
   Utilities Bunker — Mortgage Amortization Calculator v2.1
   File: /assets/css/modules/calculators/financialcalculators/mortgage-amortization.v2.1.css
   Purpose:
   - Tool-only layout and visual styling
   - Mortgage summary cards, bars, schedule tools, work formatting
   - Mobile-first, deterministic, no shared toolkit edits
   ============================================================ */

:root{
  --mortgage-radius: 16px;
  --mortgage-gap: 14px;
  --mortgage-soft: rgba(0,0,0,.06);
  --mortgage-principal: #f97316;
  --mortgage-interest: #ef4444;
  --mortgage-taxes: #0ea5e9;
  --mortgage-insurance: #22c55e;
  --mortgage-hoa: #8b5cf6;
  --mortgage-extra: #f59e0b;
}

.mortgage-head{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.mortgage-steps{
  margin:0;
  padding-left:18px;
}

.mortgage-steps li + li{
  margin-top:6px;
}

/* Hero layout */
.mortgage-hero{
  display:grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap:var(--mortgage-gap);
}

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

/* Summary panel */
.mortgage-panel{
  background:var(--ub-surface-2);
  border:1px solid var(--ub-border);
  border-radius:var(--mortgage-radius);
  padding:12px;
}

.mortgage-panel-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.mortgage-panel-title{
  font-size:clamp(13px, 1.2vw, 14px);
  font-weight:950;
  letter-spacing:.01em;
}

.mortgage-panel-sub{
  font-size:12px;
  color:var(--ub-muted);
  margin-top:2px;
}

.mortgage-view-switch{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.mortgage-view-switch .ub-chip{
  min-height:44px;
  padding:10px 12px;
}

/* KPI grid */
.mortgage-kpis{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

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

.mortgage-kpi{
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
}

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

.mortgage-kpi .v{
  margin-top:4px;
  font-family:var(--ub-mono);
  font-weight:950;
  font-size:clamp(14px, 1rem + .15vw, 18px);
  overflow-wrap:anywhere;
}

/* Composition bars */
.mortgage-bars{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}

.mortgage-bar-card{
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
  border-radius:14px;
  padding:10px;
}

.mortgage-bar-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  font-weight:900;
  color:var(--ub-muted);
  margin-bottom:8px;
}

.mortgage-bar{
  display:flex;
  width:100%;
  min-height:18px;
  overflow:hidden;
  border-radius:999px;
  background:var(--ub-surface-3);
  border:1px solid var(--ub-border);
}

.mortgage-bar-seg{
  min-width:0;
  transition:width .18s ease;
}

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

.mortgage-bar-seg--principal{ background:var(--mortgage-principal); }
.mortgage-bar-seg--interest{ background:var(--mortgage-interest); }
.mortgage-bar-seg--taxes{ background:var(--mortgage-taxes); }
.mortgage-bar-seg--insurance{ background:var(--mortgage-insurance); }
.mortgage-bar-seg--hoa{ background:var(--mortgage-hoa); }
.mortgage-bar-seg--extra{ background:var(--mortgage-extra); }

.mortgage-bar-legend{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:12px;
  color:var(--ub-muted);
}

.mortgage-bar-legend--wrap span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.mortgage-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
}

.mortgage-dot--principal{ background:var(--mortgage-principal); }
.mortgage-dot--interest{ background:var(--mortgage-interest); }
.mortgage-dot--taxes{ background:var(--mortgage-taxes); }
.mortgage-dot--insurance{ background:var(--mortgage-insurance); }
.mortgage-dot--hoa{ background:var(--mortgage-hoa); }
.mortgage-dot--extra{ background:var(--mortgage-extra); }

/* Insights */
.mortgage-insights{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:12px;
}

.mortgage-insight{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
  font-size:13px;
  line-height:1.5;
}

/* Form helpers */
.mortgage-form{
  margin-bottom:0;
}

.mortgage-split{
  display:block !important;
}

.mortgage-split > input,
.mortgage-split > select{
  display:block !important;
  width:100% !important;
}

.mortgage-split > select{
  margin-top:6px;
}

.mortgage-toggle-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}

.mortgage-toggle-row .ub-chip{
  display:flex;
  align-items:center;
  gap:8px;
}

.mortgage-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.mortgage-preset-row .ub-chip{
  min-height:44px;
  padding:10px 12px;
}

.mortgage-actions{
  margin-top:12px;
}

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

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

/* Results header */
.mortgage-results-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.mortgage-results-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.mortgage-inline-select{
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--ub-border);
  background:var(--ub-surface-1);
  color:var(--ub-text);
  font:inherit;
  min-width:120px;
}

.mortgage-inline-select:focus-visible{
  outline:3px solid var(--ub-focus);
  outline-offset:2px;
}

/* Table */
.mortgage-table-wrap{
  margin-top:12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}

.mortgage-table{
  min-width:760px;
}

.mortgage-table th,
.mortgage-table td{
  white-space:nowrap;
}

.mortgage-table td:last-child,
.mortgage-table th:last-child{
  text-align:right;
}

.mortgage-table td:nth-child(3),
.mortgage-table td:nth-child(4),
.mortgage-table td:nth-child(5),
.mortgage-table td:nth-child(6),
.mortgage-table th:nth-child(3),
.mortgage-table th:nth-child(4),
.mortgage-table th:nth-child(5),
.mortgage-table th:nth-child(6){
  text-align:right;
}

/* Totals */
.mortgage-total-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

@media (max-width: 680px){
  .mortgage-total-grid{
    grid-template-columns:1fr;
  }
}

.mortgage-total-item{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-surface-2);
}

.mortgage-total-item .k{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ub-muted);
}

.mortgage-total-item .v{
  margin-top:4px;
  font-family:var(--ub-mono);
  font-weight:950;
  font-size:clamp(14px, 1rem + .1vw, 17px);
  overflow-wrap:anywhere;
}

/* Formulas + FAQ */
.mortgage-formula-list{
  margin:0;
  padding-left:18px;
}

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

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

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

/* Collapsible polish */
.ub-collapsible summary{
  min-height:44px;
  display:flex;
  align-items:center;
}

.ub-collapsible summary:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ub-focus);
  border-radius:12px;
}

/* Rail button helper */
.ub-btn--block{
  width:100%;
}

/* Dark mode tuning */
html.ub-theme-dark .mortgage-bar-card,
html.ub-theme-dark .mortgage-insight{
  background:rgba(255,255,255,.03);
}

html.ub-theme-dark .mortgage-total-item{
  background:rgba(255,255,255,.03);
}

/* Small-screen refinements */
@media (max-width: 520px){
  .mortgage-head{
    align-items:stretch;
  }

  .mortgage-head .ub-btn{
    width:100%;
  }

  .mortgage-results-tools{
    width:100%;
  }

  .mortgage-inline-select{
    flex:1 1 100%;
    min-width:0;
  }

  .mortgage-view-switch{
    width:100%;
  }

  .mortgage-view-switch .ub-chip{
    flex:1 1 0;
  }
}