/* Documentation page — reuses app.css for chrome, adds prose styling. */

.docs{max-width:920px}
.toc{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 44px;padding-bottom:26px;
  border-bottom:1px solid var(--line);
}
.toc a{
  padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  font-size:13px;color:var(--dim);transition:.18s;
}
.toc a:hover{color:var(--ink);border-color:var(--line-2)}

.doc{margin:0 0 56px;scroll-margin-top:100px}
.doc h2{
  margin:0 0 16px;font-size:24px;font-weight:500;letter-spacing:-.02em;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.doc p{margin:0 0 15px;color:var(--dim);max-width:68ch;line-height:1.62}
.doc p b,.doc li b{color:var(--ink);font-weight:500}
.doc a:not(.btn):not(.txlink){color:var(--ink);border-bottom:1px solid var(--line-2)}
.doc a:not(.btn):not(.txlink):hover{border-color:var(--ink)}
.doc ul{margin:0 0 15px;padding-left:20px;color:var(--dim);max-width:68ch;line-height:1.62}
.doc li{margin-bottom:9px}
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(232,235,238,.06);padding:2px 6px;border-radius:5px;color:var(--ink);
}
.doc pre{
  margin:0 0 15px;padding:16px 18px;border-radius:var(--r);background:#0a0e12;
  border:1px solid var(--line);overflow-x:auto;
}
.doc pre code{background:none;padding:0;font-size:13px;line-height:1.7;color:var(--dim)}

.defs{margin:0 0 18px;display:grid;gap:0}
.defs>div{
  display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.defs dt{color:var(--ink);font-weight:500}
.defs dd{margin:0;color:var(--dim)}
@media(max-width:640px){.defs>div{grid-template-columns:1fr;gap:4px}}

.cols{columns:2;column-gap:38px}
@media(max-width:720px){.cols{columns:1}}

.callout{
  margin:20px 0 0;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--line-2);background:rgba(232,235,238,.03);color:var(--dim);
}
.marks{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.marks img{border-radius:999px}