.pediatric-metrics {
  color: #30343a;
}

.pediatric-metrics-note {
  margin: 0 0 8px;
  color: #4d5968;
  font-size: 0.9rem;
}

.pediatric-metrics-table {
  display: grid;
  border-top: 1px solid #d7dde3;
}

.pediatric-metrics-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.25fr) minmax(120px, 0.95fr);
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid #d7dde3;
}

.pediatric-metrics-row > div {
  padding: 12px 14px;
}

.pediatric-metrics-row:first-child {
  min-height: 44px;
  font-weight: 800;
}

.pediatric-metrics-row:first-child > div {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pediatric-metrics-row.metric-highlight {
  background: rgba(255, 255, 255, 0.42);
}

.bp-percentile-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 14px;
}

.bp-percentile-panel {
  margin: 0;
  padding: 18px 22px 16px;
  border: 1px solid #0f2e83;
  background: rgba(255, 255, 255, 0.32);
}

.bp-percentile-panel legend {
  padding: 0 10px;
  color: #0f2e83;
  font-size: 1rem;
  font-weight: 700;
}

.bp-percentile-panel strong {
  color: #20242a;
}

.bp-classification-table {
  display: grid;
  border-top: 1px solid #d7dde3;
}

.bp-classification-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.82fr) minmax(240px, 1.45fr);
  align-items: center;
  border-bottom: 1px solid #d7dde3;
}

.bp-classification-row > div {
  padding: 12px 14px;
}

.bp-classification-head {
  font-weight: 800;
  color: #5a2e14;
}

.bp-classification-note {
  margin-top: 12px;
  color: #4d5968;
  font-size: 0.9rem;
}

.pgcs-table {
  display: grid;
  border-top: 1px solid #d7dde3;
}

.pgcs-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(240px, 1.45fr);
  align-items: center;
  border-bottom: 1px solid #d7dde3;
}

.pgcs-row > div {
  padding: 12px 14px;
}

.pgcs-head {
  color: #5a2e14;
  font-weight: 800;
}

.pgcs-result p {
  margin-top: 10px;
}

@media (max-width: 860px) {
  .bp-percentile-panels,
  .pgcs-row,
  .bp-classification-row,
  .pediatric-metrics-row {
    grid-template-columns: 1fr;
  }

  .pgcs-row > div,
  .bp-classification-row > div,
  .pediatric-metrics-row > div {
    padding: 6px 14px;
  }
}