/* ==========================================================================
   Decoy pricing calculator
   Shares the calculator shell and the res-grid/res-work pattern. Adds only
   the scale bar -- reusing the exact shape site.css already draws for the
   BMI band, so the same visual idiom means the same thing everywhere it
   appears on the site.
   ========================================================================== */

.res-scale{margin:20px 0 4px;}
.res-scale .scale-bar{
  position:relative;height:12px;border-radius:6px;overflow:hidden;display:flex;
}
.res-scale .scale-bar i{display:block;height:100%;}
.res-scale .scale-pin{
  position:absolute;top:-5px;width:3px;height:22px;border-radius:2px;
  background:var(--ink);box-shadow:0 0 0 2px var(--surface);
  transform:translateX(-1.5px);
}
.res-scale .scale-keys{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3);gap:8px;
}
.res-scale .scale-keys b{font-weight:400;}
.res-scale .scale-keys .on{color:var(--accent);font-weight:600;}

#gapBox input[type="range"]{width:100%;margin-top:6px;}
#gapBox label{display:flex;justify-content:space-between;gap:10px;}
#gapBox label span{font-family:var(--f-mono);color:var(--ink-2);}