/* ============================================================
   Utilities Bunker — Personal Loan Calculator (v2.1)
   File: /assets/css/modules/calculators/financialcalculators/personal-loan-calculator.v2.1.css
   Purpose:
   - Tool-only layout and visual styling for Personal Loan Calculator
   - Keeps shared toolkit untouched
   - Mobile-first, responsive, accessible, 44x44 targets
   ============================================================ */

/* Local tool tokens */
:root{
  --pl-radius: 16px;
  --pl-gap: 14px;
  --pl-soft: rgba(0,0,0,.06);
  --pl-accent-soft: rgba(249,58,19,.10);
  --pl-accent-mid: rgba(249,58,19,.18);
  --pl-principal: linear-gradient(90deg, rgba(249,58,19,.92), rgba(255,116,38,.92));
  --pl-interest: linear-gradient(90deg, rgba(17,24,39,.78), rgba(107,114,128,.86));
}

html.ub-theme-dark:root{
  --pl-soft: rgba(255,255,255,.07);
  --pl-accent-soft: rgba(249,58,19,.12);
  --pl-accent-mid: rgba(249,58,19,.22);
  --pl-interest: linear-gradient(90deg, rgba(148,163,184,.55), rgba(229,231,235,.82));
}

/* ============================================================
   Main hero layout
   ============================================================ */
.pl-hero{
  display:grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--pl-gap);
  align-items:start;
}

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

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

.pl-panel--visual{
  min-width: 0;
}

.pl-panel--form{
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
}

/* ============================================================
   Visual head / status
   ============================================================ */
.pl-visual-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

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

.pl-visual-title{
  margin: 4px 0 0;
  font-size: clamp(18px, 1.15rem + .7vw, 26px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 950;
}

.pl-visual-sub{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ub-muted);
}

.pl-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--ub-border);
  background: var(--ub-card-bg);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(249,58,19,.05);
}

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

.pl-kpi{
  min-width:0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ub-border);
  background:
    linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

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

.pl-kpi .v{
  margin-top: 4px;
  font-family: var(--ub-mono);
  font-size: clamp(15px, .95rem + .3vw, 18px);
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap:anywhere;
}

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

/* ============================================================
   Principal / interest bars
   ============================================================ */
.pl-bars{
  display:grid;
  gap: 10px;
  margin-bottom: 12px;
}

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

.pl-bar-label-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
  font-size: 13px;
  font-weight: 900;
}

.pl-bar-label-row span{
  color: var(--ub-muted);
}

.pl-bar-label-row strong{
  font-family: var(--ub-mono);
  font-size: 12px;
  overflow-wrap:anywhere;
}

.pl-bar-track{
  position:relative;
  width:100%;
  height:14px;
  border-radius:999px;
  background: var(--ub-surface-3);
  border:1px solid var(--ub-border);
  overflow:hidden;
}

.pl-bar-fill{
  height:100%;
  width:0;
  border-radius:999px;
  transition: width 180ms ease;
}

.pl-bar-fill--principal{
  background: var(--pl-principal);
}

.pl-bar-fill--interest{
  background: var(--pl-interest);
}

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

/* ============================================================
   Comparison cards
   ============================================================ */
.pl-compare-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pl-compare-card{
  border:1px solid var(--ub-border);
  background:
    linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));
  border-radius: 14px;
  padding: 12px;
}

.pl-compare-card .label{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ub-muted);
}

.pl-compare-card .value{
  margin-top: 6px;
  font-family: var(--ub-mono);
  font-size: clamp(16px, 1rem + .35vw, 20px);
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap:anywhere;
}

.pl-compare-card .note{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ub-muted);
  line-height: 1.45;
}

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

/* ============================================================
   Preset row
   ============================================================ */
.pl-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 4px;
}

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

/* ============================================================
   Form helpers
   ============================================================ */
.pl-toggle-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.pl-actions{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Ensure inputs feel slightly more "tool card" aligned */
.pl-panel--form .ub-card{
  margin-bottom: 0;
}

.pl-panel--form .ub-field input,
.pl-panel--form .ub-field select{
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}

html.ub-theme-dark .pl-panel--form .ub-field input,
html.ub-theme-dark .pl-panel--form .ub-field select{
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}

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

/* ============================================================
   Details polish
   ============================================================ */
.ub-collapsible summary{
  cursor:pointer;
  font-weight:950;
  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;
}

/* ============================================================
   Output emphasis
   ============================================================ */
#liveOut .ub-v{
  overflow-wrap:anywhere;
}

#liveOut .ub-k{
  letter-spacing: .05em;
}

/* ============================================================
   Right rail helpers
   ============================================================ */
.ub-btn--block{
  width:100%;
}

/* ============================================================
   Small-screen polish
   ============================================================ */
@media (max-width: 520px){
  .pl-panel{
    padding: 10px;
  }

  .pl-kpi,
  .pl-compare-card,
  .pl-bar-card{
    padding: 10px;
  }

  .pl-status{
    width:100%;
    justify-content:flex-start;
  }

  .pl-bar-label-row{
    align-items:flex-start;
  }
}