/* Instant · the API docs (/docs/). Dark only, on the site's colours and type (styles.css). The pages are written by
   scripts/build-docs.cjs; this file is written by hand. */

:root {
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  color-scheme: dark;
}

body.docs { font-size: 16px; line-height: 1.55; }
.docs a:focus-visible, .docs summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }

/* ============ Header ============ */
.docs-top {
  display: flex; align-items: center; gap: 20px;
  max-width: var(--max); margin: 0 auto;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--bubble);
}
/* Every control of the shell is at least 44px tall. */
.docs-logo, .docs-top-title, .docs-top-nav a, .docs-foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
.docs-logo svg { height: 26px; width: auto; aspect-ratio: 3236 / 711; color: var(--white); --dot: var(--lime); }
.docs-top-title { padding-inline-start: 20px; border-inline-start: 1px solid var(--bubble); font-size: 15px; color: var(--grey); }
.docs-top-nav { display: flex; gap: 24px; margin-inline-start: auto; font-size: 15px; }
.docs-top-nav a.docs-here { color: var(--lime); }
.docs-top-nav a:hover, .docs-top-title:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ Layout: the rail beside the page, after it on a narrow screen ============ */
.docs-shell {
  display: grid; grid-template-columns: 248px minmax(0, 1fr); column-gap: 56px;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
}
.docs-main { grid-column: 2; grid-row: 1; min-width: 0; max-width: 1000px; padding: 48px 0 96px; }
.docs-rail {
  grid-column: 1; grid-row: 1; align-self: start;
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  padding: 40px 0 48px; font-size: 14px; line-height: 1.35;
}

/* ============ Text ============ */
.docs-main h1, .docs-main h2, .docs-main h3, .docs-main h4, .docs-main p, .docs-main li, .docs-main dl { max-width: 72ch; }
.docs-main h1 { margin: 4px 0 20px; font-size: 48px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 400; }
.docs-main h2 {
  margin: 56px 0 16px; padding-top: 24px; border-top: 1px solid var(--bubble);
  font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 400;
}
.docs-main h3 { margin: 36px 0 12px; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; }
.docs-main h4 { margin: 28px 0 10px; font-size: 16px; font-weight: 500; }
.docs-main [id] { scroll-margin-top: 24px; }
.docs-main p { margin: 0 0 14px; }
.docs-main ul, .docs-main ol { margin: 0 0 16px; padding-inline-start: 22px; }
.docs-main li { margin: 4px 0; }
.docs-main li > p { margin-bottom: 6px; }
.docs-main strong { font-weight: 500; }
.docs-main blockquote { margin: 0 0 16px; padding-inline-start: 16px; border-inline-start: 2px solid var(--lime); color: var(--grey); }
.docs-main hr { margin: 32px 0; border: 0; border-top: 1px solid var(--bubble); }
.docs-prose a, .docs-lede a, .docs-field-desc a, .docs-md-link a, .docs-main section > p a, .docs-response a, .docs-facts a, .docs-rules a {
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.docs-prose a:hover, .docs-lede a:hover, .docs-field-desc a:hover, .docs-md-link a:hover, .docs-main section > p a:hover, .docs-response a:hover, .docs-facts a:hover { color: var(--lime); }
.docs-lede { font-size: 19px; line-height: 1.45; letter-spacing: -0.005em; }
.docs-lede p { margin-bottom: 12px; }
.docs-crumbs { margin-bottom: 8px; font-size: 14px; color: var(--grey); }
.docs-crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.docs-md-link { font-size: 14px; color: var(--grey); }
.docs-head { margin-bottom: 8px; }

/* ============ Code ============ */
.docs-main code {
  padding: 0.1em 0.35em; border-radius: 6px;
  background: var(--tile); font-family: var(--mono); font-size: 0.875em;
  overflow-wrap: anywhere;
}
.docs-main pre {
  margin: 0 0 20px; padding: 18px 20px; border-radius: 14px;
  background: var(--tile); overflow-x: auto;
  font-size: 13.5px; line-height: 1.6;
}
.docs-main pre code { padding: 0; border-radius: 0; background: none; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.docs-code-group { margin: 0 0 20px; }
.docs-code-label { margin: 16px 0 8px; font-size: 13px; color: var(--grey); }
.docs-op-link code { color: var(--lime); }
.docs-op-link:hover code { background: var(--bubble); }

/* ============ Tables, scrolled in their own frame ============ */
.docs-table { margin: 0 0 24px; border: 1px solid var(--bubble); border-radius: 14px; overflow-x: auto; }
.docs-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.docs-table th, .docs-table td { min-width: 12ch; padding: 10px 14px; border-bottom: 1px solid var(--bubble); text-align: start; vertical-align: top; }
.docs-table th { font-weight: 400; color: var(--grey); }
.docs-table tr:last-child td { border-bottom: 0; }
/* A table scrolls, so a code token in it never breaks. */
.docs-main .docs-table code { overflow-wrap: normal; white-space: nowrap; }

/* ============ Methods and statuses: lime pills ============ */
.docs-m {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  min-width: 56px; height: 22px; padding: 0 8px; border-radius: 11px;
  background: var(--bubble); color: var(--lime);
  font: 500 11px/1 var(--mono); letter-spacing: 0.04em;
}
.docs-m-get { background: var(--lime); color: var(--black); }
.docs-status { display: inline-block; padding: 2px 10px; border-radius: 11px; background: var(--bubble); font: 500 14px/1.4 var(--mono); }
.docs-status-2 { background: var(--lime); color: var(--black); }
.docs-endpoint {
  display: flex; align-items: center; gap: 12px; max-width: none;
  margin: 0 0 20px; padding: 12px 16px; border-radius: 14px; background: var(--tile);
}
.docs-main .docs-endpoint code { padding: 0; background: none; font-size: 14px; }

/* ============ Fields ============ */
.docs-fields { margin: 0 0 16px; padding: 0; border-top: 1px solid var(--bubble); list-style: none; }
.docs-main .docs-fields { padding-inline-start: 0; }
.docs-main .docs-field { max-width: none; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--bubble); }
.docs-field .docs-fields { margin: 12px 0 0; padding-inline-start: 16px; border-top: 0; border-inline-start: 1px solid var(--bubble); }
.docs-main .docs-field .docs-fields { padding-inline-start: 16px; }
.docs-field .docs-fields > .docs-field:last-child { padding-bottom: 0; border-bottom: 0; }
section > .docs-fields:last-child > .docs-field:last-child { border-bottom: 0; }
.docs-main .docs-field-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; }
.docs-main .docs-field-name { padding: 0; background: none; color: var(--white); font-size: 14px; font-weight: 500; }
.docs-field-other { font-size: 14px; }
.docs-field-type { font: 13px var(--mono); color: var(--grey); }
.docs-flag { font-size: 12px; color: var(--grey); }
.docs-flag-req { color: var(--lime); }
.docs-field-title { font-weight: 500; }
.docs-field-desc { font-size: 15px; }
.docs-field-desc p { margin-bottom: 6px; }
.docs-main .docs-rules, .docs-enum { margin-bottom: 6px; font-size: 14px; color: var(--grey); }
.docs-enum summary { cursor: pointer; }
.docs-enum p { margin-top: 6px; }
.docs-variants { list-style: none; }
.docs-main .docs-variants { padding-inline-start: 0; }
.docs-main .docs-variant-head { margin: 12px 0 6px; font-size: 14px; color: var(--grey); }
.docs-sub { margin: 18px 0 8px; font-size: 13px; color: var(--grey); }
.docs-body-type { margin-bottom: 6px; }
.docs-response { margin-bottom: 8px; }
.docs-auth-l { font-weight: 500; }

/* ============ The overview ============ */
.docs-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 16px 0 20px; font-size: 15px; }
.docs-facts div { display: contents; }
.docs-facts dt { color: var(--grey); }
.docs-facts dd { margin: 0; min-width: 0; }
.docs-main .docs-ops { max-width: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--bubble); list-style: none; }
.docs-main .docs-ops li { max-width: none; margin: 0; }
.docs-ops a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 6px 16px;
  padding: 12px 8px; border-bottom: 1px solid var(--bubble);
}
.docs-ops a:hover { background: var(--tile); }
.docs-ops a > code.docs-op-path:first-child { grid-column: 1 / 2; }
.docs-main .docs-op-path { padding: 0; background: none; color: var(--grey); font-size: 13px; text-align: end; }
.docs-main .docs-op-path:first-child { color: var(--lime); text-align: start; }
.docs-ops-kinds a { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); }
.docs-main h2 a:hover { color: var(--lime); }

/* ============ Webhook kinds ============ */
.docs-kind { padding-top: 4px; }
.docs-main .docs-kind h3 code { padding: 0; background: none; color: var(--lime); font-size: 18px; }
.docs-kind-summary { font-size: 17px; }

/* ============ The guide: "On this page" beside it on a wide screen ============ */
.docs-toc { margin: 0 0 32px; padding: 16px 20px; border: 1px solid var(--bubble); border-radius: 14px; font-size: 14px; }
.docs-main .docs-toc-title { margin-bottom: 8px; color: var(--grey); }
.docs-main .docs-toc ol { margin: 0; padding: 0; list-style: none; }
.docs-main .docs-toc li { margin: 0; }
.docs-toc a { display: block; padding: 3px 0; color: var(--grey); }
.docs-toc a:hover { color: var(--white); }
.docs-toc-3 { padding-inline-start: 14px; }

/* ============ The rail ============ */
.docs-rail ul { margin: 0 0 8px; padding: 0; list-style: none; }
.docs-rail a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; color: var(--grey); }
.docs-rail a:hover, .docs-rail a[aria-current="page"] { background: var(--tile); color: var(--white); }
.docs-rail .docs-m { min-width: 50px; height: 18px; font-size: 10px; }
.docs-rail-tag { margin: 20px 10px 6px; font-size: 12px; letter-spacing: 0.02em; color: var(--white); }
.docs-rail-tag a { display: inline; padding: 0; color: inherit; }
.docs-rail-tag a:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.docs-rail-kind code { font: 12.5px var(--mono); overflow-wrap: anywhere; }

/* ============ Previous and next ============ */
.docs-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--bubble); }
.docs-pager a { display: flex; flex-direction: column; gap: 4px; max-width: 48%; }
.docs-pager a span { font-size: 13px; color: var(--grey); }
.docs-pager a:hover { color: var(--lime); }
.docs-next { margin-inline-start: auto; text-align: end; }

/* ============ Footer ============ */
.docs-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px;
  max-width: var(--max); margin: 0 auto; padding: 32px var(--pad) 48px;
  border-top: 1px solid var(--bubble); font-size: 14px; color: var(--grey);
}
.docs-foot nav { display: flex; flex-wrap: wrap; gap: 0 24px; color: var(--white); }
.docs-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.docs-foot a[aria-current="page"] { color: var(--lime); }

/* ============ docs.js: tabs, copy buttons, search and the rail on a phone (none of it without JavaScript) ============ */
.docs-code-group.is-live .docs-code-label { display: none; }
.docs-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.docs-tab { min-height: 44px; padding: 0 16px; border-radius: 22px; color: var(--grey); font-size: 14px; }
.docs-tab:hover { color: var(--white); }
.docs-tab[aria-selected="true"] { background: var(--tile); color: var(--white); }
.docs-tab:focus-visible, .docs-copy:focus-visible, .docs-browse:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.docs-pre { position: relative; }
.docs-copy {
  position: absolute; top: 0; inset-inline-end: 0;
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 0 14px 0 14px;
  background: var(--bubble); color: var(--white); font-size: 13px;
}
.docs-copy:hover { color: var(--lime); }
/* With a pointer, the button shows on hover or focus only; on a touch screen it sits above the block, never over it. */
@media (hover: hover) {
  .docs-copy { opacity: 0; transition: opacity .15s; }
  .docs-pre:hover .docs-copy, .docs-copy:focus-visible { opacity: 1; }
}
@media (hover: none) {
  .docs-pre { display: flex; flex-direction: column; }
  .docs-copy { position: static; align-self: flex-end; margin-bottom: 6px; border-radius: 22px; }
}
.docs-search-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.docs-search { position: relative; flex: 1 1 240px; max-width: 360px; margin-inline-start: auto; }
.docs-search:not([hidden]) + .docs-top-nav { margin-inline-start: 0; }
.docs-search input {
  width: 100%; min-height: 44px; padding: 0 44px 0 18px;
  border: 1px solid var(--bubble); border-radius: 22px; background: var(--tile);
  color: var(--white); font: inherit; font-size: 15px;
}
.docs-search input::placeholder { color: var(--grey); }
.docs-search input:focus { outline: 2px solid var(--lime); outline-offset: 2px; }
.docs-search input:focus + kbd, .docs-search input:not(:placeholder-shown) + kbd { display: none; }
.docs-search kbd {
  position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); pointer-events: none;
  padding: 1px 7px; border: 1px solid var(--bubble); border-radius: 6px; color: var(--grey); font: 12px var(--mono);
}
.docs-search-results {
  position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 10;
  max-height: 70vh; overflow-y: auto; padding: 6px;
  border: 1px solid var(--bubble); border-radius: 14px; background: var(--ink); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.docs-search-results a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 2px 12px;
  min-height: 44px; padding: 8px 10px; border-radius: 10px;
}
.docs-search-results a:hover, .docs-search-results a:focus-visible { background: var(--tile); outline: none; }
.docs-search-results .docs-m { grid-row: 1 / span 2; }
.docs-search-title { grid-column: 2; font-size: 14px; }
.docs-search-sub { grid-column: 2; color: var(--grey); font-size: 12px; overflow-wrap: anywhere; }
.docs-search-empty { padding: 10px; color: var(--grey); font-size: 14px; }
.docs-browse { display: none; }

/* ============ Smaller screens ============ */
@media (min-width: 1280px) {
  .docs-guide.has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 48px; }
  .docs-guide.has-toc .docs-prose { grid-column: 1; grid-row: 1; min-width: 0; }
  .docs-guide.has-toc .docs-toc {
    grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 24px;
    max-height: calc(100vh - 48px); overflow-y: auto; margin: 0; padding: 0; border: 0;
  }
}
@media (max-width: 959px) {
  .docs-shell { display: block; }
  .docs-main { padding: 32px 0 64px; }
  .docs-rail { position: static; max-height: none; overflow: visible; padding: 28px 0 40px; border-top: 1px solid var(--bubble); }
  /* On a touch screen every link and control off the page's prose is at least 44px tall. "On this page" keeps its
     26px rows (WCAG 2.2's 24px), so the guide's title still starts on the first screen. */
  .docs-rail a, .docs-rail-tag a, .docs-enum summary { display: flex; align-items: center; min-height: 44px; }
  .docs-rail-tag a { display: inline-flex; }
  .docs-crumbs a, .docs-main h2 a, .docs-md-link a, .docs-facts a, .docs-feeds a { display: inline-flex; align-items: center; min-height: 44px; }
  .docs-crumbs { margin-bottom: 0; }
  .docs-js .docs-browse {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 44px; margin-top: 16px; padding: 0 18px; border: 1px solid var(--bubble); border-radius: 22px; font-size: 15px;
  }
  .docs-js .docs-browse::after { content: '+'; color: var(--lime); font-size: 20px; }
  .docs-js .docs-browse[aria-expanded="true"]::after { content: '\2212'; }
  .docs-js .docs-rail { display: none; padding: 8px 0 0; border-top: 0; }
  .docs-js .docs-rail.is-open { display: block; }
}
@media (max-width: 760px) {
  .docs-top { flex-wrap: wrap; gap: 0 14px; padding-top: 8px; padding-bottom: 8px; }
  .docs-search { order: 3; flex-basis: 100%; max-width: none; margin: 4px 0 8px; }
  .docs-logo svg { height: 22px; }
  .docs-top-title { padding-inline-start: 14px; }
  .docs-top-nav { gap: 16px; }
  .docs-main h1 { font-size: 36px; }
  .docs-main h2 { margin-top: 44px; font-size: 24px; }
  .docs-lede { font-size: 17px; }
  .docs-endpoint { align-items: flex-start; flex-direction: column; gap: 8px; }
  .docs-ops a { grid-template-columns: 56px minmax(0, 1fr); }
  .docs-main .docs-op-path { grid-column: 2; text-align: start; }
  .docs-ops-kinds a { grid-template-columns: minmax(0, 1fr); }
  .docs-main .docs-ops-kinds .docs-op-path { grid-column: 1; }
  .docs-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .docs-facts dd { margin-bottom: 10px; }
}
