/* ============================================================
   Статья «Ранняя диагностика: скрытые дефициты»
   (slug rannyaya-diagnostika-skrityye-defitsity) — v2, поверх
   calc-phenoage.css + article-iron.css.
   Принцип палитры: цвет только смысловой (шкала тяжести B12),
   декоративные иконки — единый индиго. Карта дефицитов —
   element-плитки (Fe/Ca/D…) + пикто-иконка в раскрытом теле.
   ============================================================ */

.v2-after-hero .med-term { color: var(--v2-ink); }

.cg-hero .pa-hero__title, /* на случай переноса класса */
.df-hero .pa-hero__title {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -.025em;
  text-transform: none;
  max-width: 16ch;
}

/* Нумерованные шаги (индиго-акцент) */
.df-steps .ar-stage { border-left-color: var(--v2-brand-2); }
.df-steps .ar-stage__num { color: rgba(42,52,238,.22); }

/* Группы риска — 3 карточки в ряд (используем .ar-feature внутри) */
.df-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 16px; }
@media (max-width: 760px) { .df-who { grid-template-columns: 1fr; } }
.df-who .ar-feature { align-items: center; text-align: center; }

/* ── Карта дефицитов ───────────────────────────────────────── */
.df-map { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 16px; }
@media (max-width: 820px) { .df-map { grid-template-columns: 1fr; } }
.df-col__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--v2-font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--v2-ink-3);
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--v2-border);
}
.df-col__title .material-symbols-outlined { font-size: 18px !important; color: var(--v2-brand-2); }

.df-card {
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--v2-surface);
  transition: border-color .2s, box-shadow .2s;
}
.df-card.is-open { border-color: rgba(42,52,238,.30); box-shadow: 0 12px 28px -20px rgba(19,20,31,.25); }
.df-card__head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  cursor: pointer; user-select: none;
}
.df-card__head:hover { background: var(--v2-bg-alt); }
.df-tile {
  flex-shrink: 0;
  display: grid; place-items: center;
  min-width: 46px; height: 46px; padding: 0 9px;
  border-radius: 12px;
  background: var(--v2-midnight); color: #fff;
  font-family: var(--v2-font-display);
  font-weight: 700; font-size: 17px;
  letter-spacing: .01em; line-height: 1;
}
.df-card__name { flex: 1; font-family: var(--v2-font-display); font-size: 15px; font-weight: 700; color: var(--v2-ink); }
.df-card__norm {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--v2-brand-2);
  background: rgba(42,52,238,.08);
  padding: 4px 10px; border-radius: 100rem;
}
.df-card__chev { flex-shrink: 0; color: var(--v2-ink-3); transition: transform .25s; }
.df-card__chev .material-symbols-outlined { font-size: 22px !important; }
.df-card.is-open .df-card__chev { transform: rotate(180deg); }

.df-card__body { display: none; gap: 16px; padding: 16px; background: var(--v2-bg-alt); border-top: 1px solid var(--v2-border); }
.df-card.is-open .df-card__body { display: flex; }
.df-card__pico {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--v2-surface); border: 1px solid var(--v2-border);
  color: var(--v2-brand-2);
}
.df-card__pico .material-symbols-outlined { font-size: 22px !important; }
.df-card__fields { flex: 1; min-width: 0; }
.df-field + .df-field { margin-top: 12px; }
.df-field__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v2-brand-2);
  margin-bottom: 5px;
}
.df-field__value { font-size: 13px; color: var(--v2-ink-2); line-height: 1.5; }
.df-field__value strong { color: var(--v2-ink); }

/* Симптомы — выделены как «тревожные признаки» (rose, смысловой акцент) */
.df-field--symptoms .df-field__label { color: #dc2626; }
.df-symptoms { display: flex; flex-wrap: wrap; gap: 6px; }
.df-symptom {
  font-size: 11.5px;
  padding: 4px 11px; border-radius: 100rem;
  background: rgba(239,68,68,.08);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,.20);
}

/* Ключевая заметка (Важно / Особенность / Значение) — индиго-выноска на белом */
.df-field--note {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-left: 3px solid var(--v2-brand-2);
  border-radius: 9px;
  padding: 11px 13px;
}

/* ── B12 таймлайн (ШКАЛА ТЯЖЕСТИ — цвет смысловой) ──────────── */
.df-b12 {
  display: flex; gap: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 0 16px; margin: 8px 0 14px;
}
.df-stage {
  flex: 1; min-width: 168px;
  border: 1px solid var(--v2-border);
  border-top-width: 3px;
  border-radius: var(--v2-radius);
  padding: 16px 16px 18px;
}
.df-stage--ok     { border-top-color: #10b981; background: rgba(16,185,129,.05); }
.df-stage--warn   { border-top-color: #f59e0b; background: rgba(245,158,11,.06); }
.df-stage--orange { border-top-color: #f97316; background: rgba(249,115,22,.06); }
.df-stage--dark   { border-top-color: #ea580c; background: rgba(234,88,12,.07); }
.df-stage--danger { border-top-color: #ef4444; background: rgba(239,68,68,.06); }
.df-stage__num {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--v2-ink-3); margin-bottom: 6px;
}
.df-stage__title { font-family: var(--v2-font-display); font-size: 14.5px; font-weight: 700; color: var(--v2-ink); margin-bottom: 8px; line-height: 1.25; }
.df-stage__desc { font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.5; }
.df-stage__badge {
  display: inline-block; margin-top: 10px;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 100rem;
}
.df-stage--ok     .df-stage__badge { background: rgba(16,185,129,.14); color: #059669; }
.df-stage--warn   .df-stage__badge { background: rgba(245,158,11,.15); color: #d97706; }
.df-stage--orange .df-stage__badge { background: rgba(249,115,22,.15); color: #ea580c; }
.df-stage--dark   .df-stage__badge { background: rgba(234,88,12,.15); color: #c2410c; }
.df-stage--danger .df-stage__badge { background: rgba(239,68,68,.14); color: #dc2626; }

/* ── Таблица тестов B12 (✓/⚠/❌ — цвет смысловой) ──────────── */
.df-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 6px; }
.df-table {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-size: 12.5px;
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius); overflow: hidden;
}
.df-table th {
  background: var(--v2-midnight); color: #fff;
  padding: 10px 13px; text-align: left;
  font-family: var(--v2-font); font-size: 11px; font-weight: 600;
}
.df-table td { padding: 10px 13px; border-bottom: 1px solid var(--v2-border); color: var(--v2-ink-2); }
.df-table tbody tr:last-child td { border-bottom: none; }
.df-table tbody tr:nth-child(even) td { background: var(--v2-bg-alt); }
.df-table td:first-child { color: var(--v2-ink); }
.df-table tr.df-row-key td { background: rgba(42,52,238,.05) !important; }
.df-cell-ok     { color: #059669; font-weight: 600; }
.df-cell-warn   { color: #d97706; font-weight: 600; }
.df-cell-danger { color: #dc2626; font-weight: 600; }

/* ── Мобильный: убираем горизонтальный скролл в двух блоках ── */
@media (max-width: 640px) {
  /* Стадии B12 — вертикальная стопка вместо горизонтального флекс-ряда */
  .df-b12 { flex-direction: column; overflow-x: visible; gap: 12px; }
  .df-stage { min-width: 0; }

  /* Таблица тестов B12 → карточки-строки (подписи колонок через nth-child) */
  .df-table-wrap { overflow-x: visible; }
  .df-table { min-width: 0; border: none; border-radius: 0; font-size: 13.5px; }
  .df-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .df-table tbody tr {
    display: block; border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius); padding: 12px 14px; margin-bottom: 10px;
    background: var(--v2-bg);
  }
  .df-table tbody tr:nth-child(even) td { background: transparent; }
  .df-table tr.df-row-key td { background: transparent !important; }
  .df-table td { border: none; padding: 5px 0; }
  .df-table td:first-child {
    font-weight: 700; color: var(--v2-ink);
    border-bottom: 1px solid var(--v2-border); padding: 0 0 7px; margin-bottom: 5px;
  }
  .df-table td:not(:first-child) { display: flex; justify-content: space-between; gap: 14px; }
  .df-table td:not(:first-child)::before { content: ""; font-size: 11.5px; font-weight: 600; color: var(--v2-ink-3); }
  .df-table td:nth-child(2)::before { content: "Стадия 1"; }
  .df-table td:nth-child(3)::before { content: "Стадия 2"; }
  .df-table td:nth-child(4)::before { content: "Стадия 3"; }
  .df-table td:nth-child(5)::before { content: "Стадия 4"; }
  .df-table td:nth-child(6)::before { content: "Стадия 5"; }
}

/* ── B12 чипы групп риска (декор → индиго) ──────────────────── */
.df-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 6px; }
@media (max-width: 700px) { .df-chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .df-chips { grid-template-columns: 1fr; } }
.df-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  font-size: 12.5px; color: var(--v2-ink-2);
}
.df-chip__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(42,52,238,.09); color: var(--v2-brand-2);
}
.df-chip__icon .material-symbols-outlined { font-size: 18px !important; }

/* ── Редакционная фигура (научный журнал) ──────────────────── */
/* Правило: в теле статьи фигуры НЕ на всю ширину — 80%, по центру. */
.df-figure { max-width: 80%; margin: 18px auto 22px; }
@media (max-width: 700px) { .df-figure { max-width: 100%; } }
.df-figure__frame {
  border-radius: var(--v2-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--v2-midnight);
  box-shadow: 0 22px 54px -26px rgba(19,20,31,.42), 0 2px 8px rgba(19,20,31,.08);
}
.df-figure__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-figcaption {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 12px; padding: 0 2px;
  font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.5;
}
.df-figcaption strong { color: var(--v2-ink-2); font-weight: 600; }

/* ── Источники ─────────────────────────────────────────────── */
.df-sources { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; counter-reset: src; list-style: none; padding: 0; }
.df-source { display: flex; gap: 14px; align-items: flex-start; font-size: 13px; color: var(--v2-ink-3); line-height: 1.5; }
.df-source::before {
  counter-increment: src; content: counter(src);
  flex-shrink: 0; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--v2-bg-alt);
  font-family: var(--v2-font-display); font-size: 12px; font-weight: 700; color: var(--v2-ink-2);
}
.df-source strong { color: var(--v2-ink); font-weight: 600; }
.df-source a { color: var(--v2-brand-2); word-break: break-word; }