/* Documentation composition; tokens come from the shared foundation. */
.docs-main { padding-block:56px 36px; }
.docs-head { padding:8px 0 44px; border-bottom:1px solid var(--line); margin-bottom:36px; }
.docs-head h1 { font-size:clamp(40px,5.5vw,68px); line-height:1.06; letter-spacing:-.05em; margin:0 0 24px; }
.docs-head p { color:var(--text-2); max-width:650px; font-size:17px; margin:0 0 24px; }
.docs-base { display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; width:fit-content; max-width:100%; padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
.docs-base span { font:11px var(--mono); color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; }
.docs-base code { font:13px/1.7 var(--mono); color:var(--signal); overflow-wrap:anywhere; min-width:0; }
.docs-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:36px; align-items:start; }
.docs-index { position:sticky; top:112px; display:flex; flex-direction:column; gap:5px; padding:20px 14px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); }
.docs-index .tag { margin:0 10px 16px; font-size:10px; }
.docs-index a { font-size:13px; line-height:1.5; color:var(--text-2); border:1px solid transparent; border-radius:8px; padding:12px 10px; min-height:44px; transition:background .15s,color .15s; }
.docs-index a:hover,.docs-index a:focus-visible { background:var(--panel-2); color:var(--signal); }
.docs-index .docs-index-tool { border-top-color:var(--line); border-radius:0; margin-top:12px; padding-top:18px; }
.docs-content { min-width:0; }
.docs-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); padding:32px; margin-bottom:20px; min-width:0; scroll-margin-top:112px; }
.docs-card:target { border-color:var(--signal); }
.docs-card h2 { font:650 25px/1.25 var(--sans); letter-spacing:-.03em; color:var(--text); margin:0 0 22px; scroll-margin-top:112px; }
.docs-section-label { display:block; font:11px/1.5 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin-bottom:12px; }
.docs-pre { margin:0 0 20px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--ink); font:12px/1.85 var(--mono); color:var(--text); overflow-x:auto; white-space:pre; tab-size:2; }
.docs-pre:focus-visible { outline-offset:2px; }
.docs-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0; background:none; scroll-margin-top:112px; }
.docs-eps { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.docs-eps li { padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.8; color:var(--text-2); overflow-wrap:anywhere; }
.docs-eps code { font:600 12px/1.8 var(--mono); color:var(--signal); }
.docs-eps .m { font:12px/1.8 var(--mono); color:var(--text-3); }
.docs-eps + .docs-pre { margin-top:20px; }
.docs-note { margin:20px 0 0; font-size:15px; color:var(--text-2); line-height:1.85; }
.docs-note b { color:var(--text); font-weight:650; }
.docs-note code,.docs-cta code { font:12px/1.8 var(--mono); color:var(--text); overflow-wrap:anywhere; background:var(--panel-2); border-radius:4px; padding:2px 4px; }
.docs-cta p { margin:0; color:var(--text-2); overflow-wrap:anywhere; }
.docs-cta a:not(.btn) { text-decoration:underline; text-underline-offset:3px; }
.docs-cta .final-actions { justify-content:flex-start; margin-top:24px; }
.docs .paper .btn-primary { background:var(--signal); color:#fff; }
.docs .paper .btn-primary:hover { background:#294217; }
@media(max-width:1000px) {
	.docs-layout { grid-template-columns:190px minmax(0,1fr); gap:24px; }
	.docs-index { top:140px; }
}
@media(max-width:800px) {
	.docs-main { padding-top:32px; }
	.docs-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
	.docs-index { position:static; flex-direction:row; flex-wrap:wrap; gap:4px; padding:16px; }
	.docs-index .tag { width:100%; margin:0 10px 8px; }
	.docs-index .docs-index-tool { margin:0; padding:12px 10px; border-color:transparent; border-radius:8px; }
	.docs-head { padding-bottom:28px; margin-bottom:24px; }
	.docs-card { padding:24px; }
}
@media(max-width:420px) {
	.docs-card { padding:20px; }
	.docs-pre { padding:16px; font-size:11px; }
	.docs-card h2 { font-size:23px; }
	.docs-base { gap:6px; }
	.docs-base span { width:100%; }
}