/* BMI / waist screening categories + sex distribution */
.screening-chart-legend i.bmi-low,
.screening-vbar.bmi-low { background:#64748b; }
.screening-chart-legend i.bmi-overweight,
.screening-vbar.bmi-overweight { background:#d97706; }
.screening-chart-legend i.bmi-obese,
.screening-vbar.bmi-obese { background:#be123c; }
.screening-chart-legend i.waist-high,
.screening-vbar.waist-high { background:#d97706; }

.screening-gender-panel {
  margin:12px 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
}
.screening-gender-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.screening-gender-head h3 { margin:0; font-size:16px; }
.screening-gender-head span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.screening-gender-grid {
  display:grid;
  grid-template-columns:minmax(130px,180px) minmax(130px,180px) minmax(260px,1fr);
  gap:10px;
  align-items:stretch;
}
.screening-gender-card {
  display:grid;
  align-content:center;
  gap:3px;
  min-height:88px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
}
.screening-gender-card span { color:var(--muted); font-size:12px; font-weight:800; }
.screening-gender-card strong { font-size:24px; line-height:1; }
.screening-gender-card small { color:var(--muted); font-weight:800; }
.screening-gender-bars { display:grid; align-content:center; gap:12px; padding:10px 4px; }
.screening-gender-bar-row {
  display:grid;
  grid-template-columns:42px minmax(120px,1fr) 52px;
  gap:8px;
  align-items:center;
  font-size:12px;
  font-weight:800;
}
.screening-gender-bar-row > div {
  height:12px;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface-soft);
  border:1px solid var(--line);
}
.screening-gender-bar-row i {
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  transition:width .2s ease;
}
.screening-gender-bar-row:first-child i { background:#2563eb; }
.screening-gender-bar-row:last-child i { background:#db2777; }
.screening-gender-bar-row b { text-align:right; }
@media (max-width:760px) {
  .screening-gender-grid { grid-template-columns:1fr 1fr; }
  .screening-gender-bars { grid-column:1 / -1; }
}
@media (max-width:460px) {
  .screening-gender-grid { grid-template-columns:1fr; }
  .screening-gender-bars { grid-column:auto; }
}

.screening-gender-groups {
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.screening-gender-groups h4 {
  margin:0 0 8px;
  font-size:13px;
}
#screeningGenderGroupRows {
  display:grid;
  gap:7px;
}
.screening-gender-group-row {
  display:grid;
  grid-template-columns:minmax(130px,1.2fr) minmax(120px,1fr) minmax(120px,1fr);
  gap:8px;
  align-items:center;
  min-height:42px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-soft);
}
.screening-gender-group-row > strong {
  font-size:12px;
}
.screening-gender-group-stat {
  display:grid;
  grid-template-columns:auto auto auto;
  justify-content:start;
  gap:6px;
  align-items:baseline;
  font-size:11px;
}
.screening-gender-group-stat span { color:var(--muted); font-weight:800; }
.screening-gender-group-stat b { font-size:14px; }
.screening-gender-group-stat small { color:var(--muted); font-weight:800; }
.screening-gender-group-stat.male b { color:#2563eb; }
.screening-gender-group-stat.female b { color:#db2777; }
@media (max-width:560px) {
  .screening-gender-group-row {
    grid-template-columns:1fr 1fr;
  }
  .screening-gender-group-row > strong {
    grid-column:1 / -1;
  }
}