/* BMI calculator: fields use the site's .form-group / .form-label / .form-input; only the calculator-specific bits live here */
.pin-bmi-wrap { --fg: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-muted); --bg2: var(--bg-white); --bg3: var(--bg-light); --bg4: var(--border-color); --border: var(--border-color); --c-normal: var(--success-color); --c-over: #e8b840; --fs: var(--wp--preset--font-size--large-s); padding-top: var(--wp--preset--spacing--80, 48px); }
.pin-bmi-wrap *, .pin-bmi-wrap *::before, .pin-bmi-wrap *::after { box-sizing: border-box; }

/* card = core Group > Columns > 2 Columns */
.pin-bmi-wrap .pin-bmi-calc { gap: 0; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 64px; }
.pin-bmi-wrap .form-col { padding: 2rem; border-right: 1px solid var(--border-color); }
.pin-bmi-wrap .viz-col { font-size: var(--fs); padding: 2rem; display: flex; flex-direction: column; align-items: center; }
@media (max-width: 781px) { .pin-bmi-wrap .form-col { border-right: none; border-bottom: 1px solid var(--border-color); } }

/* fields */
.pin-bmi-wrap .form-col > * { margin-block: 0; }
.pin-bmi-wrap .form-col > .form-group { margin-bottom: 1.25rem; }
.pin-bmi-wrap .form-col > .form-group:last-child { margin-bottom: 0; }
.pin-bmi-wrap .form-label { text-transform: none; font-size: 1rem; margin-bottom: 0.4rem; }
.pin-bmi-wrap .form-input { width: 100%; }
.pin-bmi-wrap .two-inp { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pin-bmi-wrap .eth-note { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.5rem; }
.pin-bmi-wrap .age-warning { display: none; margin-top: 0.5rem; border-left: 2px solid var(--c-over); padding: 0.5rem 0.75rem; color: var(--text-secondary); font-size: 0.875rem; }
.pin-bmi-wrap .age-warning.show { display: block; }

/* toggles */
.pin-bmi-wrap .unit-toggle { display: inline-flex; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 100px; padding: 3px; margin-bottom: 0; }
.pin-bmi-wrap .toggle-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.pin-bmi-wrap .utbtn { font-size: var(--fs); padding: 0.35rem 1rem; border-radius: 100px; border: none; cursor: pointer; background: transparent; color: var(--text-secondary); }
.pin-bmi-wrap .utbtn.on { background: var(--bg-white); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.pin-bmi-wrap .pill-row { display: flex; gap: 0.5rem; }
.pin-bmi-wrap .pill-btn { padding: 0.5rem 1.25rem; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; color: var(--text-primary); user-select: none; }
.pin-bmi-wrap .pill-btn.on { background: var(--text-primary); color: var(--bg-white); border-color: var(--text-primary); }

/* result */
.pin-bmi-wrap .gauge-wrap { width: 100%; max-width: 420px; margin-bottom: 2px; }
.pin-bmi-wrap .gauge-wrap svg { width: 100%; display: block; overflow: visible; }
.pin-bmi-wrap .cat-legend { width: 100%; display: flex; flex-direction: column; gap: 2px; margin-bottom: 1.25rem; }
.pin-bmi-wrap .cat-row { display: flex; align-items: center; gap: 10px; color: var(--text-muted); padding: 4px 0; }
.pin-bmi-wrap .cat-row.active { color: var(--text-primary); }
.pin-bmi-wrap .cat-swatch { width: 18px; height: 2px; border-radius: 1px; flex-shrink: 0; opacity: .4; }
.pin-bmi-wrap .cat-row.active .cat-swatch { opacity: 1; height: 3px; }
.pin-bmi-wrap .cat-name { flex: 1; }
.pin-bmi-wrap .cat-range { font-variant-numeric: tabular-nums; }
.pin-bmi-wrap .info-box { width: 100%; border-top: 1px solid var(--border-color); padding-top: 1rem; color: var(--text-secondary); line-height: 1.6; }

/* unit suffix sits in the right padding the site's .form-input already reserves */
.pin-bmi-wrap .inp-wrap { position: relative; }
.pin-bmi-wrap .inp-wrap .form-input { padding-right: 3.25rem; }
.pin-bmi-wrap .inp-unit { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.875rem; pointer-events: none; }