/* ================================================================
   KAREN ADVISORY — CALCULATOR TOOLS CSS
   Curated, collision-free subset of the shared calculator styles
   (debt-gap calculator + coverage health-check analyzer) used by
   protection-check.html and legacy-boost.html.

   NOTE: This file intentionally does NOT redefine .btn, .eyebrow,
   .section-title, .container/.wrap, nav/footer, or any other class
   already owned by css/style.css — those are Karen's real design
   system and must not be overridden here. Only calculator-specific
   component classes live in this file.
   ================================================================ */

:root{
  --calc-blue-dark:#1246A0;
  --calc-blue:#2563EB;
  --calc-blue-pale:#EEF4FF;
  --calc-ink:#0F1B2D;
  --calc-gray:#64748B;
  --calc-line:#E2E8F0;
  --calc-good:#16A34A;
  --calc-bad:#DC2626;
  --calc-gradient:linear-gradient(135deg,#0A2463 0%,#1246A0 50%,#2563EB 100%);
}

/* ── Debt Gap Calculator ── */
.calc-box{margin-top:36px;display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--calc-line);border-radius:20px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.07);}
.calc-form{padding:36px;background:#fff;}
.calc-result{padding:36px;background:var(--calc-gradient);color:#fff;position:relative;overflow:hidden;}
.calc-result::before{content:'';position:absolute;bottom:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06);}
.calc-result .field,.calc-result .eyebrow{color:inherit;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--calc-ink);letter-spacing:.01em;}
.field .hint{font-size:12px;color:var(--calc-gray);margin-top:4px;}
.field input,.field select{width:100%;padding:11px 14px;border:1.5px solid var(--calc-line);border-radius:9px;font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s;}
.field input:focus,.field select:focus{outline:none;border-color:var(--calc-blue);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.result-line{display:flex;justify-content:space-between;font-size:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.15);}
.result-line.total{font-weight:800;font-size:16.5px;border-bottom:none;padding-top:16px;}
.gap-amount{font-size:38px;font-weight:900;margin:14px 0 6px;letter-spacing:-.02em;}
.gap-tag{display:inline-block;padding:5px 14px;border-radius:30px;font-size:12px;font-weight:700;}
.gap-tag.bad{background:rgba(220,38,38,.15);color:#fca5a5;border:1px solid rgba(220,38,38,.3);}
.gap-tag.good{background:rgba(22,163,74,.15);color:#86efac;border:1px solid rgba(22,163,74,.3);}
@media (max-width:880px){ .calc-box{grid-template-columns:1fr;} }

/* ── Coverage Health-Check Analyzer (az- classes) ── */
.az-section{background:#fff;}
.az-group{background:#fff;border:1px solid var(--calc-line);border-radius:14px;padding:24px 26px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.az-group h4{font-size:15px;color:var(--calc-blue-dark);margin:0 0 16px;display:flex;align-items:center;gap:8px;font-weight:700;}
.az-group h4 .az-icon{font-size:18px;}
.az-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
.az-results{margin-top:32px;}
.az-overall-wrap{text-align:center;margin-bottom:24px;padding:32px 20px;background:var(--calc-gradient);border-radius:18px;border:none;color:#fff;}
.az-overall-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.75);margin-bottom:14px;}
.az-overall-grade{font-size:24px;font-weight:900;margin-top:12px;color:#fff;}
.az-overall-desc{font-size:14px;color:rgba(255,255,255,.8);margin-top:6px;max-width:440px;margin-left:auto;margin-right:auto;}
.az-score-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px;}
.az-score-card{background:#fff;border:1px solid var(--calc-line);border-radius:14px;padding:20px 10px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.az-cat{font-size:10.5px;font-weight:700;color:var(--calc-gray);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.az-grade-lbl{font-size:12px;font-weight:700;margin-top:6px;}
.az-bar-fill{height:6px;border-radius:4px;transition:width .7s ease;}
.az-grade-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;}
.az-actions{background:#fff;border:1px solid var(--calc-line);border-radius:14px;padding:24px 26px;margin-bottom:4px;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.az-actions h4{font-size:15px;color:var(--calc-blue-dark);margin:0 0 14px;font-weight:700;}
.az-action-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--calc-line);font-size:14px;line-height:1.6;}
.az-action-item:last-child{border-bottom:none;padding-bottom:0;}
.az-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:5px;}

@media(max-width:900px){.az-score-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:700px){
  .az-score-grid{grid-template-columns:1fr 1fr;}
  .az-form-grid{grid-template-columns:1fr;}
}