/* Результат калькулятора ИМТ */

.bmi-result {
  margin-top: 22px; padding: 20px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--bg-subtle);
}
.bmi-main { display: grid; gap: 20px; }
@media (min-width: 620px) { .bmi-main { grid-template-columns: auto 1fr; gap: 40px; } }

.bmi-value { margin: 2px 0 2px; font: 700 42px/1 var(--font-mono); }
.bmi-cat { margin: 0; font-size: var(--fs-sm); font-weight: 550; }
.bmi-range { margin: 2px 0 4px; font: 650 var(--fs-xl)/1.2 var(--font-mono); }
.bmi-delta { margin: 0; font-size: var(--fs-sm); }

.bmi-scale { margin-top: 26px; }

/* Границы зон должны совпадать с положением метки, иначе шкала врёт.
   Шкала линейная 16…40, значит: 18,5 → 10,42%, 25 → 37,5%,
   30 → 58,33%, 35 → 79,17%. Переходы резкие: это границы категорий,
   а не плавный переход одного состояния в другое. */
.bmi-scale-bar {
  position: relative; height: 10px; border-radius: 5px;
  background: linear-gradient(to right,
    #d9a441 0 10.42%,
    #17803d 10.42% 37.5%,
    #e07a00 37.5% 58.33%,
    #d64545 58.33% 79.17%,
    #a92020 79.17% 100%);
}

/* Метка — риска, а не кружок: кружок читается как ручка, которую можно
   потянуть, хотя шкала только показывает результат. */
.bmi-scale-bar span {
  position: absolute; top: -5px; width: 3px; height: 20px; border-radius: 2px;
  background: var(--text); box-shadow: 0 0 0 2px var(--bg);
  transform: translateX(-50%); transition: left .15s;
}

.bmi-scale-legend {
  position: relative; height: 16px; margin-top: 8px;
  font-size: 11px; color: var(--text-muted); font-family: var(--font-mono);
}
.bmi-scale-legend span {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
}
.bmi-scale-legend span:first-child { transform: none; left: 0; }
.bmi-scale-legend span:last-child { transform: none; right: 0; left: auto; }