/* The MCP landing page and docs (templates/mcp/*). Loaded by those pages only; the homepage and pSEO
   teaser (includes3/mcp_teaser.ftl) uses theme classes and inline styles because its hosts never load
   this file. The theme paints every `pre` light with !important and `pre code` as inline code, so the
   code blocks are restated here explicitly, as tools.css does for the tool results.

   Three theme facts every rule below works around:
   - `pre` and inline `code` take var(--font-code-family), which the theme defines as var(--font-family-code)
     — a variable it never defines — so code rendered in the body font. Both are set on .mcp-page.
   - The theme paints every SVG descendant with `fill: currentColor`, so a logo's brand colour is the SVG's
     `color` (includes/logos.ftl), never a fill attribute.
   - The `text-gray-*` utilities are !important: nothing inside the dark card uses them. */
.mcp-page {
    position: relative;
    --font-code-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-family-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mcp-teal: #194A54;
    --mcp-teal-2: #1F5D69;
    --mcp-mint: #E0FFD3;
    --mcp-lime: #E2FF5E;
    --mcp-lime-soft: #F3FFBA;
    --mcp-ink: #16404B;
    --mcp-tint: #F1FBEA;
    --mcp-line: #e5e7eb;
}

/* ---------------------------------------------------------------- code blocks */
.mcp-page pre {
    background: #202021 !important;
    color: #f0f6fc !important;
    border-radius: 12px;
    border: .1rem solid hsla(0, 0%, 82%, .1);
    padding: 1rem 5.5rem 1rem 1.25rem;
    overflow: auto;
    text-align: left;
    font-size: .9rem;
    line-height: 1.55;
    white-space: pre;
    margin: .5rem 0 1rem;
}
/* The theme sets inline code italic, in a font of its own (`:not(pre)>code`). */
.mcp-page :not(pre) > code { font-style: normal; }
.mcp-page pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: inherit !important;
    white-space: pre;
}
.mcp-page .code-block-container { position: relative; }
.mcp-snippet { position: relative; }

/* ---------------------------------------------------------------- hero */
.mcp-hero { padding-bottom: 1.5rem; }
.mcp-eyebrow {
    display: inline-block;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.4;
    padding: .3rem .9rem;
    border: 1px solid #cfd8d6;
    border-radius: 999px;
    color: var(--mcp-teal-2);
    background: #fff;
}
.mcp-answer { max-width: 760px; margin: 0 auto 1.5rem; }

/* ---------------------------------------------------------------- connect: the dark card */
.mcp-connect-section { padding: 0 0 3rem; }
#connect, .mcp-tabs-strip { scroll-margin-top: 96px; }
.mcp-connect {
    background-color: var(--mcp-teal);
    color: #fff;
    border: 1px solid #212529;
    border-radius: 16px;
    box-shadow: 6px 6px 0 0 #000;
    padding: 1.25rem 1rem;
    text-align: left;
}
@media (min-width: 576px) { .mcp-connect { padding: 1.5rem; box-shadow: 8px 8px 0 0 #000; } }
@media (min-width: 992px) { .mcp-connect { padding: 2.5rem; } }
/* Sized by the theme's own h4/sm:h3/xl:h2 classes, like every other H2: the theme sets heading sizes !important. */
.mcp-connect .mcp-connect-title { color: var(--mcp-mint); text-align: center; margin: 0 0 .75rem; }
.mcp-connect .mcp-answer { color: rgba(255, 255, 255, .86); text-align: center; }
.mcp-connect-answer { margin-bottom: 1.75rem; }
.mcp-connect p, .mcp-connect li, .mcp-connect summary { color: rgba(255, 255, 255, .9); }
.mcp-connect a:not([class]) { color: var(--mcp-mint); text-decoration: underline; text-underline-offset: 2px; }
.mcp-connect a:not([class]):hover { color: var(--mcp-lime); }
.mcp-connect b { color: #fff; }
.mcp-connect :not(pre) > code {
    background-color: rgba(255, 255, 255, .14) !important;
    border-color: transparent !important;
    color: #fff;
    border-radius: 4px;
    padding: .05em .35em;
    font-size: .88em;
}

/* The tab strip: one scrolling row of pills on a phone (faded at the edge that hides more, mcp.js sets
   data-fade), wrapped and centred from 768px. */
.mcp-tabs-strip { position: relative; margin: 0 -1rem 1.25rem; padding: 0 1rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mcp-tabs-strip::-webkit-scrollbar { display: none; }
.mcp-tabs { display: flex; flex-wrap: nowrap; gap: .5rem; width: max-content; padding: .3rem 0; }
@media (max-width: 767.98px) {
    .mcp-tabs-strip[data-fade="end"] { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
    .mcp-tabs-strip[data-fade="start"] { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
    .mcp-tabs-strip[data-fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
}
@media (min-width: 768px) {
    .mcp-tabs-strip { overflow: visible; margin: 0 0 1.5rem; padding: 0; }
    .mcp-tabs { flex-wrap: wrap; width: auto; justify-content: center; }
}
.mcp-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    border: 1px solid rgba(224, 255, 211, .45);
    background: transparent;
    color: var(--mcp-mint);
    border-radius: 999px;
    padding: .3rem .9rem .3rem .3rem;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.mcp-tab:hover { background: rgba(224, 255, 211, .1); border-color: var(--mcp-mint); }
/* Selected: the lime as a 2px ring around the transparent pill, never a fill. The padding gives the extra pixel back,
   so the pill keeps its size and the row does not jump when a tab is chosen. */
.mcp-tab[aria-selected="true"] { border-width: 2px; border-color: var(--mcp-lime); padding: calc(.3rem - 1px) calc(.9rem - 1px) calc(.3rem - 1px) calc(.3rem - 1px); }
.mcp-tab:focus-visible { outline: 3px solid var(--mcp-lime); outline-offset: 2px; }
/* White, so the focus ring stands apart from the selected tab's lime ring. */
.mcp-tab[aria-selected="true"]:focus-visible { outline-color: #fff; }

/* A white disc behind each mark, so the black OpenAI knot and the Cursor cube read on teal and on lime. */
.mcp-logo-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; flex: none; }
.mcp-logo { display: block; }

.mcp-panel { background: rgba(0, 0, 0, .16); border: 1px solid rgba(224, 255, 211, .18); border-radius: 12px; padding: 1rem; }
@media (min-width: 576px) { .mcp-panel { padding: 1.25rem 1.5rem; } }
.mcp-panel:focus-visible { outline: 3px solid var(--mcp-lime); outline-offset: 2px; }
.mcp-auth { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; padding: .25rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.mcp-connect .mcp-auth[data-auth="oauth"] { background: rgba(226, 255, 94, .16); color: var(--mcp-lime); }
.mcp-connect .mcp-auth[data-auth="token"] { background: rgba(253, 230, 138, .16); color: #FDE68A; }
.mcp-connect .mcp-auth[data-auth="either"] { background: rgba(224, 255, 211, .12); color: var(--mcp-mint); }
.mcp-panel-intro { margin: 0 0 .75rem; }
.mcp-mini-steps { margin: 0 0 1rem; padding-left: 1.4rem; }
.mcp-mini-steps li { margin-bottom: .3rem; }
.mcp-mini-steps li::marker { color: var(--mcp-lime); font-weight: 700; }
.mcp-connect .mcp-snippet-label { margin: .75rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--mcp-mint); }
.mcp-connect pre { margin: .35rem 0 .75rem; }
/* The Claude Code line: the first thing a visitor copies, so it reads a size larger. */
.mcp-connect .mcp-hero-snippet { font-size: .95rem; }
.mcp-connect .mcp-token-note { margin: .5rem 0 .75rem; font-size: .9rem; color: rgba(255, 255, 255, .82); }
.mcp-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .25rem 0 .75rem; }
.mcp-btn-lime, .mcp-btn-lime:visited {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    color: var(--mcp-ink);
    background-color: #E6FF76;
    background-image: linear-gradient(135deg, var(--mcp-lime-soft) 0%, var(--mcp-lime) 100%);
    border: 1px solid transparent;
    box-shadow: 0 4px 15px rgba(226, 255, 94, .35);
    transition: filter .15s, transform .15s;
}
.mcp-btn-lime:hover, .mcp-btn-lime:focus-visible { color: var(--mcp-ink); filter: brightness(1.05); transform: translateY(-1px); }
.mcp-btn-lime .mcp-logo-chip { width: 24px; height: 24px; margin-left: -.6rem; }
.mcp-btn-ghost, .mcp-btn-ghost:visited {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(224, 255, 211, .6);
    background: transparent;
    color: var(--mcp-mint);
}
.mcp-btn-ghost:hover, .mcp-btn-ghost:focus-visible { background: rgba(224, 255, 211, .14); color: var(--mcp-mint); }
.mcp-btn-lime:focus-visible, .mcp-btn-ghost:focus-visible, .mcp-link-light:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mcp-link-light, .mcp-link-light:visited { color: var(--mcp-mint); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mcp-link-light:hover { color: var(--mcp-lime); }
.mcp-alt { margin: .75rem 0; border-top: 1px solid rgba(224, 255, 211, .18); padding-top: .75rem; }
.mcp-alt summary { cursor: pointer; font-weight: 700; color: var(--mcp-mint); }
.mcp-alt summary:focus-visible { outline: 3px solid var(--mcp-lime); outline-offset: 2px; }
.mcp-alt[open] summary { margin-bottom: .5rem; }
.mcp-panel-docs { margin: .25rem 0 0; font-size: .95rem; }
/* The skill link and the plugin lines (McpFacts.SKILL_PATHS, PLUGIN_LISTINGS): a quieter second way in under the
   setup, never competing with the snippet above it. */
.mcp-skill { margin: .5rem 0 .75rem; font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.mcp-skill code { overflow-wrap: anywhere; }
.mcp-plugin { margin: .75rem 0; border-top: 1px solid rgba(224, 255, 211, .18); padding-top: .75rem; }
.mcp-connect-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(224, 255, 211, .2); }
.mcp-connect-foot .mcp-panel-actions { margin: 0; }
.mcp-connect .mcp-endpoint { margin: 0; font-size: .9rem; color: var(--mcp-mint); word-break: break-all; }

/* ---------------------------------------------------------------- tiles */
.mcp-tile {
    height: 100%;
    text-align: left;
    padding: 1.5rem;
    border: 1px solid var(--mcp-line);
    border-radius: 16px;
    background: #fff;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.mcp-tile:hover { border-color: #212529; box-shadow: 4px 4px 0 0 var(--mcp-teal); transform: translate(-2px, -2px); }
.mcp-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: .75rem; border-radius: 12px; background: var(--mcp-tint); color: var(--mcp-teal); font-size: 22px; }
.mcp-tile[data-kind="infra"] .mcp-tile-icon { background: var(--mcp-teal); color: var(--mcp-lime); }
@media (prefers-reduced-motion: reduce) { .mcp-tile, .mcp-btn-lime { transition: none; } .mcp-tile:hover, .mcp-btn-lime:hover { transform: none; } }

/* ---------------------------------------------------------------- how it works */
.mcp-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; text-align: left; }
@media (min-width: 768px) { .mcp-steps { grid-template-columns: repeat(3, 1fr); } }
.mcp-steps li { position: relative; padding: 1.25rem 1.25rem 1.25rem 3.5rem; border: 1px solid var(--mcp-line); border-radius: 16px; background: #fff; }
.mcp-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute; left: 1.1rem; top: 1.1rem;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--mcp-teal); color: var(--mcp-mint); font-weight: 700; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}

/* The recorded session: a chat window, the user on the right in the brand teal, the assistant on the left
   under its mark, Chattee's tool calls as monospace chips between them (welcome.ftl's #pain_points_chat
   bubbles, on a light window rather than a dark band). */
.mcp-chat-figure { margin: 2rem auto 0; max-width: 820px; text-align: left; }
.mcp-chat {
    list-style: none;
    margin: 0;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: #F6FBF3;
    border: 1px solid #d9eccd;
    border-radius: 20px;
}
@media (min-width: 576px) { .mcp-chat { padding: 1.5rem; } }
.mcp-msg { display: flex; align-items: flex-end; gap: .6rem; margin: 0; }
.mcp-msg[data-role="user"] { justify-content: flex-end; }
.mcp-msg[data-role="tool"] { padding-left: 2.6rem; }
.mcp-bubble { max-width: 88%; padding: .8rem 1.1rem; font-size: 1rem; line-height: 1.5; }
@media (min-width: 768px) { .mcp-bubble { max-width: 78%; } }
.mcp-bubble p { margin: 0; overflow-wrap: anywhere; }
.mcp-msg[data-role="user"] .mcp-bubble { background: var(--mcp-teal-2); color: var(--mcp-mint); border-radius: 20px 20px 4px 20px; box-shadow: 0 4px 14px rgba(25, 74, 84, .25); }
.mcp-msg[data-role="user"] .mcp-bubble p { color: var(--mcp-mint); }
.mcp-msg[data-role="assistant"] .mcp-bubble { background: #fff; color: #2B2B2B; border: 1px solid #d9eccd; border-radius: 20px 20px 20px 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.mcp-msg[data-role="assistant"] .mcp-bubble p { color: #2B2B2B; }
.mcp-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; border: 1px solid #d9eccd; }
.mcp-tool-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.mcp-tool-chip { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .2rem .65rem; border: 1px dashed #8fb9b3; border-radius: 999px; background: #fff; font-size: .8rem; color: var(--mcp-ink); }
.mcp-page .mcp-tool-chip code { background: transparent !important; border: 0 !important; padding: 0; color: var(--mcp-ink); font-size: .8rem; }
/* A chip links the tool's row in the docs' reference: underlined on hover only, the chip stays a chip. */
.mcp-tool-link, .mcp-tool-link:visited { color: var(--mcp-ink); text-decoration: none; }
.mcp-tool-link:hover code, .mcp-tool-link:focus-visible code { text-decoration: underline; text-underline-offset: 2px; }
.mcp-tool-link:focus-visible { outline: 2px solid var(--mcp-teal); outline-offset: 2px; border-radius: 4px; }
.mcp-tool-count { font-weight: 700; color: var(--mcp-teal-2); }
.mcp-tool-outcome { color: #4b6b70; }
.mcp-tool-outcome::before { content: "→ "; }
.mcp-options { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.mcp-options li { margin: 0; padding: .2rem .75rem; border: 1px solid var(--mcp-teal-2); border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--mcp-teal-2); background: #fff; }
.mcp-plan { margin-top: .75rem; padding: .75rem .9rem; border: 1px solid #cfe8c4; border-radius: 12px; background: #F7FBF5; }
.mcp-plan p { margin: 0; }
.mcp-plan .mcp-plan-title { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--mcp-teal); font-size: .95rem; }
.mcp-plan .mcp-plan-label { margin-top: .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4b6b70; }
.mcp-plan-chips { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.mcp-plan-chips li { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .2rem .65rem; border-radius: 999px; background: #fff; border: 1px solid #d9e2e1; font-size: .85rem; font-weight: 600; color: var(--mcp-ink); }
.mcp-plan-chips[data-kind="resources"] li { background: var(--mcp-teal); border-color: var(--mcp-teal); color: var(--mcp-mint); }
.mcp-chat-caption { margin-top: .75rem; font-size: .85rem; color: #4b5563; text-align: center; }
.mcp-chat-caption a { color: var(--mcp-teal-2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* ---------------------------------------------------------------- bands */
/* Tinted band: its padding sits INSIDE the colour (CLAUDE.md, pSEO `alt-bg`). */
.mcp-band { padding: 3rem 0; background: linear-gradient(180deg, #F3FFE9 0%, #EAF7EE 100%); }
@media (min-width: 992px) { .mcp-band { padding: 4.5rem 0; } }
.mcp-after-tiles { margin-top: 2rem; margin-bottom: 0; }
.mcp-band-dark { padding: 3rem 0; background: var(--mcp-teal); }
@media (min-width: 992px) { .mcp-band-dark { padding: 4rem 0; } }
.mcp-band-dark h2 { color: var(--mcp-mint); }
.mcp-band-dark .mcp-answer { color: rgba(255, 255, 255, .86); margin-bottom: .5rem; }

/* ---------------------------------------------------------------- comparison */
.mcp-compare-wrap { overflow-x: auto; margin-top: .5rem; border: 1px solid var(--mcp-line); border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); text-align: left; }
.mcp-compare-wrap:focus-visible { outline: 3px solid var(--mcp-teal-2); outline-offset: 2px; }
.mcp-compare { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.mcp-compare th, .mcp-compare td { padding: .7rem .8rem; border-bottom: 1px solid #eef0f2; text-align: left; vertical-align: top; }
.mcp-compare tbody tr:last-child th, .mcp-compare tbody tr:last-child td { border-bottom: 0; }
.mcp-compare thead th { font-weight: 700; vertical-align: bottom; background: #fff; color: #111827; font-size: .88rem; }
.mcp-compare thead th[data-col="chattee"] { background: var(--mcp-teal); color: var(--mcp-mint); }
.mcp-compare td[data-col="chattee"] { background: var(--mcp-tint); }
.mcp-compare tbody th { font-weight: 600; color: #111827; }
/* The first column stays put while the table scrolls sideways on a phone. */
.mcp-compare th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 11rem; max-width: 15rem; box-shadow: 1px 0 0 #eef0f2; }
.mcp-compare thead th:first-child { z-index: 2; }
.mcp-compare td[data-kind="text"] { font-weight: 600; color: #111827; }
.mcp-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; line-height: 1; vertical-align: middle; }
.mcp-mark[data-mark="yes"] { background: var(--mcp-teal-2); color: #fff; }
.mcp-mark[data-mark="no"] { background: rgba(0, 0, 0, .08); color: #4b5563; }
.mcp-mark[data-mark="partly"] { background: #FEF3C7; color: #92400E; }
.mcp-mark-note { display: block; margin-top: .25rem; font-size: .8rem; line-height: 1.35; color: #4b5563; }
.mcp-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; font-size: .875rem; color: #4b5563; }
.mcp-legend li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }

/* ---------------------------------------------------------------- FAQ: one card, dividers */
.mcp-faq { text-align: left; background: #fff; border: 1px solid var(--mcp-line); border-radius: 16px; padding: .25rem 1.25rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.mcp-faq details { border-bottom: 1px solid #eef0f2; padding: 1rem 0; margin: 0; background: transparent; }
.mcp-faq details:last-child { border-bottom: 0; }
.mcp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 700; list-style: none; }
.mcp-faq summary::-webkit-details-marker { display: none; }
.mcp-faq summary::after { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mcp-tint); color: var(--mcp-teal); font-weight: 700; }
.mcp-faq details[open] summary::after { content: "–"; background: var(--mcp-teal); color: var(--mcp-lime); }
.mcp-faq summary:focus-visible { outline: 3px solid var(--mcp-teal-2); outline-offset: 4px; border-radius: 4px; }
.mcp-faq details p { margin: .75rem 0 0; }

/* ---------------------------------------------------------------- docs */
.mcp-docs-header { padding-top: 1rem; }
.mcp-breadcrumb a { text-decoration: underline; }
.mcp-toc { border: 1px solid var(--mcp-line); border-radius: .75rem; padding: 1rem 1.25rem; margin: 1.5rem 0; background: #fff; }
.mcp-toc ol { margin: .5rem 0 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; }
.mcp-toc li { break-inside: avoid; margin-bottom: .25rem; }
@media (max-width: 640px) { .mcp-toc ol { columns: 1; } }
.mcp-docs-body { font-size: 1.1rem; line-height: 1.8; }
.mcp-docs-body h2 { margin-top: 2.5rem; scroll-margin-top: 110px; }
.mcp-docs-body h3 { margin-top: 1.5rem; scroll-margin-top: 110px; }
.mcp-docs-body table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; }
.mcp-docs-body th, .mcp-docs-body td { border-bottom: 1px solid var(--mcp-line); padding: .5rem .75rem; text-align: left; vertical-align: top; }
.mcp-docs-body code { font-size: .9em; }
.mcp-docs-body ul, .mcp-docs-body ol { margin-bottom: 1rem; }
.mcp-docs-body li { margin-bottom: .35rem; }
.mcp-docs-body img { max-width: 100%; height: auto; }
.mcp-docs { padding-bottom: 2rem; }
.flex-wrap { flex-wrap: wrap; }

/* ---------------------------------------------------------------- docs: sidebar, tables, badges */
/* The layout wraps every page in .uni-body with the theme's .overflow-x-hidden (!important). overflow-x: hidden
   makes an element a scroll container even when it never scrolls, and position: sticky then sticks to IT, not to
   the viewport — the sidebar would scroll away with the page. `clip` cuts the overflow without being a scroll
   container. A browser without :has() keeps the theme's rule and simply gets no sticky sidebar. */
.uni-body:has(.mcp-docs) { overflow-x: clip !important; }
.mcp-toc-sub { display: none; }
.mcp-toc a { text-decoration: none; }
.mcp-toc a:hover { text-decoration: underline; }
@media (min-width: 1200px) {
    .mcp-docs > .container { max-width: 1280px !important; }
    .mcp-docs-layout {
        display: grid;
        grid-template-columns: 15.5rem minmax(0, 1fr);
        grid-template-areas: "toc header" "toc body";
        column-gap: 3rem;
        align-items: start;
    }
    .mcp-docs-layout > .mcp-docs-header { grid-area: header; }
    .mcp-docs-layout > .mcp-docs-body { grid-area: body; }
    .mcp-docs-layout > .mcp-toc {
        grid-area: toc;
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        margin: 1rem 0 0;
        padding: .75rem 1rem;
        font-size: .92rem;
        line-height: 1.45;
    }
    .mcp-docs-layout > .mcp-toc ol { columns: auto; list-style: none; padding-left: 0; }
    .mcp-docs-layout > .mcp-toc li { margin-bottom: .35rem; }
    .mcp-toc-sub { display: block; margin: .3rem 0 .4rem !important; padding-left: .75rem !important; border-left: 2px solid var(--mcp-line); }
    .mcp-toc-sub li { margin-bottom: .2rem; }
    .mcp-toc a { color: #374151; }
    .mcp-toc a[aria-current] { color: var(--mcp-teal); font-weight: 700; }
}

/* The generated tables (McpToolReference): a horizontal scroller each, the tool or scope column pinned while the
   rest scrolls on a phone — the landing's comparison table pattern. `separate`, because a sticky cell in a
   `collapse` table loses its borders and lets the scrolled cells show through. */
.mcp-table-wrap { overflow-x: auto; border: 1px solid var(--mcp-line); border-radius: 12px; margin: .75rem 0 1rem; background: #fff; }
.mcp-table-wrap:focus-visible { outline: 3px solid var(--mcp-teal); outline-offset: 2px; }
.mcp-docs-body .mcp-table { width: 100%; min-width: 40rem; border-collapse: separate; border-spacing: 0; margin: 0; font-size: .95rem; line-height: 1.55; }
.mcp-docs-body .mcp-table th, .mcp-docs-body .mcp-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--mcp-line); vertical-align: top; text-align: left; }
.mcp-docs-body .mcp-table tbody tr:last-child > * { border-bottom: 0; }
.mcp-docs-body .mcp-table thead th { background: var(--mcp-tint); color: var(--mcp-ink); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.mcp-docs-body .mcp-table th[scope="row"] { font-weight: 400; }
.mcp-table[data-table="tools"] th[scope="row"], .mcp-table[data-table="scopes"] th[scope="row"],
.mcp-table[data-table="tools"] thead th:first-child, .mcp-table[data-table="scopes"] thead th:first-child {
    position: sticky; left: 0; z-index: 1; min-width: 9rem; max-width: 13rem; box-shadow: 1px 0 0 #eef0f2;
}
.mcp-table[data-table="tools"] th[scope="row"], .mcp-table[data-table="scopes"] th[scope="row"] { background: #fff; }
.mcp-table[data-table="tools"] thead th:first-child, .mcp-table[data-table="scopes"] thead th:first-child { z-index: 2; }
.mcp-docs-body .mcp-table th[scope="row"] code { white-space: normal; overflow-wrap: anywhere; }
.mcp-table[data-table="tools"] td:nth-child(3), .mcp-table[data-table="tools"] td:nth-child(4) { white-space: nowrap; }
.mcp-table[data-table="examples"] td:first-child { min-width: 16rem; }
.mcp-docs-body .mcp-table a { text-decoration: none; }
.mcp-docs-body .mcp-table a:hover code { text-decoration: underline; }
.mcp-docs-body .mcp-table sup a { padding: 0 .1rem; }
.mcp-docs-body .mcp-table tr:target > * { background: var(--mcp-lime-soft); }
.mcp-docs-body tr[id], .mcp-docs-body p[id] { scroll-margin-top: 110px; }
.mcp-table-note { margin: -.4rem 0 1rem; font-size: .9rem; line-height: 1.5; color: #4b5563; }
.mcp-table-note:target { background: var(--mcp-lime-soft); }
/* Access: three states from the server's annotations. Text on tint, every pair above 6:1. */
.mcp-access { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.mcp-access[data-access="read"] { background: #E0F2FE; color: #075985; }
.mcp-access[data-access="write"] { background: #FEF3C7; color: #92400E; }
.mcp-access[data-access="destructive"] { background: #FEE2E2; color: #991B1B; }
/* Cursor's one-click install in the Cursor section: the landing's lime button, with a focus ring that shows on white. */
.mcp-docs-body .mcp-docs-install { margin: .25rem 0; }
.mcp-docs-body .mcp-docs-install:focus-visible { outline-color: var(--mcp-teal); }