/* =====================================================
   Калькуляторы состава тела: процент жира
   (/food/kalkulyator-procenta-zhira) и сухая масса (/food/suhaya-massa-tela).
   Поля виджета — landing_calc.css, раскладка страницы и карточки —
   food_calc.css. Здесь только то, чего у калькулятора калорий нет:
   обхваты, большое число результата, шкала нормы и строки состава.
   ===================================================== */

.fb-girths, .fb-known { display: grid; gap: 6px; }
.fb-girths[hidden], .fb-known[hidden], .calc-num[hidden], .fb-msg[hidden] { display: none; }
.fb-known .calc-num > span { white-space: normal; }
.fb-howto {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  padding-left: 4px; font-size: 12.5px; font-weight: 650; color: var(--primary-600);
}
.fb-howto [data-lucide] { font-size: 14px; }
.fb-msg { color: var(--primary-600); font-weight: 650; }

/* -------- Результат -------- */
.fb-main { display: grid; justify-items: center; gap: 2px; padding-top: 4px; }
.fb-main-num {
  font-size: 46px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.fb-main-cap { font-size: 13px; color: var(--text-2); }

/* Шкала 5–50 % жира: тонкая дорожка, зона нормы карамелью, отметка точкой.
   Один цвет, без светофора (пёстрая шкала читается тревожно). */
.fb-scale {
  position: relative; height: 10px; border-radius: var(--r-pill);
  background: var(--bg-2); border: 1.5px solid var(--line);
}
.fb-scale-norm {
  position: absolute; top: 0; bottom: 0; left: var(--norm-from, 30%);
  width: calc(var(--norm-to, 60%) - var(--norm-from, 30%));
  background: color-mix(in srgb, var(--primary) 45%, transparent); border-radius: var(--r-pill);
}
.fb-scale-mark {
  position: absolute; top: 50%; left: var(--mark, 50%); width: 18px; height: 18px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--text); border: 3px solid var(--card);
  transition: left 0.6s var(--ease);
}
.fb-band-line { display: grid; justify-items: center; gap: 2px; text-align: center; font-size: 13px; color: var(--text-2); }
.fb-band { font-size: 17px; color: var(--primary-600); }

.fb-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; }
.fb-rows li {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-2); font-size: 12.5px; color: var(--text-2);
}
.fb-rows b { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.fb-keep { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.fb-keep [data-lucide] { flex: none; margin-top: 1px; font-size: 16px; color: var(--primary-600); }
.fb-keep[hidden], .calc-tdee[hidden] { display: none; }

/* -------- Страница -------- */
.fb-measure { margin-top: 0; }
@media (min-width: 900px) { .fb-measure { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fb-examples { display: grid; gap: 12px; list-style: none; }
@media (min-width: 900px) { .fb-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fb-examples > li { display: grid; align-content: start; gap: 10px; padding: 18px 20px; }
.fb-ex-girths { margin-top: -4px; font-size: 13.5px; color: var(--text-3); }
.fb-ways > li > span:last-child { font-size: 14px; line-height: 1.45; color: var(--text-2); }

.fb-more { margin-top: 12px; padding: 0; }
.fb-more > summary {
  padding: 14px 18px; cursor: pointer; font-size: 15px; font-weight: 700; list-style-position: inside;
}
.fb-more-body { display: grid; gap: 10px; padding: 0 18px 16px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.fb-more-body b { color: var(--text); }