/* Bot API reference (site/bots.html, generated by scripts/gen_bot_docs.py).

   The site's black, silver and gold, in a reference layout: contents on the
   left, one column of text, code in panels with Copy and language tabs.
   Body text here is a sans-serif rather than the site's Garamond: a
   reference is scanned, not read, and parameter tables in a serif at this
   size are hard on the eye. Headings keep the site's faces. Everything is
   in this file because the site's CSP allows no inline style. */

.docs-page { --d-text: #C9CED6; --d-head: #EEF0F3; --d-line: #1C1F25; --d-panel: #0D0F13; --d-panel2: #12151A;
  --d-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --d-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }

.docs { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; max-width: 76rem; margin: 0 auto;
  padding: 2rem var(--gutter) 4rem; }

/* contents */
.docs-nav { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto;
  font: 400 14px/1.5 var(--d-sans); padding-right: .5rem; }
.docs-toc > summary { display: none; }
.docs-nav nav { display: flex; flex-direction: column; gap: 1px; }
.docs-nav a { color: var(--dim); text-decoration: none; padding: 4px 10px; border-radius: 6px; border-left: 2px solid transparent; }
.docs-nav a:hover { color: var(--silver); background: var(--d-panel2); }
.docs-nav a.is-here { color: var(--d-head); border-left-color: var(--gold); background: var(--d-panel2); }
.docs-nav a.mono { font-family: var(--d-mono); font-size: 12.5px; }
.nav-h { font-family: var(--f-struct); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin: 1.2rem 0 .35rem 10px; }
.nav-h:first-child { margin-top: 0; }

/* main column */
.docs-main { min-width: 0; max-width: 48rem; font: 400 16px/1.7 var(--d-sans); color: var(--d-text); }
.docs-main section { scroll-margin-top: 5.5rem; padding-top: .5rem; }
.docs-main h2 { font: 600 1.6rem/1.25 var(--f-head); color: var(--d-head); margin: 3rem 0 .9rem; padding-top: 1.6rem;
  border-top: 1px solid var(--d-line); text-wrap: balance; }
.docs-main h3 { font: 600 1.15rem/1.3 var(--d-sans); color: var(--d-head); margin: 1.8rem 0 .5rem; text-transform: none; letter-spacing: 0; }
.docs-main p, .docs-main li { max-width: 44rem; }
.docs-main ul, .docs-main ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.docs-main a { color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgba(215, 190, 143, .35); text-underline-offset: 3px; }
.docs-main strong { color: var(--d-head); font-weight: 600; }
.docs-main :not(pre) > code { font-family: var(--d-mono); font-size: .86em; padding: .1em .4em; border-radius: 5px;
  background: var(--d-panel2); border: 1px solid var(--d-line); color: #E4E7EC; overflow-wrap: anywhere; }

.docs-hero { padding: 1rem 0 .5rem; }
.docs-eyebrow { font-family: var(--f-struct); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0; }
.docs-hero h1 { font: 600 clamp(2rem, 5vw, 2.8rem)/1.1 var(--f-head); color: var(--d-head); margin: .4rem 0 .8rem; }
.docs-lede { font-size: 1.1rem; color: var(--silver2); margin: 0 0 1.2rem; }
.docs-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.docs-btn { display: inline-flex; align-items: center; gap: .5rem; font: 500 14px/1 var(--d-sans); padding: .75rem 1.1rem;
  border-radius: 10px; border: 1px solid var(--edge); background: var(--d-panel2); color: var(--d-head);
  text-decoration: none !important; cursor: pointer; }
.docs-btn:hover { border-color: var(--mute); }
.docs-btn.primary { border-color: var(--gold); color: var(--gold-hi); }
.docs-fine { font-size: 13px; color: var(--dim); margin-top: .6rem; }
.note { border-left: 3px solid var(--gold); background: var(--d-panel); padding: .7rem 1rem; border-radius: 0 8px 8px 0; color: var(--d-head); }
.alias { font-size: 14px; color: var(--dim); }
.muted { color: var(--dim); }
.mono { font-family: var(--d-mono); }

/* methods */
.method { border-top: 1px solid var(--d-line); margin-top: 2rem; }
.mname { font-family: var(--d-mono) !important; font-size: 1.15rem !important; }
.mname a { color: var(--d-head) !important; text-decoration: none !important; }
.mname a:hover::after { content: " #"; color: var(--mute); }

/* tables */
.tbl { overflow-x: auto; margin: .8rem 0 1.2rem; border: 1px solid var(--d-line); border-radius: 10px; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: .55rem .8rem; border-top: 1px solid var(--d-line); }
.tbl thead th { border-top: 0; background: var(--d-panel); color: var(--dim); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; }
.tbl tbody tr:first-child td { border-top: 0; }
.tbl thead + tbody tr:first-child td { border-top: 1px solid var(--d-line); }
.tbl td:first-child { white-space: nowrap; }

/* code */
.code { position: relative; margin: .8rem 0 1.2rem; }
.code pre { margin: 0; overflow-x: auto; padding: 1rem 1.1rem; padding-right: 4.5rem; background: var(--d-panel);
  border: 1px solid var(--d-line); border-radius: 10px; font: 400 13px/1.6 var(--d-mono); color: #DCE0E6; tab-size: 4; }
.copy-btn { position: absolute; top: .5rem; right: .5rem; font: 500 12px/1 var(--d-sans); padding: .45rem .65rem;
  border-radius: 7px; border: 1px solid var(--edge); background: var(--d-panel2); color: var(--silver2); cursor: pointer; }
.copy-btn:hover { color: var(--d-head); border-color: var(--mute); }
.copy-btn.done { color: var(--gold-hi); border-color: var(--gold); }
.tabs { margin: .8rem 0 1.2rem; }
.tabs .code { margin: 0; }
.tabs .code pre { border-top-left-radius: 0; }
.tablist { display: flex; gap: 2px; }
.tablist button { font: 500 12.5px/1 var(--d-sans); padding: .55rem .85rem; border: 1px solid var(--d-line); border-bottom: 0;
  border-radius: 8px 8px 0 0; background: transparent; color: var(--dim); cursor: pointer; }
.tablist button[aria-selected="true"] { background: var(--d-panel); color: var(--d-head); }

.docs-foot { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--d-line); font-size: 14px; color: var(--dim); }

/* phones: parameter and field tables stack, so the description is never
   off the right edge: name, type, "required" on one line, description below */
@media (max-width: 640px) {
  .tbl.stack thead { display: none; }
  .tbl.stack tr { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: .6rem;
    padding: .75rem .9rem; border-top: 1px solid var(--d-line); }
  .tbl.stack tbody tr:first-child { border-top: 0; }
  .tbl.stack td { border-top: 0 !important; padding: 0; }
  .tbl.stack td:first-child { white-space: normal; }
  .tbl.stack td:nth-child(2) { font-size: 12.5px; color: var(--dim); }
  .tbl.stack td.req-no { display: none; }
  .tbl.stack td.req-yes { font-size: 0; justify-self: start; }
  .tbl.stack td.req-yes::after { content: "required"; font: 500 11px/1 var(--d-sans); letter-spacing: .04em;
    color: var(--gold-hi); border: 1px solid rgba(215, 190, 143, .45); border-radius: 20px; padding: .25rem .5rem; }
  .tbl.stack td:last-child { grid-column: 1 / -1; margin-top: .35rem; }
}

/* phones: contents collapse to a menu at the top */
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1rem; }
  .docs-nav { position: static; max-height: none; padding: 0; }
  .docs-toc { border: 1px solid var(--d-line); border-radius: 10px; background: var(--d-panel); }
  .docs-toc > summary { display: block; padding: .8rem 1rem; cursor: pointer; color: var(--d-head); font-weight: 500; }
  .docs-toc nav { padding: 0 .6rem .8rem; max-height: 60vh; overflow-y: auto; }
  .docs-main h2 { margin-top: 2rem; }
}