/* ============================================================
   Bindseal — documentation pages (docs, quickstart, SDK, server API)
   Layered on top of styles.css; reuses its tokens only.
   ============================================================ */

/* ---- layout: sticky table of contents + prose column ---- */
.docs-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.docs-layout.single{grid-template-columns:minmax(0,1fr)}
.toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;padding-bottom:12px}
.toc h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;font-weight:500}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--hairline)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--muted);font-size:13.5px;line-height:1.4;transition:color .15s ease,border-color .15s ease}
.toc a:hover{color:var(--ink);border-left-color:var(--hairline-2)}
.toc .sub a{padding-left:26px;font-size:12.5px}

/* ---- prose ---- */
.doc{min-width:0;max-width:78ch}
.doc > :first-child{margin-top:0}
.doc h2{font-size:1.5rem;letter-spacing:-0.025em;line-height:1.2;margin:56px 0 0;padding-top:34px;border-top:1px solid var(--hairline);scroll-margin-top:90px}
.doc h2:first-child{border-top:0;padding-top:0}
.doc h3{font-size:1.08rem;letter-spacing:-0.015em;line-height:1.35;margin:34px 0 0;color:var(--ink);scroll-margin-top:90px;overflow-wrap:anywhere}
.doc h3 code{font-size:.92em;color:var(--ink);background:none;border:0;padding:0}
.doc p{margin:14px 0 0;color:var(--body);line-height:1.7;font-size:15px}
.doc ul,.doc ol{margin:14px 0 0;padding-left:20px;color:var(--body);line-height:1.66;font-size:15px}
.doc li{margin:7px 0}
.doc li > ul{margin-top:6px}
.doc strong{color:var(--ink);font-weight:500}
.doc em{color:var(--ink);font-style:italic}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--hairline-2);transition:text-decoration-color .15s ease}
.doc a:hover{text-decoration-color:var(--ink)}
.doc :not(pre) > code{font-family:var(--mono);font-size:.85em;color:var(--ink);background:var(--raise);border:1px solid var(--hairline);border-radius:6px;padding:1px 5px;overflow-wrap:anywhere}
.doc .lede{font-size:16.5px;color:var(--body);line-height:1.7}

/* code blocks reuse .code / .code-bar / pre from styles.css */
.doc .code{margin:18px 0 0}
.doc pre{font-size:12.75px;line-height:1.7;tab-size:2}

/* definition-style method blocks */
.doc .sig{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hairline-2);border-radius:var(--r-pill);padding:3px 9px;line-height:1.3;white-space:nowrap;font-weight:400}
.tag.on{color:var(--ink)}
.tag.off{color:var(--verify);border-color:rgba(63,207,142,.35)}
.verb{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--verify);border:1px solid rgba(63,207,142,.35);border-radius:6px;padding:2px 7px;margin-right:4px;vertical-align:2px}
.verb.get{color:var(--ink);border-color:var(--hairline-2)}

/* tables scroll inside their own frame on small screens */
.tbl{margin:18px 0 0;border:1px solid var(--hairline);border-radius:var(--r-well);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.55}
.tbl.wide table{min-width:640px}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500;text-align:left;padding:12px 14px;border-bottom:1px solid var(--hairline);background:var(--raise);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--hairline);color:var(--body);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td code{white-space:nowrap}
.tbl td.wrap-code code{white-space:normal}

/* callouts */
.note{margin:20px 0 0;padding:15px 18px;border:1px solid var(--hairline);border-left:2px solid var(--hairline-2);border-radius:var(--r-well);background:var(--raise);color:var(--body);font-size:14.5px;line-height:1.65}
.note p{margin:0;font-size:14.5px}
.note p + p{margin-top:10px}
.note.honest{border-left-color:var(--verify)}
.note a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--hairline-2)}
.note a:hover{text-decoration-color:var(--ink)}
.note .lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* docs landing: card links reuse .grid3/.cap */
a.cap{display:flex;flex-direction:column}
a.cap .txtlink{margin-top:22px}
a.cap:hover .txtlink .arw{transform:translateX(3px);color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;margin-top:40px}
.fact{background:var(--canvas);padding:22px 24px}
.fact .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fact p{margin:10px 0 0;color:var(--body);font-size:14.5px;line-height:1.6}
.fact code{font-family:var(--mono);font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}

/* pager at the end of each doc */
.doc-next{display:flex;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:30px;border-top:1px solid var(--hairline)}

@media (max-width:980px){
  .docs-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .toc{position:static;max-height:none;overflow:visible;border:1px solid var(--hairline);border-radius:var(--r-card);padding:18px 20px 14px;background:var(--raise)}
  .toc ol{columns:2;column-gap:28px;border-left:0}
  .toc li{break-inside:avoid}
  .toc a{padding-left:0;border-left:0}
  .toc .sub{display:none}
}
@media (max-width:760px){
  .facts{grid-template-columns:minmax(0,1fr)}
  .toc ol{columns:1}
  .doc pre{font-size:12px;padding:16px 16px 18px}
  .doc h2{font-size:1.32rem}
}

.phero .lead code{font-family:var(--mono);font-size:.88em;color:var(--ink)}
@media (max-width:760px){.doc h2,.doc h3{scroll-margin-top:130px}}