/* MCP documentation — component styles.
   Reuses the reference page's CSS custom properties (:root in index.html) and the shared
   flow, callout and table styles from webhooks.css. */

/* ---------- Tables ---------- */
.mcp-table td { vertical-align: top; line-height: 1.5; }
.mcp-table td:first-child { white-space: nowrap; color: var(--ink); font-weight: 500; }
.mcp-index { margin-top: 18px; }
.mcp-index td:nth-child(2) { white-space: nowrap; }
.mcp-tool-link {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 500;
  color: var(--brand-ink); cursor: pointer;
}
.mcp-tool-link:hover { text-decoration: underline; }

/* ---------- Read-only / write badge ---------- */
.mcp-badge {
  display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
.mcp-badge.read { color: var(--get); background: var(--get-bg); }
.mcp-badge.write { color: var(--post); background: var(--post-bg); }
.mcp-badge.destructive { color: var(--delete); background: var(--delete-bg); }

/* ---------- Tool reference ---------- */
.mcp-group { margin-top: 34px; }
.mcp-tool { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.mcp-tool-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.mcp-tool-name { font-family: "IBM Plex Mono", monospace; font-size: 15px; font-weight: 600; color: var(--ink); }
.doc-col p.mcp-tool-desc { margin: 0; font-size: 14px; }
.mcp-tool .tbl-label { margin-top: 18px; }
.doc-col p.mcp-tool-none { margin: 10px 0 0; font-size: 13px; color: var(--ink-4); }
.mcp-tool .param-type { word-break: break-word; }

/* ---------- Responsive (phone) ---------- */
@media (max-width: 720px) {
  .mcp-table { display: block; overflow-x: auto; }
}