/* Conversion diagram — the drawing that shows the path of an AC pump conversion,
   and the few things the site's shared illustration vocabulary has no class for.

   The drawing itself is printed by components/conversion-diagram.php out of the
   site's own parts: .diagram with .diagram__box / __node / __icon / __label /
   __note / __line / __head / __glow / __dot, whose paint, entrance, link draw
   and travelling energy highlight live in assets/css/illustrations.css and take
   their colours from assets/css/tokens.css. Both arrangements of the picture are
   printed and the shared sheet shows one at a time.

   This sheet adds only what is left: the white ground the inverter's picture is
   fitted to, the label size the stacked arrangement is read at on a phone, and
   the stop for a visitor whose browser asks for less motion. No colour is written
   here that is not a token, no HTML is positioned from this file, and the drawing
   introduces no animation of its own — the energy path and its highlight are the
   site's. */

/* The inverter's picture sits on a white ground inset from the node's edge, so a
   photograph of any shape — landscape, square or portrait — keeps the rhythm of
   the two boxes beside it. This ground is the only surface the drawing adds. */
.acn-dg__ground{
  fill:var(--ill-panel);
  stroke:var(--color-line);
  stroke-width:1.5;
}

/* The picture inside that ground is placed and sized by the markup (its x, y,
   width and height) and fitted with preserveAspectRatio="xMidYMid meet", so
   nothing here sizes it: it fills the ground on its own terms rather than being
   stretched to it. .acn-dg__shot is the drawing's own hook on that element and
   carries no rule of its own. */

/* The stacked arrangement is the one a narrow screen shows, and it is drawn at
   about 300 units wide, so it is read at very nearly its own scale. The labels
   take one step up under 420px to keep the node names legible at 360px wide, the
   longest of them being the inverter's. */
@media (max-width:420px){
  .diagram--conversion .diagram__svg--stack .diagram__label{font-size:16px}
  .diagram--conversion .diagram__svg--stack .diagram__note{font-size:13px}
}

/* Motion. The site's policy in assets/css/motion.css stops the classes it names
   and leaves the rest: a diagram's travelling highlight is .diagram__dot and
   .diagram__glow, which it does not name, and the node entrance and the link
   draw are transitions rather than animations. So this block stops every moving
   part of this drawing — the arrival, the draw and the highlight — and prints the
   finished picture instead of a held one: the lines are already drawn, the nodes
   are already in place, and the highlight is off. A still line is the honest
   reading of a path that is not moving. */
@media (prefers-reduced-motion: reduce){
  .diagram--conversion .diagram__node{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  .diagram--conversion .diagram__line{
    stroke-dashoffset:0 !important;
    transition:none !important;
  }

  .diagram--conversion .diagram__head{
    opacity:1 !important;
    transition:none !important;
  }

  .diagram--conversion .diagram__glow,
  .diagram--conversion .diagram__dot{
    animation:none !important;
    opacity:0 !important;
  }
}