/* ============================================================
   MCP SETUP PAGE (askpilot.com/mcp): the short page that gets a person
   from "I use ChatGPT or Claude" to "Askpilot is connected" in two
   minutes. Built on the integration profile layout (.ip-*, from
   css/integration-profile.css); this file adds only what that layout
   does not have: the server address with a copy button, code blocks,
   the tabs that switch between AI agents, and the example prompts.
   The detailed version lives at /docs/mcp.html.
   ============================================================ */

/* --- server address and code blocks -------------------------------------- */
.mcp-addr {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; padding: 6px 6px 6px 14px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--soft);
}
.mcp-addr code {
    flex: 1; min-width: 0; overflow-wrap: anywhere;
    font: 600 0.875rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
}
.mcp-copy {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px;
    background: var(--surface); color: var(--ink);
    font: 600 0.8125rem/1 inherit; cursor: pointer;
}
.mcp-copy:hover { border-color: var(--ink); }
.mcp-copy svg { width: 14px; height: 14px; }
.mcp-copy.is-done { color: #1F9D62; border-color: #1F9D62; }

.mcp-code {
    position: relative; margin: 14px 0 0;
    border: 1px solid var(--line); border-radius: 14px; background: #16121A; color: #F4EFED;
}
.mcp-code pre {
    margin: 0; padding: 16px 18px; overflow-x: auto;
    font: 500 0.8125rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mcp-code .mcp-copy {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #F4EFED;
}
.mcp-code .mcp-copy:hover { border-color: rgba(255, 255, 255, 0.5); }
.mcp-code .mcp-copy.is-done { color: #7EE2B0; border-color: #7EE2B0; }
.mcp-code-label { margin: 18px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); }

/* --- agent tabs ------------------------------------------------------------ */
.mcp-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px;
}
.mcp-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--body);
    font: 600 0.875rem/1 inherit; cursor: pointer;
}
.mcp-tab img, .mcp-tab svg { width: 16px; height: 16px; }
.mcp-tab:hover { color: var(--ink); border-color: #CFC8CC; }
.mcp-tab[aria-selected="true"] { background: var(--pink-wash); border-color: var(--pink-surface); color: var(--ink); }
.mcp-tab[aria-selected="true"] svg { color: var(--ink); }

.mcp-panel {
    margin-top: 16px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px;
    background: var(--surface);
}
.mcp-panel[hidden] { display: none; }
.mcp-panel h3 { margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.mcp-panel-sub { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.mcp-steps { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 10px; color: var(--body); line-height: 1.55; }
.mcp-steps b { color: var(--ink); }
.mcp-note {
    margin: 16px 0 0; padding: 12px 14px; border-radius: 12px;
    background: var(--pink-wash); color: var(--body); font-size: 0.9375rem; line-height: 1.5;
}

/* --- sign-in points and example prompts ---------------------------------- */
.mcp-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.mcp-points li { display: flex; gap: 10px; color: var(--body); line-height: 1.55; }
.mcp-points svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: #1F9D62; }

.mcp-prompts {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 18px;
}
.mcp-prompt {
    margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); color: var(--ink); font-size: 0.9375rem; line-height: 1.5;
}
.mcp-prompt::before { content: "\201C"; color: var(--muted); margin-right: 2px; }
.mcp-prompt::after { content: "\201D"; color: var(--muted); margin-left: 1px; }

.mcp-more { margin: 18px 0 0; }
.mcp-more a { font-weight: 600; color: var(--ink); }

@media (max-width: 767px) {
    .mcp-panel { padding: 20px 16px; }
    .mcp-tab { padding: 7px 12px; font-size: 0.8125rem; }
}

/* the inner code element takes the block's monospace font, with ligatures
   off so "--transport" never reads as a dash */
.mcp-code code, .mcp-addr code, .mcp-note code, .mcp-panel-sub code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-ligatures: none;
}
.mcp-code code { font-size: inherit; line-height: inherit; color: inherit; background: none; padding: 0; }

/* Copy buttons keep their own background; only the label and icon turn
   brand blue, at medium weight, so they stand out without shouting. */
.mcp-copy, .mcp-code .mcp-copy { color: #4C6BEE; font-weight: 500; }
.mcp-code .mcp-copy { color: #8FA3FF; }
.mcp-copy.is-done { color: #1F9D62; }
.mcp-code .mcp-copy.is-done { color: #7EE2B0; }