/* Docs.
 *
 * Written from measurements taken off paper.design (/docs and /docs/mcp at a
 * 1381 viewport), not from impressions. Reference values, so the next person
 * does not have to re-measure:
 *
 *   column          1080 wide, 1px rules both sides
 *   prose column    718 wide, its own rules, 321 in from the outer edge
 *   index hero      56/56 w360, ls -1.12
 *   article hero    48/48 w360, ls -0.96   (smaller than the index hero)
 *   back link       16/24 w400, ls 0.24, uppercase, muted
 *   lede            18/28 w400, ls -0.27
 *   section heading 24/32 w550, ls 0.24
 *   body copy       18/28 w400, 24 between paragraphs
 *   rail label      12/20 w550, ls 0.21, ink, uppercase
 *   rail item       14/20 w400, ls 0.21, muted
 *   card label/desc 18/28, card title 18/28 w480
 *
 * Colours are the site's paper palette from paper.css. Nothing here hardcodes
 * a colour, and nothing references the shade scale.
 */
/* Three tones, not one. Beside the hero the page is the deeper cream and
   carries the grid; below that rule it drops to the lighter band colour with
   no grid at all; the column itself is paper. Running the grid the whole way
   down, on one flat colour, is what made it read wrong. */
html:has(.docs-page) {
  --docs-paper: var(--pp-band);
  --docs-band: var(--pp-cream);
  --docs-surface: var(--pp-paper);
  --docs-ink: var(--pp-fg);
  --docs-muted: var(--pp-gray);
  --docs-rule: var(--pp-border);
  --docs-chip: var(--pp-band);
  background: var(--docs-paper);
}

html:has(.docs-page) body,
html:has(.docs-page) .site-footer {
  background: var(--docs-paper);
}

.docs-page {
  position: relative;
  z-index: 2;
  color: var(--docs-ink);
  background: transparent;
  /* The column's right-hand handle straddles the edge (left: 100%, pulled back
     by half its 12px). Once the column runs full-bleed - anything under 1080 -
     that half hangs 6px past the viewport and the page becomes horizontally
     scrollable, which on a phone lets the whole layout pan under the fixed nav.
     Clip it: clip does not make a scroll container, so the sticky rail still
     resolves against the viewport. */
  overflow-x: clip;
}

/* The banded strip behind the hero: deeper cream, gridded, exactly as tall as
   the hero so it stops at the same rule the handles sit on. */
.docs-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 360px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--docs-band);
  background-image: var(--pp-grid-tile);
  background-size: 120px 120px;
  background-position: calc(50% + 60px) 0;
  background-repeat: repeat;
}

@media (max-width: 899px) {
  .docs-band {
    height: 240px;
  }
}

/* The column every docs page sits in. */
.docs-hero,
.docs-index,
.docs-layout {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  background: var(--docs-surface);
  border-inline: 1px solid var(--docs-rule);
}

@media (min-width: 1471px) {
  .docs-hero,
  .docs-index,
  .docs-layout {
    max-width: 1321px;
  }
}

/* ===== hero =====
   The reference sets a fixed 360px block with its content anchored to the
   bottom (its classes read h-360 flex flex-col justify-end), which is why the
   index and an article page have the same header height even though only one
   of them carries a back link. Content-sized heroes cannot match.

   The rule under it belongs to the column, not to the padded box inside, or it
   stops short of the edges the handles sit on. Declared once, here. */
.docs-hero {
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 64px 35px;
  border-bottom: 1px solid var(--docs-rule);
}

/* The reference drops the hero to a fixed 240 under 900 (max-[899px]:h-240),
   which is what keeps its index and its article headers the same height on a
   phone. We take the fixed box but not the 240: its crumb reads "docs /mcp"
   and ours "docs /tempor-incididunt", which wraps to two lines at 40px on a
   386 screen, so the pair needs four lines of headline plus the back link.
   320 fits that with room to spare and still leaves both pages equal. */
@media (max-width: 899px) {
  .docs-hero {
    height: 320px;
    padding: 96px 24px 24px;
  }
}

/* Pinned to the top of the hero while everything else stays anchored to the
   bottom, which is how the reference gets a back link without changing the
   header's height. */
.docs-hero__back {
  align-self: flex-start;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  color: var(--docs-muted);
  margin: 0 0 90px;
}

/* In the phone's fixed box that 90px spacer overruns the content height, and
   flex-end pushes the whole stack up until the back link sits behind the nav.
   auto pins it to the top of the box instead. */
@media (max-width: 899px) {
  .docs-hero__back {
    margin-bottom: auto;
  }
}

.docs-hero__back:hover {
  color: var(--docs-ink);
}

.docs-hero__crumb,
.docs-hero__ghost,
.docs-hero__title {
  font-weight: 360;
  margin: 0;
}

/* One ladder for both heroes, the reference's: 40 below 900, 48 from 900, 56
   from 1471. The line box always equals the size and the tracking is held at
   -0.02em so it steps with it. The article and the index used to sit two rungs
   apart at the same width, and neither ever stepped down for a phone. */
.docs-hero__crumb,
.docs-hero__ghost,
.docs-hero__title {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 900px) {
  .docs-hero__crumb,
  .docs-hero__ghost,
  .docs-hero__title {
    font-size: 48px;
  }
}

@media (min-width: 1471px) {
  .docs-hero__crumb,
  .docs-hero__ghost,
  .docs-hero__title {
    font-size: 56px;
  }
}

.docs-hero__crumb,
.docs-hero__title {
  color: var(--docs-ink);
}

.docs-hero__crumb span,
.docs-hero__ghost {
  color: var(--docs-muted);
}

/* The hero anchors its own content now; no spacer needed. */
.docs-hero__divider {
  display: none;
}

/* ===== index: hairline cells with a handle on every crossing ===== */
.docs-index {
  position: relative;
  margin-bottom: 160px;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .docs-index {
    grid-template-columns: 1fr 1fr;
  }
}

.docs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 60px 64px;
  min-height: 280px;
  border-bottom: 1px solid var(--docs-rule);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 900px) {
  .docs-card:nth-child(odd) {
    border-right: 1px solid var(--docs-rule);
  }
}

@media (max-width: 899px) {
  .docs-card {
    padding: 40px 24px;
    min-height: 0;
  }
}

.docs-card__label {
  font-size: 18px;
  line-height: 28px;
  color: var(--docs-muted);
}

.docs-card__title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 480;
  margin: 0;
}

.docs-card__desc {
  font-size: 18px;
  line-height: 28px;
  color: var(--docs-muted);
  margin: 0;
  max-width: 42ch;
}

.docs-card__cta {
  margin-top: auto;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--docs-chip);
  font-size: 18px;
  line-height: 28px;
  font-weight: 480;
}

/* ===== article: rail + its own bordered prose column ===== */
.docs-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--docs-rule);
  padding-bottom: 120px;
  /* Same gap the index leaves between its last cell and the footer. */
  margin-bottom: 160px;
}

@media (min-width: 900px) {
  .docs-layout {
    grid-template-columns: 321px minmax(0, 718px);
  }
}

.docs-rail {
  padding: 60px 40px;
}

@media (min-width: 900px) {
  .docs-rail {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

@media (max-width: 899px) {
  .docs-rail {
    padding: 40px 24px 0;
  }
}

/* No verticals on the prose column. The reference's sub-column reports a 1px
   border-width but its border-style is none, so nothing paints: the only rules
   on an article page are the outer column's two edges. */
.docs-article {
  position: relative;
  min-width: 0;
  padding: 60px 64px 80px;
  font-size: 18px;
  line-height: 28px;
  color: var(--docs-ink);
}

@media (max-width: 899px) {
  .docs-article {
    padding: 40px 24px 60px;
    border-top: 1px solid var(--docs-rule);
  }
}

/* Handles sit where a rule actually crosses another, which on an article page
   is only the outer column's edges. */
.docs-layout::before,
.docs-layout::after,
.docs-card::before,
.docs-card::after,
.docs-index__base::before,
.docs-index__base::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  translate: -50% -50%;
  background: var(--docs-surface);
  border: 1px solid var(--docs-rule);
  z-index: 1;
}

.docs-layout::before,
.docs-card::before,
.docs-index__base::before {
  left: 0;
}

.docs-layout::after,
.docs-card::after,
.docs-index__base::after {
  left: 100%;
}

/* Handles live on the outer column edges only. The divider between the two
   card columns carries none, so the cell in the left column keeps just its
   left handle and the one in the right column just its right handle. */
@media (min-width: 900px) {
  .docs-card:nth-child(odd)::after,
  .docs-card:nth-child(even)::before {
    content: none;
  }
}

/* Bottom edge of the card grid: a cell has only two pseudo-elements and the
   bottom row corners need more, so a zero-height row carries them. */
.docs-index__base {
  position: relative;
  grid-column: 1 / -1;
  height: 0;
}

/* ===== prose ===== */
.docs-article__lede {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -0.27px;
  color: var(--docs-ink);
  margin: 0 0 24px;
}

.docs-article > :first-child {
  margin-top: 0;
}

.docs-article h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 550;
  letter-spacing: 0.24px;
  color: var(--docs-ink);
  margin: 42px 0 18px;
  scroll-margin-top: 120px;
}

/* Our markdown nests h3 under h2, so it reads as a smaller heading rather than
   the reference's uppercase label, which sits ABOVE its heading. */
.docs-article h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 550;
  letter-spacing: 0.18px;
  color: var(--docs-ink);
  margin: 32px 0 12px;
  scroll-margin-top: 120px;
}

.docs-article p {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.27px;
  margin: 0 0 24px;
}

.docs-article ul,
.docs-article ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.docs-article li {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.27px;
  margin-bottom: 6px;
}

.docs-article a {
  color: inherit;
}

.docs-article blockquote {
  margin: 0 0 24px;
  padding: 4px 20px;
  border-left: 2px solid var(--docs-rule);
  color: var(--docs-muted);
}

.docs-article :not(pre) > code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--docs-chip);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.85em;
}

.docs-article pre {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid var(--docs-rule);
  border-radius: 8px;
  background: var(--docs-chip);
  overflow-x: auto;
  font-size: 14px;
  line-height: 22px;
}

.docs-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 24px;
}

.docs-article th,
.docs-article td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--docs-rule);
}

/* ===== rail: page list and on-this-page ===== */
.docs-sidebar__group + .docs-sidebar__group {
  margin-top: 28px;
}

.docs-sidebar__group-label,
.docs-toc__label {
  font-size: 12px;
  line-height: 20px;
  font-weight: 550;
  letter-spacing: 0.21px;
  text-transform: uppercase;
  color: var(--docs-ink);
  margin: 0 0 12px;
}

.docs-sidebar__items,
.docs-toc__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.docs-sidebar__link,
.docs-toc__link {
  display: block;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.21px;
  color: var(--docs-muted);
  text-decoration: none;
}

.docs-sidebar__link {
  padding: 2px 0 2px 10px;
  border-left: 2px solid transparent;
}

.docs-sidebar__link:hover,
.docs-toc__link:hover {
  color: var(--docs-ink);
}

.docs-sidebar__link.is--active {
  color: var(--docs-ink);
  border-left-color: currentColor;
}

.docs-toc {
  margin-top: 36px;
}

.docs-toc__link[data-depth="3"] {
  padding-left: 12px;
}

/* ===== prev / next ===== */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 56px 0 0;
}

.docs-pager__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--docs-rule);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

.docs-pager__link.is--next {
  text-align: right;
  align-items: flex-end;
}

.docs-pager__dir {
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.21px;
  color: var(--docs-muted);
}

.docs-pager__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 550;
}