/* =========================================================================
   tools.css — new blue/orange design layer for the Free Tools (calculators).
   Loaded AFTER site.css on tool pages only. Redefines the palette + fonts to
   match the program/team pages, then polishes the calculator components.
   Pure CSS. No effect on pages that don't include this file.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;700;900&family=Work+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;700&family=Caveat:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#F6EFE4;--paper-2:#EFE4D3;--card:#FCF8F0;--ink:#1E2228;--ink-2:#3C424A;
  --muted:#6E747C;--faint:#9AA0A8;--line:#E4D8C6;--line-2:#EEE4D4;
  --cobalt:#2F5C8A;--cobalt-soft:#DBE4EE;--orange:#C2521F;--orange-d:#A5451A;
  --tan:#C8A878;--sage:#9FB1C2;--dark:#1E2228;--deep-denim:#14304A;--ember:#E08B4A;
  --green:#0E9F6E;--tp:#00B67A;--red:#C6402A;--amber:#B4771A;
  --serif:"Chivo",ui-sans-serif,system-ui,sans-serif;
  --sans:"Work Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat",ui-rounded,cursive;
  --num:"Space Grotesk",ui-sans-serif,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sh-sm:0 1px 2px rgba(30,34,40,.05),0 2px 8px rgba(30,34,40,.04);
  --sh:0 2px 6px rgba(30,34,40,.05),0 10px 30px rgba(30,34,40,.08);
  --sh-lg:0 6px 16px rgba(30,34,40,.07),0 24px 56px rgba(30,34,40,.13);
}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}

/* ---- headings use Chivo, balanced so titles don't orphan a single word ---- */
h1.title{font-family:var(--serif);font-weight:900;letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.kicker{font-family:var(--mono);color:var(--cobalt);letter-spacing:.12em;font-weight:500;font-size:11.5px}
.lede{max-width:62ch;text-wrap:pretty}
.prose h2,.prose h3{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.sec-h{font-family:var(--serif);font-weight:900;text-wrap:balance}

/* ============================ HERO ============================ */
.phero{padding:26px 0 6px}
.phero .kicker{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);padding:6px 13px;border-radius:var(--pill);box-shadow:var(--sh-sm)}
.phero .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(14,159,110,.16)}

/* ======================= TOOL CARD / INPUTS ======================= */
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh);padding:28px;gap:28px}
@media(min-width:820px){.tool.split{grid-template-columns:1.02fr .98fr}}
.tool label{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--ink)}
.tool label .hint{color:var(--muted);font-weight:400}
.tool input[type=number],.tool input[type=text],.tool select{
  border:1.5px solid var(--line);border-radius:12px;background:var(--paper);
  font-family:var(--num);font-weight:500;font-size:16px;color:var(--ink);
  transition:border-color .15s,background .15s,box-shadow .15s}
.tool select{font-family:var(--sans);font-weight:500}
.tool input:focus,.tool select:focus{border-color:var(--cobalt);background:var(--card);box-shadow:0 0 0 3px var(--cobalt-soft)}
/* Money "$": the old ::before sat on the whole field (label+input), so it floated
   up near the label. Render it as the INPUT's own background instead — always
   centered on the input, regardless of label wrap or helper text below. */
.tool .in-money::before{display:none!important}
.tool .in-money input,
.tool .in-money input:focus{
  padding-left:28px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='20'%3E%3Ctext%20x='0'%20y='15'%20font-family='sans-serif'%20font-size='15'%20font-weight='600'%20fill='%236E747C'%3E%24%3C/text%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:12px center;
}
.tool input[type=range]{accent-color:var(--orange)}
.tool .src a,.tool small a{color:var(--cobalt);font-weight:600}

/* ------- input group divider label (optional section headers in a form) ------- */
.tool .fgroup{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;margin:6px 0 12px;padding-top:14px;border-top:1px dashed var(--line)}
.tool .fgroup:first-child{border-top:0;padding-top:0}

/* ============================ RESULT PANEL ============================ */
.tool .out{background:linear-gradient(180deg,var(--paper-2),var(--paper));border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.tool .out .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);font-weight:500}
.tool .out .big{font-family:var(--num);font-weight:700;letter-spacing:-.02em;color:var(--ink);font-size:clamp(36px,6vw,54px);transition:color .2s}
.tool .out .big.good{color:var(--green)}.tool .out .big.bad{color:var(--red)}.tool .out .big.mid{color:var(--amber)}
.tool .out ul{margin-top:18px}
.tool .out li{padding:10px 0;font-size:14px;border-color:var(--line-2)}
.tool .out li span{color:var(--muted)}
.tool .out li b{font-family:var(--num);font-weight:600;color:var(--ink)}
.tool .out li.hero-row{margin-top:2px;padding:12px 0;border-top:1px solid var(--line)}
/* subtle flash when a result updates */
@keyframes outflash{0%{background-color:rgba(47,92,138,.14)}100%{background-color:transparent}}
.tool .out.flash .big{animation:none}
.tool .out .big.bump{animation:bump .28s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

/* verdict pills */
.verdict{font-family:var(--sans);font-weight:700;font-size:12.5px;padding:6px 13px}
.verdict.good{background:#E4F5EC;color:#0B7B4E}
.verdict.mid{background:#FBEEDD;color:#8A5410}
.verdict.bad{background:#FBE7E1;color:#A83A1E}
.verdict::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}

/* ============ COVERAGE / RANGE METER (used by DSCR, valuation) ============ */
.meter{margin-top:18px}
.meter .track{position:relative;height:12px;border-radius:99px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.meter .fill{position:absolute;inset:0 auto 0 0;border-radius:99px;transition:width .35s cubic-bezier(.3,.7,.3,1),background .3s}
.meter .fill.good{background:linear-gradient(90deg,#12A374,#0E9F6E)}
.meter .fill.mid{background:linear-gradient(90deg,#E0A34A,#C77A17)}
.meter .fill.bad{background:linear-gradient(90deg,#D9603F,#C6402A)}
.meter .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.55}
.meter .mark::after{content:attr(data-label);position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.meter .scale{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--faint)}

/* ============================ SCORE RING ============================ */
.ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin:0 auto;transition:background .4s}
.ring .inner{width:118px;height:118px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:var(--sh-sm)}
.ring .inner b{font-family:var(--num);font-weight:700;font-size:44px;line-height:1;color:var(--ink)}
.ring .inner span{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.scorebars .b{margin:0 0 12px}
.scorebars .top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.scorebars .top span{color:var(--ink-2)}.scorebars .top b{font-family:var(--num);color:var(--ink)}
.scorebars .track{height:8px;border-radius:99px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.scorebars .fill{height:100%;border-radius:99px;transition:width .4s cubic-bezier(.3,.7,.3,1)}
.scorebars .fill.good{background:var(--green)}.scorebars .fill.mid{background:var(--amber)}.scorebars .fill.bad{background:var(--red)}

/* ============================ QUIZ ============================ */
.quiz{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh);padding:30px;max-width:640px;margin-inline:auto}
.quiz .prog{height:6px;border-radius:99px;background:var(--paper-2);overflow:hidden;margin-bottom:24px}
.quiz .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--cobalt),var(--orange));border-radius:99px;transition:width .35s ease}
.quiz .qn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
.quiz h2{font-family:var(--serif);font-weight:700;font-size:clamp(22px,3.2vw,28px);margin:8px 0 20px;text-wrap:balance}
.quiz .opts{display:grid;gap:10px}
.quiz .opt{text-align:left;padding:15px 17px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink);cursor:pointer;transition:border-color .14s,background .14s,transform .1s}
.quiz .opt:hover{border-color:var(--cobalt);background:var(--card)}
.quiz .opt:active{transform:scale(.99)}
.quiz .opt.sel{border-color:var(--cobalt);background:var(--cobalt-soft)}
.quiz .nav2{display:flex;justify-content:space-between;align-items:center;margin-top:20px}

/* ============================ CALLOUTS ============================ */
.callout{border-radius:var(--r-lg);border:1px solid var(--line)}
.callout.note{background:var(--cobalt-soft);border-color:#C7D5E5}.callout.note::before{content:"💡"}
.callout.tip{background:#E4F3EC;border-color:#CBE6D8}.callout.tip::before{content:"✅"}
.callout.warn{background:#FBEEDD;border-color:#F0DCC0}
/* Disclaimer: match the plain .disc-note used on article pages (no box, no icon, thin top rule, faint) */
.callout.disc{background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;box-shadow:none;padding:18px 0 0;margin:30px 0 0;font-size:12px;line-height:1.6;color:var(--faint)}
.callout.disc::before{content:none;display:none}
.callout.disc p{font-size:12px;line-height:1.6;color:var(--faint);max-width:none;margin:0}
.callout.key{background:var(--deep-denim);border-color:var(--deep-denim)}.callout.key::before{content:"★";color:var(--ember)}
.callout.key h4{color:#fff}.callout h4{font-family:var(--sans);font-weight:700}

/* mini "answer first" strip at the top of the explainer */
.answer-first{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-sm)}
.answer-first .ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--cobalt-soft);color:var(--cobalt);display:grid;place-items:center}
.answer-first h4{margin:0 0 4px;font-family:var(--sans);font-weight:700;font-size:14px}
.answer-first p{margin:0;font-size:14.5px;color:var(--ink-2);max-width:none}

/* ============================ CTA BAND ============================ */
.cta-band{background:var(--dark);border-radius:var(--r-xl);background-image:radial-gradient(70% 120% at 50% 0%,rgba(194,82,31,.20),transparent 60%)}
.cta-band h2{font-family:var(--serif);font-weight:900}
.cta-band .em{color:var(--ember)}
.cta-band small{font-family:var(--hand)}
.cta-inline{border-radius:var(--r-lg)}
.cta-inline .txt h4{font-family:var(--serif);font-weight:700}

/* ============================ FAQ ICON ALIGNMENT ============================ */
.qq{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:var(--sans);font-weight:600}
.qq .ico{flex:none;width:26px;height:26px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--cobalt);transition:transform .2s,background .2s,color .2s,border-color .2s;margin-left:auto}
.qitem.open .qq .ico{background:var(--cobalt);border-color:var(--cobalt);color:#fff;transform:rotate(45deg)}

/* toolbar buttons */
.btn-ink{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn-ink:hover{background:var(--deep-denim);border-color:var(--deep-denim)}

/* breadcrumbs + updated line polish */
.crumbs{font-family:var(--mono);font-size:12px}
.updated{font-family:var(--mono)}