/* ─── Docs ─── */
.docs-layout{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1;min-height:0}
/* The docs fill what the main area has left, so only the contents and the text scroll, not the page. */
.main > #v-docs.active{display:flex;flex-direction:column;flex:1;min-height:0}
.docs-nav{border-right:1px solid var(--border);padding:16px 0;overflow-y:auto;position:sticky;top:0}
.docs-nav-group{padding:0 16px;margin-bottom:16px}
/* Group names keep their own case; only acronyms are capitals. */
.docs-nav-group-title{font-size:var(--text-sm);color:var(--text3);font-weight:var(--fw-semibold);margin-bottom:8px;padding:0 8px}
.docs-nav a{display:block;padding:5px 8px;font-size:var(--text-base);color:var(--text2);border-radius:5px;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);text-decoration:none;line-height:1.4}
.docs-nav a:hover{background:var(--bg3);color:var(--text)}
.docs-nav a.active{background:var(--emerald-dim);color:var(--emerald)}
.docs-nav .method{display:inline-block;font-size:var(--text-sm);font-weight:var(--fw-semibold);font-family:var(--font-mono);color:var(--text2);margin-right:4px;min-width:44px}
.docs-content{padding:0 32px 40px;overflow-y:auto}
.docs-section{padding:28px 0;border-bottom:1px solid var(--border)}
.docs-section:last-child{border-bottom:none}
.docs-section h2{font-size:var(--text-lg);font-weight:var(--fw-semibold);margin-bottom:6px;display:flex;align-items:center;gap:8px;scroll-margin-top:20px}
.docs-section h3{font-size:var(--text-lg);font-weight:var(--fw-semibold);margin:20px 0 10px;display:flex;align-items:center;gap:8px;scroll-margin-top:20px}
.docs-section p{font-size:var(--text-md);color:var(--text2);line-height:1.7;margin:6px 0}
.docs-endpoint{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin:12px 0;overflow:hidden}
.docs-endpoint-header{padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out);position:relative}
.docs-endpoint-header:hover{background:var(--bg3)}
.docs-endpoint-header::after{content:'›';font-size:18px;color:var(--text3);margin-left:8px;transform:rotate(0deg);transition:transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.docs-endpoint.open .docs-endpoint-header::after{transform:rotate(90deg);color:var(--text2)}
.docs-endpoint-header .method-tag{font-size:var(--text-sm);font-weight:var(--fw-semibold);font-family:var(--font-mono);color:var(--text2);min-width:56px}
/* The method says whether a call changes data, so it is coloured like a state:
   reads stay grey, creates green, edits amber, deletes rose. Text only, no pill. */
.method.m-get,.method-tag.m-get{color:var(--text3)}
.method.m-post,.method-tag.m-post{color:var(--emerald)}
.method.m-put,.method-tag.m-put,.method.m-patch,.method-tag.m-patch{color:var(--amber)}
.method.m-delete,.method-tag.m-delete{color:var(--rose)}
.docs-endpoint-header .path{font-size:var(--text-md);font-family:var(--font-mono);color:var(--text);font-weight:var(--fw-medium)}
.docs-endpoint-header .desc{font-size:var(--text-base);color:var(--text3);margin-left:auto}
.docs-endpoint-body{display:block;max-height:0;overflow:hidden;opacity:0;padding:0 16px;transition:max-height var(--dur-med) var(--ease-out),opacity var(--dur-fast) var(--ease-out),padding-top var(--dur-med) var(--ease-out),padding-bottom var(--dur-med) var(--ease-out)}
.docs-endpoint.open .docs-endpoint-body{max-height:6000px;opacity:1;padding-top:16px;padding-bottom:16px}
.docs-param-table{width:100%;border-collapse:collapse;margin:8px 0}
.docs-param-table th{text-align:left;padding:6px 10px;font-size:var(--text-sm);color:var(--text3);font-weight:var(--fw-semibold);border-bottom:1px solid var(--border)}
.docs-param-table td{padding:6px 10px;font-size:var(--text-base);border-bottom:1px solid var(--border)}
.docs-param-table .param-name{font-family:var(--font-mono);color:var(--text);font-weight:var(--fw-medium)}
.docs-param-table .param-type{font-family:var(--font-mono);color:var(--text3);font-size:var(--text-sm)}
.param-req.yes{color:var(--text)}
.param-req.no{color:var(--text3)}
pre.docs-code{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--text-base);overflow-x:auto;color:var(--text2);line-height:1.5;margin:8px 0;white-space:pre;tab-size:2;max-width:100%}
pre.docs-code .ck{color:var(--text3)}
pre.docs-code .cv{color:var(--emerald)}
pre.docs-code .cs{color:var(--amber)}
.docs-label{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text3);margin:12px 0 4px}
.docs-note{font-size:var(--text-base);color:var(--text2);padding:8px 12px;border-left:3px solid var(--border2);background:var(--bg2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:8px 0}
.docs-note.is-warn{border-left-color:var(--amber);background:var(--amber-dim)}
.docs-code-scroll{max-height:200px;overflow-y:auto}
.docs-url{display:block;margin-top:6px;padding:8px 12px;border-radius:6px}
.docs-actions{margin-top:16px;display:flex;gap:8px;align-items:center}
@media(max-width:900px){.docs-layout{grid-template-columns:1fr}.docs-nav{display:none}}