/* /mcp/ pages. Shared sections, steps and FAQ come from ai-builder.css (.builder-page). */

.mcp-page .mcp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 8px}
.mcp-page .mcp-secondary-action{color:var(--text);text-decoration:underline;text-underline-offset:3px;padding:10px 4px}
.mcp-page .mcp-secondary-action:hover,.mcp-page .mcp-secondary-action:focus-visible{color:var(--gold)}

.mcp-page .mcp-trust ul{list-style:none;margin:0;padding:20px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mcp-page .mcp-trust li{color:var(--muted);font-size:15px}
.mcp-page .mcp-trust strong{color:var(--text);display:block}

.mcp-page .mcp-try-status{color:var(--muted);min-height:1.65em;margin:12px 0 0}
.mcp-page .mcp-output,.mcp-page .mcp-code{font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px}
.mcp-page .mcp-output{padding:16px 18px;margin:12px 0 0;max-height:560px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.mcp-page .mcp-code{display:inline-block;padding:8px 12px;max-width:100%;overflow-x:auto;white-space:nowrap;vertical-align:middle}
.mcp-page code{overflow-wrap:anywhere}

.mcp-page .mcp-prompts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.mcp-page .mcp-prompt{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.mcp-page .mcp-prompt__topic{margin:0;color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mcp-page .mcp-prompt__text{margin:0;flex:1}
.mcp-page .mcp-prompt__actions{display:flex;flex-wrap:wrap;gap:8px}

.mcp-page .mcp-table-wrap{overflow-x:auto;margin:16px 0 8px;max-width:100%}
.mcp-page .mcp-table{border-collapse:collapse;width:100%;min-width:520px}
.mcp-page .mcp-table th,.mcp-page .mcp-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.mcp-page .mcp-table thead th{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.mcp-page .mcp-table tbody th{color:var(--muted);font-weight:400;white-space:nowrap}

.mcp-page .mcp-dev h3{margin:32px 0 8px}
.mcp-page .mcp-copy-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:100%}

@media (max-width:480px){
  .mcp-page .mcp-table{min-width:0}
  .mcp-page .mcp-table th,.mcp-page .mcp-table td{padding:8px 6px;font-size:15px}
}

/* Break code only where <wbr> allows (after underscores and slashes), never mid-word. */
.mcp-page .mcp-table code,.mcp-page .builder-steps code{overflow-wrap:normal;word-break:normal}

/* Ask buttons, copy buttons and the app picker */
.mcp-page .mcp-chip,.mcp-page .mcp-copy{display:inline-block;font:600 14px/1 Arial,sans-serif;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);text-decoration:none;cursor:pointer}
.mcp-page .mcp-chip:hover,.mcp-page .mcp-chip:focus-visible,.mcp-page .mcp-copy:hover,.mcp-page .mcp-copy:focus-visible{border-color:var(--gold);color:var(--gold)}
.mcp-page .mcp-note{color:var(--muted);font-size:15px;margin:8px 0}
.mcp-page .mcp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.mcp-page .mcp-tabs [role="tab"]{font:600 14px/1 Arial,sans-serif;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.mcp-page .mcp-tabs [role="tab"][aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.mcp-page .mcp-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:8px}
.mcp-page .mcp-panel ol{margin:0;padding-left:20px}
.mcp-page .mcp-panel .mcp-code{white-space:pre-wrap;overflow-wrap:anywhere}

/* What your AI sees */
.mcp-page .mcp-tools{display:grid;gap:12px;margin:12px 0}
.mcp-page .mcp-tool{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.mcp-page .mcp-tool code{color:var(--gold);font:600 14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.mcp-page .mcp-tool p{margin:6px 0 0}
.mcp-page .mcp-facts{margin:16px 0 0;padding-left:20px}
.mcp-page .mcp-facts li{margin:4px 0}