/* ==========================================================================
   AtlasKeys — Document / article layout
   Used by legal pages, dev API docs, and corporate content pages.
   ========================================================================== */

.doc { padding-top: calc(var(--nav-h) + var(--space-10)); padding-bottom: var(--space-16); }
.doc__head { max-width: var(--container-narrow); margin-bottom: var(--space-10); }
.doc__head .eyebrow { margin-bottom: var(--space-3); }
.doc__head h1 { font-size: var(--fs-4xl); margin-bottom: var(--space-3); }
.doc__head p { color: var(--color-text-muted); }
.doc__updated { font-size: var(--fs-sm); color: var(--color-text-dim); margin-top: var(--space-3); }

.doc__layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: start; }

/* TOC */
.doc__toc { position: sticky; top: calc(var(--nav-h) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-1); }
.doc__toc h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-dim); margin-bottom: var(--space-2); }
.doc__toc a { font-size: var(--fs-sm); color: var(--color-text-muted); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--color-border); transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.doc__toc a:hover { color: var(--color-primary-300); border-color: var(--color-border-primary); }

/* Prose */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--space-10); scroll-margin-top: calc(var(--nav-h) + var(--space-4)); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.prose p, .prose li { color: var(--color-text-muted); line-height: var(--lh-loose); }
.prose ul, .prose ol { padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.prose strong { color: var(--color-text); }
.prose a { color: var(--color-primary-300); text-underline-offset: 3px; }
.prose a:hover { text-decoration: underline; }
.prose blockquote { padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-primary); background: var(--color-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.prose code { background: var(--color-surface-2); padding: 0.15em 0.4em; border-radius: var(--radius-sm); font-size: 0.9em; }
.prose table { width: 100%; font-size: var(--fs-sm); margin-block: var(--space-4); }
.prose th, .prose td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
.prose th { color: var(--color-text); }

.callout { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-primary-soft); border: 1px solid var(--color-border-primary); }
.callout svg { width: 20px; height: 20px; color: var(--color-primary-300); flex: none; margin-top: 2px; }
.callout p { color: var(--color-text); margin: 0; font-size: var(--fs-sm); }

/* Code blocks (API docs) */
.prose pre { background: #0c0d16; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; }
.prose pre code { background: none; padding: 0; }
.endpoint { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: var(--space-3); }
.method { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-xs); padding: 0.2em 0.6em; border-radius: var(--radius-sm); }
.method--get { background: var(--color-info-soft); color: var(--color-info); }
.method--post { background: var(--color-success-soft); color: var(--color-success); }
.method--del { background: var(--color-danger-soft); color: var(--color-danger); }
.endpoint code { background: none; font-size: var(--fs-sm); }

/* API sandbox */
.sandbox { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.sandbox__panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.sandbox__panel h3 { font-size: var(--fs-base); }
.sandbox__req { display: flex; gap: var(--space-2); }
.sandbox__req .select { width: auto; }
.sandbox__out { font-family: var(--font-mono); font-size: var(--fs-sm); background: #0c0d16; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); min-height: 220px; white-space: pre-wrap; overflow-x: auto; color: var(--color-text-muted); }
@media (max-width: 800px) { .sandbox { grid-template-columns: 1fr; } }

@media (max-width: 800px) {
  .doc__layout { grid-template-columns: 1fr; }
  .doc__toc { display: none; }
}