/* Framing of the preview — nothing here ships with the component.

   This page is embedded as an <iframe> in a 16/9 frame. Four traps, all dealt
   with below.

   1. box-sizing on html and body: without it, inner padding adds to the 100 %
      height and the content drifts down.
   2. The scale is driven by the width, with no ceiling. The reference is
      1440 px wide for a 14 px body copy, that is a ratio of 102.857: keeping
      it, the layout is the same at every size, so a single constant is
      enough. A min() would break that property.
   3. The responsive breakpoints of the component are neutralised: they change
      --fd-font-size, which would contradict point 2.
   4. Nothing to hide here: the diagram has no entry animation, but the moving
      dots do have to be stilled at the moment of the capture — that is the
      job of the script of the bench, not of this sheet. */

html,
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #0d0d0d;
}

/* The scene takes the whole frame: it is a diagram, it fills what it is
   given. Its aspect ratio and its radius are taken away, since the frame of
   the reference page already carries them. */
.flow-diagram {
  --fd-font-size: calc(100vw / 102.857);

  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Point 3: the breakpoints of the component redefine --fd-font-size. Inside
   the frame, the scale must depend on the width alone. */
@media (max-width: 900px) {
  .flow-diagram { --fd-font-size: calc(100vw / 102.857); }
}

@media (max-width: 640px) {
  .flow-diagram {
    --fd-font-size: calc(100vw / 102.857);
    aspect-ratio: auto;
  }
  .flow-diagram__dock {
    font-size: calc(100vw / 102.857);
    --fd-font-size: calc(100vw / 102.857);
  }
}

@media (max-width: 380px) {
  .flow-diagram { --fd-font-size: calc(100vw / 102.857); }
}