/* ============================================================================
   grow.css — GrowthChart-only layer. Loads after styles.css + data.css.
   Adds: the site accent, the 3D stadiometer hero, percentile strips, tables.
   Pure CSS/SVG. No images, no libraries, no webfonts beyond the shared Inter.
   ========================================================================== */

/* ------------------------------------------------------------- site accent */
body[data-site="grow"] { --accent: #0d9488; --accent-2: #0f766e; --accent-3: #2dd4bf; --accent-soft: #e6f6f4; }
:root[data-theme="dark"] body[data-site="grow"] { --accent: #2dd4bf; --accent-2: #5eead4; --accent-3: #14b8a6; --accent-soft: rgba(45, 212, 191, .14); }

/* percentile / band colours, theme-aware */
body[data-site="grow"] {
  --p-low: #0284c7; --p-mid: #0d9488; --p-high: #d97706; --p-edge: #64748b;
  --rule-face: #dfe7f3; --rule-face-2: #fbfdff; --rule-edge: #b9c5d8; --rule-ink: #0b1020;
}
:root[data-theme="dark"] body[data-site="grow"] {
  --p-low: #38bdf8; --p-mid: #2dd4bf; --p-high: #fbbf24; --p-edge: #94a3b8;
  --rule-face: #0e1626; --rule-face-2: #131d31; --rule-edge: #24304a; --rule-ink: #eef2ff;
}

/* ============================================================ the 3D hero
   A stadiometer (height rule) rendered entirely in SVG: a bevelled board
   with tick marks, a sliding headpiece, and a soft floor shadow. The only
   motion is the headpiece settling onto its reading, once, on load.       */
.stadio { max-width: 430px; margin: 24px auto 0; }
.stadio svg { width: 100%; height: auto; overflow: visible; }

/* the board's fill is a per-instance gradient set inline on the element —
   never restate it here, or the CSS rule overrides the presentation
   attribute and points at a gradient id that does not exist. */
.st-board { }
.st-edge { fill: none; stroke: var(--rule-edge); }
.st-tick { stroke: var(--rule-ink); opacity: .32; }
.st-tick-major { stroke: var(--rule-ink); opacity: .62; }
.st-tlab { fill: var(--rule-ink); opacity: .68; font-family: var(--font); font-size: 10px; font-weight: 700; }
.st-head { fill: var(--accent); }
.st-head-hi { fill: #fff; opacity: .28; }
.st-val { fill: var(--rule-ink); font-family: var(--font); font-size: 40px; font-weight: 800; letter-spacing: -2px; }
.st-cap { fill: var(--muted); font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.st-sub { fill: var(--muted); font-family: var(--font); font-size: 12px; font-weight: 600; }

.st-slide { animation: st-settle 1.5s cubic-bezier(.2, .85, .3, 1) both; }
@keyframes st-settle {
  from { transform: translateY(-46px); opacity: 0; }
  60%  { transform: translateY(4px); opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}
.st-grow { animation: st-rise 1.7s cubic-bezier(.2, .85, .3, 1) both; transform-box: view-box; transform-origin: 50% 100%; }
@keyframes st-rise { from { transform: scaleY(.05); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .st-slide, .st-grow, .pct-fill { animation: none !important; }
}

/* ==================================================== the percentile channel
   GrowthChart's set piece. The drawing hand is a CLINIC WALL CHART: printed
   ruled stationery, band edges drawn with a 1.3px technical pen, the channel
   between the 3rd and the 97th washed in, one plotted point with a paper halo.
   Deliberately unlike its siblings — no bezels (sehat), no katori units
   (thali), no square terminals (move), no 1.6px round hand (yoga).
   Static in every motion preference: the drawing is an argument, not an
   animation, and a chart that draws itself in front of a worried parent is
   theatre. Fixed aspect ratio, so it costs zero CLS.                        */
body[data-site="grow"] {
  --wc-paper: #fbfaf6;
  --wc-grid: #d8d3c6;
  --wc-rule: #b3ac9c;
  --wc-channel: color-mix(in srgb, var(--accent) 11%, transparent);
  --wc-edge: color-mix(in srgb, var(--accent) 62%, var(--ink));
  --wc-ink: var(--ink-2);
}
:root[data-theme="dark"] body[data-site="grow"] {
  --wc-paper: #1a1915;
  --wc-grid: #322f28;
  --wc-rule: #4a4638;
  --wc-channel: color-mix(in srgb, var(--accent) 15%, transparent);
  --wc-edge: color-mix(in srgb, var(--accent) 72%, var(--ink-2));
}

.wallchart { margin: 0; }
.wallchart svg { width: 100%; height: auto; display: block; overflow: visible; }
.wc-paper { fill: var(--wc-paper); }
.wc-grid line { stroke: var(--wc-grid); stroke-width: 1; }
.wc-channel { fill: var(--wc-channel); stroke: none; }
.wc-edge { fill: none; stroke: var(--wc-edge); stroke-width: 1.3; stroke-linejoin: round; }
.wc-inner { fill: none; stroke: var(--wc-edge); stroke-width: 1; stroke-dasharray: 3 4; opacity: .5; }
.wc-mid { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; }
.wc-axis line { stroke: var(--wc-rule); stroke-width: 1.4; }
.wc-rule { stroke: var(--wc-rule); stroke-width: 1; }
.wc-at line { stroke: var(--wc-rule); stroke-width: 1; stroke-dasharray: 2 4; }
.wc-brack { fill: none; stroke: var(--wc-edge); stroke-width: 1.4; }
.wc-halo { fill: var(--wc-paper); stroke: var(--accent); stroke-width: 1.2; }
.wc-pt { fill: var(--accent); }
.wc-lab text { fill: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; font-variant-numeric: tabular-nums lining-nums; }
.wc-mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; fill: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.wc-foot { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--faint); }
.wc-unit { fill: var(--faint); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.wc-end, .wc-pt-lab { fill: var(--wc-ink); }
.wc-pt-lab { font-size: 12.5px; fill: var(--ink); }
.wc-e-hi, .wc-e-lo { fill: var(--muted); }
.wc-e-mid { fill: var(--accent); }
@media (max-width: 620px) { .wc-lab text, .wc-mono { font-size: 13px; } .wc-foot { font-size: 12px; } }

/* ------------------------------------------------- percentile strip (SVG-free)
   A stacked bar showing where the P3 / P50 / P97 markers sit for one age. */
.pct { display: grid; gap: 10px; margin-top: 18px; }
.pct-row {
  display: grid; grid-template-columns: 82px 1fr auto; gap: 12px; align-items: center;
  font-size: .86rem;
}
.pct-lab { color: var(--muted); font-weight: 700; }
.pct-bar { height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.pct-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent-3)); animation: pct-grow 1s ease-out both; }
@keyframes pct-grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.pct-val { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ------------------------------------------------------- the quick-jump keypad */
.jump { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 7px; }
.jump a {
  display: block; text-align: center; padding: 10px 6px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none;
  font-size: .88rem; font-weight: 700; color: var(--ink); transition: .16s; box-shadow: var(--shadow-xs);
}
.jump a small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.jump a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.jump a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* --------------------------------------------------------- tool launcher cards */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.tool {
  display: block; text-decoration: none; color: inherit; padding: 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-xs); transition: .2s; position: relative; overflow: hidden;
}
.tool::after {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events: none;
}
.tool:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: var(--shadow); }
.tool .ti { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 13px; }
.tool .ti svg { width: 20px; height: 20px; }
.tool h3 { font-size: 1.05rem; font-weight: 750; letter-spacing: -.025em; margin-bottom: 6px; }
.tool p { font-size: .87rem; color: var(--muted); line-height: 1.55; }
.tool .go { display: inline-block; margin-top: 12px; font-size: .83rem; font-weight: 700; color: var(--accent); }

/* ------------------------------------------------------------- table accents */
table.data tr.self th, table.data tr.self td { font-weight: 700; }
table.data td.p50 { color: var(--accent); font-weight: 750; }
table.data td.p-lo { color: var(--p-low); }
table.data td.p-hi { color: var(--p-high); }
table.data th.grp { text-align: center; border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------- range pill */
.range-pill {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 14px 22px;
  border-radius: 999px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--shadow-sm); font-variant-numeric: tabular-nums;
}
.range-pill b { font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 800; letter-spacing: -.04em; color: var(--accent); }
.range-pill span { color: var(--muted); font-size: .9rem; font-weight: 650; }

/* ------------------------------------------------- the unboxed answer block
   Two site-local corrections to the shared mechanics layer, both specificity
   problems rather than design ones (both reported upstream):
   1. data.css §3 `.answer p` (0,1,1) outranks §20.2 `.stat-display` (0,1,0),
      so the display figure rendered at body size wherever the stat sits in a
      paragraph inside an answer block — which is everywhere it is meant to.
   2. `.kicker` has no display of its own outside `.ymyl`, so an inline kicker
      above a stat ran into the figure.                                      */
.answer.aaa .kicker { display: block; margin-bottom: 10px; }
.answer.aaa p.stat-display {
  font-family: var(--serif); font-weight: 340; font-size: var(--fs-stat);
  line-height: .92; letter-spacing: -.02em; color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-variant-numeric: proportional-nums lining-nums;
  margin: 0 0 14px;
}
.answer.aaa p.stat-display + p { margin-top: 0; }
.wc-hero { margin-top: 22px; }
.wc-hero + .reveal-3 { margin-top: 26px; }
.sub-h { font-size: 1.02rem; font-weight: 700; margin-top: 26px; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- formulas */
.formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 16px; color: var(--ink); overflow-x: auto; white-space: nowrap;
}
.cite { font-size: .78rem; color: var(--muted); margin-top: 10px; line-height: 1.55; }
.cite b { color: var(--ink-2); font-weight: 650; }

/* ------------------------------------------------------------ caution block
   Every child-growth page carries one. Deliberately calm rather than alarming
   — the reader is usually a worried parent, and the point is reassurance plus
   a clear route to a paediatrician, not a red warning box.                  */
.caution {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-radius: var(--radius-sm); padding: 15px 18px; font-size: .89rem; color: var(--ink-2); line-height: 1.6; margin-top: 18px;
}
.caution strong { color: var(--ink); }

/* the harder warning, used only on how-to-increase-height */
.warn {
  border: 1px solid color-mix(in srgb, #dc2626 26%, var(--line)); border-left: 3px solid #dc2626;
  background: color-mix(in srgb, #dc2626 5%, var(--surface));
  border-radius: var(--radius-sm); padding: 15px 18px; font-size: .89rem; color: var(--ink-2); line-height: 1.6; margin-top: 18px;
}
.warn strong { color: var(--ink); }

/* ------------------------------------------------------------- search box */
.search { position: relative; max-width: 520px; margin: 24px auto 0; }
.search .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.search input {
  width: 100%; padding: 15px 16px 15px 44px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .95rem; box-shadow: var(--shadow-sm);
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* --------------------------------------------------------- source footnote */
.srcbox { display: grid; gap: 6px; }
.srcbox p { font-size: .78rem; color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------- state cards */
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.state-grid a {
  display: block; padding: 14px 16px; border-radius: 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: .16s;
}
.state-grid a:hover { border-color: var(--accent); transform: translateY(-2px); }
.state-grid a span { display: block; font-weight: 700; font-size: .93rem; }
.state-grid a small { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; }