/* ============================================================
   Utilities Bunker — Inflation Calculator (v2.1)
   File: /assets/css/modules/calculators/financialcalculators/inflation-calculator.v2.1.css
   Purpose:
   - Tool-only layout and visuals for Inflation Calculator
   - No changes to ub-toolkit.v2.1.css
   - Mobile-first, fast, accessible, UB-consistent
   ============================================================ */

/* Local tool tokens */
:root{
  --infl-radius: 16px;
  --infl-gap: 14px;
  --infl-soft: rgba(0,0,0,.06);
  --infl-soft-2: rgba(0,0,0,.04);
  --infl-accent: rgba(249,58,19,.14);
  --infl-accent-strong: rgba(249,58,19,.22);
  --infl-good: rgba(34,197,94,.18);
  --infl-warn: rgba(245,158,11,.18);
  --infl-line: rgba(0,0,0,.08);
}

html.ub-theme-dark:root{
  --infl-soft: rgba(255,255,255,.06);
  --infl-soft-2: rgba(255,255,255,.04);
  --infl-accent: rgba(249,58,19,.18);
  --infl-accent-strong: rgba(249,58,19,.28);
  --infl-good: rgba(34,197,94,.20);
  --infl-warn: rgba(245,158,11,.22);
  --infl-line: rgba(255,255,255,.10);
}

/* Header card layout */
.infl-head{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

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

.infl-subtitle{
  margin:6px 0 0;
  max-width:78ch;
}

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

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

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

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

/* Left visual/results panel */
.infl-panel{
  background:var(--ub-surface-2);
  border:1px solid var(--ub-border);
  border-radius:var(--infl-radius);
  padding:12px;
}

.infl-panel--visual{
  position:relative;
  overflow:hidden;
}

.infl-panel--visual::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:88px;
  background:
    radial-gradient(circle at top left, var(--infl-accent-strong), transparent 58%),
    linear-gradient(180deg, var(--infl-soft-2), transparent);
  pointer-events:none;
}

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

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

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

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

.infl-kpi{
  min-width:112px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
  backdrop-filter:saturate(1.1);
}

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

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

/* Comparison bars */
.infl-barwrap{
  position:relative;
  border:1px solid var(--ub-border);
  border-radius:14px;
  background:linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));
  padding:12px;
}

.infl-barhead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
  font-size:12px;
  font-weight:900;
  color:var(--ub-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.infl-bars{
  display:grid;
  gap:12px;
}

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

.infl-bar-fill{
  display:block;
  height:20px;
  border-radius:999px;
  transition:width 180ms ease;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}

.infl-bar--start .infl-bar-fill{
  background:linear-gradient(92deg, rgba(0,112,187,.78), rgba(0,112,187,.96));
}

.infl-bar--end .infl-bar-fill{
  background:linear-gradient(92deg, var(--ub-btn-grad-a), var(--ub-btn-grad-b));
}

.infl-barvalues{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
  font-family:var(--ub-mono);
  font-weight:950;
  font-size:13px;
}

/* Status pills */
.infl-statrow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.infl-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
  font-size:12px;
  font-weight:900;
}

.infl-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ub-muted);
  flex:0 0 auto;
}

/* Reference note grid */
.infl-notegrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.infl-noteitem{
  border:1px solid var(--ub-border);
  border-radius:14px;
  background:var(--ub-card-bg);
  padding:10px 12px;
  min-height:74px;
}

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

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

@media (max-width: 540px){
  .infl-notegrid{
    grid-template-columns:1fr;
  }
}

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

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

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

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

.infl-options{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.infl-chipcheck{
  display:flex;
  gap:8px;
  align-items:center;
}

.infl-mode-row{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.infl-mode-label{
  min-width:120px;
  font-weight:900;
}

.infl-mode-select{
  min-width:min(100%, 320px);
  border-radius:999px;
  background:var(--ub-chip-bg);
  color:var(--ub-chip-text);
}

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

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

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

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

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

.infl-reference-box{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--ub-border);
  border-radius:14px;
  background:var(--ub-surface-2);
  font-size:13px;
}

/* FAQ spacing */
.infl-faq-q{
  margin:12px 0 6px;
}

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

/* Tool meta note */
.infl-meta-note{
  margin:8px 0 0;
  color:var(--ub-muted);
  font-size:13px;
}

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

/* Focus / accessibility enhancements */
.infl-preset-row .ub-chip:focus,
.infl-mode-select:focus,
.infl-chipcheck:focus-within{
  outline:none;
  box-shadow:0 0 0 4px var(--ub-focus);
}

/* Small-screen refinements */
@media (max-width: 640px){
  .infl-kpi{
    min-width:98px;
  }

  .infl-barhead,
  .infl-barvalues{
    gap:8px;
  }

  .infl-mode-label{
    min-width:100%;
  }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .infl-bar-fill{
    transition:none;
  }
}