/* Hallmark · page: docs · reuses Cobalt tokens + base from parent dir
 * axes: light/grotesk-sans/cool · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P✓ H✓ E✓ S✓ R✓ V✓ · weakest: single-page docs with sticky TOC — tested across widths */

.docs-body { background: var(--color-paper); }

.docs { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: var(--space-2xl); max-width: var(--container); margin: 0 auto; padding: var(--space-xl) var(--space-xl) var(--space-3xl); }

.docs__side { position: sticky; top: calc(var(--space-xl) + 48px); align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: var(--space-md); border-right: var(--rule-hair) solid var(--color-rule); }
.docs__ver { font-size: 11px; color: var(--color-muted); margin: 0 0 var(--space-md) 0; letter-spacing: 0; }
.docs__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); counter-reset: toc; }
.docs__toc li { counter-increment: toc; }
.docs__toc a { display: flex; gap: var(--space-xs); padding: var(--space-2xs) 0; font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--color-ink-2); text-decoration: none; line-height: 1.4; }
.docs__toc a::before { content: counter(toc, decimal-leading-zero); color: var(--color-muted); font-family: var(--font-outlier); font-weight: 400; font-size: 11px; min-width: 20px; }
.docs__toc a:hover { color: var(--color-accent); }
.docs__side-foot { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.docs__side-foot p { font-size: 11px; color: var(--color-muted); margin: 0 0 var(--space-2xs) 0; }
.docs__base { display: inline-block; padding: var(--space-2xs) var(--space-xs); font-size: 11px; color: var(--color-ink); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); word-break: break-all; }

.docs__main { min-width: 0; max-width: 820px; }
.docs__main section { padding: 0 0 var(--space-2xl); scroll-margin-top: 96px; }
.docs__main section + section { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-2xl); }

.docs__kicker { font-family: var(--font-display); font-weight: 500; font-size: 12px; color: var(--color-accent); margin: 0 0 var(--space-sm) 0; letter-spacing: 0; }
.docs__main h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); font-size: clamp(36px, 4vw, 52px); line-height: 1.05; margin: 0 0 var(--space-md) 0; color: var(--color-ink); }
.docs__main h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; margin: 0 0 var(--space-md) 0; color: var(--color-ink); }
.docs__main h3 { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--color-ink); margin: var(--space-lg) 0 var(--space-sm) 0; }
.docs__main p { color: var(--color-ink-2); line-height: 1.6; margin: 0 0 var(--space-md) 0; max-width: 72ch; }
.docs__main a { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
.docs__main a:hover { text-decoration-color: var(--color-accent); }
.docs__main code.mono { font-size: 0.9em; padding: 1px 6px; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: 4px; color: var(--color-ink); }
.docs__lede { font-size: 17px; line-height: 1.6; color: var(--color-ink-2); margin: 0 0 var(--space-lg) 0; }
.docs__list { padding-left: var(--space-md); margin: 0 0 var(--space-md) 0; color: var(--color-ink-2); line-height: 1.6; }
.docs__list li { margin: 0 0 var(--space-sm) 0; }
.docs__list strong { color: var(--color-ink); font-weight: 600; }

.docs__endpoint { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); margin: 0 0 var(--space-md) 0; }
.docs__method { font-size: 11px; font-weight: 500; padding: var(--space-3xs) var(--space-xs); border-radius: 3px; letter-spacing: 0; }
.docs__method--post { background: var(--color-accent); color: var(--color-accent-ink); }
.docs__method--get { background: var(--color-success); color: var(--color-paper); }
.docs__path { font-size: 13px; color: var(--color-ink); }

.docs__code { background: var(--color-graphite); color: var(--color-graphite-ink); margin: 0 0 var(--space-md) 0; padding: var(--space-md) var(--space-lg); font-family: var(--font-outlier); font-size: 13px; line-height: 1.6; overflow-x: auto; }
.docs__code code { font-family: inherit; background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.docs__table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-md) 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.docs__table th { text-align: left; padding: var(--space-sm) var(--space-md); font-family: var(--font-display); font-weight: 500; font-size: 11px; color: var(--color-muted); background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); letter-spacing: 0; }
.docs__table td { padding: var(--space-sm) var(--space-md); font-size: 13px; color: var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.docs__table tr:last-child td { border-bottom: 0; }

.docs__callout { background: var(--color-accent-wash); border-color: var(--color-accent); padding: var(--space-md) var(--space-lg); margin: var(--space-md) 0; font-size: 14px; line-height: 1.55; color: var(--color-ink); }
.docs__callout strong { color: var(--color-ink); }

.docs__changelog { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.docs__changelog li { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.docs__changelog li:last-child { border-bottom: 0; }
.docs__cl-date { font-size: 12px; color: var(--color-muted); margin: 0; padding-top: 2px; }
.docs__changelog p { margin: 0; }

.docs__pager { display: flex; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); flex-wrap: wrap; }

@media (max-width: 980px) {
  .docs { grid-template-columns: 1fr; gap: var(--space-xl); padding: var(--space-lg) var(--space-md) var(--space-xl); }
  .docs__side { position: static; max-height: none; overflow: visible; padding-right: 0; padding-bottom: var(--space-lg); border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .docs__toc ol { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
  .docs__changelog li { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .docs__cl-date { padding-top: 0; }
}