/* The explainers of the MCP server: /mcp/what-is-mcp, /mcp/claude and
   /mcp/chatgpt (modules/site/views/mcp_what.php, mcp_client.php). It comes
   after mcp.css and uses its chat, code, FAQ, text and final band. */

.mcp-page .site-section-head h1 { font-size: clamp(36px, 5vw, 60px); }
.mcp-crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: 14px; color: var(--ink-3); margin-bottom: var(--s5); }
.mcp-crumbs a { color: var(--ink-3); text-decoration: none; }
.mcp-crumbs a:hover { color: var(--ink); text-decoration: underline; }

.mcp-page-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s7); align-items: start; margin-top: var(--s7); }
.mcp-page-toc { position: sticky; top: 92px; }
.mcp-page-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); border-left: 1px solid var(--line); }
.mcp-page-toc a { display: block; padding: 2px 0 2px var(--s4); font-size: 15px; color: var(--ink-2); text-decoration: none; }
.mcp-page-toc a:hover { color: var(--ink); }
.mcp-page-body { display: grid; gap: var(--s8); min-width: 0; max-width: 820px; }
.mcp-page-part { display: grid; gap: var(--s4); align-content: start; scroll-margin-top: 92px; }
.mcp-page-part > h2 { font-size: clamp(26px, 3vw, 36px); margin: 0; color: var(--ink); }
.mcp-page-part.mcp-offer-text > h2 { margin: 0; }
.mcp-page-part.mcp-offer-text > * { margin-bottom: 0; }
.mcp-page-chat { max-width: 640px; }
.mcp-page-lead { color: var(--ink-2); }

.mcp-page-asks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.mcp-page-asks li { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); }
.mcp-page-ask { font: 300 19px/1.45 var(--disp); letter-spacing: -.015em; color: var(--ink); }
.mcp-page-gives { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

.mcp-page-scroll { overflow-x: auto; }
.mcp-page-table { min-width: 560px; }
.mcp-page-table th[scope="col"] { font-weight: 600; color: var(--ink); }
.mcp-page-table td { color: var(--ink-2); }
.mcp-page-note { font-size: 14px; }

@media (max-width: 860px) {
	.mcp-page-grid { grid-template-columns: 1fr; gap: var(--s5); }
	.mcp-page-toc { position: static; }
}