/* Buzz Money Hub: the free tools and the employer price calculator (assets/tools.js).
   Loaded only on pages that carry a tool (build.py: tools=True). Same palette as hub.css. */
.tool{max-width:860px}
.tool .fld{margin-bottom:20px}
.tool .fld label,.tool .lbl{display:block;font-weight:700;margin-bottom:6px}
.tool .hint{display:block;font-weight:400;color:var(--mute);font-size:.88rem;margin-top:2px}
.tool input[type=text],.tool input[type=number],.tool select{width:100%;padding:13px 15px;border:2px solid var(--line);border-radius:12px;font-family:inherit;font-size:1.05rem;font-weight:700;background:var(--card);color:var(--ink)}
.tool input:focus,.tool select:focus{outline:none;border-color:var(--ink)}
.tool .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.tool .err{display:block;color:#b02c22;font-weight:700;margin-top:12px}
.ffs-bar .err{margin-top:0}
.pill{display:inline-flex;border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.pill button{border:0;background:var(--card);padding:11px 20px;font-family:inherit;font-weight:700;cursor:pointer;font-size:.95rem;color:var(--ink)}
.pill button[aria-pressed=true]{background:var(--honey)}

/* Financial Freedom Score */
.ffs-area{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:22px 24px;margin-bottom:18px}
.ffs-area h3{margin-bottom:12px}
.ffs-q{padding:12px 0;border-top:1px dashed var(--line)}
.ffs-q:first-of-type{border-top:0}
.ffs-q p{font-weight:600;margin-bottom:8px}
.scale{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;border:0;padding:0;margin:0}
.scale legend{position:absolute;left:-9999px}
.scale label{position:relative}
.scale input{position:absolute;opacity:0;width:1px;height:1px}
.scale span{display:block;text-align:center;padding:8px 0;border:2px solid var(--line);border-radius:9px;font-weight:700;font-size:.92rem;cursor:pointer;background:var(--paper)}
.scale input:checked+span{background:var(--honey);border-color:var(--ink)}
.scale input:focus-visible+span{outline:3px solid var(--ink);outline-offset:1px}
.scale-ends{display:flex;justify-content:space-between;font-size:.78rem;color:var(--mute);margin-top:4px}
.ffs-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--paper);border-top:2px solid var(--ink);padding:14px 0}
.ffs-bar .count{font-weight:700}

/* result card, shared */
.answer{background:var(--card);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);padding:30px 32px;margin-top:30px}
.answer .bignum{font-size:clamp(2.6rem,9vw,3.6rem);font-weight:800;line-height:1;letter-spacing:-.03em;margin:8px 0 6px}
.answer .bignum small{font-size:1.1rem;font-weight:700;color:var(--mute);letter-spacing:0;margin-left:8px}
.verdict{display:inline-block;font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px;background:var(--honey-w);border:1px solid var(--honey-d)}
.verdict.v-r{background:#fbe3e0;border-color:#d9776d}
.areas{list-style:none;padding:0;margin:20px 0 0}
.areas li{display:grid;grid-template-columns:150px 1fr 160px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.95rem}
.areas .track,.areas .fill{display:block}
.areas .track{height:12px;background:var(--line-2);border-radius:6px;overflow:hidden}
.areas .fill{height:100%;background:var(--ink);border-radius:6px}
.areas .b-ok .fill{background:var(--honey-d)}
.areas .b-weak .fill{background:#d9776d}
.areas b{text-align:right}
.tips{margin-top:20px}
.tips h4{margin:14px 0 4px}
.lines{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.lines div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;flex-wrap:wrap;border-bottom:1px dashed var(--line)}
.lines div:last-child{border-bottom:0}
.lines div.tot{border-top:2px solid var(--ink);border-bottom:0;font-size:1.1rem;font-weight:800;margin-top:4px}
.lines b{font-weight:800}
.pjchart{height:150px;display:flex;align-items:flex-end;gap:2px;margin:22px 0 8px}
.pjchart i{flex:1;background:var(--ink);border-radius:2px 2px 0 0;display:block;min-height:1px}
.pjchart i.gone{background:#f0cfcb}
.pjaxis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--mute);font-weight:700}
.tool .formcard{margin-top:26px}

/* employer calculator */
.ecalc{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.ecalc .answer{margin-top:0}
.lines h4{margin:18px 0 2px}
.lines h4:first-child{margin-top:0}
.ecalc .note{grid-column:1 / -1;margin:0}

@media (max-width:700px){
  .tool .row2,.ecalc{grid-template-columns:1fr}
  .answer{padding:24px 20px;box-shadow:var(--shadow-s)}
  .areas li{grid-template-columns:1fr auto}
  .areas .track{grid-column:1 / -1;order:3}
  .scale span{padding:7px 0;font-size:.82rem}
}
@media print{
  header,.topwrap,.bigfoot,.mcta,.wa,.formcard,.noprint,.ffs-qs,.ffs-bar,.helpnow{display:none!important}
  body{background:#fff}
  .answer{box-shadow:none;border:1px solid #999}
}