/* Page frame: the same content grid as epoch.ai (src/styles/layout.scss), so the playground has the same width there and here. */
body {
  width: 100vw;
  display: grid;
  grid-template-columns: [full-start] 1fr [content-start] repeat(var(--column-count), var(--column-width)) [content-end] 1fr [full-end];
  column-gap: var(--column-margin);
  background: var(--color-white, #fff);
}

.site-header {
  grid-column: full-start / full-end;
  display: grid;
  grid-template-columns: subgrid;
  border-bottom: 1px solid var(--Gray-200);
}

.site-header-inner {
  grid-column: content-start / content-end;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 50px;
  padding-block: 8px;
}

.site-header-logo {
  display: flex;
  flex-shrink: 0;
}

.site-header-note {
  margin: 0;
  font-size: var(--Typeface-Size-Body-S);
  line-height: 1.4;
  color: var(--Gray-600);
}

.site-header-note a {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .site-header-inner {
    gap: 16px;
  }

  .site-header-note {
    font-size: var(--Typeface-Size-Body-XS, 13px);
  }
}

body > main {
  grid-column: content-start / content-end;
  /* .gate pulls itself up by 46px to sit under the epoch.ai nav, which this page doesn't have. */
  padding-top: 46px;
}

/* The docs were styled against browser-default lists and rules, which the website's reset (in site.css) strips. */
#documentation-content ul,
#documentation-content ol {
  margin-block: 1em;
  padding-left: 40px;
}

#documentation-content ul {
  margin-top: 0;
  list-style: disc;
}

#documentation-content ol {
  list-style: decimal;
}

#documentation-content > hr {
  margin-bottom: 0.5em;
}

.citation-modal {
  /* The site reset zeroes margins, which un-centers native dialogs. */
  margin: auto;
  max-width: min(720px, calc(100vw - 32px));
  padding: 24px;
  border: none;
  border-radius: 8px;
  font-family: var(--font-messina-sans);
}

.citation-modal::backdrop {
  background: rgb(0 0 0 / 40%);
}

.citation-modal .close-button {
  float: right;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
}

.citation-modal h4,
.citation-modal h5,
.citation-modal p {
  margin-bottom: 12px;
}

.citation-modal pre {
  white-space: pre-wrap;
  font-size: 13px;
}