/* API docs: sticky mono index on the left, content on the right. */

.docs-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas:
    "index head"
    "index body";
  grid-template-rows: auto 1fr;
  column-gap: var(--s8);
  padding-block: var(--s7) var(--s8);
}
.docs-head { grid-area: head; max-width: 860px; }
.docs-body { grid-area: body; }

/* ---------- Index ---------- */
.docs-index {
  grid-area: index;
  position: sticky;
  top: calc(var(--header-h) + var(--s6));
  align-self: start;
  max-height: calc(100dvh - var(--header-h) - var(--s7));
  overflow-y: auto;
}
.toc { list-style: none; margin-top: var(--s3); border-top: 1px solid var(--rule); }
.toc a {
  display: flex;
  gap: var(--s3);
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-2);
  font-size: var(--fs-s);
  color: var(--ink-2);
  text-decoration: none;
}
.toc a:hover { color: var(--ink); }
.toc a[aria-current="location"] { color: var(--ink); font-weight: 600; }
.toc a[aria-current="location"] .toc-n { color: var(--ink); }
.toc-n {
  flex: none;
  width: 2ch;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-stretch: 100%;
  line-height: 1.9;
  color: var(--ink-3);
}

/* ---------- Head ---------- */
.docs-body { min-width: 0; max-width: 860px; }
.docs-title {
  margin-top: var(--s3);
  font-size: var(--fs-xl);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.docs-sub { margin-top: var(--s4); font-size: var(--fs-m); color: var(--ink-2); max-width: 52ch; }
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  margin-top: var(--s6);
  border-block: 1px solid var(--ink);
}
.facts > div { padding: var(--s3) var(--s5) var(--s3) 0; }
.facts > div + div { padding-left: var(--s5); border-left: 1px solid var(--rule); }
.facts dd { margin: var(--s1) 0 0; font-size: var(--fs-s); }
.facts code { font-size: .8125rem; overflow-wrap: anywhere; }

.use-mine { display: none; margin-top: var(--s5); gap: var(--s2); }
.js .use-mine { display: grid; }
.check { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; cursor: pointer; font-weight: 500; }
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.check input::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}
.check input:checked { background: var(--ink); }
.check input:checked::after { opacity: 1; }
.use-mine-note { font-size: var(--fs-s); color: var(--ink-2); max-width: 64ch; }
.use-mine-note:empty { display: none; }

/* ---------- Sections ---------- */
.dsec { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--ink); }
.dsec-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; }
.dsec-head h2 { font-size: var(--fs-l); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.dsec-intro,
.dsec-note,
.dsec-prose { margin-top: var(--s4); max-width: var(--measure); color: var(--ink-2); }
.dsec-note { font-size: var(--fs-s); }
.dsec > .tabs,
.dsec > .table-wrap,
.dsec > .code { margin-top: var(--s5); }

.prose p + p { margin-top: var(--s3); }
.prose code,
.ep-desc code,
.dsec-intro code,
.dsec-note code,
.tbl code,
.obj-intro code { font-size: .8125em; padding: 0 2px; background: var(--paper); border: 1px solid var(--rule-2); overflow-wrap: break-word; }

.defs { margin-top: var(--s5); border-top: 1px solid var(--rule); }
.defs > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}
.defs dt { font-weight: 650; }
.defs dd { margin: 0; color: var(--ink-2); max-width: 62ch; }

/* ---------- Endpoints ---------- */
.ep { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.dsec-head + .ep { border-top: 0; margin-top: var(--s4); padding-top: var(--s2); }
.ep-sig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  font-weight: 400;
}
.method {
  display: inline-grid;
  place-items: center;
  min-width: 4.5rem;
  padding: 3px var(--s2);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 112.5%;
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--ink);
}
.path {
  font-family: var(--mono);
  font-size: var(--fs-m);
  font-weight: 500;
  font-stretch: 100%;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ep-desc { margin-top: var(--s3); max-width: var(--measure); color: var(--ink-2); }
.ep-errors { font-size: var(--fs-s); }
.ep > .table-wrap,
.ep > .code,
.ep > .tabs { margin-top: var(--s4); }
.obj-h { margin-top: var(--s6); font-family: var(--mono); font-size: var(--fs-m); font-weight: 600; font-stretch: 100%; }
.dsec-head + .obj-h { margin-top: var(--s4); }
.obj-intro { margin-top: var(--s2); color: var(--ink-2); }
.obj-h + .table-wrap,
.obj-intro + .table-wrap { margin-top: var(--s3); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.tbl th {
  padding: var(--s2) var(--s4) var(--s2) 0;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  font-stretch: 112.5%;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.tbl td {
  padding: var(--s2) var(--s4) var(--s2) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-2);
}
.tbl td:first-child { white-space: nowrap; color: var(--ink); }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.tbl.fields td:nth-child(2),
.tbl.params td:nth-child(2),
.tbl.params td:nth-child(3) { font-family: var(--mono); font-size: var(--fs-label); font-stretch: 100%; white-space: nowrap; padding-top: 11px; }
.tbl.errors td:nth-child(2) { font-size: .8125rem; }
.tbl.limits td:first-child { white-space: normal; font-weight: 600; width: 34%; }
.tbl tr:target td { background: var(--paper); }
.tbl tr:target td:first-child { border-left: 2px solid var(--ink); padding-left: var(--s2); }
.tbl td code { background: none; border: 0; padding: 0; }

/* ---------- Code ---------- */
.code, .tabs { border: 1px solid var(--rule); background: var(--paper); }
.code-bar, .tab-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 40px;
  padding: 0 0 0 var(--s4);
  border-bottom: 1px solid var(--rule);
}
.code-out .code-bar { min-height: 34px; }
.code-copy {
  margin-left: auto;
  min-height: 40px;
  padding: 0 var(--s4);
  background: none;
  border: 0;
  border-left: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  font-stretch: 112.5%;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.code-copy:hover { color: var(--ink); background: var(--bg); }
.code-copy.copyable::after { bottom: -1px; left: 0; right: 0; }
.code pre, .tab-panel pre {
  margin: 0;
  padding: var(--s4);
  overflow-x: auto;
  font-size: .8125rem;
  line-height: 1.65;
  tab-size: 2;
  color: var(--ink);
}
.code pre:focus-visible, .tab-panel pre:focus-visible { box-shadow: inset 0 0 0 2px var(--signal); }
.code-out { background: transparent; }
.code-out pre { color: var(--ink-2); }
.ph { border-bottom: 1px dashed var(--ink-3); }
.ph.is-filled { border-bottom: 1px solid var(--ink); }

.tab-bar { padding-left: var(--s2); }
.tab-list { display: flex; align-items: stretch; align-self: stretch; }
.tab-list [role="tab"] {
  min-height: 40px;
  padding: 0 var(--s3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--ink-2);
}
.tab-list [role="tab"]:hover { color: var(--ink); }
.tab-list [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 650; }
.tab-list [role="tab"]:focus-visible { box-shadow: inset 0 0 0 2px var(--signal); }
.js .tab-panel:not(.is-active) { display: none; }
html:not(.js) .tab-bar { display: none; }
html:not(.js) .code-copy { display: none; }
html:not(.js) .tab-panel + .tab-panel { border-top: 1px solid var(--rule); }

/* ---------- Narrow ---------- */
@media (max-width: 899.98px) {
  .docs-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "index" "body";
    grid-template-rows: auto;
    padding-top: var(--s5);
  }
  .docs-index {
    position: static;
    max-height: none;
    margin-top: var(--s6);
  }
  .toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
  .toc a { min-height: 44px; align-items: center; line-height: 1.25; }
  .toc-n { line-height: 1.25; }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .defs > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .dsec { margin-top: var(--s7); }
  .dsec-head { grid-template-columns: 2.5rem minmax(0, 1fr); }
}
@media (max-width: 559.98px) {
  /* Base URL and OpenAPI get a full row each; the two short facts share one. */
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .facts > div:nth-child(1),
  .facts > div:nth-child(4) { grid-column: 1 / -1; }
  .facts > div:nth-child(1),
  .facts > div:nth-child(2),
  .facts > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(3) { padding-left: var(--s4); border-left: 1px solid var(--rule); }
  .facts > div:nth-child(n + 2) { border-top: 1px solid var(--rule); }
  .tab-list [role="tab"] { padding: 0 var(--s2); }
  .code pre, .tab-panel pre { font-size: .75rem; padding: var(--s3); }
  .path { font-size: var(--fs-body); }
}