/* Growth chart on /adult-size-predictor (src/assets/growth-chart.js).
 * Colours come from the tokens in styles.css, so dark mode follows. */

.growth { margin-top: 2rem; }
.gc-sentence {
  font-family: var(--font-display); font-weight: 800; color: var(--brand-ink);
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem); line-height: 1.15; letter-spacing: -0.02em;
  margin: 0.35rem 0 0.7rem;
}
.gc-figure { margin: 1.2rem 0 0.6rem; }
.gc-plot {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.5rem 0.4rem 0.2rem; overflow: hidden; min-height: 250px;
}
.gc-svg { display: block; width: 100%; height: auto; }
.gc-grid { stroke: var(--line); stroke-width: 1; }
.gc-baseline { stroke: var(--line-strong); stroke-width: 1; }
.gc-tick { stroke: var(--line-strong); }
.gc-axis { fill: var(--ink-soft); font-size: 12px; font-family: var(--font); }
.gc-unit { font-weight: 700; }
.gc-label { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font); }

.gc-band { fill: color-mix(in srgb, var(--brand) 24%, transparent); stroke: var(--brand); stroke-width: 1; stroke-opacity: 0.55; }
.gc-band-extra { fill: url(#gc-hatch); stroke: var(--brand); stroke-width: 1; stroke-dasharray: 3 3; stroke-opacity: 0.5; }
.gc-hatch-line { stroke: var(--brand); stroke-width: 2; stroke-opacity: 0.35; }
.gc-key .gc-band-extra { fill: color-mix(in srgb, var(--brand) 10%, transparent); }
.gc-mid { fill: none; stroke: var(--brand-ink); stroke-width: 2; stroke-dasharray: 6 4; }
.gc-mid-extra { stroke-opacity: 0.5; stroke-dasharray: 2 4; }
.gc-anchor { fill: var(--surface); stroke: var(--brand-ink); stroke-width: 2; }

.gc-today-line { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 3; }
.gc-today { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.gc-weigh { fill: var(--amber); stroke: var(--surface); stroke-width: 2; }
.gc-weigh-line { fill: none; stroke: var(--amber); stroke-width: 2; }

/* Percent mode: one line per size class, told apart by dash as well as colour. */
.gc-curve { fill: none; stroke-width: 2; stroke-opacity: 0.85; }
.gc-curve-extra { stroke-opacity: 0.35; stroke-dasharray: 2 4; }
.gc-curve.gc-on { stroke-width: 3.5; stroke-opacity: 1; }
.gc-curve-small { stroke: var(--brand); }
.gc-curve-medium { stroke: var(--amber); stroke-dasharray: 8 4; }
.gc-curve-large { stroke: var(--rose); stroke-dasharray: 2 3; }
.gc-curve-xlarge { stroke: var(--ink); stroke-dasharray: 12 4 2 4; }
circle.gc-anchor.gc-curve-small, circle.gc-anchor.gc-curve-medium,
circle.gc-anchor.gc-curve-large, circle.gc-anchor.gc-curve-xlarge { fill: var(--surface); stroke-dasharray: none; stroke-width: 2; }

.gc-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.6rem; font-size: 0.86rem; color: var(--ink-soft); }
.gc-key { display: inline-flex; align-items: center; gap: 0.4rem; }
.gc-key svg { flex: none; overflow: visible; }
.gc-key-note { flex-basis: 100%; font-size: 0.8rem; color: var(--ink-soft); }

.gc-weight-row { display: flex; gap: 0.5rem; }
.gc-weight-row input { flex: 1 1 auto; min-width: 0; }
.gc-weight-row select { flex: 0 0 5.2rem; width: 5.2rem; }



@media print {
  .gc-weigh-panel form, #gc-share { display: none !important; }
  .gc-plot { border-color: #ccc; }
}

.gc-list-h { font-size: 0.95rem; margin: 1.2rem 0 0.4rem; }
.gc-entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gc-entries li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date w" "age btn";
  gap: 0.1rem 0.8rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--line);
}
.gc-e-date { grid-area: date; font-weight: 650; }
.gc-e-age { grid-area: age; font-size: 0.88rem; color: var(--ink-soft); }
.gc-e-w { grid-area: w; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.gc-entries .btn { grid-area: btn; min-height: 40px; }
@media (min-width: 620px) {
  .gc-entries li { grid-template-columns: 9rem 7rem minmax(0, 1fr) auto; grid-template-areas: "date age w btn"; }
}