/* Docs — same system, laid out for reading. */
.docs {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 44px) 96px;
  display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 48px; align-items: start;
  position: relative; z-index: 1;
}
.toc { position: sticky; top: 92px; display: grid; gap: 2px; }
.toc b { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.toc a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 6px 0 6px 13px; border-left: 1px solid var(--line-2); transition: color .12s, border-color .12s; }
.toc a:hover { color: var(--ink); border-color: var(--ink); }
.top-nav a.here { color: var(--ink); }

.doc-body { max-width: 74ch; }
.doc-body h1 { font-size: clamp(38px, 5.4vw, 56px); letter-spacing: -0.04em; }
.doc-body h2 { font-size: clamp(22px, 2.6vw, 27px); margin: 52px 0 14px; scroll-margin-top: 92px; }
.doc-body section:first-of-type h2 { margin-top: 38px; }
.doc-body p { margin: 0 0 14px; color: var(--ink-2); }
.doc-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.doc-body a:hover { text-decoration-color: var(--accent); }
.lede { font-size: 18px; color: var(--muted) !important; margin-top: 18px !important; }

.steps-list { margin: 0 0 14px; padding-left: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.steps-list li { counter-increment: s; padding-left: 40px; position: relative; color: var(--ink-2); }
.steps-list li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 2px;
  font: 500 11px/1 var(--mono); color: var(--accent); letter-spacing: .08em;
}
.ticks { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.ticks li { padding-left: 28px; position: relative; color: var(--ink-2); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 11l4 4 10-12' stroke='%2314804a' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.warn { background: var(--accent-soft); border: 1px solid #f2cec5; border-radius: 12px; padding: 14px 16px; color: #a32d18 !important; font-weight: 500; }

.doc-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.doc-table th, .doc-table td { padding: 13px 16px; text-align: left; vertical-align: top; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.doc-table tr:last-child th, .doc-table tr:last-child td { border-bottom: 0; }
.doc-table th { width: 34%; font: 500 13px var(--mono); color: var(--muted); background: #fcfbf9; }
.doc-table td { color: var(--ink-2); }
kbd { font: 500 12px var(--mono); background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px; color: var(--ink); }

.qa { margin: 0; }
.qa dt { font: 700 17px/1.3 var(--display); letter-spacing: -0.02em; margin-top: 22px; }
.qa dd { margin: 7px 0 0; color: var(--muted); }
.doc-foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted) !important; }

@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .toc b { width: 100%; margin-bottom: 4px; }
  .toc a { border-left: 0; padding: 0; }
}