/*
 * 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 per age in columns (it scrolls sideways on a narrow phone).
 * 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; }

/* The table scrolls sideways if it is still too wide: the Blocs theme hides overflow on the body, which cut off the
   last column on narrow phones */
.pt-growth .pt-table-wrap { overflow-x: auto; }
.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; }
/* Results in columns, one line per measure (owner, 2026-10-22, phase 20 E); on a phone the table scrolls sideways.
   Nothing in the results is greyed out but the "—" of an empty cell (owner, 2026-10-22) */
.pt-growth .pt-table td, .pt-growth .pt-table .pt-col-measure { white-space: nowrap; }
.pt-growth .pt-table tbody .pt-col-measure { font-weight: normal; }
/* A "Very unusual value": the value in the error colour (its message is below the tables) */
.pt-growth .pt-table .pt-flag { color: var(--pt-error); font-weight: bold; }
/* The rows' notes, below the tables; the warnings first, in the error colour (a safety prompt) */
.pt-growth .pt-table-notes { list-style: none; margin: 0.6em 0 0.3em; padding: 0; font-size: 0.88em; }
.pt-growth .pt-table-notes li { margin: 0.2em 0; }
.pt-growth .pt-table-notes .pt-table-note-warning {
  padding: 0.3em 0.5em; border-left: 4px solid var(--pt-error); background: var(--pt-error-bg); border-radius: var(--pt-radius);
  color: var(--pt-error); font-weight: bold;
}
/* The "Apply WHO SD23 correction" checkbox under the chart's name: small and grey (rarely unticked; phase 20 C) */
.pt-growth .pt-sd23 { margin: -0.2em 0 0.4em; font-size: 0.8em; opacity: var(--pt-muted); }
.pt-growth .pt-sd23 input { margin: 0 0.3em 0 0; vertical-align: -0.1em; }
/* Above a block's table, e.g. a corrected age before the due date (extrapolated): the title larger and in the error
   colour, overriding the theme's text colour because it is a safety warning; the explanation in the theme's text */
.pt-growth .pt-block-warning {
  margin: 0.3em 0 0.4em; padding: 0.35em 0.6em; border-left: 4px solid var(--pt-error); background: var(--pt-error-bg);
  border-radius: var(--pt-radius);
}
.pt-growth .pt-block-warning p { margin: 0.15em 0; }
.pt-growth .pt-block-warning .pt-block-warning-title { font-size: 1.2em; font-weight: bold; color: var(--pt-error); }
.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-notes ul { margin: 0.2em 0; padding-left: 1.2em; }
.pt-growth .pt-decision-title { margin: 0.6em 0 0.2em; }
.pt-growth .pt-footnote { font-size: 0.88em; margin: 0.3em 0; } /* as the notes above it */

.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; }
  /* the whole card opens the chart, like the Blocs tool cards (their stretched-link): the name's link covers the card
     with an empty ::after; the source link sits above it and still opens the publication (the line is raised, not
     the link: its opacity caps the link's z-index; clicks beside the link go through to the card). Cards only: in the
     narrow table layout (phones; owner) only the name and icon are links, as older Safari ignores position on a table
     row and the cover would spread over the table */
  .pt-charts .pt-charts-row { position: relative; }
  .pt-charts .pt-charts-name a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
  .pt-charts .pt-charts-source { position: relative; z-index: 2; pointer-events: none; }
  .pt-charts .pt-charts-source a { pointer-events: auto; }
  /* the Blocs tool card hover (.tool-card:hover), and the same for the keyboard (a separate rule: a browser without
     :has drops only this one) */
  .pt-charts .pt-charts-row:hover { box-shadow: 2.83px 2.83px 4px #333333; }
  .pt-charts .pt-charts-row:has(a:focus-visible) { box-shadow: 2.83px 2.83px 4px #333333; }
  /* the card's shadow shows the hover, so the name is not underlined then (owner); still underlined on keyboard focus */
  .pt-charts .pt-charts-name a:hover { text-decoration: none !important; }
}
/* 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; }

/* Phones: tighter table cells (the table scrolls sideways in its box where it is still too wide) */
@media (max-width: 420px) {
  .pt-growth .pt-table th, .pt-growth .pt-table td { padding-left: 0.25em; padding-right: 0.25em; }
}
/* 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; }
}

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