/* BMI gauge: a 15–40 scale split into WHO bands, with a marker for the result. */
.bmi-gauge { position: relative; padding: 18px 4px 4px; }
.bmi-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bmi-bar span { display: block; height: 100%; }
.bmi-bar .b-under { flex: 3.5; background: #5aa2ff; }
.bmi-bar .b-ok { flex: 6.5; background: #22b07d; }
.bmi-bar .b-over { flex: 5; background: #f5b84d; }
.bmi-bar .b-ob1 { flex: 5; background: #f08a4b; }
.bmi-bar .b-ob2 { flex: 5; background: #e0525f; }
.bmi-marker-track { position: absolute; left: 4px; right: 4px; top: 0; height: 36px; pointer-events: none; }
.bmi-marker { position: absolute; top: 2px; width: 0; height: 0; transform: translateX(-8px); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--ink); transition: left 0.25s ease; }
.bmi-ticks { position: relative; height: 20px; margin-top: 4px; font-size: 0.75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bmi-ticks span { position: absolute; transform: translateX(-50%); }
.bmi-ticks span:first-child { transform: none; }
.bmi-ticks span:last-child { transform: translateX(-100%); }
.bmi-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.bmi-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
#bmi-result[data-tone='under'] #bmi-cat { color: #2f7cf6; }
#bmi-result[data-tone='ok'] #bmi-cat { color: var(--ok); }
#bmi-result[data-tone='over'] #bmi-cat { color: var(--warn); }
#bmi-result[data-tone='ob1'] #bmi-cat, #bmi-result[data-tone='ob2'] #bmi-cat, #bmi-result[data-tone='ob3'] #bmi-cat { color: var(--err); }
:root[data-theme='dark'] #bmi-result[data-tone='under'] #bmi-cat { color: #7fb6ff; }