/* =========================
   BMI Scale visual indicator
========================= */

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

.bmi-scale__track {
    position: relative;
    display: flex;
    height: 16px;
    border-radius: 999px;
    overflow: visible;
}

.bmi-scale__segment {
    height: 100%;
}

.bmi-scale__segment--under {
    flex: 2.5;
    background: #60a5fa;
    border-radius: 999px 0 0 999px;
}

.bmi-scale__segment--normal {
    flex: 6.4;
    background: #34d399;
}

.bmi-scale__segment--over {
    flex: 5;
    background: #fbbf24;
}

.bmi-scale__segment--obese {
    flex: 10;
    background: #f87171;
    border-radius: 0 999px 999px 0;
}

.bmi-scale__marker {
    position: absolute;
    top: -6px;
    width: 4px;
    height: 28px;
    background: #1f2f55;
    border-radius: 2px;
    left: 0%;
    transform: translateX(-50%);
    transition: left 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.bmi-scale__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 700;
    padding: 0 2px;
}

.bmi-scale__labels span:nth-child(2) {
    margin-left: -6%;
}

.bmi-scale__labels span:nth-child(3) {
    margin-left: 8%;
}

.bmi-scale__labels span:nth-child(4) {
    margin-left: 3%;
}