/* Small calculators beside an article or a build page (inc/calcs.php, assets/js/calcs.js). Forms reuse .wbf from main.css. */
.calc{margin:1.6rem 0 2rem;padding:20px 22px 16px;background:var(--sheet);border:2px solid var(--char);box-shadow:6px 6px 0 var(--char)}
.calc-t{margin:0 0 6px;font:800 1.5rem/1.1 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.calc-tag{margin:0 0 14px;color:var(--muted);font-size:.95rem}
.calc-tag span{display:inline-block;margin-right:6px;padding:1px 8px;background:var(--yellow);color:var(--char);font:700 .8rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.calc-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.calc-form .wbf-f:last-child{margin-bottom:0}
.calc-h{display:block;margin-top:.3rem;color:var(--muted);font-size:.88rem}
.calc-ck label{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.calc-ck input{flex:none;width:22px;height:22px;margin-top:2px}
.calc-form input:focus-visible{outline:3px solid var(--char);outline-offset:2px}
.calc-out{background:var(--char);color:#fff;padding:20px 22px;border-radius:6px;box-shadow:6px 6px 0 var(--orange)}
.calc-out dl{margin:0}
.calc-out dl>div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-top:1px dashed #4A4F54}
.calc-out dl>div:first-child{border-top:0}
.calc-out dt{color:#C9CDD1}
.calc-out dd{margin:0;font:700 1rem var(--mono);text-align:right}
.calc-out dl>div.big{display:block;padding:0 0 10px}
.calc-out .big dt{font-weight:700}
.calc-out .big dd{margin:4px 0 0;font:800 clamp(2.2rem,6vw,3.2rem)/1 var(--display);color:var(--yellow);text-align:left}
.calc-m{margin:12px 0 0;padding-top:12px;border-top:1px solid #4A4F54;font-weight:700}
.calc-m.ok{color:#3DD27A}
.calc-m.warn{color:var(--yellow)}
.calc-m.err{color:#FF9A8F}
.calc-n{margin:14px 0 0;font-size:.92rem;color:var(--muted)}
@media (max-width:760px){.calc{padding:16px 16px 12px;box-shadow:4px 4px 0 var(--char)}.calc-g{grid-template-columns:minmax(0,1fr)}}