/* ============================================================
   TOOL CARDS — Mobile-app style financial calculators
   ============================================================ */
.tool-card{
  border-radius:14px;
  overflow:hidden;
  margin:1.2rem 0;
  background:#fff;
  box-shadow:0 2px 16px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.07);
  font-family:inherit;
}
.tool-head{
  padding:11px 14px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.01em;
}
.tool-body{
  padding:13px 14px 11px;
}
.tool-row{
  margin-bottom:9px;
}
.tool-row label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.76rem;
  font-weight:500;
  color:#666;
  margin-bottom:4px;
}
.tool-row label span{
  font-weight:700;
  color:#111;
  font-size:.8rem;
  background:rgba(0,0,0,.05);
  padding:1px 7px;
  border-radius:20px;
  min-width:52px;
  text-align:center;
}
/* Range slider — cross-browser */
.tool-row input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  border-radius:2px;
  background:linear-gradient(to right,var(--tc1) var(--pct,50%),#e5e7eb var(--pct,50%));
  outline:none;
  cursor:pointer;
  border:none;
  padding:0;
  margin:0;
}
.tool-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--tc1);
  cursor:pointer;
  border:2.5px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.22);
}
.tool-row input[type=range]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--tc1);
  cursor:pointer;
  border:2.5px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.22);
}
/* Result bar */
.tool-result{
  background:linear-gradient(135deg,var(--tc1),var(--tc2));
  border-radius:10px;
  padding:10px 12px;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  margin-top:10px;
  min-height:52px;
}
.r-item{
  text-align:center;
  flex:1;
  min-width:0;
}
.r-item.r-main{
  flex:1.4;
}
.r-val{
  display:block;
  font-size:.98rem;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.1;
}
.r-lbl{
  font-size:.63rem;
  opacity:.82;
  display:block;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.r-sep{
  font-size:.8rem;
  opacity:.55;
  flex:0 0 auto;
  padding:0 1px;
}
/* Tax result special */
.tax-res .r-item:last-child{
  background:rgba(255,255,255,.18);
  border-radius:7px;
  padding:4px 6px;
}
/* Note */
.tool-note{
  font-size:.67rem;
  color:#9ca3af;
  margin:7px 0 0;
  line-height:1.4;
}
/* Dark mode */
@media(prefers-color-scheme:dark){
  .tool-card{background:#1e2130;border-color:rgba(255,255,255,.08);}
  .tool-row label{color:#9ca3af;}
  .tool-row label span{color:#e5e7eb;background:rgba(255,255,255,.07);}
  .tool-row input[type=range]{background:linear-gradient(to right,var(--tc1) var(--pct,50%),#374151 var(--pct,50%));}
  .tool-note{color:#6b7280;}
}
/* Mobile tweaks */
@media(max-width:400px){
  .r-val{font-size:.84rem;}
  .r-lbl{font-size:.58rem;}
  .tool-result{padding:8px 8px;}
}

/* v2: keep calculators inside narrow screens */
.tool-card{max-width:100%}
.prose .tool-card{margin:1.4em 0}

/* v3: checklist tool */
.chk-prog{height:6px;border-radius:9px;background:rgba(0,0,0,.08);overflow:hidden;margin:2px 0 12px}
.chk-prog i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--tc1),var(--tc2));transition:width .3s ease}
.chk-list{display:grid;gap:8px}
.chk-i{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid rgba(0,0,0,.09);border-radius:12px;cursor:pointer;font-size:.86rem;line-height:1.45;color:#222;position:relative;-webkit-user-select:none;user-select:none}
.chk-i input{position:absolute;opacity:0;pointer-events:none}
.chk-b{flex:none;width:20px;height:20px;border-radius:7px;border:2px solid #b6bfcb;display:grid;place-items:center;margin-top:1px;transition:.15s}
.chk-b:after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);margin-top:-2px;transition:.15s}
.chk-i input:checked+.chk-b{background:var(--tc1);border-color:var(--tc1)}
.chk-i input:checked+.chk-b:after{transform:rotate(45deg) scale(1)}
.chk-i input:checked~.chk-t{color:#6b7280;text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.chk-i input:focus-visible+.chk-b{outline:3px solid var(--tc1);outline-offset:2px}
.chk-msg{margin:12px 0 2px;font-size:.82rem;font-weight:700;color:var(--tc1)}
@media(prefers-color-scheme:dark){.chk-i{border-color:rgba(255,255,255,.12);color:#e5e7eb}.chk-prog{background:rgba(255,255,255,.12)}.chk-i input:checked~.chk-t{color:#9ca3af}}