/* ================================================================
   docs.css — the documentation layer, loaded on top of article.css.
   Same block vocabulary and the same site grid; three differences:

     · the title block is left-aligned and sits in the text columns,
       with no cover and no byline row
     · the page explorer is a fixed 220px rail on the page's left edge
     · the scroll nav is the same rail on the right edge

   The two rails keep their width while the grid around them shrinks, so
   the text keeps its normal 2-of-4 (and 2-of-3) column measure and the
   rails simply close in on it. When the outer tracks can no longer hold
   220px the scroll nav goes first, then the explorer.

   Anything not overridden here behaves exactly as it does on an
   article, so the two stay in sync by default.
   ================================================================ */

.docs-page { --rail: 220px; }

/* both only exist below 900px — see the drawer block at the end */
.docs-bar,
.docs-scrim { display: none; }

/* ---------- Title block — left, inside the two text columns ---------- */
.docs-page .a-head {
  grid-column: 2 / 4;
  text-align: left;
  padding-bottom: clamp(34px, 5vh, 56px);
}
.a-crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(38, 38, 38, 0.45);
}
.a-crumbs a { color: inherit; transition: color 0.25s var(--ease); }
.a-crumbs a:hover { color: var(--ink); }
/* the chat panel's run arrow, at the crumb's own size */
.crumb-arrow {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  opacity: 0.55;
}
.a-crumbs [aria-current] { color: var(--ink); }
.docs-page .a-title {
  max-width: none;   /* the two columns are the limit now, not 800px */
  margin-inline: 0;
}
.docs-page .a-sub {
  max-width: none;
  margin: 18px 0 0;
}

/* ---------- Page explorer — 220px rail on the left page edge ---------- */
/* Spans every row, so the sticky inner stays pinned for the whole article
   and scrolls away with the grid once the CTA band arrives. */
.a-explorer {
  grid-column: 1 / 2;
  /* 1 / 4, not 1 / -1: no grid-template-rows means every row is implicit,
     so the explicit grid has a single line and -1 resolves back to 1 —
     the explorer would size row 1 to its own height */
  grid-row: 1 / 4;
  width: var(--rail);
  justify-self: start;   /* held against the page's left edge */
}
.ex-inner {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-height: calc(100svh - 130px);
}

.ex-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 8px 0 11px;
  border-radius: 999px;
  background: var(--card);
}
.ex-search > svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: rgba(38, 38, 38, 0.45);
}
.ex-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.ex-search input::placeholder { color: rgba(38, 38, 38, 0.45); }
/* the UA's own clear affordance duplicates the empty state */
.ex-search input::-webkit-search-cancel-button,
.ex-search input::-webkit-search-decoration { -webkit-appearance: none; }
.ex-search kbd {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--grey);
  font: inherit;
  font-size: 12px;
  color: rgba(38, 38, 38, 0.5);
}

/* the tree scrolls on its own once it outgrows the pinned box */
.ex-tree {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  font-size: 14px;
  line-height: 1.35;
}
.ex-group + .ex-group {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(38, 38, 38, 0.12);
}
.ex-label {
  margin: 0 0 8px;
  padding-inline: 12px;   /* the pills' inset, so labels sit on the same axis */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* every row is a pill: grey on hover, grey and ink for the page you're on */
.ex-tree a,
.ex-sub summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 10px;
  color: rgba(38, 38, 38, 0.55);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
/* hover sits a step lighter than the current page's own grey */
.ex-tree a:hover,
.ex-sub summary:hover { background: rgba(38, 38, 38, 0.04); color: rgba(38, 38, 38, 0.8); }
.ex-tree a[aria-current] { background: var(--card); color: var(--ink); }
.ex-group > * + * { margin-top: 2px; }
.ex-sub-list a + a { margin-top: 2px; }

.ex-sub summary {
  list-style: none;   /* Firefox's marker */
  cursor: pointer;
}
.ex-sub summary::-webkit-details-marker { display: none; }
.ex-sub.expanded > summary { color: var(--ink); }
.ex-chev {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.5;
  transition: transform 0.35s var(--ease);
}
.ex-sub.expanded .ex-chev { transform: rotate(180deg); }

/* open/close: the FAQ's mechanism — 0fr → 1fr for the height, plus a
   sweeping mask so the links appear rather than slide out from behind */
.ex-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.45, 0.05, 0.15, 1);
}
.ex-drawer > * {
  min-height: 0;
  overflow: hidden;
  --reveal: 0%;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--reveal), transparent calc(var(--reveal) + 26%));
          mask-image: linear-gradient(to bottom, #000 var(--reveal), transparent calc(var(--reveal) + 26%));
  transition: --reveal 0.5s cubic-bezier(0.45, 0.05, 0.15, 1);
}
.ex-sub.expanded .ex-drawer { grid-template-rows: 1fr; }
.ex-sub.expanded .ex-drawer > * { --reveal: 120%; }
.ex-sub-list {
  /* no vertical margin or padding: a margin sits outside the clipped box and
     border-box padding can't compress below its own sum, so either one keeps
     a collapsed drawer a few pixels tall. The links carry the spacing. */
  margin-left: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .ex-drawer, .ex-drawer > * { transition: none; }
}

/* ---------- Page tools — copy this page as markdown ---------- */
.a-tools {
  grid-column: 4 / 5;
  grid-row: 1;             /* travels with the heading; never pinned */
  justify-self: end;
  align-self: start;
  width: var(--rail);
}
/* the newsletter strip's pill, with the copy glyph in the circle. A button
   doesn't inherit the page face the way the anchor version does. */
.a-md {
  font-family: inherit;
  cursor: pointer;
  padding-left: 16px;
}
/* search: a group whose every item was filtered out disappears with them */
.ex-tree [hidden] { display: none; }

/* ---------- Scroll nav — column 4, same rail and sliding marker ---------- */
/* Rows are explicit because the title block no longer spans the full grid:
   with everything auto-placed, column 4 is still free in row 1 and the nav
   rides up alongside the heading. Pinning it to the body's row starts it
   level with the first paragraph, then sticky takes over at 100px. */
.docs-page .a-head { grid-row: 1; }
.docs-page .a-nav {
  grid-column: 4 / 5;
  grid-row: 2;
  width: var(--rail);
  justify-self: end;   /* mirrors the explorer, against the right edge */
}
.docs-page .a-body { grid-row: 2; }
.docs-page .a-foot { grid-row: 3; }

/* ---------- Pager — previous page left, next page right ---------- */
/* .a-back carries the colour, gap and hover; .a-fwd only mirrors it so the
   label leads and the arrow trails */
.docs-page .a-fwd { text-align: right; }

@media (max-width: 1100px) {
  /* Three columns, and only one rail fits: the outer track is now narrower
     than 220px, so the scroll nav goes and the explorer keeps the left
     edge with the text still on its normal 2-of-3 measure. */
  .docs-page .a-grid { grid-template-columns: repeat(3, 1fr); }
  .docs-page .a-nav { display: none; }
  .a-explorer { grid-column: 1 / 2; grid-row: 1 / 5; }
  .docs-page .a-head,
  .docs-page .a-tools,
  .docs-page .a-body,
  .docs-page .a-foot { grid-column: 2 / 4; }
  /* column 4 is gone, so the button takes its own row under the heading */
  .docs-page .a-tools {
    grid-row: 2;
    justify-self: start;
    width: auto;
    margin-bottom: 30px;
  }
  .docs-page .a-body { grid-row: 3; }
  .docs-page .a-foot { grid-row: 4; }
}

@media (max-width: 899px) {
  /* The explorer's own floor: below this the outer track leaves it less than
     the 40px of breathing room the right rail gets before it drops. Rather
     than lose the page tree, it becomes a drawer — opened from the bar under
     the header, or by swiping in from the left edge. */
  .docs-page .a-head,
  .docs-page .a-tools,
  .docs-page .a-body,
  .docs-page .a-foot { grid-column: 1 / 4; }

  /* the bar reads as part of the header, so it sits close under the pill and
     keeps its distance from the page's own title block instead */
  .docs-page .article { padding-top: 96px; }
  .docs-bar {
    display: flex;
    gap: 10px;
    grid-column: 1 / 4;
    grid-row: 1;
    margin-bottom: 44px;
  }
  .docs-open { order: -1; }   /* menu first, search takes the rest */
  .docs-page .a-head  { grid-row: 2; }
  .docs-page .a-tools { grid-row: 3; }
  .docs-page .a-body  { grid-row: 4; }
  .docs-page .a-foot  { grid-row: 5; }

  .docs-find,
  .docs-open {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: var(--card);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: rgba(38, 38, 38, 0.5);
    cursor: pointer;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
  }
  .docs-find {
    flex: 1 1 auto;
    gap: 8px;
    padding: 0 14px;
  }
  .docs-find svg { width: 15px; height: 15px; }
  .docs-open {
    flex: 0 0 auto;
    width: 40px;
    justify-content: center;
    color: var(--ink);
  }
  .docs-open svg { width: 18px; height: 18px; }
  .docs-find:active, .docs-open:active { background: var(--grey); }

  /* the rail becomes an off-canvas panel; it sits under the floating header
     pill, which keeps its own menu reachable while this one is open */
  .a-explorer {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 8910;
    width: min(320px, 84vw);
    padding: 92px 16px 28px;
    background: var(--white);
    box-shadow: 0 0 40px rgba(38, 38, 38, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-101%);
    transition: transform 0.42s var(--ease);
  }
  .docs-menu .a-explorer { transform: none; }
  .ex-inner { position: static; max-height: none; gap: 22px; }
  .ex-tree { overflow: visible; padding-right: 0; }
  .ex-search kbd { display: none; }   /* no keyboard to press it with */
  /* iOS zooms the whole page when it focuses a field under 16px — the only
     way out that doesn't disable pinch-zoom for everyone */
  .ex-search input { font-size: 16px; }

  .docs-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 8900;
    background: rgba(38, 38, 38, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
  }
  .docs-menu .docs-scrim { opacity: 1; pointer-events: auto; }
}

@media (max-width: 760px) {
  /* nothing left to move in — the text takes the whole width */
  .docs-page .a-grid { grid-template-columns: 1fr; }
  /* the bar too — a leftover 1/4 span here builds two implicit columns, and
     their gutters take 40px out of the text's width */
  .docs-bar,
  .docs-page .a-head,
  .docs-page .a-tools,
  .docs-page .a-body,
  .docs-page .a-foot { grid-column: 1 / 2; }
  .docs-page .a-nav { display: none; }
}