/* === Code blocks: proper monospace rendering for ASCII diagrams === */
.md-typeset pre > code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  letter-spacing: 0;
  white-space: pre;
  overflow-x: auto;
  tab-size: 4;
}

/* Ensure code blocks don't overflow container */
.md-typeset pre {
  overflow-x: auto;
  max-width: 100%;
}

/* Mermaid diagrams: proper sizing */
.md-typeset .mermaid {
  text-align: center;
  margin: 1.5em 0;
}

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

/* === Tables: responsive and clean === */
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.md-typeset__scrollwrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.6em 0.9em;
  white-space: normal;
  word-break: break-word;
  vertical-align: top;
}

.md-typeset table:not([class]) th {
  font-weight: 600;
  white-space: nowrap;
}

/* Zebra striping for readability */
.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background-color: var(--md-default-fg-color--lightest);
}

/* === Admonitions inside content === */
.md-typeset .admonition,
.md-typeset details {
  font-size: 0.85rem;
}

/* === TOC: prevent overlap with content === */
.md-sidebar--secondary {
  width: 13rem;
}

/* === Inline code: softer look === */
.md-typeset code {
  font-size: 0.82em;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* === Wide content: full-width on large screens === */
@media screen and (min-width: 76.25em) {
  .md-content {
    max-width: 52rem;
  }
}

/* === Print-friendly: don't break diagrams === */
@media print {
  .md-typeset pre {
    white-space: pre;
    overflow: visible;
    page-break-inside: avoid;
  }
  .mermaid {
    page-break-inside: avoid;
  }
}