/* Logo and Sidebar styling */
.sidebar h1.logo {
  max-width: 140px !important;
  margin: 0 auto 10px !important;
  display: block !important;
}

.sidebar h1.logo img {
  max-width: 140px !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
}

/* Sidebar blurb/description */
.sidebar p.blurb {
  font-size: 0.85em;
  text-align: center;
  color: #666;
  font-style: italic;
  margin-bottom: 20px;
  line-height: 1.3;
}

/* Sidebar navigation headers */
.sidebar h3 {
  font-size: 1.05em;
  margin-top: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

/* Hide navigation header if it's too repetitive */
.sidebar h3:first-of-type {
  margin-top: 10px;
}

/* Mermaid container */
.mermaid {
  width: 100% !important;
  max-width: 100% !important;
}

/* SVG scaling — SAFE */
.mermaid-small svg {
  width: 100% !important;
  height: auto !important;
  transform: scale(0.65);
  /* 🚫 never below 0.6 */
  transform-origin: top center;
}

/* Node text — SAFE */
.mermaid-small .nodeLabel,
.mermaid-small foreignObject div {
  font-size: 10px !important;
  /* 🚫 never below 9px */
  line-height: 1.2 !important;
  /* 🚫 must be >= 1.1 */
}

/* Edge labels */
.mermaid-small .edgeLabel {
  font-size: 9px !important;
}

/* Node padding — REQUIRED */
.mermaid-small .node rect,
.mermaid-small .node polygon {
  padding: 2px !important;
}

/* No scrollbars */
.mermaid-small {
  overflow: hidden;
}
