/* Docs sub-section — 3-column shell (section nav | article | on-this-page TOC).
   Lives inside base.html's <main class="shell">, so no outer max-width/margin
   or horizontal padding is redeclared here — .shell already provides that. */

.docs {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 210px;
  gap: var(--sp-10);
  align-items: start;
}

/* section nav */
.docnav { position: sticky; top: var(--sp-16); }
.docnav .grp { margin-bottom: var(--sp-6); }
.docnav .grp-t {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--sp-2) var(--sp-3);
}
.docnav a {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  padding: 7px var(--sp-3);
  border-radius: var(--r-md);
  border-left: 2px solid transparent;
  transition: color .15s, background-color .15s;
}
.docnav a:hover { color: var(--ink); background: var(--surface-2); }
.docnav a.active {
  color: var(--ink);
  font-weight: 600;
  background: var(--accent-2-soft);
  border-left-color: var(--accent-2);
}

/* article */
.article { min-width: 0; max-width: 780px; }
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.article h1 { font-size: clamp(30px, 4vw, 40px); }
.article .lead { color: var(--ink-2); font-size: 18px; margin: var(--sp-4) 0 0; }
.article h2 { font-size: 23px; margin: 44px 0 6px; scroll-margin-top: 84px; }
.article h2 + p { margin-top: var(--sp-3); }
.article h3 { font-size: 16px; margin: 26px 0 6px; }
.article p { color: var(--ink-2); margin: var(--sp-4) 0; }
.article code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink);
}
.article a.link {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.article ul { color: var(--ink-2); padding-left: 20px; }
.article li { margin: 6px 0; }

/* community / reference tables */
.ctable {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ctable th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.ctable td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.ctable tr:last-child td { border-bottom: 0; }
.ctable td.c {
  font-family: var(--font-mono);
  color: var(--ink);
  white-space: nowrap;
  font-size: 13px;
}
.ctable td.c b { color: var(--accent-2); font-weight: 600; }
.scroll-x { overflow-x: auto; }

/* callout */
.callout {
  display: flex;
  gap: var(--sp-3);
  background: var(--accent-2-soft);
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--line));
  border-radius: var(--r-md);
  padding: 14px var(--sp-4);
  margin: var(--sp-6) 0;
  font-size: 14px;
  color: var(--ink-2);
}
.callout svg { width: 18px; height: 18px; flex: none; color: var(--accent-2); margin-top: 1px; }
.callout b { color: var(--ink); }

/* code sample block */
.codeblock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: var(--sp-4) 0;
  overflow: hidden;
}
.codeblock .cb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--surface-2);
}
.codeblock pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.codeblock pre .k { color: var(--accent-2); }
.codeblock pre .c { color: var(--ink-3); }
.codeblock pre .n { color: var(--accent); }

/* prev/next pager */
.pager-links {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: 44px;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.pager-links a {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px var(--sp-4);
  transition: border-color .15s;
}
.pager-links a:hover { border-color: var(--ink-3); }
.pager-links .dir {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pager-links .ti { font-weight: 700; color: var(--ink); margin-top: 4px; }
.pager-links .next { text-align: right; }

/* on-this-page TOC */
.toc { position: sticky; top: var(--sp-16); font-size: 13px; }
.toc .toc-t {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}
.toc a {
  display: block;
  color: var(--ink-3);
  padding: 5px 0 5px var(--sp-3);
  border-left: 2px solid var(--line);
}
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--ink); border-left-color: var(--accent-2); }

@media (max-width: 1080px) {
  .docs { grid-template-columns: 220px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 820px) {
  .docs { grid-template-columns: 1fr; gap: var(--sp-5); }
  .docnav {
    position: static;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    background: var(--surface);
  }
}
@media (prefers-reduced-motion: reduce) {
  .docnav a, .pager-links a { transition: none; }
}