/* Shared typography, document layout and Mermaid containers. */
@import url("./tokens.css");

:root {
  --md-text-font: var(--font-body);
  --md-code-font: var(--font-code);
}

html,
body {
  overflow-x: clip;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-feature-settings: "liga" 1, "calt" 1;
}

code,
kbd,
pre {
  font-family: var(--font-code);
  font-feature-settings: "liga" 0, "calt" 0;
}

.md-typeset {
  font-size: var(--text-reading);
  line-height: 1.8;
}

.md-typeset figure:not(.kb-home-portrait):has(> figcaption) {
  font: inherit;
}

.md-typeset figure:not(.kb-home-portrait) > figcaption {
  max-width: 100%;
  margin: .55em auto 0;
  color: var(--color-caption);
  font-family: inherit;
  font-size: .85em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-body);
  font-style: normal;
}

/* Keep prose readable on wide screens without changing the homepage or archive. */
.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) {
  width: calc(100% - 1.6rem);
  max-width: var(--width-reading);
  margin-inline: auto;
  font-size: var(--text-doc-body);
  line-height: var(--line-doc-body);
}

/* Document typography follows https://huggingface.co/docs/inference-providers/index. */
.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
}

.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) h1 {
  font-size: var(--text-doc-h1);
  line-height: 32px;
}

.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) h2 {
  font-size: var(--text-doc-h2);
  line-height: 28px;
}

.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) h3 {
  font-size: var(--text-doc-h3);
  line-height: 28px;
}

.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) :is(h4, h5, h6) {
  font-size: var(--text-doc-body);
  line-height: 1.5;
}

.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) code {
  font-size: var(--text-doc-code);
  line-height: 20px;
}

.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) pre,
.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) pre code {
  font-size: var(--text-doc-code);
  line-height: 1.8;
}

.md-content__inner:not(.kb-blog-index):not(:has(.kb-home, .kb-blog-post, .kb-projects, .kb-now)) table:not([class]) {
  font-size: var(--text-doc-table);
  line-height: 1.7142857143;
}

.md-typeset .md-button,
.md-typeset .tabbed-labels {
  font-family: var(--font-body);
}

/* Mermaid renders into a closed shadow root; contain its host, not the SVG. */
.md-typeset .mermaid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  --md-mermaid-font-family: var(--font-body);
}

.md-typeset .kb-diagram {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-block: var(--space-3) var(--space-6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.md-typeset .kb-diagram--horizontal > .mermaid {
  width: max(100%, var(--width-diagram-horizontal));
  max-width: none;
}

.md-typeset .kb-diagram:focus-visible {
  outline: var(--rule-focus) solid var(--color-focus);
  outline-offset: var(--space-1);
}

.md-typeset .kb-diagram[data-drag-scroll] {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.md-typeset .kb-diagram.is-dragging {
  cursor: grabbing;
}

.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  filter: brightness(0) invert(1);
}