/* ============================================================
   Bortz Blood Age — bz-* additions on top of calc-phenoage.css (pa-*).
   Только блоки, уникальные для Bortz: разбивка по группам биомаркеров,
   сворачиваемые опциональные поля UK Biobank, бейдж-счётчик секции.
   ============================================================ */

/* ── Section count badge ("8 показателей") ─────────────── */
.bz-section__count {
  margin-left: auto;
  font-family: var(--v2-font);
  font-size: 11px;
  font-weight: 600;
  color: var(--v2-ink-3);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ── Optional UKBB markers — collapsible ───────────────── */
.bz-optional {
  margin-top: 18px;
  border: 1px dashed var(--v2-border);
  border-radius: 12px;
  background: var(--v2-bg-alt);
  overflow: hidden;
}
.bz-optional__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--v2-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-ink-2);
  text-align: left;
  transition: background .15s;
}
.bz-optional__head:hover { background: rgba(42, 52, 238, .04); }
.bz-optional__hint {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
  padding: 3px 9px;
  border: 1px solid var(--v2-border);
  border-radius: 100rem;
}
.bz-optional__chev {
  margin-left: auto;
  font-size: 11px;
  color: var(--v2-ink-3);
  transition: transform .25s ease;
}
.bz-optional.is-open .bz-optional__chev { transform: rotate(90deg); }
.bz-optional__body {
  display: none;
  padding: 4px 18px 18px;
}
.bz-optional.is-open .bz-optional__body { display: block; }

/* ── Group decomposition (result) ──────────────────────── */
.bz-groups {
  margin: 32px 0;
  padding: 24px;
  background: var(--v2-bg-alt);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
}
.bz-groups__title {
  font-family: var(--v2-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--v2-ink-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 20px;
}
.bz-group-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.bz-group-row:last-of-type { margin-bottom: 0; }
.bz-group-row__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(112, 115, 143, .10);
  color: var(--v2-ink-2);
  flex-shrink: 0;
}
.bz-group-row__icon .material-symbols-outlined {
  font-size: 18px !important;
  font-variation-settings: 'wght' 400;
}
.bz-group-row__label {
  flex: 0 0 200px;
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-ink-2);
  line-height: 1.25;
}
.bz-group-row__bar-wrap {
  flex: 1;
  position: relative;
  height: 22px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 99px;
  overflow: hidden;
}
.bz-group-row__center {
  position: absolute; top: 0; bottom: 0;
  left: 50%; width: 1px;
  background: var(--v2-ink-3);
  opacity: .3;
}
.bz-group-row__bar {
  position: absolute; top: 3px; bottom: 3px;
  border-radius: 99px;
  transition: width 1s cubic-bezier(0.34, 1.2, 0.64, 1), left 1s;
}
.bz-group-row__val {
  flex: 0 0 72px;
  text-align: right;
  font-family: var(--v2-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.bz-groups__note {
  font-size: 12px;
  color: var(--v2-ink-3);
  margin-top: 14px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .bz-group-row__label { flex: 0 0 130px; font-size: 12px; }
  .bz-group-row__val { flex: 0 0 60px; font-size: 12.5px; }
}
@media (max-width: 420px) {
  .bz-group-row__label { flex: 0 0 100px; font-size: 11px; }
}