/* Page-specific components for Views/BMI/Index.cshtml. Shared chrome/tokens
   (card-grid, field-input, etc.) live in site-theme.css. One-off category
   colors below are scoped to this page — the shared palette only has a
   brand green and an error red, not a full traffic-light set. */

:root{
  --bmi-under:#3b7dd8;
  --bmi-under-bg:#e5eefa;
  --bmi-normal:#4d7c2a;
  --bmi-normal-bg:#e4efd8;
  --bmi-over:#c07a12;
  --bmi-over-bg:#faf0dc;
  --bmi-obese:#c5292b;
  --bmi-obese-bg:#fbdedd;
}

.bmi-calc-card{background:var(--color-surface);border:1px solid rgba(var(--color-ink-rgb),0.09);border-radius:28px;padding:clamp(24px,3.4vw,40px);box-shadow:0 12px 32px rgba(46,43,37,0.1)}
.bmi-calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px 20px}

.bmi-result{margin-top:28px;padding-top:28px;border-top:1px solid rgba(var(--color-ink-rgb),0.09);display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.bmi-result-value{font-family:Georgia,serif;font-size:clamp(40px,6vw,54px);line-height:1;color:var(--color-ink)}
.bmi-result-value.placeholder{color:var(--color-text-quiet)}
.bmi-result-category{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:800;padding:7px 16px;border-radius:999px}
.bmi-result-hint{flex-basis:100%;font-size:14px;color:var(--color-text-quiet)}

.bmi-gauge{margin-top:22px}
.bmi-gauge-marker-row{position:relative;height:16px}
.bmi-gauge-marker{position:absolute;bottom:0;transform:translateX(-50%);font-size:15px;color:var(--color-ink);transition:left 0.25s ease;opacity:0}
.bmi-gauge-marker.show{opacity:1}
.bmi-gauge-track{display:flex;height:12px;border-radius:999px;overflow:hidden;gap:2px}
.bmi-gauge-seg{height:100%}
.bmi-gauge-labels{display:flex;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--color-text-quiet)}
.bmi-gauge-labels span{position:relative}

.bmi-category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin-top:38px}
.bmi-category-card{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:20px;border:1px solid rgba(var(--color-ink-rgb),0.08)}
.bmi-category-card.is-active{box-shadow:0 0 0 2px currentColor inset}
.bmi-category-label{font-size:14.5px;font-weight:800}
.bmi-category-range{font-size:13px;color:var(--color-text-quiet)}

.bmi-category-card.under{background:var(--bmi-under-bg);color:var(--bmi-under)}
.bmi-category-card.normal{background:var(--bmi-normal-bg);color:var(--bmi-normal)}
.bmi-category-card.over{background:var(--bmi-over-bg);color:var(--bmi-over)}
.bmi-category-card.obese{background:var(--bmi-obese-bg);color:var(--bmi-obese)}
.bmi-category-card .bmi-category-label,.bmi-category-card .bmi-category-range{color:inherit}
.bmi-category-range{opacity:0.78}

.bmi-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(24px,3vw,40px);margin-top:38px}
.bmi-info-grid h3{font-family:Georgia,serif;font-size:20px;line-height:1.2;letter-spacing:-0.01em;margin-bottom:12px}
.bmi-info-grid p{font-size:15px;line-height:1.6;color:var(--color-text-secondary)}
.bmi-info-grid ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.bmi-info-grid li{font-size:15px;line-height:1.5;display:flex;gap:9px;color:var(--color-text-secondary)}
.bmi-info-bullet{color:var(--color-brand-dark);font-weight:800;flex-shrink:0}