/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — BMI Calculator — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Unit toggle: metric / imperial switch ───────────────────────────────── */
.unit-toggle {
    display:         flex;
    align-items:     center;
    gap:             0;
    background:      var(--bg);
    border:          1.5px solid var(--border);
    border-radius:   999px;
    padding:         3px;
    width:           fit-content;
    margin-bottom:   1.5rem;
}

.unit-toggle-btn {
    padding:         0.4rem 1.25rem;
    border:          none;
    background:      transparent;
    border-radius:   999px;
    font-size:       0.875rem;
    font-weight:     600;
    color:           var(--muted);
    cursor:          pointer;
    transition:      background 0.18s, color 0.18s;
    line-height:     1.4;
}

.unit-toggle-btn.active {
    background:      var(--accent);
    color:           #fff;
}

.unit-toggle-btn:not(.active):hover {
    background:      #f0ede8;
    color:           var(--text);
}

/* ── BMI input grid ──────────────────────────────────────────────────────── */
.bmi-inputs {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             1rem;
    margin-bottom:   1rem;
}

@media (max-width: 480px) {
    .bmi-inputs {
        grid-template-columns: 1fr;
    }
}

.bmi-input-group {
    display:         flex;
    flex-direction:  column;
    gap:             0.375rem;
}

.bmi-input-group label {
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--muted);
    text-transform:  uppercase;
    letter-spacing:  0.04em;
}

.bmi-input-group .input-with-unit {
    display:         flex;
    align-items:     center;
    border:          1.5px solid var(--border);
    border-radius:   8px;
    overflow:        hidden;
    background:      #fff;
    transition:      border-color 0.18s;
}

.bmi-input-group .input-with-unit:focus-within {
    border-color:    var(--accent);
}

.bmi-input-group .input-with-unit input {
    flex:            1;
    border:          none;
    outline:         none;
    padding:         0.65rem 0.75rem;
    font-size:       1rem;
    font-family:     'IBM Plex Sans', sans-serif;
    font-weight:     500;
    color:           var(--text);
    background:      transparent;
    min-width:       0;
}

.bmi-input-group .input-with-unit .unit-label {
    padding:         0 0.75rem;
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--muted);
    background:      var(--bg);
    border-left:     1.5px solid var(--border);
    align-self:      stretch;
    display:         flex;
    align-items:     center;
    white-space:     nowrap;
}

/* ── Imperial height: two inputs side by side ────────────────────────────── */
.height-imperial {
    display:         flex;
    gap:             0.5rem;
}

.height-imperial .input-with-unit {
    flex:            1;
}

/* ── BMI Result display ──────────────────────────────────────────────────── */
.bmi-result {
    margin-top:      1.5rem;
    padding:         1.5rem;
    border-radius:   14px;
    background:      var(--bg);
    border:          1.5px solid var(--border);
    text-align:      center;
    animation:       bmi-fadein 0.3s ease;
}

@keyframes bmi-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bmi-number {
    font-family:     'IBM Plex Serif', serif;
    font-size:       3.5rem;
    line-height:     1;
    margin-bottom:   0.5rem;
    font-weight:     400;
}

.bmi-badge {
    display:         inline-block;
    padding:         0.3rem 1.1rem;
    border-radius:   999px;
    font-size:       0.875rem;
    font-weight:     700;
    letter-spacing:  0.03em;
    margin-bottom:   1rem;
}

/* Badge colour variants */
.bmi-badge.underweight  { background: #dbeafe; color: #1d4ed8; }
.bmi-badge.normal       { background: #dcfce7; color: #15803d; }
.bmi-badge.overweight   { background: #ffedd5; color: #c2410c; }
.bmi-badge.obese        { background: #fee2e2; color: #b91c1c; }

/* BMI number colour variants */
.bmi-number.underweight  { color: #1d4ed8; }
.bmi-number.normal       { color: #15803d; }
.bmi-number.overweight   { color: #c2410c; }
.bmi-number.obese        { color: #b91c1c; }

.bmi-ideal-range {
    font-size:       0.9375rem;
    color:           var(--muted);
    margin-top:      0.75rem;
}

.bmi-ideal-range strong {
    color:           var(--text);
}

.bmi-source-note {
    font-size:       0.75rem;
    color:           var(--muted);
    margin-top:      1rem;
    font-style:      italic;
}

/* ── BMI scale bar ───────────────────────────────────────────────────────── */
.bmi-scale {
    display:         flex;
    height:          8px;
    border-radius:   999px;
    overflow:        hidden;
    margin:          1rem 0 0.375rem;
    gap:             2px;
}

.bmi-scale-seg {
    flex:            1;
    border-radius:   2px;
}

.bmi-scale-seg.underweight  { background: #93c5fd; flex: 1.5; }
.bmi-scale-seg.normal       { background: #86efac; flex: 1.8; }
.bmi-scale-seg.overweight   { background: #fdba74; flex: 1.8; }
.bmi-scale-seg.obese        { background: #fca5a5; flex: 2; }

.bmi-scale-labels {
    display:         flex;
    justify-content: space-between;
    font-size:       0.6875rem;
    color:           var(--muted);
    font-weight:     600;
    margin-bottom:   0.5rem;
}

/* ── Disclaimer banner ───────────────────────────────────────────────────── */
.bmi-disclaimer {
    margin-top:      1rem;
    padding:         0.75rem 1rem;
    border-radius:   8px;
    background:      #fffbeb;
    border-left:     3px solid #f59e0b;
    font-size:       0.8125rem;
    color:           #78350f;
    text-align:      left;
}

/* ── Error message ───────────────────────────────────────────────────────── */
.bmi-error {
    color:           #b91c1c;
    font-size:       0.875rem;
    margin-top:      0.5rem;
    font-weight:     500;
}

/* cache-buster: 2026-05-24T05:06:05Z */