.view {
  flex-direction: column;

  flex: 1 0 auto;
  min-width: 0;
  max-width: 100vw;

  .error-wrap {
    flex: 0 0 auto;
    padding: 1em 2em;
    overflow: hidden;

    color: var(--gray-darker);
    background: var(--gray-fail);

    &.empty {
      display: none;
    }

    > span {
      display: inline-block;
      margin-bottom: 0.5em;

      font-weight: bold;
      color: #f00;
    }

    > pre {
      margin: 0;
    }
  }
}

.content {
  flex: 1 0 auto;
  overflow: auto;
  padding: 1em 2em;
  margin: 0 1em;
  align-self: flex-start;
  min-width: 30vw;
  background: var(--white);

  @media only screen and (max-width: 725px) {
    margin: 0;
  }

  position: relative;

  img, video {
    width: inherit;
    height: inherit;
  }

  ul, ol {
    break-before: avoid-page;
    break-inside: avoid-page;
  }

  .wide.markdown,
  .wide .markdown {
    max-width: max-content;
  }

  .markdown {
    position: relative;
    max-width: 860px;
    text-align: justify;

    > blockquote {
      @include left-border;

      line-height: normal;
      margin: 1rem var(--margin-wide);
      padding: 1rem;
      background: var(--gray-bright);
      border-color: var(--gray-neutral);
    }
  }

  p {
    orphans: 6;
    widows: 6;
  }

  .markdown,
  .markdown > p,
  .markdown > p > a {
    p {
      max-width: 100%;
    }

    > img, > video {
      display: block;
      max-width: 100%;
      max-height: 50vh;

      padding: 0 2em;
      box-sizing: border-box;
    }
  }

  .markdown {
    h2 + p,
    h3 + p,
    h4 + p,
    h5 + p,
    h6 + p {
      margin-top: 0.2em;
    }
  }

  .markdown > ul, .markdown > ol {
    margin-block-end: 1em;
    text-align: none;

    > li > p:first-child { margin-top: 0; }
    > li > p:last-child { margin-bottom: 0; }

    &:has(> li > p + p) > li {
      margin-block-start: 1em;
      margin-block-end: 1em;
    }
  }

  .embed {
    display: block;
    width: 100%;
    break-inside: avoid-page;

    line-height: normal;

    .description {
      text-align: center;
    }

    &.inline {
      display: inline-block;
    }

    &.desc {
      display: inline-block;
      padding: 0.5em;
      margin: 0.2em;
      background: var(--gray-bright);
    }

    > *:not(.description) {
      max-width: 100%;
    }
  }

  .embed-cover > * {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  pre, code {
    text-align: initial;
  }

  pre > code {
    @include left-border;
    border-color: var(--gray-dark);

    display: block;
    margin: 0 var(--margin-wide);
    padding: 1em;
    white-space: pre-wrap;
    break-inside: avoid-page;
    overflow-x: auto;

    line-height: normal;
    background: #1d1f21;
    color: #c5c8c6;
  }

  .example, .well {
    @include left-border;

    margin: 1rem var(--margin-wide);
    padding: 1rem;
    line-height: normal;
    background: var(--gray-bright);
    border-color: var(--gray-neutral);
    break-inside: avoid-page;
  }

  .well-warning {
    border-color: var(--gray-fail);
  }
}

.action-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.action-btn {
  font-size: 1.2em;
  font-weight: normal;

  padding: 0.25em 0.5em;
  border-radius: 0.2em;

  color: var(--gray-bright);
  background: var(--gray-dark);
  border: 1px solid var(--gray-dark);

  transition: background 500ms;

  &.secondary {
    background: transparent;

    border: 1px solid var(--gray-dark);
    color: var(--gray-dark);
  }

  &:hover {
    filter: none;
  }
}