/* ============================================================
   Utilities Bunker — Real Estate Calculator (v2.1)
   File: /assets/css/modules/calculators/financialcalculators/real-estate-calculator.v2.1.css
   Purpose:
   - Tool-only layout + dashboard visuals + work formatting
   - No changes to ub-toolkit.v2.1.css
   - Mobile-first, responsive, 44x44 touch targets
   ============================================================ */

/* Local tokens */
:root{
  --re-radius: 16px;
  --re-gap: 14px;
  --re-soft: rgba(0,0,0,.06);
  --re-strong: rgba(0,0,0,.12);

  --re-seg-pi: #f97316;
  --re-seg-tax: #f59e0b;
  --re-seg-ins: #38bdf8;
  --re-seg-hoa: #8b5cf6;
  --re-seg-pmi: #ef4444;
  --re-seg-other: #22c55e;
}

html.ub-theme-dark:root{
  --re-soft: rgba(255,255,255,.05);
  --re-strong: rgba(255,255,255,.10);
}

/* Header */
.ub-tool-head{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

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

.ub-tool-subtitle{
  margin:6px 0 0;
}

/* Helper lists */
.ub-steps{
  margin:0;
  padding-left:18px;
}

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

/* Hero layout */
.ub-re-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--re-gap);
}

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

/* Dashboard */
.ub-re-dashboard{
  background:var(--ub-surface-2);
  border:1px solid var(--ub-border);
  border-radius:var(--re-radius);
  padding:12px;
}

.ub-re-dashboard-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

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

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

.ub-re-mode-switch{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ub-re-mode-switch .ub-chip{
  min-height:44px;
}

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

@media (max-width: 520px){
  .ub-re-kpis{
    grid-template-columns:1fr;
  }
}

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

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

.ub-re-kpi .v{
  font-family:var(--ub-mono);
  font-weight:950;
  font-size:15px;
  margin-top:4px;
  overflow-wrap:anywhere;
}

/* Deal signal */
.ub-re-health{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  margin-top:12px;
  border-radius:999px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
  font-size:12px;
  font-weight:950;
  min-height:44px;
}

/* Bars */
.ub-re-bars{
  margin-top:12px;
}

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

.ub-re-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);
}

.ub-re-stack{
  display:flex;
  width:100%;
  min-height:16px;
  overflow:hidden;
  border-radius:999px;
  margin-top:10px;
  background:var(--ub-surface-3);
  border:1px solid var(--ub-border);
}

.ub-re-stack .seg{
  display:block;
  min-width:0;
  transition:width 160ms ease;
}

.ub-re-legend{
  display:flex;
  gap:10px 14px;
  flex-wrap:wrap;
  margin-top:10px;
  font-size:12px;
  color:var(--ub-muted);
}

.ub-re-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.ub-re-legend .seg{
  width:10px;
  height:10px;
  min-width:10px;
  border-radius:999px;
  border:none;
}

.seg-pi{ background:var(--re-seg-pi); }
.seg-tax{ background:var(--re-seg-tax); }
.seg-ins{ background:var(--re-seg-ins); }
.seg-hoa{ background:var(--re-seg-hoa); }
.seg-pmi{ background:var(--re-seg-pmi); }
.seg-other{ background:var(--re-seg-other); }

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

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

/* Form sections */
.ub-re-group + .ub-re-group{
  margin-top:2px;
}

.ub-re-section-title{
  margin:0 0 12px;
  font-size:var(--ub-fs-2);
  font-weight:950;
  letter-spacing:-.01em;
}

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

/* Input rows */
.ub-inputrow{
  display:block !important;
}

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

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

/* Controls */
.ub-re-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.ub-re-controls .ub-chip{
  display:flex;
  gap:8px;
  align-items:center;
}

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

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

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

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

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

/* Disabled field visual hook if used later */
.ub-field--disabled{
  opacity:.72;
}

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

/* Focus polish */
.ub-re-mode-switch .ub-chip:focus,
.ub-preset-row .ub-chip:focus,
.ub-re-controls .ub-chip:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ub-focus);
}

/* Small screen polish */
@media (max-width: 640px){
  .ub-re-bar-head{
    align-items:flex-start;
  }

  .ub-re-legend{
    gap:8px 10px;
  }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .ub-re-stack .seg{
    transition:none;
  }
}