/* ============================================================
   FinanceBridge — tools.css
   Shared UI for the /tools/ interactive calculators.
   Loaded alongside blog-post.css (reuses nav/footer/typography
   from there) — this file only adds calculator-specific styles.
   ============================================================ */

.tool-hero{
  background:linear-gradient(135deg,#0F172A 0%,#1E293B 100%);
  color:#fff;
  padding:calc(var(--nav-h) + 3.5rem) 0 3rem;
  text-align:center;
}
.tool-hero .post-back{color:rgba(255,255,255,.7);}
.tool-hero .post-back:hover{color:#fff;}
.tool-eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal-light,#2DD4BF);
  margin-bottom:.75rem;
}
.tool-hero h1{color:#fff;font-size:clamp(1.7rem,4vw,2.4rem);max-width:780px;margin:0 auto .9rem;}
.tool-hero p{color:rgba(255,255,255,.78);max-width:640px;margin:0 auto;font-size:1.02rem;line-height:1.6;}

.tool-main{padding:3rem 0 4rem;}
.tool-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  align-items:start;
  max-width:980px;
  margin:0 auto;
}
@media (max-width:820px){ .tool-grid{grid-template-columns:1fr;} }

.tool-card{
  background:#fff;
  border:1px solid var(--border,#E2E8F0);
  border-radius:var(--radius-lg,20px);
  padding:2rem;
  box-shadow:var(--shadow-md);
}
.tool-card h2{font-size:1.15rem;margin:0 0 1.4rem;}

.tool-field{margin-bottom:1.3rem;}
.tool-field label{
  display:block;
  font-size:.85rem;
  font-weight:700;
  color:var(--dark,#0F172A);
  margin-bottom:.4rem;
}
.tool-field .tool-hint{font-size:.78rem;color:var(--text-light,#94A3B8);margin-top:.3rem;}
.tool-field input, .tool-field select{
  width:100%;
  padding:.75rem .9rem;
  border:1.5px solid var(--border,#E2E8F0);
  border-radius:var(--radius-sm,6px);
  font-size:1rem;
  font-family:var(--font-body);
  color:var(--dark,#0F172A);
  background:#F8FAFC;
  transition:border-color 150ms;
}
.tool-field input:focus, .tool-field select:focus{
  outline:none;
  border-color:var(--blue,#2563EB);
  background:#fff;
}
.tool-input-prefix{position:relative;}
.tool-input-prefix span{
  position:absolute;left:.9rem;top:50%;transform:translateY(-50%);
  color:var(--text-light,#94A3B8);font-weight:600;pointer-events:none;
}
.tool-input-prefix input{padding-left:1.9rem;}

.tool-btn{
  width:100%;
  padding:.9rem;
  background:var(--blue,#2563EB);
  color:#fff;
  border:none;
  border-radius:var(--radius-md,12px);
  font-size:.95rem;
  font-weight:700;
  font-family:var(--font-body);
  cursor:pointer;
  transition:background 150ms, transform 150ms;
}
.tool-btn:hover{background:var(--blue-dark,#1D4ED8);transform:translateY(-1px);}

.tool-result{
  background:linear-gradient(135deg,#F0FDFA 0%,#ECFEFF 100%);
  border:1px solid #99F6E4;
  border-radius:var(--radius-lg,20px);
  padding:2rem;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tool-result.tool-result-empty{
  align-items:center;
  text-align:center;
  color:var(--text-light,#94A3B8);
  background:#F8FAFC;
  border:1.5px dashed var(--border,#E2E8F0);
}
.tool-result-label{
  font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0F766E;margin-bottom:.5rem;
}
.tool-result-value{
  font-family:var(--font-head);
  font-size:clamp(2.2rem,6vw,3rem);
  font-weight:800;
  color:var(--dark,#0F172A);
  letter-spacing:-0.02em;
  line-height:1.1;
  margin-bottom:.6rem;
}
.tool-result-sub{color:var(--text,#475569);font-size:.95rem;line-height:1.55;}
.tool-result-breakdown{
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid #99F6E4;
}
.tool-result-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem 0;font-size:.9rem;
}
.tool-result-row span:first-child{color:var(--text,#475569);}
.tool-result-row span:last-child{font-weight:700;color:var(--dark,#0F172A);}
.tool-result-badge{
  display:inline-block;padding:.25rem .7rem;border-radius:var(--radius-full,9999px);
  font-size:.75rem;font-weight:700;margin-top:.8rem;
}
.tool-result-badge.good{background:#DCFCE7;color:#166534;}
.tool-result-badge.warn{background:#FEF9C3;color:#854D0E;}
.tool-result-badge.bad{background:#FEE2E2;color:#991B1B;}

.tool-explainer{max-width:780px;margin:4rem auto 0;padding:0 var(--pad,1.25rem);}
.tool-explainer h2{margin-bottom:1rem;}
.tool-explainer p{margin-bottom:1.1rem;}
.tool-explainer table{width:100%;border-collapse:collapse;margin:1.5rem 0;}
.tool-explainer th,.tool-explainer td{padding:.7rem .9rem;border:1px solid var(--border,#E2E8F0);text-align:left;font-size:.92rem;}
.tool-explainer th{background:#F8FAFC;font-weight:700;}

.tool-cta-band{
  max-width:780px;margin:3rem auto 0;padding:2rem;
  background:var(--dark,#0F172A);border-radius:var(--radius-lg,20px);
  text-align:center;
}
.tool-cta-band h3{color:#fff;margin-bottom:.6rem;}
.tool-cta-band p{color:rgba(255,255,255,.72);margin-bottom:1.3rem;}

.tool-hub-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;max-width:1000px;margin:0 auto;
}
.tool-hub-card{
  background:#fff;border:1px solid var(--border,#E2E8F0);border-radius:var(--radius-lg,20px);
  padding:1.75rem;text-decoration:none;display:block;transition:transform 180ms,box-shadow 180ms;
}
.tool-hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.tool-hub-icon{font-size:1.8rem;margin-bottom:.9rem;display:block;}
.tool-hub-card h3{font-size:1.05rem;margin-bottom:.5rem;color:var(--dark,#0F172A);}
.tool-hub-card p{font-size:.88rem;color:var(--text,#475569);margin:0;}
.tool-hub-card.featured{
  border:2px solid var(--teal,#14B8A6);
  background:linear-gradient(135deg,#F0FDFA 0%,#fff 60%);
  position:relative;
}
.tool-hub-badge{
  position:absolute;top:-.7rem;right:1.25rem;
  background:var(--teal,#14B8A6);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:var(--radius-full,9999px);
}

/* ── Budget split bar (used by the 50/30/20 budget calculator) ── */
.budget-bar{
  display:flex;width:100%;height:2.75rem;border-radius:var(--radius-md,12px);
  overflow:hidden;margin:1.2rem 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.budget-bar-seg{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.78rem;font-weight:700;
  transition:width 400ms var(--ease,ease);white-space:nowrap;overflow:hidden;
}
.budget-bar-seg.needs{background:#2563EB;}
.budget-bar-seg.wants{background:#14B8A6;}
.budget-bar-seg.savings{background:#7C3AED;}
.budget-legend{display:flex;gap:1.25rem;flex-wrap:wrap;margin-bottom:.5rem;font-size:.82rem;}
.budget-legend span{display:flex;align-items:center;gap:.4rem;color:var(--text,#475569);}
.budget-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.budget-legend .needs-dot{background:#2563EB;}
.budget-legend .wants-dot{background:#14B8A6;}
.budget-legend .savings-dot{background:#7C3AED;}

/* ── Advanced budget result layout — donut chart + category cards ── */
.budget-result-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;}
.budget-donut{flex-shrink:0;}
.budget-donut-center{
  position:relative;
}
.budget-total-label{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-light,#94A3B8);margin-bottom:.3rem;}
.budget-total-value{font-family:var(--font-head);font-size:1.65rem;font-weight:800;color:var(--dark,#0F172A);letter-spacing:-0.02em;line-height:1.15;}
.budget-total-annual{font-size:.82rem;color:var(--text,#475569);margin-top:.2rem;}

.budget-cat-cards{display:flex;flex-direction:column;gap:.7rem;margin-top:1.4rem;}
.budget-cat-card{
  display:flex;align-items:center;gap:.9rem;
  background:#fff;border-radius:var(--radius-md,12px);padding:.85rem 1rem;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.budget-cat-icon{
  width:2.4rem;height:2.4rem;border-radius:var(--radius-sm,8px);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;
}
.budget-cat-icon.needs{background:#DBEAFE;}
.budget-cat-icon.wants{background:#CCFBF1;}
.budget-cat-icon.savings{background:#EDE9FE;}
.budget-cat-info{flex:1;min-width:0;}
.budget-cat-name{font-size:.86rem;font-weight:700;color:var(--dark,#0F172A);}
.budget-cat-examples{font-size:.74rem;color:var(--text-light,#94A3B8);margin-top:.1rem;}
.budget-cat-amount{text-align:right;flex-shrink:0;}
.budget-cat-value{font-family:var(--font-head);font-size:1.15rem;font-weight:800;color:var(--dark,#0F172A);}
.budget-cat-pct{font-size:.72rem;color:var(--text-light,#94A3B8);}

@media (max-width:480px){
  .budget-result-header{flex-direction:column;text-align:center;}
}

/* ============================================================
   Collections Tracker — dashboard-style visual, reused from the
   homepage hero mockup format but wired to real user input.
   No hardcoded numbers here — every value renders from the
   invoices the user adds themselves.
   ============================================================ */
.ctrack-wrap { max-width: 1000px; margin: 0 auto; }
.ctrack-dashboard{
  background: rgba(15,23,42,.97);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-lg,20px);
  padding: 1.6rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.ctrack-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1rem; margin-bottom:1.1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ctrack-title{font-family:var(--font-head);font-size:.95rem;font-weight:700;color:#fff;}
.ctrack-sub{font-size:.68rem;color:rgba(255,255,255,.45);margin-top:.15rem;}
.ctrack-badge{display:flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:600;color:var(--teal,#14B8A6);}
.ctrack-dot{width:6px;height:6px;background:var(--teal,#14B8A6);border-radius:50%;}

.ctrack-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1.1rem;}
@media (max-width:700px){ .ctrack-kpis{grid-template-columns:repeat(2,1fr);} }
.ctrack-kpi{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-md,12px);padding:.85rem;}
.ctrack-kpi-label{font-size:.6rem;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem;}
.ctrack-kpi-val{font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:#fff;}
.ctrack-kpi-sub{font-size:.64rem;font-weight:600;margin-top:.15rem;}
.ctrack-kpi-sub.good{color:#22c55e;}
.ctrack-kpi-sub.bad{color:#ef4444;}
.ctrack-kpi-sub.neutral{color:rgba(255,255,255,.4);}

.ctrack-aging{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md,12px);padding:.9rem;margin-bottom:1.1rem;}
.ctrack-aging-label{font-size:.6rem;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.7rem;}
.ctrack-aging-bar{display:flex;height:34px;border-radius:8px;overflow:hidden;}
.ctrack-aging-seg{display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700;color:#fff;transition:width 400ms ease;}
.ctrack-aging-legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.6rem;font-size:.64rem;color:rgba(255,255,255,.5);}
.ctrack-aging-legend span{display:flex;align-items:center;gap:.3rem;}
.ctrack-aging-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;}

.ctrack-list{display:flex;flex-direction:column;gap:.5rem;}
.ctrack-row{
  display:flex;align-items:center;gap:.65rem;
  padding:.55rem .7rem;border-radius:var(--radius-sm,8px);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
}
.ctrack-row-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.ctrack-row-info{flex:1;min-width:0;}
.ctrack-row-name{font-size:.76rem;font-weight:600;color:rgba(255,255,255,.85);}
.ctrack-row-meta{font-size:.65rem;color:rgba(255,255,255,.4);margin-top:.1rem;}
.ctrack-row-amt{font-family:var(--font-head);font-size:.85rem;font-weight:700;color:#fff;text-align:right;}
.ctrack-row-remove{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:1rem;padding:.2rem .4rem;flex-shrink:0;}
.ctrack-row-remove:hover{color:#ef4444;}
.ctrack-empty{text-align:center;padding:2.5rem 1rem;color:rgba(255,255,255,.35);font-size:.85rem;}

.ctrack-form{
  background:#fff;border:1px solid var(--border,#E2E8F0);border-radius:var(--radius-lg,20px);
  padding:1.75rem;box-shadow:var(--shadow-md);margin-bottom:1.5rem;
}
.ctrack-form-grid{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:.75rem;align-items:end;}
@media (max-width:700px){ .ctrack-form-grid{grid-template-columns:1fr 1fr;} }

/* ── FAQ details (extracted standalone, avoids loading full components.css
   which has its own conflicting .navbar/.footer definitions) ── */
.faq-details{border:1px solid var(--border,#E2E8F0);border-radius:var(--radius-md,10px);margin-bottom:.75rem;overflow:hidden;background:#fff;}
.faq-details[open]{border-color:rgba(37,99,235,.28);}
.faq-details summary{cursor:pointer;padding:1rem 1.25rem;font-weight:600;list-style:none;position:relative;padding-right:2.5rem;}
.faq-details summary::-webkit-details-marker{display:none;}
.faq-details summary::after{content:"+";position:absolute;right:1.25rem;top:1rem;font-size:1.2rem;transition:transform 200ms;}
.faq-details[open] summary::after{transform:rotate(45deg);}
.faq-details p{padding:0 1.25rem 1.1rem;margin:0;color:var(--text,#475569);line-height:1.7;}