/* The recorded Q-H curve of one pump model, drawn as an inline SVG by
   components/qh-plot.php. Every value here comes from tokens.css: the white
   ground and the thin line for the frame, engineering blue for the curve, navy
   for the figures that name a range, muted grey for the rest.

   The drawing is a fixed 640 by 380 viewBox that scales to the panel it sits
   in, so its type is measured in the drawing's own units and shrinks with it.
   To keep the figures readable in a narrow panel the labels take a larger
   share of the drawing below 700px, where the component's margins have already
   been sized for that size; the marks likewise step up so a point stays a
   point. Nothing here states a rating or a number of its own. */

.qh-plot{
  margin:0;
  padding:var(--space-3);
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
}

.qh-plot__svg{
  display:block;
  width:100%;
  height:auto;
  font-family:var(--font-body);
}

/* The frame: the grid speaks quietly, the two axes are drawn as the edges of
   the plot area, and both are decoration — the labelled figures are the
   numbers a reader takes. */
.qh-plot__grid{
  fill:none;
  stroke:var(--color-line);
  stroke-width:1;
  stroke-dasharray:4 4;
}

.qh-plot__axis{
  fill:none;
  stroke:var(--color-muted);
  stroke-width:1;
}

/* The curve, and the recorded point on it. The stroke keeps its width however
   small the drawing is scaled, so a line the data does not support never
   appears thicker than one it does. */
.qh-plot__line{
  fill:none;
  stroke:var(--color-accent);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.qh-plot__point{
  fill:var(--color-surface);
  stroke:var(--color-accent);
  stroke-width:2.5;
  vector-effect:non-scaling-stroke;
}

.qh-plot__tick{
  fill:var(--color-muted);
  font-size:13.5px;
  font-variant-numeric:tabular-nums;
}

/* The recorded minimum and maximum of each axis: the ends of the range, which
   a reader is meant to take away from the drawing. */
.qh-plot__tick--end{
  fill:var(--color-heading);
  font-weight:600;
}

.qh-plot__axis-title{
  fill:var(--color-heading);
  font-size:13.5px;
  font-weight:600;
}

.qh-plot__caption{
  margin:var(--space-2) 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--color-muted);
}

@media (max-width:700px){
  .qh-plot{padding:var(--space-2)}
  .qh-plot__tick{font-size:17px}
  .qh-plot__axis-title{font-size:15px}
  .qh-plot__point{r:5px}
}