/* MCP documentation composes the site's existing tokens and canonical controls. */
html { scroll-padding-top: var(--space-7); }
.mcp-intro { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--space-11); padding:var(--space-12) 0; align-items:center; }
.mcp-intro h1 { font-size:var(--font-size-hero-small); line-height:var(--leading-title); margin:var(--space-4) 0 var(--space-6); }
.mcp-lead { color:var(--text); font-size:var(--font-size-subheading); line-height:var(--leading-read); }
.mcp-actions { display:flex; flex-wrap:wrap; gap:var(--space-4); margin:var(--space-7) 0; }
.mcp-muted { color:var(--sub); font-size:var(--font-size-small); line-height:var(--leading-read); }
.mcp-connect-card { padding:var(--space-8); background:var(--yellow-soft); border-radius:var(--radius-card); min-width:0; }
.mcp-connect-card>img { float:right; margin-left:var(--space-4); }
.mcp-connect-card h2 { font-size:var(--font-size-price); line-height:var(--leading-title); margin:var(--space-3) 0 var(--space-6); }
.mcp-connect-card p { color:var(--text); line-height:var(--leading-read); font-size:var(--font-size-small); }
.mcp-example { margin-bottom:var(--space-12); }
.mcp-result { border:1px solid var(--line); background:var(--canvas); border-radius:var(--radius-card); padding:var(--space-9); }
.mcp-result h3 { border-top:1px solid var(--line); padding-top:var(--space-8); }
.mcp-guide { display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--space-11); padding:var(--space-10) 0; border-top:1px solid var(--line); }
.mcp-toc { position:sticky; top:var(--space-7); align-self:start; display:grid; gap:var(--space-2); font-size:var(--font-size-label); }
.mcp-toc a { min-height:var(--control-touch); display:flex; align-items:center; color:var(--sub); }
.mcp-toc a:hover { color:var(--ink); text-decoration:underline; }
.document { min-width:0; color:var(--text); line-height:var(--leading-read); overflow-wrap:anywhere; }
.document h2 { color:var(--ink); font-size:var(--font-size-title); margin:var(--space-11) 0 var(--space-5); line-height:var(--leading-title); }
.document h2:first-child { margin-top:0; }
.document h3 { color:var(--ink); font-size:var(--font-size-subheading); margin:var(--space-8) 0 var(--space-4); line-height:var(--leading-body); }
.document p { margin:0 0 var(--space-5); }
.document li { margin-bottom:var(--space-3); }
.document ul,.document ol { padding-left:var(--space-7); margin:var(--space-5) 0; }
.document a { text-decoration:underline; text-underline-offset:var(--space-1); }
.document blockquote { border-left:var(--space-1) solid var(--yellow); margin:var(--space-5) 0; padding:var(--space-5) var(--space-6); background:var(--canvas); border-radius:0 var(--radius-small) var(--radius-small) 0; }
.document code { font-size:var(--font-size-small); background:var(--canvas); border-radius:var(--space-1); padding:var(--space-half) var(--space-1); }
.code-block { position:relative; min-width:0; margin:var(--space-5) 0; }
.code-block pre { background:var(--ink); color:var(--card); padding:var(--space-6); border-radius:var(--radius-medium); margin:0 0 var(--space-3); white-space:pre-wrap; overflow-wrap:anywhere; line-height:var(--leading-body); font-size:var(--font-size-small); }
.code-block pre code { background:transparent; padding:0; color:inherit; font-family:ui-monospace,monospace; }
.copy-code { min-height:var(--control-touch); font-size:var(--font-size-small); padding:0 var(--space-5); cursor:pointer; }
.copy-code:disabled { color:var(--sub); cursor:wait; }
.table-wrap { overflow-x:auto; margin:var(--space-6) 0; border:1px solid var(--line); border-radius:var(--radius-small); }
.table-wrap table { width:100%; border-collapse:collapse; font-size:var(--font-size-small); text-align:left; }
.table-wrap th,.table-wrap td { padding:var(--space-4); border-bottom:1px solid var(--line); vertical-align:top; min-width:100px; }
.table-wrap th { background:var(--canvas); color:var(--ink); font-weight:var(--weight-strong); }
.mcp-copy-status { position:fixed; bottom:var(--space-6); left:50%; transform:translateX(-50%); max-width:90vw; background:var(--ink); color:var(--card); border-radius:var(--radius-small); padding:0; z-index:20; }
.mcp-copy-status:not(:empty) { padding:var(--space-4) var(--space-6); }
@media(max-width:800px) { .mcp-intro { gap:var(--space-7); } .mcp-guide { grid-template-columns:1fr; gap:var(--space-7); } .mcp-toc { position:static; display:flex; flex-wrap:wrap; gap:var(--space-4); } .mcp-toc strong { width:100%; } }
@media(max-width:600px) { .mcp-intro { grid-template-columns:1fr; padding:var(--space-8) 0; } .mcp-intro h1 { font-size:var(--font-size-section); } .mcp-connect-card,.mcp-result { padding:var(--space-6); } .mcp-example { margin-bottom:var(--space-8); } .mcp-actions .btn { flex:1; padding:0 var(--space-4); } .document h2 { font-size:var(--font-size-h3); } .mcp-toc { gap:var(--space-3) var(--space-5); } }