/* /mcp/ (mcp.php): layout on top of format.css, which gives the hero, sections, splits and cards. */

.wl-fonts-pending :is(.mcp-step h3, .mcp-step-title, .mcp-client h4, .mcp-group h3) { visibility: hidden; }

.mcp-page { --h3: "Anybody", "Anybody 700 105", "Instrument Sans", system-ui, sans-serif; }

/* the clients under the hero, one jump each */
.mcp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.mcp-jump a {
  font-size: 0.9rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--paper-2);
}
.mcp-jump a:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* the two steps */
.mcp-step { margin-top: 8px; }
.mcp-step h3, .mcp-step-title {
  --display: var(--h3);
  font: 700 1.35rem/1.2 var(--display); font-variation-settings: "wdth" 105; margin: 0 0 10px;
}
.mcp-step-title { margin: 44px 0 16px; }
.mcp-num {
  display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: 10px;
  border-radius: 50%; background: var(--button); color: var(--on-button); font: 700 0.85rem/1 var(--mono); vertical-align: 0.15em;
}
.mcp-step p { color: var(--slate); }
.mcp-step p code { color: var(--ink); }

.mcp-clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mcp-client {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
  padding: 18px 18px 20px; min-width: 0; scroll-margin-top: 90px;
}
.mcp-client:target { border-color: var(--cobalt); box-shadow: 0 0 0 2px var(--cobalt); }
.mcp-client h4 {
  --display: var(--h3);
  font: 700 1.15rem/1.2 var(--display); font-variation-settings: "wdth" 105; margin: 0 0 8px;
}
.mcp-client p { margin: 0 0 12px; color: var(--slate); font-size: 0.93rem; }
.mcp-client .mcp-code + p { margin-top: 14px; }

/* snippets wrap rather than scroll (the copy takes the text as written), with Copy in the corner */
.mcp-code { position: relative; }
.mcp-code pre { font-size: 0.78rem; padding: 14px 76px 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mcp-code .copy-button { position: absolute; top: 9px; right: 9px; font-size: 0.78rem; padding: 4px 10px; background: var(--code-bg); }

.mcp-then { margin: 28px 0 0; padding: 16px 20px; border-left: 3px solid var(--amber); background: var(--area); border-radius: 0 var(--radius) var(--radius) 0; }
.mcp-then q { font-style: italic; }

/* a real render's reply */
.mcp-reply { font-size: 0.78rem; line-height: 1.6; white-space: pre-wrap; }
.mcp-audio { display: block; width: 100%; max-width: 420px; margin-top: 8px; }
.mcp-picture { margin: 28px 0 0; }
.mcp-picture img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.mcp-picture figcaption { color: var(--slate); font-size: 0.9rem; margin-top: 10px; max-width: var(--measure); }

/* the tools */
.mcp-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin-top: 24px; }
.mcp-group h3 {
  --display: var(--h3);
  font: 700 1.05rem/1.2 var(--display); font-variation-settings: "wdth" 105;
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--amber);
}
.mcp-group dl { margin: 0; }
.mcp-group dt { font-weight: 600; margin-top: 12px; }
.mcp-group dt code { font-size: 0.75rem; font-weight: 400; color: var(--slate); margin-left: 4px; }
.mcp-group dd { margin: 3px 0 0; color: var(--slate); font-size: 0.92rem; }

/* four or five questions (five once the server writes songs): as many to a row as fit */
.mcp-faq { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mcp-faq code { font-size: 0.85em; }

@media (max-width: 1000px) {
  .mcp-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mcp-clients, .mcp-tools { grid-template-columns: minmax(0, 1fr); }
}