/* ============ CALCULATOR TOOL ============ */
.calc-shell{ max-width:1080px; margin:0 auto; padding:0 1.75rem 2rem; }
.calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
@media (max-width:840px){ .calc-grid{ grid-template-columns:1fr; } }

.calc-card{
  background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:2rem 2rem 2.25rem;
}
.calc-field{ margin-bottom:1.25rem; }
.calc-field label, .calc-field .field-label{ display:block; font-size:.8rem; font-weight:700; color:var(--text3); letter-spacing:.02em; margin-bottom:.5rem; text-transform:uppercase; }
.calc-input-row{ display:flex; align-items:center; gap:.6rem; }
.calc-input-row input[type="number"]{
  flex:1; background:var(--surface-el); border:1px solid var(--border-l); color:var(--text1);
  font-family:var(--display); font-weight:700; font-size:1.15rem; padding:.7rem .9rem; border-radius:10px;
  font-variant-numeric:tabular-nums; width:100%;
}
.calc-input-row input[type="number"]:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.calc-stepper{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border-radius:10px; flex-shrink:0;
  background:var(--surface-el); border:1px solid var(--border-l); color:var(--text1);
  font-size:1.2rem; font-weight:700; cursor:pointer; transition:border-color .15s;
}
.calc-stepper:hover{ border-color:var(--primary); }
.calc-target-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.calc-target-btn{
  flex:1; min-width:64px; text-align:center;
  background:var(--surface-el); border:1px solid var(--border-l); color:var(--text2);
  font-weight:700; font-size:.9rem; padding:.6rem .5rem; border-radius:10px;
  cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.calc-target-btn.active{ border-color:var(--primary); color:var(--text1); background:rgba(108,99,255,.14); }

.calc-result{
  background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:2.25rem 2rem; text-align:center;
}
.ring-shell{ position:relative; width:180px; height:180px; margin:0 auto 1.25rem; }
.ring-track{
  width:100%; height:100%; border-radius:50%;
  background:conic-gradient(var(--ring-color,var(--success)) calc(var(--pct,90)*1%), var(--surface-el) 0);
  transition:background .4s ease;
  display:flex; align-items:center; justify-content:center;
}
.ring-hole{ width:76%; height:76%; border-radius:50%; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-hole .pct{ font-family:var(--display); font-weight:800; font-size:2.2rem; color:var(--text1); line-height:1 }
.ring-hole .status{ font-size:.7rem; font-weight:800; letter-spacing:.08em; margin-top:.35rem; color:var(--ring-color,var(--success)) }
.calc-msg{ font-size:1.05rem; font-weight:700; color:var(--text1); margin-bottom:1.25rem; min-height:1.4em; }
.calc-counts{ font-size:.82rem; color:var(--text3); }
.calc-counts b{ color:var(--text2) }

/* ============ ARTICLE PROSE (shared by tool explainer + blog posts) ============ */
.prose{ max-width:720px; margin:0 auto; padding:0 1.75rem; }
.prose h2{
  font-family:var(--display); font-weight:800; font-size:1.4rem; color:var(--text1);
  letter-spacing:-.01em; margin:2.5rem 0 1rem;
}
.prose h3{ font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--text1); margin:1.75rem 0 .75rem; }
.prose p{ font-size:1rem; color:var(--text2); margin-bottom:1.1rem; }
.prose p.lead{ font-size:1.1rem; color:var(--text1); }
.prose ul, .prose ol{ margin:0 0 1.1rem 1.25rem; color:var(--text2); }
.prose li{ margin-bottom:.5rem; }
.prose strong{ color:var(--text1); }
.prose code{ background:var(--surface-el); border:1px solid var(--border-l); border-radius:4px; padding:.1rem .4rem; font-size:.9em; }
.prose .formula{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:1.25rem 1.5rem; margin:1.5rem 0; text-align:center;
  font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--primary-l);
}
.prose table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.92rem; }
.prose th, .prose td{ text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--border); }
.prose th{ color:var(--text1); font-weight:700; }
.prose td{ color:var(--text2); }