/* The manual. Two columns: what there is on the left, what it does on the right.
   Layered over style.css — the nav, the buttons and the palette are the site's. */

:root {
  --doc-side: 288px;
  --doc-line: #2f3034;
  --doc-ink-code: #d9d9e3;
}

/* ---- Shell -------------------------------------------------------------------------------- */

.doc-shell {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: var(--doc-side) minmax(0, 1fr); gap: 40px;
  padding: 0 var(--gutter);
}

/* The tree scrolls in its own right, and stays put while the page moves: a contents list that
   scrolls away is a contents list you have to scroll back up to use. */
/* min-width: 0 on both columns, or the widest sample line in the manual sets the width of the
   whole grid and the page scrolls sideways on a phone. The code block then scrolls itself. */
.doc-tree {
  position: sticky; top: 61px; align-self: start; min-width: 0;
  height: calc(100vh - 61px); overflow-y: auto;
  padding: 20px 12px 60px 0; border-right: 1px solid var(--doc-line);
  scrollbar-width: thin;
}
.doc-body { padding: 28px 0 96px; max-width: 860px; min-width: 0; }

/* ---- The tree ----------------------------------------------------------------------------- */

.tree-filter {
  width: 100%; margin-bottom: 14px; padding: 8px 12px;
  background: #101012; border: 1px solid var(--doc-line); border-radius: 8px;
  color: var(--fg); font: inherit; font-size: 14px;
}
.tree-filter::placeholder { color: #6f7079; }
.tree-filter:focus { outline: none; border-color: var(--primary); }

.tree details { margin-bottom: 2px; }
.tree summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 7px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #8f909a;
}
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before {
  content: "▸"; display: inline-block; width: 14px; font-size: 10px;
  transform: translateY(-1px); transition: transform 0.15s;
}
.tree details[open] > summary::before { transform: translateY(-1px) rotate(90deg); }
.tree summary:hover { color: var(--fg); background: #232429; }
.tree ul { list-style: none; margin: 2px 0 8px; padding: 0 0 0 14px; border-left: 1px solid var(--doc-line); }
.tree li a {
  display: block; padding: 5px 10px; border-radius: 7px;
  color: var(--fg-dim); font-size: 14px; line-height: 1.35;
}
.tree li a:hover { color: var(--fg); background: #232429; }
.tree li a.current { color: #fff; background: #2f2b57; box-shadow: inset 2px 0 0 var(--primary); }
.tree li.hidden, .tree details.hidden { display: none; }

/* ---- Reading ------------------------------------------------------------------------------ */

.doc-body h1 { font-size: 2.4rem; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 10px; }
.doc-body > p.lede { color: var(--fg-dim); font-size: 1.05rem; max-width: 66ch; margin-bottom: 28px; }

.doc-section { padding-top: 26px; margin-bottom: 8px; }
.doc-section > h2 {
  font-size: 1.7rem; font-weight: 800; margin: 0 0 6px;
  padding-top: 20px; border-top: 1px solid var(--doc-line);
}
.doc-section > p, .doc-section > ul, .doc-section > ol { max-width: 68ch; }
.doc-section > p { margin-bottom: 14px; color: #cfd0d8; }
.doc-section > ul, .doc-section > ol { margin: 0 0 16px 20px; color: #cfd0d8; }
.doc-section li { margin-bottom: 6px; }

.api { padding: 22px 0 6px; }
.api > h3 {
  font-family: Menlo, Monaco, Consolas, "Cascadia Mono", monospace;
  font-size: 1.12rem; font-weight: 700; margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.api > h3 .ns {
  font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  color: #7e7f89; font-family: -apple-system, "Segoe UI", sans-serif;
}
.api > p { max-width: 68ch; margin-bottom: 12px; color: #cfd0d8; }

/* The one line that has to be there for every entity: what it is FOR. */
.solves {
  border-left: 3px solid var(--primary); background: #202130;
  padding: 10px 14px; border-radius: 0 8px 8px 0; margin-bottom: 14px !important;
  color: #dcdce6 !important;
}
.solves b { color: #fff; }

.note {
  border-left: 3px solid #3a3b40; background: #1e1f23;
  padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 0 0 16px;
  color: #a8a8b2; font-size: 0.94rem; max-width: 68ch;
}

/* ---- Code --------------------------------------------------------------------------------- */

pre.code-block {
  background: #121215; border: 1px solid var(--doc-line); border-radius: 10px;
  padding: 14px 16px; margin: 0 0 16px; overflow-x: auto;
}
pre.code-block code {
  font-family: Menlo, Monaco, Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;
  font-size: 12.5px; line-height: 1.65; color: var(--doc-ink-code);
  background: none; border: 0; padding: 0; white-space: pre;
}
.tok-key { color: #c084fc; }
.tok-str { color: #7dd3a0; }
.tok-com { color: #6f7079; font-style: italic; }
.tok-num { color: #f0a868; }
.tok-typ { color: #6bc7f0; }

/* ---- Tables ------------------------------------------------------------------------------- */

.tbl-wrap { overflow-x: auto; margin: 0 0 18px; }
table.members { border-collapse: collapse; width: 100%; font-size: 0.92rem; min-width: 520px; }
table.members th, table.members td {
  text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--doc-line);
}
table.members th { color: #8f909a; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.members td:first-child {
  font-family: Menlo, Monaco, Consolas, monospace; font-size: 0.86rem; color: #dcdce6; white-space: nowrap;
}
table.members td { color: #b9bac4; }

/* ---- Pictures ----------------------------------------------------------------------------- */

figure { margin: 0 0 20px; }
figure img, figure svg {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--doc-line); border-radius: 10px; background: #121215;
}
figcaption { color: #85868f; font-size: 13px; margin-top: 8px; }

/* A diagram is ink on the page, not a picture pasted onto it: same palette, same weights. */
.diagram { --d-line: #4a4b55; --d-dim: #8f909a; }
.diagram text { font-family: -apple-system, "Segoe UI", sans-serif; }

.doc-body a.inline { color: #9d8cff; text-decoration: underline; text-underline-offset: 2px; }
.doc-body a.inline:hover { color: #b9adff; }

/* ---- Narrow ------------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .doc-shell { grid-template-columns: 1fr; gap: 0; }
  .doc-tree {
    position: static; height: auto; max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--doc-line); padding: 16px 0;
  }
  .doc-body { padding-top: 20px; }
}