.diagnostic-intro {
  padding-top: 72px;
  padding-bottom: 80px;
}
.diagnostic-intro h1 {
  margin-top: 28px;
}
.diagnostic-intro a {
  color: var(--accent-dark);
}
.diagnostic-summary {
  max-width: 36em;
  font-size: var(--size-h3);
  line-height: 1.65;
}
.diagnostic-document {
  display: grid;
  grid-template-columns: 220px minmax(0, 880px);
  align-items: start;
  justify-content: center;
  gap: 64px;
  padding-bottom: 48px;
}
.diagnostic-toc {
  align-self: start;
  align-content: start;
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 0;
}
.diagnostic-toc-label {
  display: block;
  width: 100%;
  padding: 8px 14px;
  color: var(--text-muted);
  font-size: var(--size-caption);
}
.diagnostic-toc a {
  width: 100%;
  border-radius: var(--r-sm);
}
.diagnostic-body > section + section {
  margin-top: var(--section-space);
  padding-top: 36px;
  border-top: var(--line) solid var(--border);
}
.diagnostic-body > section > h2:first-child {
  margin-top: 0;
}
.diagnostic-body h2 {
  color: var(--accent-dark);
}
.diagnostic-body p {
  overflow-wrap: anywhere;
}
.diagnostic-body caption {
  padding-top: 12px;
  padding-bottom: 16px;
  color: var(--text-muted);
  font-size: var(--size-small);
  text-align: left;
}
.diagnostic-body .table-scroll {
  margin-top: 28px;
  margin-bottom: 32px;
}
.diagnostic-body section[id] {
  scroll-margin-top: 32px;
}
@media (max-width: 1100px) {
  .diagnostic-document {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 32px;
  }
}
@media (max-width: 768px) {
  .diagnostic-intro {
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .diagnostic-summary {
    font-size: var(--size-body);
  }
  .diagnostic-document {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .diagnostic-toc {
    position: static;
  }
  .diagnostic-toc a {
    width: auto;
  }
}