/**
 * utility-connections.css — what the annotated step-one figure on
 * /utility-connections needs that no other figure does.
 *
 * The frame, the commentary theme and the leader-line/pin switch are shared,
 * in spec-figure.css. The component is in wizard-step.css and the overlay in
 * annotate.{css,js}. Only the two rules below are this page's.
 */

.spec-figure {
  --spec-stage: 440px;
}

@media (max-width: 34rem) {
  /* The gutter stays: a pin sits on the component's corner, and an
     edge-to-edge component would clip half of it. */
  .spec-figure__stage,
  .modal {
    width: 100%;
  }
}