/* assets/css/bmi-calculator.css
   Scoped to health/bmi-calculator.html and ar/health/bmi-calculator.html only.
   Kept out of the shared stylesheet so no other tool is affected. */

.bmi-unit-toggle{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 14px;}
.bmi-unit-toggle .chip-card{font-size:15.5px; padding:11px 8px;}

.bmi-height-imperial{display:flex; gap:8px;}
.bmi-height-imperial > div{flex:1;}

.bmi-asian-toggle{display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:500; font-size:15.5px; margin-top:12px; padding:10px 12px;}
.bmi-asian-toggle input{width:18px; height:18px; margin:0; accent-color:var(--health);}

.bmi-error{display:none; color:#B91C1C; font-weight:600; margin-top:10px; font-size:15.5px;}
[data-theme="dark"] .bmi-error{color:#FCA5A5;}

.bmi-category{font-size:19px; margin-top:2px;}
.bmi-category.cat-0{color:#2563EB;}
.bmi-category.cat-1{color:var(--health);}
.bmi-category.cat-2{color:#D97706;}
.bmi-category.cat-3{color:#DC2626;}
[data-theme="dark"] .bmi-category.cat-0{color:#60A5FA;}
[data-theme="dark"] .bmi-category.cat-2{color:#FBBF24;}
[data-theme="dark"] .bmi-category.cat-3{color:#F87171;}

.bmi-gauge{margin-top:16px;}
.bmi-gauge-track{position:relative; display:flex; width:100%; height:14px; border-radius:999px; overflow:hidden; background:var(--line);}
.bmi-gauge-seg{display:block; height:100%;}
.bmi-gauge-seg.seg-under{background:#93C5FD;}
.bmi-gauge-seg.seg-normal{background:var(--health);}
.bmi-gauge-seg.seg-over{background:#FBBF24;}
.bmi-gauge-seg.seg-obese{background:#F87171;}
.bmi-gauge-marker{position:absolute; top:-4px; inset-inline-start:0; width:4px; height:22px; margin-inline-start:-2px; background:var(--ink); border-radius:2px; box-shadow:0 0 0 2px var(--surface);}
.bmi-gauge-labels{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-top:6px;}

.bmi-range{margin-top:10px; font-weight:500; font-size:15.5px; color:var(--muted);}
.bmi-asian-note{display:none; margin-top:10px; font-size:15px; background:var(--health-bg); color:var(--health); border-radius:10px; padding:9px 12px;}

@media (max-width:480px){
  .bmi-gauge-labels{font-size:11.5px;}
}