/* Documentation columns and content blocks share the available page width. */
body[data-public-page="docs"] {
  --public-max-width: 1760px;
  --page-max: var(--public-max-width);
  --content-max: 1200px;
  --rail-width: 280px;
  --docs-column-gap: 32px;
}

body[data-public-page="docs"] .main ul,
body[data-public-page="docs"] .main ol {
  max-width: none;
}

body[data-public-page="docs"] .main p {
  max-width: 84ch;
}

body[data-public-page="docs"] .callout,
body[data-public-page="docs"] .config-box,
body[data-public-page="docs"] .code-block,
body[data-public-page="docs"] .table-wrapper {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body[data-public-page="docs"] .step p,
body[data-public-page="docs"] .feature-card p,
body[data-public-page="docs"] .pricing-card p,
body[data-public-page="docs"] .tool-card p,
body[data-public-page="docs"] .callout p {
  max-width: none;
}

/* Override the legacy viewport widths, including their mobile !important. */
body[data-public-page="docs"] .steps,
body[data-public-page="docs"] .feature-grid,
body[data-public-page="docs"] .pricing-grid,
body[data-public-page="docs"] .tool-grid {
  width: 100% !important;
  min-width: 0;
  max-width: 100% !important;
}

body[data-public-page="docs"] .step,
body[data-public-page="docs"] .feature-card,
body[data-public-page="docs"] .pricing-card,
body[data-public-page="docs"] .tool-card {
  min-width: 0;
  max-width: 100%;
}

body[data-public-page="docs"] #docs-cms-content {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

body[data-public-page="docs"] #docs-cms-content .cms-steps,
body[data-public-page="docs"] #docs-cms-content .cms-figure,
body[data-public-page="docs"] #docs-cms-content .cms-callout {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-inline: 0;
}

body[data-public-page="docs"] .doc-rail {
  display: grid;
  gap: 16px;
}

/* Full-width values keep the endpoint readable instead of splitting its host. */
body[data-public-page="docs"] .rail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-content: normal;
  gap: 4px;
}

body[data-public-page="docs"] .rail-row b {
  text-align: left;
  overflow-wrap: anywhere;
}

body[data-public-page="docs"] .rail-actions a {
  min-height: 44px;
}

/* Keep a comfortable reading column when three columns no longer fit. */
@media (max-width: 1599px) {
  body[data-public-page="docs"] .doc-rail {
    display: none;
  }

  body[data-public-page="docs"] .main {
    padding-right: 0;
  }
}