/* ===========================================================
   Reconstitution & Dosing Calculator — component styles
   Built on top of the shared design tokens in style.css
   =========================================================== */

.calc-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  padding:24px 0 8px;align-items:start;
}
.calc-card{
  background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:26px 28px;
}
.calc-card-title{
  font-family:var(--font-head);font-size:15.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  margin:26px 0 16px;color:var(--ink-900);
}
.calc-card-title:first-child{margin-top:0;}

.calc-field{margin-bottom:20px;}
.calc-field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-700);margin-bottom:8px;}

.calc-input-group{
  display:flex;align-items:center;gap:10px;
  background:var(--paper-50);border:1px solid var(--border);border-radius:10px;
  padding:4px 8px 4px 16px;
}
.calc-input-group input{
  border:none;background:transparent;font-size:16px;font-family:var(--font-body);
  width:100%;padding:11px 0;color:var(--ink-900);outline:none;
}
.calc-input-group input::-webkit-outer-spin-button,
.calc-input-group input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.calc-input-group input[type=number]{-moz-appearance:textfield;}
.calc-suffix{font-size:13px;font-weight:700;color:var(--ink-500);white-space:nowrap;padding-right:6px;}

.pill-toggle{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.pill-toggle button{
  padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:#fff;
  font-size:13.5px;font-weight:700;color:var(--ink-700);cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
  font-family:var(--font-body);
}
.pill-toggle button:hover{border-color:var(--teal-500);}
.pill-toggle button.active{background:var(--teal-700);border-color:var(--teal-700);color:#fff;}
.pill-toggle button small{font-weight:600;opacity:.85;}
.pill-toggle.small{margin:0;flex-shrink:0;}
.pill-toggle.small button{padding:8px 14px;}
.pill-toggle.wide button{flex:1;text-align:center;}

.calc-hint{font-size:12.5px;color:var(--ink-500);margin:8px 0 0;}

.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.result-box{background:var(--paper-50);border:1px solid var(--border);border-radius:12px;padding:16px 18px;}
.result-box-hero{grid-column:1 / -1;background:var(--teal-100);border-color:var(--teal-500);text-align:center;padding:22px;}
.result-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);margin-bottom:6px;}
.result-value{font-family:var(--font-head);font-size:21px;font-weight:700;color:var(--ink-900);}
.result-value.big{font-size:42px;color:var(--teal-700);}

.syringe-wrap{background:var(--paper-50);border:1px solid var(--border);border-radius:12px;padding:18px 12px 10px;margin-top:4px;}
.syringe-wrap svg{width:100%;height:auto;display:block;}

@media (max-width:960px){
  .calc-layout{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .result-grid{grid-template-columns:1fr;}
  .calc-card{padding:20px;}
}