/*
 * Nivron Documentation — Responsive content and Mermaid rules
 *
 * Load after the other Nivron stylesheets.
 */

/* Mermaid presentation */
.md-typeset .mermaid {
  width: 100%;
  margin: 1.5rem 0;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid rgba(130, 160, 255, 0.20);
  border-radius: 0.65rem;
  background:
    radial-gradient(circle at top left, rgba(61, 107, 255, 0.08), transparent 42%),
    rgba(7, 14, 29, 0.45);
  -webkit-overflow-scrolling: touch;
}

.md-typeset .mermaid svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.md-typeset .mermaid .nodeLabel,
.md-typeset .mermaid .edgeLabel {
  font-family: "Inter", sans-serif;
}

.md-typeset .mermaid .nodeLabel {
  font-size: 15px;
}

.md-typeset .mermaid .edgeLabel {
  font-size: 13px;
}

/* Tablet and mobile */
@media screen and (max-width: 76.1875em) {
  /*
   * The secondary "On this page" sidebar consumes too much width on small
   * screens. The page already exposes heading navigation through the theme.
   */
  .md-sidebar--secondary {
    display: none;
  }

  .md-content {
    max-width: none;
  }

  .md-content__inner {
    max-width: none;
  }

  /*
   * Prevent the expanded search field from floating above page content.
   * Search remains available through the header search control.
   */
  .md-search {
    position: fixed;
    z-index: 5;
  }

  .md-search:not([data-md-state="active"]) {
    visibility: hidden;
    pointer-events: none;
  }

  .md-search[data-md-state="active"] {
    visibility: visible;
    pointer-events: auto;
  }

  .md-typeset .mermaid {
    padding: 0.9rem;
  }
}

/* Mobile */
@media screen and (max-width: 44.984375em) {
  .md-main__inner {
    margin-top: 0;
  }

  .md-content__inner {
    margin: 0;
    padding: 1rem 0.8rem 1.5rem;
  }

  .md-typeset {
    font-size: 0.82rem;
  }

  .md-typeset h1 {
    margin-bottom: 1rem;
    font-size: 1.55rem;
  }

  .md-typeset h2 {
    margin-top: 1.8rem;
    font-size: 1.2rem;
  }

  .md-typeset h3 {
    margin-top: 1.3rem;
    font-size: 1rem;
  }

  .md-typeset .mermaid {
    margin: 1.1rem 0;
    padding: 0.75rem;
  }

  /*
   * Compact diagrams should fit the viewport. Complex diagrams remain
   * horizontally scrollable instead of shrinking labels until unreadable.
   */
  .md-typeset .mermaid svg {
    min-width: 430px;
  }

  .md-typeset .mermaid .nodeLabel {
    font-size: 16px;
  }

  .md-typeset .mermaid .edgeLabel {
    font-size: 14px;
  }
}