/* The frame's title bar: a browser's three dots before the page's title. */
.directive-webide .container-title::before {
  flex: 0 0 auto;
  content: "";
  display: inline-block;
  height: 0.65rem;
  aspect-ratio: 1 / 1;
  margin-right: 3.6em;
  margin-left: -0.6em;
  border-radius: 9999px;
  opacity: 0.3;
  box-shadow:
    0.8em 0,
    2.1em 0,
    3.4em 0;
}

/* The frame shares the panel with the title bar: flex: 1 with min-height: 0
   leaves it exactly the rest, where height: 100% would push it out below. */
.directive-webide iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: none;
  background-color: white;
}

/* With compare: the frame at the size the pages are compared at, from the
   top left, as the target is shown. */
.directive-webide .webide-frame {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.directive-webide .webide-frame iframe {
  display: block;
  flex: none;
}