/* hailbell.com/docs: one long page with a sticky table of contents. Uses style.css tokens. */
.brand img { width: 24px; height: 24px; }
.docs-crumb { padding-left: 16px; font-size: 14px; border-left: 1px solid var(--line-2); color: var(--muted); }
.docs { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: 64px; padding: 120px 0 96px; }
.toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 2px; font-size: 14px; }
.toc a { padding: 6px 10px; border-radius: 8px; color: var(--muted); transition: color .2s, background .2s; }
.toc a:hover { color: var(--fg); background: var(--sunk); }
.doc { min-width: 0; }
.doc h1 { font-size: clamp(36px, 5vw, 52px); scroll-margin-top: 96px; }
.doc h2 { font-size: 26px; letter-spacing: -0.03em; margin: 56px 0 12px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.doc p, .doc li { color: var(--fg-2); font-size: 16px; line-height: 1.65; }
.doc p { margin: 12px 0; }
.doc .lede { font-size: 19px; margin: 18px 0 28px; }
.doc b { color: var(--fg); font-weight: 500; }
.doc a { color: var(--accent); }
.doc code { font: 13.5px/1.5 var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--sunk); color: var(--fg); }
.doc pre { margin: 16px 0; padding: 18px 20px; border-radius: 14px; background: #0d0e11; box-shadow: 0 0 0 1px var(--line); overflow-x: auto; }
.doc pre code { padding: 0; background: none; color: #e6e8ee; font-size: 13.5px; line-height: 1.7; white-space: pre; }
.doc pre .c { color: #7d8390; }
.steps { padding-left: 22px; display: grid; gap: 10px; }
.doc-end { margin-top: 56px; padding: 22px 24px; border-radius: 16px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.doc-end p { margin: 0; }
.foot-main .f-bottom { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 96px; }
  .toc { position: static; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 24px; padding: 0 var(--gutter); }
  .toc::-webkit-scrollbar { display: none; }
  .toc a { flex: none; background: var(--sunk); border-radius: 999px; }
  .doc pre { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
}