/* The MCP server page (/mcp/, scripts/mcp-page.mjs). New look: --ui-* tokens only, light and dark;
   shared parts (buttons, cards, section heads, questions) from ui.css. Prefix mcp-. */
.mcp code{font-family:var(--ui-mono);font-size:.92em}
.mcp-hero{padding:64px 0 80px;text-align:center}
.mcp-hero h1{max-width:780px;margin:0 auto;font-size:56px;line-height:1.1;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.mcp-lead{max-width:660px;margin:20px auto 0;font-size:18px;line-height:1.5;letter-spacing:-.03em;color:var(--ui-dim)}
/* "Give this to your agent" (2026-10-28, after treg.to): the link box's card (22px corners, the
   field edge, thin purple in dark mode) with a head (label, the agents' logos) over one line on a
   grey well and the glossy Copy pill. */
.mcp-agent{max-width:680px;margin:32px auto 0;padding:6px;border:.8px solid var(--ui-field-line);border-radius:22px;background:var(--ui-card);box-shadow:var(--ui-frame-shadow);text-align:left}
.mcp-agent-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 10px 12px}
.mcp-agent-head>span:first-child{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ui-text)}
.mcp-agent-logos{display:flex;gap:6px}
.mcp-agent-logos img{width:18px;height:18px;opacity:.8}
.mcp-agent-line{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 8px 8px 18px;border-radius:16px;background:var(--ui-well)}
.mcp-agent-line code{flex:1;min-width:0;font:400 14.5px/1.5 var(--ui-mono)!important;color:var(--ui-text);overflow-wrap:anywhere}
.mcp-agent-line code>span{color:var(--ui-faint)}
.mcp-agent-line .mcp-copy{height:40px;padding:0 18px}
.mcp-note{max-width:560px;margin:14px auto 0;font-size:14px;line-height:1.5;color:var(--ui-faint)}
.mcp-note a{color:var(--ui-link);text-decoration:none}
.mcp-note a:hover{text-decoration:underline}
.mcp-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Code: a card with a bar (file name, Copy) over the code on a grey well. */
.mcp-code{border:.8px solid var(--ui-line);border-radius:14px;background:var(--ui-card);overflow:hidden}
.mcp-code+.mcp-code{margin-top:12px}
.mcp-code-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 6px 0 16px;border-bottom:.8px solid var(--ui-line)}
.mcp-code-bar>span{font:400 12px/1.4 var(--ui-mono);color:var(--ui-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-code pre{margin:0;padding:14px 16px;background:var(--ui-well);font:400 13.5px/1.65 var(--ui-mono);color:var(--ui-text);white-space:pre;overflow-x:auto;text-align:left}
.mcp-code pre code{font-size:inherit}
/* Copy confirms on the button itself (DESIGN.md, Copy feedback): a tick and "Copied", same width. */
.mcp-copy{position:relative;flex:none;gap:6px}
.mcp-copy.is-copied>:not(.mcp-copied){visibility:hidden}
.mcp-copied{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-link)}

/* The drawn example: a short agent exchange on a card (a sample, not a screenshot). */
.mcp-sample-wrap{margin-top:48px}
.mcp-sample{max-width:680px;margin:0 auto;padding:18px 20px 20px;border:.8px solid var(--ui-line);border-radius:16px;background:var(--ui-card);box-shadow:var(--ui-frame-shadow);text-align:left}
.mcp-sample figcaption{margin:0 0 12px;font:400 11px var(--ui-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ui-faint)}
.mcp-sample p{margin:0;font-size:15px;line-height:1.55;letter-spacing:-.01em}
.mcp-sample b{display:block;margin-bottom:2px;font:500 11px var(--ui-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ui-faint)}
.mcp-s-you{padding:0 0 14px;border-bottom:.8px solid var(--ui-line)}
.mcp-s-call{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:14px!important;font:500 13px/1.5 var(--ui-mono)!important;color:var(--ui-link)}
.mcp-s-call i{font-style:normal;color:var(--ui-faint)}
.mcp-s-dot{width:8px;height:8px;border-radius:50%;background:var(--ui-accent)}
.mcp-s-out{margin:8px 0 14px 16px!important;padding:10px 12px;border-radius:10px;background:var(--ui-well);font:400 12.5px/1.6 var(--ui-mono)!important;color:var(--ui-dim)}
.mcp-sw{display:inline-block;width:10px;height:10px;margin:0 4px 0 2px;border-radius:3px;box-shadow:inset 0 0 0 .8px var(--ui-line-strong);vertical-align:-1px}

/* The eight tools: two across (one on phones), each a row: the Lucide icon on a neutral tile, the
   name, one line and the call with its inputs in mono; "Try it" on the right. */
.mcp-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1000px;margin:0 auto;padding:0;list-style:none}
.mcp-tool{display:flex;align-items:flex-start;gap:16px;padding:20px;border:.8px solid var(--ui-line);border-radius:16px;background:var(--ui-card)}
.mcp-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border:.8px solid var(--ui-line);border-radius:10px;background:var(--ui-well);color:var(--ui-text)}
.mcp-tool-text{flex:1;min-width:0}
.mcp-tool h3{margin:1px 0 4px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.mcp-tool p{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:var(--ui-dim)}
.mcp-tool code{display:inline-block;max-width:100%;padding:3px 8px;border-radius:6px;background:var(--ui-well);font-size:12px;color:var(--ui-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.mcp-tool-link{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:1px;color:var(--ui-link);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.mcp-tool-link:hover{text-decoration:underline}

/* Setup: one tab per app (chips like the filter bar), its steps and code under them. */
.mcp-setup{max-width:820px;margin:0 auto}
.mcp-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 16px;padding:2px;overflow-x:auto;scrollbar-width:none}
.mcp-tabs::-webkit-scrollbar{display:none}
.mcp-tabs button{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border:.8px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--ui-text);font:500 14px var(--ui-font);letter-spacing:-.01em;cursor:pointer;transition:var(--ui-tr)}
.mcp-tabs button:hover{border-color:var(--ui-line-strong)}
.mcp-tabs button[aria-selected=true]{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-link);font-weight:600}
.mcp-tabs button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.mcp-tabs img{width:16px;height:16px}
.mcp-letter{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--ui-well2);font:600 11px var(--ui-font);color:var(--ui-dim)}
.mcp-panel{padding:24px;border:.8px solid var(--ui-line);border-radius:16px;background:var(--ui-card)}
.mcp-panel+.mcp-panel{margin-top:16px}
.mcp-panel[hidden]{display:none}
.mcp-panel h3{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.mcp-panel>p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ui-dim)}
.mcp-panel>p a{color:var(--ui-link);text-decoration:none}
.mcp-panel>p a:hover{text-decoration:underline}
.mcp-panel>p code,.ui-head code{padding:1px 6px;border-radius:5px;background:var(--ui-well);color:var(--ui-text)}

/* Things to ask: two across; each card's Copy sits at its bottom. */
.mcp-prompts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:900px;margin:0 auto;padding:0;list-style:none}
.mcp-prompts li{flex-direction:row;align-items:center;gap:16px;padding:16px 16px 16px 20px}
.mcp-prompts p{flex:1;margin:0;font-size:15px;line-height:1.55;color:var(--ui-text)}

@media (max-width:860px){.mcp-tools{grid-template-columns:1fr;max-width:620px}}
@media (max-width:760px){
  .mcp-hero{padding:44px 0 56px}
  .mcp-hero h1{font-size:40px}
  .mcp-lead{font-size:16.5px}
  .mcp-cta .ui-btn{flex:1 1 0}
  .mcp-prompts{grid-template-columns:1fr}
  .mcp-panel{padding:18px 16px}
  .mcp-tabs{flex-wrap:nowrap;justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
}
@media (max-width:560px){
  /* The agent line wraps over a full-width Copy; "Try it" goes under the tool's text. */
  .mcp-agent-line{flex-direction:column;align-items:stretch;gap:10px;padding:14px 8px 8px 14px}
  .mcp-agent-line .mcp-copy{width:100%}
  .mcp-agent-head{flex-wrap:wrap}
  .mcp-tool{flex-wrap:wrap;padding:18px 16px}
  .mcp-tool-text{flex-basis:calc(100% - 56px)}
  .mcp-tool-link{margin:8px 0 0 56px}
  .mcp-code pre{font-size:12.5px}
  .mcp-prompts li{flex-direction:column;align-items:stretch;gap:12px}
  .mcp-prompts .mcp-copy{align-self:flex-start}
}
@media (max-width:380px){.mcp-hero h1{font-size:34px}}