/* Body Fat Calculator — keep CSS minimal (cg-ui provides layout/styles) */

.cg-hidden { display: none !important; }

/* Choice tiles */
.cg-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cg-choice-grid--3 { grid-template-columns: 1fr; }

.cg-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.cg-choice input { margin-top: 2px; }
.cg-choice span { line-height: 1.3; }

@media (min-width: 860px) {
  .cg-choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ensure compound fields align */
#bfc-height-ftin-wrap,
#bfc-height-mcm-wrap,
#bfc-age-extra-wrap,
#bfc-neck-ftin-wrap,
#bfc-neck-mcm-wrap,
#bfc-waist-ftin-wrap,
#bfc-waist-mcm-wrap,
#bfc-hip-ftin-wrap,
#bfc-hip-mcm-wrap { margin-top: 10px; }

/* Navy block spacing */
#bfc-navy-fields { margin-top: 10px; }

/* Formula details */
.bfc-details { display: block; margin-top: 8px; }
.bfc-details__summary { cursor: pointer; user-select: none; font-weight: 800; }
.bfc-details__body { margin-top: 10px; }

/* Copy-all row ABOVE the top message, aligned extreme right */
.bfc-copyall-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* ===== Body fat category bars ===== */
.bfc-bar {
  position: relative;
  margin-top: 10px;
  margin-bottom: 12px;
}
.bfc-bar__track {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
}
.bfc-bar__seg {
  flex: var(--w) 0 0;
}
.bfc-bar__marker {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
}
.bfc-bar__dot {
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 999px;
  background: #111;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.9);
}

/* Segment colors */
.bfc-seg--low { background: #60a5fa; }       /* blue */
.bfc-seg--essential { background: #34d399; } /* green */
.bfc-seg--athlete { background: #22c55e; }   /* deeper green */
.bfc-seg--fitness { background: #fbbf24; }   /* amber */
.bfc-seg--average { background: #fb923c; }   /* orange */
.bfc-seg--obese { background: #ef4444; }     /* red */

.bfc-legend {
  display: grid;
  gap: 8px;
}
.bfc-legend__row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}
.bfc-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}
.bfc-legend__name {
  font-weight: 700;
}
.bfc-legend__range {
  color: rgba(0,0,0,0.55);
  font-weight: 600;
}

/* Active category highlight */
.bfc-legend__row.is-active {
  border-color: rgba(0,0,0,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}