/* ============================================================================
   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; }
}

/* ------------------------------------------------- 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; }

/* ---------------------------------------------------------------- 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; }