/* ============================================================
   BabyCo — Growth Chart
   ============================================================ */

.gc-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 20px 80px;
}

/* Controls (shared look with other tools) */
.gc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.gc-lang {
  display: inline-flex;
  border: 1.5px solid var(--border-medium);
  border-radius: 50px;
  overflow: hidden;
}

.gc-lang a {
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
}

.gc-lang a.is-active {
  background: var(--brand-primary);
  color: #fff;
}

.gc-babies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.gc-babies-label {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  font-weight: 600;
}

.gc-baby-chip {
  padding: 7px 14px;
  border-radius: 50px;
  border: 1.5px solid rgba(107, 172, 186, 0.3);
  background: var(--white);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.gc-baby-chip.is-active {
  background: rgba(107, 172, 186, 0.14);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Measure tabs */
.gc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 14px;
}

.gc-tab {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1.5px solid transparent;
}

.gc-tab:hover {
  background: rgba(107, 172, 186, 0.08);
}

.gc-tab.is-active {
  background: rgba(107, 172, 186, 0.14);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Sex picker */
.gc-picksex {
  text-align: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 22px;
  margin-bottom: 22px;
}

.gc-picksex p {
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-weight: 600;
}

.gc-sex-row {
  display: inline-flex;
  gap: 12px;
}

.gc-sex-row .btn {
  cursor: pointer;
}

/* Latest-percentile callout */
.gc-callout {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  border-left: 4px solid var(--brand-primary);
  background: rgba(107, 172, 186, 0.08);
}

.gc-callout .gc-interp {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.gc-band-low,
.gc-band-high {
  border-left-color: #d98324;
  background: #fff8f3;
}

.gc-band-typical {
  border-left-color: #1f9d6b;
  background: #f4fbf8;
}

/* Chart box */
.gc-chart-box {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lifted);
  padding: 20px 18px;
  margin-bottom: 18px;
  scroll-margin-top: 90px;
}

.gc-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SVG element styling */
.gc-grid {
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 1;
}

.gc-axlabel {
  font-size: 11px;
  fill: var(--text-tertiary);
  font-family: "Inter", sans-serif;
}

.gc-axtitle {
  font-size: 12px;
  fill: var(--text-secondary);
  font-weight: 600;
  font-family: "Inter", sans-serif;
}

.gc-plabel {
  font-size: 11px;
  font-weight: 700;
  fill: var(--text-tertiary);
  font-family: "Inter", sans-serif;
}

.gc-curve {
  fill: none;
  stroke-width: 1.5;
}

.gc-p50 {
  stroke: var(--brand-primary);
  stroke-width: 2.2;
}

.gc-p15,
.gc-p85 {
  stroke: rgba(107, 172, 186, 0.55);
}

.gc-p03,
.gc-p97 {
  stroke: rgba(0, 0, 0, 0.22);
  stroke-dasharray: 4 3;
}

.gc-childline {
  fill: none;
  stroke: var(--brand-secondary);
  stroke-width: 2.6;
}

.gc-childdot {
  fill: var(--brand-secondary);
  stroke: #fff;
  stroke-width: 1.5;
}

/* Legend */
.gc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

.gc-legend-label {
  font-weight: 700;
}

.gc-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.gc-leg::before {
  content: "";
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-primary);
}

.gc-leg-p50::before { background: var(--brand-primary); height: 3px; }
.gc-leg-p15::before,
.gc-leg-p85::before { background: rgba(107, 172, 186, 0.55); }
.gc-leg-p03::before,
.gc-leg-p97::before { background: rgba(0, 0, 0, 0.3); }
.gc-leg-child::before { background: var(--brand-secondary); height: 4px; }

/* Add measurement form */
.gc-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 24px;
}

.gc-add-title {
  width: 100%;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.gc-add label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.gc-add input {
  padding: 10px 12px;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
}

.gc-add .btn {
  cursor: pointer;
}

.gc-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.gc-login:hover {
  text-decoration: underline;
}

/* History */
.gc-history-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 12px 0 14px;
}

.gc-history {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.gc-history th {
  text-align: left;
  background: rgba(107, 172, 186, 0.1);
  padding: 10px 14px;
  font-weight: 700;
  border-bottom: 2px solid rgba(107, 172, 186, 0.2);
}

.gc-history td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.gc-del {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
}

.gc-del:hover {
  color: #d23a66;
}

.gc-empty,
.gc-note {
  color: var(--text-tertiary);
  font-size: 0.88rem;
  margin-top: 8px;
}

/* CTAs */
.gc-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

.gc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.gc-cta-ghost {
  background: rgba(107, 172, 186, 0.1);
  color: var(--brand-primary);
  border: 1.5px solid rgba(107, 172, 186, 0.3);
}

.gc-cta-ghost:hover {
  background: rgba(107, 172, 186, 0.18);
}

@media (max-width: 560px) {
  .gc-controls { justify-content: center; }
  .gc-add label { flex: 1; }
}