/*
 * PediTools growth calculators. Everything is scoped under .pt-growth so the host page's
 * theme is not affected. Compact, modelled on the live pages: labels to the left of the
 * fields, one results table that fits a phone in portrait (measure and value share the
 * first column). Text colour and font come from the host page; inputs are always white.
 */
.pt-growth {
  --pt-accent: #0b62a4;
  --pt-accent-text: #fff;
  --pt-error: #b3261e;
  --pt-warn-bg: rgba(255, 176, 0, 0.18);
  --pt-warn-border: #c98a00;
  --pt-error-bg: rgba(179, 38, 30, 0.09);
  --pt-line: rgba(0, 0, 0, 0.28);
  --pt-soft: rgba(255, 255, 255, 0.45);
  --pt-muted: 0.75;
  --pt-radius: 4px;
  --pt-label-width: 10.5em;
  max-width: 760px;
  line-height: 1.35;
  text-align: left;
}
/* Set directly, not inherited: inheritance does not reach the contents of <details> in current Chrome */
.pt-growth, .pt-growth *, .pt-growth *::before, .pt-growth *::after { box-sizing: border-box; }
.pt-growth [hidden] { display: none !important; }
.pt-growth .pt-visually-hidden, .pt-growth .pt-default-submit {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap;
}

/* Typeface, headings and weights come from the Blocs theme; sizes below are relative to the text around them */
.pt-growth .pt-info h2, .pt-growth .pt-info h3, .pt-growth .pt-info h4 { margin: 0.9em 0 0.3em; }

.pt-growth:not(.pt-charts) .pt-title { margin: 0 0 0.4em; line-height: 1.2; } /* the table of growth charts keeps the theme's */
.pt-growth .pt-prompt { margin: 0 0 0.5em; }

/* ---------- Buttons ---------- */
.pt-growth button.pt-chip, .pt-growth button.pt-choice, .pt-growth button.pt-today, .pt-growth button.pt-copy-button {
  font: inherit; font-size: 0.9em; color: #222; cursor: pointer; text-align: left;
  background: #f4f4f4; border: 1px solid #aaa; border-radius: var(--pt-radius);
  padding: 0.25em 0.6em; margin: 0; min-height: 30px; line-height: 1.2;
}
.pt-growth button.pt-current { background: var(--pt-accent); color: var(--pt-accent-text); border-color: var(--pt-accent); }
.pt-growth button.pt-primary {
  font: inherit; cursor: pointer; min-height: 36px; padding: 0.35em 1.4em;
  color: var(--pt-accent-text); background: var(--pt-accent); border: 1px solid var(--pt-accent); border-radius: var(--pt-radius);
}

/* ---------- Recent charts (top) ---------- */
.pt-growth .pt-recent { display: flex; flex-wrap: wrap; gap: 0.3em; margin: 0 0 0.5em; }
.pt-growth button.pt-chip { border-radius: 999px; padding: 0.2em 0.75em; }

/* ---------- Form: label left, field right ---------- */
.pt-growth .pt-form { margin: 0 0 0.75em; }
.pt-growth .pt-fields { border-top: 1px solid var(--pt-line); border-bottom: 1px solid var(--pt-line); padding: 0.35em 0; }
.pt-growth .pt-field {
  display: grid; grid-template-columns: var(--pt-label-width) minmax(0, 1fr); column-gap: 0.5em;
  align-items: center; margin: 0.18em 0;
}
.pt-growth .pt-field > label, .pt-growth .pt-label { line-height: 1.2; }
.pt-growth .pt-label-note { display: block; font-size: 0.82em; opacity: var(--pt-muted); }
.pt-growth .pt-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; min-width: 0; }
.pt-growth .pt-control input[type="text"] {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */
  color: #111; background: #fff; border: 1px solid #888; border-radius: 3px;
  height: 32px; padding: 0.15em 0.4em; margin: 0; width: 7.5em; max-width: 100%;
}
.pt-growth .pt-control input.pt-input-short { width: 5.5em; }
.pt-growth .pt-control input:focus { outline: 2px solid var(--pt-accent); outline-offset: 0; border-color: var(--pt-accent); }
.pt-growth .pt-control input::placeholder { color: #999; opacity: 1; }
.pt-growth .pt-control select.pt-choice {
  font: inherit; font-size: 16px; color: #111; background: #fff; border: 1px solid #888; border-radius: 3px;
  min-height: 32px; padding: 0.15em 0.3em; margin: 0; width: 100%; max-width: 32em;
}
.pt-growth .pt-control select.pt-choice:focus { outline: 2px solid var(--pt-accent); outline-offset: 0; border-color: var(--pt-accent); }
.pt-growth .pt-radios { gap: 0.9em; }
.pt-growth .pt-position { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 0.6em; font-size: 0.85em; }
.pt-growth .pt-position .pt-radio { min-height: 0; gap: 0.2em; }
.pt-growth .pt-position .pt-radio input { width: 1em; height: 1em; }
.pt-growth .pt-position-label { opacity: var(--pt-muted); }
.pt-growth .pt-radio { display: inline-flex; align-items: center; gap: 0.3em; min-height: 32px; cursor: pointer; }
.pt-growth .pt-radio input { width: 1.1em; height: 1.1em; margin: 0; }
.pt-growth .pt-error { flex-basis: 100%; color: var(--pt-error); font-size: 0.85em; }
.pt-growth .pt-has-error input[type="text"] { border-color: var(--pt-error); border-width: 2px; }
.pt-growth .pt-carried {
  flex-basis: 100%; font-size: 0.85em; padding: 0.15em 0.4em; border-left: 3px solid var(--pt-warn-border);
  background: var(--pt-warn-bg); border-radius: var(--pt-radius);
}
.pt-growth .pt-optional { border-top: 1px dotted var(--pt-line); margin-top: 0.3em; padding-top: 0.2em; }

.pt-growth details.pt-dates { border-top: 1px dotted var(--pt-line); margin-top: 0.3em; padding-top: 0.1em; }
.pt-growth details.pt-dates > summary, .pt-growth .pt-all > summary, .pt-growth .pt-group > summary {
  cursor: pointer; padding: 0.3em 0; display: list-item;
}
.pt-growth .pt-all-title { display: inline; margin: 0; } /* heading text sits beside the disclosure triangle */
.pt-growth details.pt-dates > summary { opacity: 0.85; }
.pt-growth details.pt-dates[open] > summary { opacity: 1; }
.pt-growth .pt-field.pt-group-start { margin-top: 0.55em; }

.pt-growth .pt-actions { display: grid; grid-template-columns: var(--pt-label-width) minmax(0, 1fr); column-gap: 0.5em; align-items: center; margin-top: 0.45em; }
.pt-growth .pt-actions .pt-primary { justify-self: start; }
.pt-growth .pt-reset { color: inherit; }

/* ---------- Results ---------- */
.pt-growth .pt-results { margin: 0.75em 0; }
.pt-growth .pt-results:focus { outline: none; }
.pt-growth .pt-block { margin: 0 0 0.9em; }
.pt-growth .pt-block-title { margin: 0; }
.pt-growth .pt-block-meta { margin: 0.1em 0 0; font-size: 0.85em; opacity: var(--pt-muted); }

.pt-growth .pt-table { width: 100%; border-collapse: collapse; margin-top: 0.3em; font-size: 0.95em; }
.pt-growth .pt-table th, .pt-growth .pt-table td { padding: 0.3em 0.3em; vertical-align: top; text-align: right; border: 0; }
.pt-growth .pt-table thead th { font-size: 0.85em; border-bottom: 2px solid var(--pt-line); vertical-align: bottom; white-space: nowrap; }
.pt-growth .pt-table .pt-col-measure { text-align: left; padding-left: 0; }
.pt-growth .pt-table tr.pt-row > * { border-top: 1px solid var(--pt-line); }
.pt-growth .pt-table tbody tr.pt-row:first-child > * { border-top: 0; }
.pt-growth .pt-value, .pt-growth .pt-entered, .pt-growth .pt-basis { display: block; }
.pt-growth .pt-secondary, .pt-growth .pt-entered, .pt-growth .pt-basis { font-size: 0.85em; opacity: var(--pt-muted); }
.pt-growth .pt-pct, .pt-growth .pt-z { white-space: nowrap; }
.pt-growth .pt-median, .pt-growth .pt-growth-cell { white-space: nowrap; }
.pt-growth .pt-table tr.pt-row-notes td { text-align: left; padding: 0 0 0.3em; }
.pt-growth .pt-row-message, .pt-growth .pt-row-note { margin: 0.1em 0; font-size: 0.88em; }
.pt-growth .pt-warning {
  margin: 0.2em 0; padding: 0.3em 0.5em; border-left: 4px solid var(--pt-error); background: var(--pt-error-bg);
  border-radius: var(--pt-radius); font-size: 0.92em;
}
.pt-growth .pt-none { opacity: 0.45; }
.pt-growth .pt-notes { margin: 0.4em 0; padding-left: 1.2em; font-size: 0.95em; }
.pt-growth .pt-notes li { margin: 0.2em 0; }
.pt-growth .pt-footnote { font-size: 0.82em; opacity: var(--pt-muted); margin: 0.3em 0; }

.pt-growth .pt-copy { margin: 0.5em 0; }
.pt-growth .pt-summary-text {
  margin: 0.3em 0 0; padding: 0.35em 0.5em; font: inherit; font-size: 0.88em; white-space: pre-wrap; background: var(--pt-soft);
  border: 1px dashed var(--pt-line); border-radius: var(--pt-radius); user-select: all; -webkit-user-select: all;
}
.pt-growth .pt-copy-status { font-size: 0.85em; margin-left: 0.4em; }

/* ---------- Alerts ---------- */
.pt-growth .pt-alert {
  margin: 0.5em 0; padding: 0.4em 0.6em; border-left: 4px solid var(--pt-warn-border);
  background: var(--pt-warn-bg); border-radius: var(--pt-radius);
}
.pt-growth .pt-alert-error { border-left-color: var(--pt-error); background: var(--pt-error-bg); }
.pt-growth .pt-alert p { margin: 0 0 0.2em; }
.pt-growth .pt-alert ul { margin: 0; padding-left: 1.2em; }
.pt-growth .pt-alert a { color: inherit; }

/* ---------- All growth charts (below the working area) ---------- */
.pt-growth .pt-selector { margin: 0.75em 0; border-top: 1px solid var(--pt-line); padding-top: 0.2em; }
.pt-growth .pt-group { margin-left: 0.9em; }
.pt-growth .pt-choices { list-style: none; margin: 0 0 0.3em; padding: 0 0 0 1em; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25em; }
.pt-growth .pt-choices li { margin: 0; padding: 0; }
/* The first line inside the open list, at the right: "Search all charts" (the server, with a charts URL) and
   "Expand all" / "Collapse all" (added by growth.js) */
.pt-growth .pt-all-tools { display: flex; justify-content: flex-end; align-items: center; gap: 1.2em; }
.pt-growth .pt-all-tools .pt-charts-link { font-size: 0.85em; color: var(--pt-accent); padding: 0.2em 0; }
.pt-growth .pt-all-tools button {
  font: inherit; font-size: 0.85em; color: var(--pt-accent); text-decoration: underline; cursor: pointer;
  background: none; border: 0; padding: 0.2em 0; margin: 0; min-height: 30px; line-height: 1.2;
}

/* ---------- Description in the Blocs sidebar (outside .pt-growth) ---------- */
.pt-growth-sidebar p { margin: 0 0 0.6em; }

/* ---------- Info ---------- */
.pt-growth .pt-info { margin-top: 0.75em; border-top: 1px solid var(--pt-line); font-size: 0.95em; }

/* Dates page: one rule above and one below the entries; no collapsible section, no extra lines */
.pt-growth-dates .pt-dates { border-top: 0; margin-top: 0; padding-top: 0; }
.pt-growth-dates .pt-info { border-top: 0; margin-top: 1em; }
.pt-growth .pt-info ul { padding-left: 1.2em; }
.pt-growth .pt-info li { margin: 0.2em 0; }
.pt-growth .pt-refs a { word-break: break-word; }
/* space below: on phones the Blocs sidebar content (#extracontainerN) follows directly */
.pt-growth .pt-sources-link { margin: 0.4em 0 1.5em; font-size: 0.95em; }

/* ---------- Sources and methods page (templates/sources.php) ---------- */
.pt-sources ul { padding-left: 1.2em; margin: 0.3em 0; }
.pt-sources li { margin: 0.35em 0; }
.pt-sources a { word-break: break-word; }
.pt-sources .pt-src-calc { margin-top: 1.8em; }
.pt-sources .pt-src-name { border-bottom: 1px solid #ddd; padding-bottom: 0.2em; }
.pt-sources .pt-src-cite { display: block; color: #555; font-size: 0.92em; }
/* Equations (as Figure 1 of Chou 2020): centered, generous white space, conditions in their own column */
.pt-sources .pt-src-eqs { margin: 1.2em auto 1.4em; border-collapse: collapse; font-size: 1.3em; }
.pt-sources .pt-src-eqs td { padding: 0.45em 0; vertical-align: middle; border: 0; }
.pt-sources .pt-src-eqs .pt-src-eq { text-align: left; width: 9em; padding-right: 1.5em; } /* same widths: both tables line up */
.pt-sources .pt-src-eqs .pt-src-when { text-align: left; width: 5em; }
.pt-sources .pt-src-eqs-wide .pt-src-eq { width: 17em; } /* WHO restricted LMS, CDC extended BMI: wider; these tables line up */
.pt-sources .pt-src-eqs-wide .pt-src-when { width: 6em; }
.pt-sources .pt-src-eqs math { font-size: 1em; }
.pt-sources .pt-src-howto { margin: 0.5em 0 0.5em 1.2em; }
.pt-sources .pt-src-scroll { overflow-x: auto; }
.pt-sources .pt-src-table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
.pt-sources .pt-src-table th, .pt-sources .pt-src-table td { text-align: left; padding: 0.25em 0.5em; border-bottom: 1px solid rgba(0, 0, 0, 0.15); vertical-align: top; }
/* no background of its own, so a Blocs theme's background shows through; a darker line marks the header row */
.pt-sources .pt-src-table th { font-weight: 600; background: transparent; border-bottom: 2px solid rgba(0, 0, 0, 0.35); }
.pt-sources .pt-src-verified { color: #555; font-size: 0.92em; margin: 0.3em 0; }
.pt-sources .pt-src-toc { columns: 2; }
.pt-sources .pt-src-back { font-size: 0.9em; }
@media (max-width: 600px) {
  .pt-sources .pt-src-toc { columns: 1; }
  .pt-sources .pt-src-table { font-size: 0.88em; }
  /* the wider formulas (WHO restricted LMS, CDC extended BMI) are too wide for a phone beside their condition: condition below, smaller */
  .pt-sources .pt-src-eqs-wide { font-size: 1.1em; margin-left: 0; }
  .pt-sources .pt-src-eqs-wide td { display: block; width: auto; padding-right: 0; }
  .pt-sources .pt-src-eqs-wide .pt-src-when { padding: 0 0 0.6em 1.5em; }
}

/* ---------- Table of growth charts (templates/charts.php) ---------- */
.pt-charts .pt-charts-search { display: flex; align-items: center; gap: 0.6em; margin: 0.5em 0 0.6em; }
.pt-charts .pt-charts-search input {
  flex: 1 1 auto; min-width: 0; max-width: 26em; min-height: 36px; padding: 0.25em 0.5em;
  font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */
  color: #111; background: #fff; border: 1px solid #888; border-radius: 3px;
}
.pt-charts .pt-charts-count { margin-left: auto; white-space: nowrap; font-size: 0.9em; opacity: var(--pt-muted); }
.pt-charts .pt-charts-none { margin: 0.6em 0; }
/* Like the old peditools.org home page: the icon, then the short name (a heading, the link) with the summary and the
   source (the chart's publication, linked) under it. A heading per chart selector group; on wide screens two charts
   per row as soft cards, like the Blocs tool cards. The same table markup at every width, so the search works the
   same (hidden rows close up, a group with none goes with its heading). The full width of the page (the calculators'
   760 px limit is for their forms). No background of its own, so a Blocs theme's background shows through.
   Type comes from the host page's theme (owner: override it only for a good reason): the group names and chart
   names are headings and the summaries paragraphs, so a theme gives them its heading and paragraph fonts, its line
   spacing and its colours. What is set here, and why, is noted at each rule. */
.pt-growth.pt-charts { max-width: none; line-height: inherit; }
.pt-charts .pt-charts-table { border-collapse: collapse; width: 100%; }
.pt-charts .pt-charts-table td { text-align: left; vertical-align: middle; padding: 0.6em 0.5em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.pt-charts .pt-charts-table td.pt-charts-chart { padding-left: 0.9em; }
/* group headings: smaller than a theme's h3 (about 20 px rather than 28), below the page's own section headings */
.pt-charts .pt-charts-table td.pt-charts-groupname { padding: 1.1em 0.5em 0.3em; border-bottom: 2px solid rgba(0, 0, 0, 0.22); }
.pt-charts .pt-charts-group:first-of-type td.pt-charts-groupname { padding-top: 0.3em; }
.pt-charts .pt-charts-grouptitle { font-size: 1.25em; margin: 0; }
/* chart names: the size of the Blocs tool card titles (18 px; a theme's h4 is larger), in the text colour (the
   owner's choice, like the Blocs card titles; !important: the Blocs theme sets h4 black with !important) */
.pt-charts .pt-charts-name { font-size: 1.125em; margin: 0 0 0.25em; color: inherit !important; }
/* links in the text colour, in the heading's font, no underline until hover or keyboard focus (owner; the Blocs
   tool cards do the same with their own classes). !important: the Blocs theme styles every link with !important */
.pt-charts .pt-charts-name a, .pt-charts .pt-charts-name a:link, .pt-charts .pt-charts-name a:visited,
.pt-charts .pt-charts-source a, .pt-charts .pt-charts-source a:link, .pt-charts .pt-charts-source a:visited {
  color: inherit !important; text-decoration: none !important;
}
.pt-charts .pt-charts-name a { font-family: inherit !important; font-weight: inherit !important; }
.pt-charts .pt-charts-name a:hover, .pt-charts .pt-charts-name a:focus,
.pt-charts .pt-charts-source a:hover, .pt-charts .pt-charts-source a:focus { text-decoration: underline !important; }
/* spacing inside the card: a theme's paragraph margin (16 px) would leave a gap before the source line */
.pt-charts .pt-charts-summary { margin: 0; }
.pt-charts .pt-charts-source { margin-top: 0.3em; font-size: 0.85em; opacity: var(--pt-muted); }
@media (min-width: 900px) {
  .pt-charts .pt-charts-table { display: block; }
  .pt-charts .pt-charts-table tbody.pt-charts-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75em; }
  .pt-charts .pt-charts-group + .pt-charts-group { margin-top: 0.75em; }
  .pt-charts .pt-charts-grouphead { display: block; grid-column: 1 / -1; }
  .pt-charts .pt-charts-table td.pt-charts-groupname { display: block; }
  .pt-charts .pt-charts-row { display: flex; align-items: center; background: rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 0.6em; }
  .pt-charts .pt-charts-row td { display: block; border: 0; padding: 0 0.4em 0 0; }
  .pt-charts .pt-charts-table .pt-charts-row td.pt-charts-chart { padding-left: 0.9em; }
  .pt-charts .pt-charts-row td.pt-charts-icon { flex: 0 0 auto; padding: 0; }
}
/* Icons (phase 14): the legacy home page icons (56 px, from 72 px files); a text tile in their WHO/CDC style for a
   chart without one, the age range on the last line, coloured by the chart selector group (owner's choice, for the
   site's blue background: vivid for the first three groups, muted for the others; white text contrast at least
   4.6:1; the words and the group headings also tell the groups apart) */
.pt-charts .pt-charts-table .pt-charts-icon { width: 56px; padding-right: 0; }
.pt-charts .pt-charts-icon a { display: block; width: 56px; text-decoration: none; }
.pt-charts .pt-charts-icon img { display: block; width: 56px; height: 56px; border-radius: 12px; }
.pt-charts .pt-charts-icon .pt-charts-tile {
  display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box;
  width: 56px; height: 56px; border-radius: 12px; overflow: hidden; text-align: center;
  background: #113d91; color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.1;
}
/* !important: the Blocs theme colours every link with !important (a { color: var(--swatch-…) !important; }) */
.pt-charts a.pt-charts-tile, .pt-charts a.pt-charts-tile:link, .pt-charts a.pt-charts-tile:visited,
.pt-charts a.pt-charts-tile:hover, .pt-charts a.pt-charts-tile:focus, .pt-charts .pt-charts-tile span {
  color: #fff !important; text-decoration: none !important;
}
.pt-charts .pt-charts-tile span { display: block; font-size: 14px; white-space: nowrap; }
.pt-charts .pt-charts-tile span:last-child { font-size: 13px; font-style: italic; }
.pt-charts .pt-charts-tile span:only-child { font-size: 14px; font-style: normal; }
.pt-charts .pt-charts-icon .pt-charts-tile-preterm { background: #c50549; }   /* ruby */
.pt-charts .pt-charts-icon .pt-charts-tile-infant { background: #025097; }    /* sapphire */
.pt-charts .pt-charts-icon .pt-charts-tile-pediatric { background: #025228; } /* emerald */
.pt-charts .pt-charts-icon .pt-charts-tile-special { background: #5e4a5b; }   /* muted mauve */
.pt-charts .pt-charts-icon .pt-charts-tile-body { background: #6e767a; }      /* muted grey */
.pt-charts .pt-charts-icon .pt-charts-tile-legacy { background: #6e767a; }    /* muted grey, as body for now */
.pt-charts .pt-charts-icon .pt-charts-tile-none { background: transparent; border: 1px dashed rgba(0, 0, 0, 0.25); }
/* Phones in portrait: the same two columns, a little tighter */
@media (max-width: 540px) {
  .pt-charts .pt-charts-table td { padding: 0.5em 0.3em; }
  .pt-charts .pt-charts-table td.pt-charts-chart { padding-left: 0.7em; }
}
.pt-growth code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95em; }

/* Very narrow screens: labels above the fields */
@media (max-width: 340px) {
  .pt-growth .pt-field, .pt-growth .pt-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) {
  .pt-growth { --pt-label-width: 12em; }
  .pt-growth .pt-control input[type="text"] { width: 9em; }
  .pt-growth .pt-table th, .pt-growth .pt-table td { padding: 0.35em 0.6em; }
  .pt-growth .pt-value { display: inline; margin-left: 0.5em; }
}

/* ---------- Print: results and the entries they were based on ---------- */
@media print {
  .pt-growth .pt-selector, .pt-growth .pt-recent, .pt-growth .pt-actions, .pt-growth button { display: none !important; }
}