/* ============================================================
   Tool Styles — FHA Loan Calculator v2.1
   File: /assets/css/modules/calculators/financialcalculators/fha-loan-calculator.v2.1.css
   Purpose:
   - Tool-only layout + payment snapshot + breakdown bar + small UX polish
   - No changes to ub-toolkit.v2.1.css required
   - Mobile-first, 44x44 targets, clamp typography
   ============================================================ */

/* Tool-scoped tokens */
:root{
  --fha-radius: 16px;
  --fha-gap: 14px;
  --fha-soft: rgba(0,0,0,.06);
}

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

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

/* Tool hero layout */
.fha-hero{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--fha-gap);
}
@media (max-width: 980px){
  .fha-hero{ grid-template-columns: 1fr; }
}

/* Snapshot panel */
.fha-lab{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--fha-radius);
  padding: 12px;
}
.fha-lab-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.fha-lab-title{
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 950;
  letter-spacing: .01em;
}
.fha-lab-sub{
  font-size: 12px;
  color: var(--ub-muted);
  margin-top: 2px;
}

/* KPI tiles */
.fha-kpis{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:flex-end;
}
.fha-kpi{
  min-width: 128px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
}
.fha-kpi .k{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ub-muted);
}
.fha-kpi .v{
  font-family: var(--ub-mono);
  font-weight: 950;
  font-size: 14px;
  margin-top: 2px;
}

/* Breakdown bar */
.fha-bar{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
  padding: 10px;
}
.fha-bar-row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}
.fha-bar-label{
  font-size: 12px;
  font-weight: 950;
  color: var(--ub-muted);
  min-width: 80px;
}
.fha-bar-track{
  flex: 1 1 260px;
  height: 18px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid var(--ub-border);
  background: var(--ub-surface-3);
  display:flex;
}
.fha-bar-track .seg{
  height: 100%;
  width: 0%;
  transition: width 180ms ease;
}

/* Segment colors (no new palette; reuse UB accents / neutrals) */
#segPI{ background: rgba(249,58,19,.70); }
#segMIP{ background: rgba(249,58,19,.35); }
#segTax{ background: rgba(0,112,187,.35); }
#segIns{ background: rgba(0,0,0,.12); }
#segHOA{ background: rgba(0,0,0,.20); }

html.ub-theme-dark #segTax{ background: rgba(96,165,250,.35); }
html.ub-theme-dark #segIns{ background: rgba(255,255,255,.10); }
html.ub-theme-dark #segHOA{ background: rgba(255,255,255,.16); }

/* Legend */
.fha-legend{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.fha-legend .tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--ub-border);
  background: var(--ub-surface-2);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  min-height: 44px;
}
.fha-legend .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
}
.fha-legend .dot[data-dot="pi"]{ background: rgba(249,58,19,.85); }
.fha-legend .dot[data-dot="mip"]{ background: rgba(249,58,19,.40); }
.fha-legend .dot[data-dot="tax"]{ background: rgba(0,112,187,.45); }
.fha-legend .dot[data-dot="ins"]{ background: rgba(0,0,0,.20); }
.fha-legend .dot[data-dot="hoa"]{ background: rgba(0,0,0,.30); }
html.ub-theme-dark .fha-legend .dot[data-dot="tax"]{ background: rgba(96,165,250,.45); }
html.ub-theme-dark .fha-legend .dot[data-dot="ins"]{ background: rgba(255,255,255,.18); }
html.ub-theme-dark .fha-legend .dot[data-dot="hoa"]{ background: rgba(255,255,255,.26); }

/* Presets row */
.fha-presets{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}
.fha-presets .ub-chip{
  min-height: 44px;
  padding: 10px 12px;
}

/* Inputs: percent suffix */
.fha-suffix{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: var(--ub-hit);
  padding: 0 12px;
  border-radius: var(--ub-radius-1);
  border: 1px solid var(--ub-border);
  background: var(--ub-surface-2);
  font-weight: 950;
  font-family: var(--ub-mono);
  color: var(--ub-muted);
  margin-top: 6px;
}

/* Make the "input + suffix" look intentional on wide screens
   (Toolkit forces stacked layout; this just refines spacing.) */
@media (min-width: 560px){
  .ub-field .ub-inputrow{ display:flex !important; gap:10px; }
  .ub-field .ub-inputrow > input{ flex: 1 1 auto; width:auto !important; }
  .fha-suffix{ margin-top: 0; }
}

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

/* Actions */
.fha-actions{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

/* Collapsible spacing */
.fha-collapsible{ margin-top: 14px; }

/* Work text */
.ub-work{
  font-family: var(--ub-mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap:anywhere;
}
.fha-footnote{
  margin-top: 10px;
  color: var(--ub-muted);
  font-size: 12px;
}

/* Reference list */
.fha-ref{ margin-top: 12px; }
.fha-ref-list{
  margin: 0;
  padding-left: 18px;
}
.fha-ref-list li{ margin: 6px 0; }

/* Notice styling */
.fha-warn{
  margin-top: 10px;
}

/* Small screen tweaks */
@media (max-width: 520px){
  .fha-kpi{ min-width: 112px; }
  .fha-bar-label{ min-width: 72px; }
}