/* ── tool-bmi.css — стили статьи-инструмента «Индекс массы тела» ──
   Переиспользует pa-* из calc-phenoage.css; здесь только bmi-специфика. */

/* Проза — на всю ширину контейнера, как .pa-lead в остальных статьях */
.bmi-prose { margin: 0 0 8px; }
.bmi-prose p { color: var(--v2-ink-2); line-height: 1.72; margin: 0 0 16px; }
.bmi-prose a { color: var(--v2-link); text-decoration: underline; text-underline-offset: 2px; }

.bmi-list { margin: 0 0 16px; padding-left: 22px; color: var(--v2-ink-2); line-height: 1.72; }
.bmi-list li { margin: 0 0 8px; }
.bmi-list strong { color: var(--v2-ink); }

/* Формула */
.bmi-formula {
  margin: 0 0 28px; padding: 28px 24px;
  background: var(--v2-surface); border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg); text-align: center;
}
.bmi-formula__expr {
  font-family: var(--v2-font-display, inherit);
  font-size: clamp(1.4rem, 4vw, 2rem); color: var(--v2-ink);
  display: inline-flex; align-items: center; gap: 14px; justify-content: center;
}
.bmi-formula__frac { display: inline-flex; flex-direction: column; text-align: center; font-size: .8em; }
.bmi-formula__frac span:first-child { border-bottom: 2px solid var(--v2-ink-3); padding: 0 12px 4px; }
.bmi-formula__frac span:last-child { padding: 4px 12px 0; }
.bmi-formula__note { margin-top: 16px; color: var(--v2-ink-3); font-size: .95rem; }
.bmi-formula__note strong { color: var(--v2-brand); }

/* Как измерять — 3 карточки */
.bmi-measure {
  margin: 0 0 28px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.bmi-measure__item {
  display: flex; gap: 14px; padding: 18px;
  background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius);
}
.bmi-measure__icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 24px;
  background: rgba(22, 200, 200, .12); color: var(--v2-brand);
}
.bmi-measure__title { font-weight: 600; color: var(--v2-ink); margin-bottom: 4px; }
.bmi-measure__opt { font-weight: 400; font-size: .78rem; color: var(--v2-brand); margin-left: 4px; }
.bmi-measure__body p { margin: 0; color: var(--v2-ink-3); font-size: .9rem; line-height: 1.5; }

/* Чекбокс «азиат» */
.bmi-check {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 8px;
  color: var(--v2-ink-2); font-size: .95rem; cursor: pointer;
}
.bmi-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--v2-brand); flex: none; }
.bmi-check__hint { color: var(--v2-ink-3); }

/* Категории ВОЗ */
.bmi-cats { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.bmi-cat {
  display: grid; grid-template-columns: 120px 1fr; gap: 4px 18px;
  padding: 14px 18px 14px 20px; position: relative;
  background: var(--v2-surface); border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius); border-left: 4px solid var(--v2-ink-3);
}
.bmi-cat__range { font-weight: 700; color: var(--v2-ink); grid-row: span 2; align-self: center; }
.bmi-cat__name { font-weight: 600; color: var(--v2-ink); }
.bmi-cat__desc { color: var(--v2-ink-3); font-size: .9rem; line-height: 1.5; }
.bmi-cat[data-risk="under2"] { border-left-color: #1e40af; }
.bmi-cat[data-risk="under1"] { border-left-color: #3b82f6; }
.bmi-cat[data-risk="ok"]     { border-left-color: #16a34a; }
.bmi-cat[data-risk="over"]   { border-left-color: #d97706; }
.bmi-cat[data-risk="ob1"]    { border-left-color: #ea580c; }
.bmi-cat[data-risk="ob2"]    { border-left-color: #dc2626; }
.bmi-cat[data-risk="ob3"]    { border-left-color: #991b1b; }

/* Инфо-плашка */
.bmi-note {
  margin: 0 0 8px; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; background: var(--v2-bg-alt); border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius); color: var(--v2-ink-2); font-size: .92rem; line-height: 1.55;
}
.bmi-note .material-symbols-outlined { color: var(--v2-brand); flex: none; }

/* Таблицы */
.bmi-table-wrap { margin: 0 0 24px; overflow-x: auto; }
.bmi-table {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); overflow: hidden;
}
.bmi-table th, .bmi-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--v2-border); }
.bmi-table thead th { background: var(--v2-bg-alt); color: var(--v2-ink); font-weight: 600; }
.bmi-table tbody tr:last-child td, .bmi-table tr:last-child td { border-bottom: none; }
.bmi-table td { color: var(--v2-ink-2); }

/* Бейджи риска */
.bmi-risk { display: inline-block; padding: 3px 10px; border-radius: var(--v2-radius-pill); font-size: .82rem; font-weight: 600; }
.bmi-risk--ok { background: rgba(22,163,74,.12);  color: #15803d; }
.bmi-risk--m  { background: rgba(217,119,6,.14);  color: #b45309; }
.bmi-risk--h  { background: rgba(234,88,12,.14);  color: #c2410c; }
.bmi-risk--vh { background: rgba(220,38,38,.14);  color: #b91c1c; }

/* Внутренние изображения */
.bmi-figure { max-width: 820px; margin: 0 auto 24px; }
.bmi-figure img { width: 100%; height: auto; border-radius: var(--v2-radius-lg); display: block; }
.bmi-figure figcaption { margin-top: 10px; color: var(--v2-ink-3); font-size: .88rem; text-align: center; }

/* Фазы */
.bmi-phases { margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bmi-phase {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
  background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius);
  color: var(--v2-ink-2); line-height: 1.55; font-size: .92rem;
}
.bmi-phase strong { color: var(--v2-ink); }
.bmi-phase__num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  background: rgba(22,200,200,.12); color: var(--v2-brand);
}

/* Ошибки интерпретации */
.bmi-myths { margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bmi-myth { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); overflow: hidden; }
.bmi-myth__bad {
  padding: 12px 16px; color: var(--v2-ink); font-weight: 600; font-size: .92rem;
  background: rgba(220,38,38,.06); border-bottom: 1px solid var(--v2-border);
  position: relative; padding-left: 40px;
}
.bmi-myth__bad::before {
  content: 'close'; font-family: 'Material Symbols Outlined'; position: absolute; left: 14px; top: 12px;
  color: #dc2626; font-size: 18px;
}
.bmi-myth__good {
  padding: 12px 16px 12px 40px; color: var(--v2-ink-2); font-size: .9rem; line-height: 1.55; position: relative;
}
.bmi-myth__good::before {
  content: 'check'; font-family: 'Material Symbols Outlined'; position: absolute; left: 14px; top: 12px;
  color: #15803d; font-size: 18px;
}

/* Углублённая оценка — наши метрики (SBMI + коэффициент смертности) */
.bmi-deep { margin: 28px 0 8px; }
.bmi-deep__title { font-weight: 700; color: var(--v2-ink); margin-bottom: 14px; font-size: 1.05rem; }
.bmi-deep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bmi-deep__card {
  padding: 20px 22px; background: var(--v2-surface);
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius); border-top: 3px solid var(--v2-brand);
}
.bmi-deep__label { color: var(--v2-ink-2); font-size: .92rem; font-weight: 600; margin-bottom: 8px; }
.bmi-deep__value { font-family: var(--v2-font-display, inherit); font-size: 2.2rem; font-weight: 700; color: var(--v2-ink); line-height: 1; }
.bmi-deep__unit { font-size: .9rem; font-weight: 500; color: var(--v2-ink-3); }
.bmi-deep__band { display: inline-block; margin: 12px 0 10px; }
.bmi-deep__hint { color: var(--v2-ink-3); font-size: .82rem; line-height: 1.5; }
@media (max-width: 560px) { .bmi-deep__grid { grid-template-columns: 1fr; } }

/* Результат: цвет категории-пилюли и значения риска по талии */
.bmi-pill { color: #fff !important; border: none !important; }
.bmi-pill--ok { background: #16a34a !important; }
.bmi-pill--m  { background: #d97706 !important; }
.bmi-pill--h  { background: #ea580c !important; }
.bmi-pill--vh { background: #dc2626 !important; }
.bmi-riskval--ok { color: #15803d; }
.bmi-riskval--m  { color: #b45309; }
.bmi-riskval--h  { color: #c2410c; }
.bmi-rec-extra { margin-top: 10px !important; }

/* Связанные инструменты идут ПОСЛЕ источников (на всех ширинах) */
.bmi-tail { display: flex; flex-direction: column; }
.bmi-tail__sources { order: 1; }
.bmi-tail__related { order: 2; }

/* Шкала ИМТ — цветной градиент 16..40 */
.pa-scale__bar--bmi {
  background: linear-gradient(90deg,
    #3b82f6 0%, #16a34a 14%, #16a34a 38%,
    #d97706 38%, #ea580c 58%, #dc2626 78%, #991b1b 100%) !important;
}

/* Адаптив */
@media (max-width: 760px) {
  .bmi-measure, .bmi-phases, .bmi-myths { grid-template-columns: 1fr; }
  .bmi-cat { grid-template-columns: 1fr; }
  .bmi-cat__range { grid-row: auto; }
}

/* Мобильные таблицы: стопка «метка → значение», без горизонтального скролла */
@media (max-width: 640px) {
  .bmi-table-wrap { overflow-x: visible; }
  .bmi-table { border-radius: var(--v2-radius); }
  .bmi-table thead { display: none; }
  .bmi-table, .bmi-table tbody { display: block; }
  .bmi-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--v2-border); }
  .bmi-table tr:last-child { border-bottom: none; }
  .bmi-table td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    border: none; padding: 5px 16px; text-align: right;
  }
  .bmi-table td::before {
    font-weight: 600; color: var(--v2-ink); text-align: left; flex: 0 0 40%;
  }
  .bmi-table--sbmi   td:nth-child(1)::before { content: 'SBMI, баллы'; }
  .bmi-table--sbmi   td:nth-child(2)::before { content: 'Категория'; }
  .bmi-table--sbmi   td:nth-child(3)::before { content: 'Риск'; }
  .bmi-table--waist  td:nth-child(1)::before { content: 'Уровень'; }
  .bmi-table--waist  td:nth-child(2)::before { content: 'Мужчины'; }
  .bmi-table--waist  td:nth-child(3)::before { content: 'Женщины'; }
  .bmi-table--bioage td:nth-child(1)::before { content: 'Категория ИМТ'; }
  .bmi-table--bioage td:nth-child(2)::before { content: 'Влияние'; }
  .bmi-table--bioage td:nth-child(3)::before { content: 'Механизм'; }
  .bmi-table--bioage td:nth-child(4)::before { content: 'Обратимость'; }
}

/* ── Мобильный вид: всё по центру, кроме таблиц и источников; связанные после источников ── */
@media (max-width: 768px) {
  /* Заголовки секций */
  .v2-after-hero .pa-h2 { text-align: center; }

  /* Hero */
  .pa-hero__text { text-align: center; }
  .pa-hero__title, .pa-hero__lead { margin-left: auto; margin-right: auto; }
  .pa-hero__crumbs { justify-content: center; }
  .pa-hero__meta { justify-content: center; }

  /* Текстовые блоки (структурные карточки с иконками/графикой НЕ центрируем:
     bmi-measure, bmi-cat, bmi-phase, bmi-myth, bmi-note — остаются как на десктопе) */
  .bmi-prose, .bmi-formula, .bmi-figure figcaption,
  .bmi-deep__title, .bmi-deep__card { text-align: center; }

  /* Списки — маркер внутри, по центру */
  .bmi-list { list-style-position: inside; padding-left: 0; text-align: center; }
}
