/* docs.css — layered on styles.css, reusing its tokens rather than redefining
   them, so the docs and the landing page cannot drift apart visually.

   Reading-first: a measured column, generous line height, and code that is
   legible rather than decorative. The landing page is allowed to be loud; the
   docs are where someone is trying to get work done. */

.dwrap {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 200px;
  gap: 44px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 34px 24px 110px;
  align-items: start;
}

/* ---------- side nav ---------- */
.dnav { position: sticky; top: 26px; font-size: 13.5px; }
.dnav-h {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  margin: 20px 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.dnav-h:first-child { margin-top: 0; }
.dnav ul { list-style: none; margin: 0 0 4px; padding: 0; }
.dnav li a {
  display: block; padding: 5px 10px; margin-left: -10px; border-radius: 7px;
  color: var(--dim); text-decoration: none; line-height: 1.45;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.dnav li a:hover { color: var(--text); background: var(--surface); }
.dnav li a[aria-current="page"] {
  color: var(--signal); background: var(--surface-2); font-weight: 500;
}

/* ---------- head ---------- */
.dhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.dcrumb {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
/* Deliberately visible, not just a <link rel=alternate>. Half the point of
   the .md twin is that a person pasting a docs URL to an agent can grab the
   clean one, and a link nobody can see does not get used. */
.dmd {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--faint);
  text-decoration: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.dmd:hover { color: var(--signal); border-color: var(--signal-lo); }

/* ---------- body ---------- */
.dbody { color: var(--text); font-size: 15.5px; line-height: 1.72; max-width: 74ch; }
.dbody h1 {
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px);
  line-height: 1.06; letter-spacing: -.028em; margin: 10px 0 22px;
}
.dbody h2 {
  font-family: var(--font-display); font-size: 24px; letter-spacing: -.018em;
  margin: 46px 0 14px; padding-top: 20px; border-top: 1px solid var(--line);
}
.dbody h3 { font-family: var(--font-display); font-size: 18px; margin: 32px 0 10px; }
.dbody h4 { font-size: 15.5px; font-weight: 600; margin: 24px 0 8px; color: var(--text); }
.dbody p { color: var(--dim); margin: 0 0 16px; }
.dbody strong { color: var(--text); font-weight: 600; }
.dbody a { color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--signal-lo); }
.dbody a:hover { border-bottom-color: var(--signal); }

/* Anchors appear on hover — a deep link for people, a stable citation
   target for anything quoting us. */
.ha {
  margin-left: 9px; color: var(--faint); border: none !important;
  opacity: 0; font-weight: 400; transition: opacity .16s var(--ease);
}
.dbody h1:hover .ha, .dbody h2:hover .ha,
.dbody h3:hover .ha, .dbody h4:hover .ha { opacity: 1; }

.dbody ul, .dbody ol { color: var(--dim); margin: 0 0 16px; padding-left: 22px; }
.dbody li { margin-bottom: 7px; }
.dbody li::marker { color: var(--faint); }

.dbody code {
  font-family: var(--font-mono); font-size: .875em; color: var(--signal);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 5px; padding: 1.5px 5px;
}
.dbody pre {
  margin: 0 0 20px; padding: 17px 19px; overflow-x: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
}
.dbody pre code {
  background: none; border: none; padding: 0; color: var(--text);
  font-size: 12.75px; line-height: 1.72;
}

.dbody blockquote {
  margin: 0 0 20px; padding: 14px 18px;
  border-left: 2px solid var(--signal-lo); border-radius: 0 10px 10px 0;
  background: var(--surface);
}
.dbody blockquote p { margin: 0; color: var(--dim); }
.dbody hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }

/* Tables scroll rather than squash — several are wide capability matrices. */
.tw { overflow-x: auto; margin: 0 0 22px; }
.dbody table { border-collapse: collapse; width: 100%; font-size: 14px; }
.dbody th, .dbody td {
  text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.dbody th {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.dbody td { color: var(--dim); }
.dbody tbody tr:hover { background: var(--surface); }

/* ---------- on-this-page ---------- */
.dtoc { position: sticky; top: 26px; font-size: 13px; }
.dtoc-h {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 10px;
}
.dtoc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.dtoc li a {
  display: block; padding: 4px 0 4px 13px; margin-left: -1px;
  border-left: 1px solid transparent; color: var(--faint);
  text-decoration: none; line-height: 1.45;
}
.dtoc li a:hover { color: var(--text); border-left-color: var(--signal-lo); }

.dfoot {
  margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 13px; line-height: 1.65;
}
.dfoot a { color: var(--signal); }

@media (max-width: 1100px) {
  .dwrap { grid-template-columns: 210px minmax(0, 1fr); gap: 34px; }
  .dtoc { display: none; }
}
@media (max-width: 780px) {
  .dwrap { grid-template-columns: 1fr; padding: 22px 18px 80px; }
  .dnav {
    position: static; border-bottom: 1px solid var(--line); padding-bottom: 14px;
  }
  .dnav ul { display: flex; flex-wrap: wrap; gap: 3px; }
  .dnav li a { padding: 4px 9px; margin: 0; }
  .dbody { font-size: 15px; }
}