/* The docs, in the dashboard's language: gray sidebar, a rounded panel for the page, Diatype and Geist Mono, half-pixel
   edges, the same light and dark tokens. Code is always on a dark panel. */
@font-face { font-family: "ABC Diatype"; src: url(/ABCDiatypeVariable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #fffdfb; --side: #f6f4f2; --subtle: #faf8f6; --side-active: #e9e7e8; --side-hover: rgba(0, 0, 0, .035); --active: rgba(0, 0, 0, .05);
  --pill: #f3f3f5; --line: #dfdfe6; --line-soft: #ededf1; --pop: #fff; --control: #fff;
  --text: #16171a; --text-2: #3f3f46; --muted: #5f5f68; --faint: #8e8e98; --side-text: #4d4d4d; --side-faint: #929292;
  --green: #1e7951; --green-bg: #e9f6ee; --green-line: #c9ead6; --amber: #b64600; --amber-bg: #fff4e6; --amber-line: #fbdcb5;
  --blue: #0c6bbf; --blue-bg: #e9f5ff; --blue-line: #c2e5ff; --red: #c62a2f;
  --code: #1a1917; --code-line: #2c2a27; --code-text: #ebe7e1;
  --hair: .5px; --shadow-pop: 0 0 0 .5px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .08);
  --sans: "ABC Diatype", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1713; --side: #14100d; --subtle: #2a2624; --side-active: rgba(255, 255, 255, .07); --side-hover: rgba(255, 255, 255, .04);
  --active: rgba(255, 255, 255, .06); --pill: #2f2b29; --line: transparent; --line-soft: #2e2927; --pop: #2f2b29; --control: #332f2d;
  --text: #eeeae4; --text-2: #d6d1c9; --muted: #a8a29e; --faint: #78716c; --side-text: #bfb9b1; --side-faint: #78716c;
  --green: #3dd68c; --green-bg: rgba(61, 214, 140, .12); --green-line: transparent; --amber: #ffb224; --amber-bg: rgba(255, 178, 36, .12);
  --amber-line: transparent; --blue: #52a8ff; --blue-bg: rgba(82, 168, 255, .12); --blue-line: transparent; --red: #ff6b6b;
  --code: #110d0a; --code-line: #26211d; --code-text: #e9e4dc; --shadow-pop: 0 0 0 .5px rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .28);
}
* { box-sizing: border-box; }
* { scrollbar-width: none; }   /* everything scrolls; no scrollbars on show */
*::-webkit-scrollbar { display: none; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--side); color: var(--text); font: 400 15px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { flex: none; }

/* sidebar */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; padding: 14px 8px 8px; }
.side-top { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 6px 0 4px; }
.org { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.brand-mark { display: block; width: 22px; height: 22px; background: var(--text); -webkit-mask: url(/logo.png) center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat; }
.tag { padding: 0 6px; border-radius: 6px; background: var(--pill); color: var(--muted); font-size: 12px; line-height: 20px; font-weight: 500; }
.menu-btn { display: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; }
.search-btn { display: flex; align-items: center; gap: 9px; width: 100%; height: 38px; margin: 10px 0 4px; padding: 0 8px 0 12px; border: 0;
  border-radius: 10px; background: var(--control); box-shadow: 0 0 0 var(--hair) var(--line), 0 1px 2px rgba(16, 24, 40, .04); color: var(--faint);
  font-size: 14px; cursor: pointer; text-align: left; transition: box-shadow .15s; }
.search-btn:hover { box-shadow: 0 0 0 var(--hair) var(--faint), 0 1px 2px rgba(16, 24, 40, .06); }
.search-btn svg { width: 16px; height: 16px; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: inset 0 0 0 var(--hair) var(--line-soft); font: 500 11px var(--sans); color: var(--muted); }
.search-btn kbd { margin-left: auto; }
.side-label { margin: 20px 0 6px; padding: 0 8px; font-size: 12px; line-height: 16px; color: var(--side-faint); }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a { display: flex; align-items: center; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--side-text); font-size: 14px; }
.nav a:hover { background: var(--side-hover); color: var(--text); }
.nav a.on { background: var(--side-active); color: var(--text); }
.side-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 16px 8px 4px; font-size: 13px; color: var(--muted); }
.side-foot a { white-space: nowrap; } .side-foot a:hover { color: var(--text); }
.switch { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: 999px; background: var(--active); }
.switch button { display: grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--faint); cursor: pointer; }
.switch button.on { background: var(--control); color: var(--text); box-shadow: 0 0 0 var(--hair) var(--line), 0 1px 2px rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .switch button.on { background: rgba(255, 255, 255, .1); box-shadow: none; }
.switch svg { width: 13px; height: 13px; }

/* the page */
.panel { min-width: 0; margin: 8px 8px 8px 0; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 var(--hair) var(--line); }
.page { display: grid; grid-template-columns: minmax(0, 720px) 220px; justify-content: center; gap: 64px; padding: 56px 40px 96px; }
.eyebrow { font-size: 13px; font-weight: 500; color: var(--blue); }
h1 { margin: 6px 0 0; font-size: 34px; line-height: 1.15; font-weight: 500; letter-spacing: -.025em; }
.lede { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.doc h2 { margin: 48px 0 12px; padding-top: 28px; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.015em; box-shadow: inset 0 var(--hair) 0 var(--line-soft); }
.doc h3 { margin: 32px 0 8px; font-size: 17px; line-height: 1.4; font-weight: 500; }
.doc p, .doc li { color: var(--text-2); }
.doc p { margin: 12px 0; }
.doc ul, .doc ol { margin: 12px 0; padding-left: 22px; } .doc li { margin: 6px 0; } .doc li::marker { color: var(--faint); }
.doc strong { font-weight: 500; color: var(--text); }
.doc a:not(.card):not(.prev):not(.next) { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.doc a:not(.card):hover { text-decoration-color: var(--text); }
.doc :not(pre) > code { padding: 1px 6px; border-radius: 6px; background: var(--pill); font: 13px var(--mono); color: var(--text); white-space: nowrap; }
.doc table { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 14px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 var(--hair) var(--line); }
.doc th { padding: 10px 14px; background: var(--subtle); color: var(--faint); font-size: 12px; font-weight: 400; text-align: left; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--line); }
.doc td { padding: 10px 14px; vertical-align: top; color: var(--text-2); box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--line-soft); }
.doc tr:last-child td { box-shadow: none; }
.doc td code { white-space: nowrap; }

/* code: one block, tabs when there are versions, copy */
.code { margin: 16px 0; overflow: hidden; border-radius: 12px; background: var(--code); box-shadow: 0 0 0 var(--hair) var(--line); }
.code-h { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 8px 0 6px; box-shadow: inset 0 -1px 0 var(--code-line); }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: #8f897f; font: 500 12px var(--mono); cursor: pointer; white-space: nowrap; }
.tabs button:hover { color: var(--code-text); }
.tabs button.on { background: rgba(255, 255, 255, .08); color: var(--code-text); }
.copy { height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: none; color: #8f897f; font: 500 12px var(--mono); cursor: pointer; }
.copy:hover { color: var(--code-text); background: rgba(255, 255, 255, .06); }
.code pre { margin: 0; padding: 18px 20px 20px; overflow-x: auto; font: 13px/1.7 var(--mono); color: var(--code-text); tab-size: 4; }
.code .c, .code .c1, .code .cm, .code .ch, .code .cs { color: #7d776e; }
.code .s, .code .s1, .code .s2, .code .sd, .code .se, .code .si, .code .sb { color: #e3b58c; }
.code .k, .code .kn, .code .kd, .code .kc, .code .kr, .code .ow, .code .nt { color: #c7a9e6; }
.code .m, .code .mi, .code .mf, .code .kt { color: #8fd0b7; }
.code .nf, .code .nb, .code .fm, .code .na { color: #9cc7ef; }
.code .nv, .code .err { color: inherit; background: none; }

/* screenshots of the dashboard, in the guides */
.doc img.shot { display: block; max-width: 100%; height: auto; margin: 18px 0 22px; border-radius: 12px; box-shadow: 0 0 0 var(--hair) var(--line), 0 12px 32px -16px rgba(30, 20, 10, .25); }
.doc img.narrow { max-width: 440px; }
:root[data-theme="dark"] .doc img.shot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }

/* callouts, endpoint, cards, pager */
.admonition { margin: 20px 0; padding: 12px 16px; border-radius: 10px; background: var(--blue-bg); box-shadow: 0 0 0 var(--hair) var(--blue-line); font-size: 14px; }
.admonition.warning { background: var(--amber-bg); box-shadow: 0 0 0 var(--hair) var(--amber-line); }
.admonition.tip { background: var(--green-bg); box-shadow: 0 0 0 var(--hair) var(--green-line); }
.admonition p { margin: 4px 0; color: var(--text-2); }
.admonition .admonition-title { margin: 0 0 2px; font-weight: 500; color: var(--text); }
.endpoint { display: flex; align-items: center; gap: 10px; margin: 24px 0 8px; padding: 10px 14px; border-radius: 10px; background: var(--subtle);
  box-shadow: 0 0 0 var(--hair) var(--line); font: 13px var(--mono); overflow-x: auto; white-space: nowrap; }
.method { padding: 1px 7px; border-radius: 6px; font-weight: 500; font-size: 12px; color: var(--green); background: var(--green-bg); }
.method.get { color: var(--blue); background: var(--blue-bg); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.card { display: block; padding: 14px 16px; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--line-soft), 0 1px 2px rgba(16, 24, 40, .04); transition: background .15s, box-shadow .15s; }   /* an edge in both themes */
.card:hover { background: var(--subtle); box-shadow: 0 0 0 1px var(--faint), 0 1px 2px rgba(16, 24, 40, .06); }
.card b { display: block; font-size: 14px; font-weight: 500; }
.card span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 64px; }
.pager a { padding: 14px 16px; border-radius: 12px; box-shadow: 0 0 0 var(--hair) var(--line); font-weight: 500; }
.pager a:hover { background: var(--subtle); }
.pager .next { grid-column: 2; text-align: right; }
.pager small { display: block; font-size: 12px; font-weight: 400; color: var(--faint); }

/* on this page */
.toc-in { position: sticky; top: 56px; font-size: 13px; }
.toc-h { margin-bottom: 8px; font-size: 12px; color: var(--faint); }
.toc a { display: block; padding: 4px 0 4px 12px; color: var(--muted); box-shadow: inset 1px 0 0 var(--line-soft); line-height: 1.4; }
.toc a.l3 { padding-left: 24px; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--text); box-shadow: inset 1.5px 0 0 var(--text); }

/* search */
.dialog-back { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px;
  background: rgba(16, 12, 8, .32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.dialog-back[hidden] { display: none; }
.dialog { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(560px, 72vh); overflow: hidden; border-radius: 14px;
  background: var(--pop); box-shadow: var(--shadow-pop), 0 24px 64px -24px rgba(0, 0, 0, .35); }
.find { display: flex; flex: none; align-items: center; gap: 12px; height: 60px; padding: 0 20px; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--line-soft); }
.find svg { width: 19px; height: 19px; color: var(--faint); }
.find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: 16px var(--sans); }
.find input::placeholder { color: var(--faint); }
.results { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.results a { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.results a::before { content: ""; grid-row: span 2; width: 18px; height: 18px; background: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 2.75h8.5L19 7.25V21.25H6z'/%3E%3Cpath d='M14 2.75v4.75h4.75M9 12.25h6M9 16.25h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 2.75h8.5L19 7.25V21.25H6z'/%3E%3Cpath d='M14 2.75v4.75h4.75M9 12.25h6M9 16.25h6'/%3E%3C/svg%3E") center / contain no-repeat; }
.results a.on { background: var(--active); }
.results a.on::before { background: var(--text); }
.results small { display: block; grid-column: 2; font-size: 12px; line-height: 1.4; color: var(--faint); }
.results .none { padding: 40px 16px; text-align: center; color: var(--faint); font-size: 14px; }
.dialog-foot { display: flex; flex: none; align-items: center; gap: 14px; padding: 10px 16px; font-size: 12px; color: var(--faint); box-shadow: inset 0 var(--hair) 0 var(--line-soft); }
.dialog-foot span { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 1180px) { .page { grid-template-columns: minmax(0, 760px); } .toc { display: none; } }
@media (max-width: 860px) {
  .app { display: block; }
  .side { position: sticky; z-index: 20; height: auto; max-height: 100vh; padding: 4px 12px; background: var(--side); }
  .menu-btn { display: grid; place-items: center; }
  .side .search-btn, .side-body, .side-foot { display: none; }
  .side.open .search-btn, .side.open .side-body { display: block; } .side.open .side-foot { display: flex; }
  .side.open .search-btn { display: flex; }
  .panel { margin: 0 8px 8px; }
  .page { padding: 32px 20px 72px; }
  h1 { font-size: 28px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
}