/* ---- /tools/calculator/ (4 Oct 2026) -------------------------------------
   The standalone cash calculator: a search box, a list of matching bonds,
   each with the same Calculate button the price tables carry. The panel
   itself (and the button's dress) come from consideration.js. */
.calc{ margin:18px 0 22px; padding:16px 18px; border:1px solid var(--border); border-radius:10px; background:var(--bg2) }
.calc-label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px }
.calc-q{ width:100%; padding:11px 14px; font:inherit; font-size:16px; color:var(--text-strong); background:var(--bg); border:1px solid var(--border); border-radius:8px }
.calc-q:focus{ outline:none; border-color:var(--accent) }
.calc-hint{ margin:8px 0 0; font-size:12px; color:var(--text-dim) }
.calc-list{ margin-top:12px; border-top:1px solid var(--border) }
.calc-list[hidden]{ display:none }
.calc-row{ display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:13px }
.calc-row .nm{ flex:1 1 auto; min-width:0; color:var(--text-strong) }
.calc-row .nm small{ display:block; font-size:11px; color:var(--text-dim); margin-top:2px }
.calc-row .px{ flex:0 0 auto; color:var(--text-mid); font-variant-numeric:tabular-nums; white-space:nowrap }
.calc-row .cc-btn{ flex:0 0 auto; margin:0 }
.calc-more{ padding:8px 2px; font-size:12px; color:var(--text-dim) }
.calc-how{ font-size:13.5px; line-height:1.6; color:var(--text-mid) }
@media (max-width:600px){ .calc-row{ flex-wrap:wrap } .calc-row .nm{ flex-basis:100% } }