/* MCP connectors & plugins page (coming soon). Page-only components are prefixed mcp-/mc-/md-/ma-/mh-/mt-/mg-.
   Everything here is a planned feature: dashed/violet "planned" treatments, labelled illustrations, no live claims. */

.mcp-soon{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--violet);border:1px dashed #b9a3ec80;background:#b9a3ec14;padding:5px 9px;border-radius:999px}
.mcp-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet)}
.mcp-copy p:not(.eyebrow){margin-top:20px;font-size:17px;line-height:1.7;max-width:48ch}
.mcp-copy .eyebrow{margin-bottom:18px}
.mcp-copy code,.md-captions code,.mcp-prims code,.mh code,.mc-cfg-note code,.mcp-fine code{font:500 .88em ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#d6f3a2;background:#d7fb8b10;border-radius:5px;padding:1px 5px}
.mcp-fine{margin-top:22px;text-align:center;font-size:13px;color:var(--muted);max-width:760px;margin-inline:auto}
.section-head .eyebrow{font-size:11.5px;line-height:1.4;margin-top:0}

/* ── 1. Hero: agent chat calling Aster's planned tools ── */
.mcp-hero{padding-bottom:clamp(40px,6vw,80px)}
.mcp-app{position:relative;max-width:1040px;margin:clamp(40px,6vw,64px) auto 0;border-radius:var(--r-lg);padding:8px;border:1px solid var(--line-2);background:linear-gradient(#ffffff10,#ffffff05);box-shadow:0 40px 120px -40px #000,0 0 80px -30px #c7f26a40;text-align:left}
.mcp-app figcaption{padding:12px 8px 4px;text-align:center;font-size:12.5px;color:var(--muted)}
.mcp-app-body{display:grid;grid-template-columns:minmax(0,1fr) 270px;height:420px;border-radius:calc(var(--r-lg) - 8px);overflow:hidden;background:#0c0d0c;border:1px solid var(--line)}
.mcp-chat{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2.6vw,30px);min-width:0}
.mc-msg{max-width:520px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .55s var(--ease-out)}
.mc-who{display:block;font:600 10.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mc-msg p{font-size:15px;line-height:1.55;color:var(--text)}
.mc-user{align-self:flex-end}.mc-user p{display:inline-flex;align-items:center;padding:11px 15px;border-radius:16px 16px 4px 16px;background:#ffffff0f;border:1px solid var(--line-2)}
.mc-user .mc-who{text-align:right}
.mc-type{display:inline-block;white-space:nowrap;clip-path:inset(0 100% 0 0)}
.mc-caret{display:inline-block;width:2px;height:1.1em;margin-left:3px;background:var(--lime);opacity:0}
.mc-bot p{color:var(--soft)}.mc-bot code{font:12.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#d6f3a2}
.mc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mc-actions span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;color:var(--soft)}
.mc-actions .mc-ask{border-color:#f5c46b55;color:var(--amber)}
.mc-actions svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.mc-call{max-width:440px;display:grid;gap:10px;padding:13px 14px;border-radius:14px;border:1px solid #d7fb8b33;background:#d7fb8b08;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .55s var(--ease-out),border-color .4s}
.mc-call-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13.5px;color:var(--soft)}
.mc-call-head b{color:var(--text)}.mc-call-head span{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px}
.mc-ro{white-space:nowrap;margin-left:auto;font:700 9.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-style:normal;letter-spacing:.1em;color:var(--lime);background:#d7fb8b14;padding:5px 7px;border-radius:6px}
.mc-spin{position:relative;flex:none;width:15px;height:15px;border-radius:50%;border:2px solid #ffffff30;border-top-color:var(--lime)}
.mc-call code{font:12.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#c9e98f}
.mc-call-out{display:flex;flex-wrap:wrap;gap:6px}
.mc-call-out span{font:600 11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--soft);border:1px solid var(--line-2);padding:6px 8px;border-radius:7px;opacity:0;transform:scale(.85);transition:opacity .3s,transform .4s var(--ease-out)}
.mc-call-out .mc-hi{color:var(--coral);border-color:#ff8e7855;background:#ff8e7810}
/* stages (cumulative classes set by mcp.js) */
.mcp-chat.st-1 .mc-user{opacity:1;transform:none}
.mcp-chat.st-1 .mc-type{animation:mc-type 1.5s steps(40) .3s forwards}
.mcp-chat.st-1 .mc-caret{animation:mc-caret .9s steps(2,start) 3}
.mcp-chat.st-2 .mc-call{opacity:1;transform:none}
.mcp-chat.st-2 .mc-spin{animation:spin .8s linear infinite}
.mcp-chat.st-3 .mc-spin{animation:none;border:0;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 3 3 5-6' fill='none' stroke='%23172113' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat}
.mcp-chat.st-3 .mc-call-out span{opacity:1;transform:none}
.mcp-chat.st-3 .mc-call-out span:nth-child(2){transition-delay:.15s}.mcp-chat.st-3 .mc-call-out span:nth-child(3){transition-delay:.3s}
.mcp-chat.st-4 .mc-bot{opacity:1;transform:none}
@keyframes mc-type{to{clip-path:inset(0 0 0 0)}}
@keyframes mc-caret{to{opacity:1}}
.mcp-tools{display:flex;flex-direction:column;gap:10px;padding:20px 18px;border-left:1px solid var(--line);background:#0f100f}
.mcp-tools-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mcp-srv b{display:block;font-size:15px;letter-spacing:-.01em}.mcp-srv small{font-size:12px;color:var(--muted)}
.mcp-tools-label{font:600 10.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--muted);margin-top:4px}
.mcp-tools ul{display:grid;gap:6px}
.mcp-tools li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:10px;border:1px dashed #ffffff1c;transition:border-color .35s,background .35s}
.mcp-tools code{font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--soft)}
.mcp-tools em{font:600 9.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mcp-tools .is-gated em{color:var(--amber)}
.mcp-tools li.is-active{border-style:solid;border-color:#d7fb8b80;background:#d7fb8b0d}.mcp-tools li.is-active code{color:var(--lime)}
.mcp-tools-foot{margin-top:auto;font-size:12px;line-height:1.5;color:var(--muted)}

/* ── 2. What is MCP: animated host ↔ server ↔ repo ── */
.mcp-diagram{max-width:1040px;margin-inline:auto;padding:clamp(18px,2.6vw,30px);border-radius:var(--r-xl);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:0 30px 80px -40px #000}
.mcp-diagram:not(.is-playing) *{animation-play-state:paused!important}
.md-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,.62fr) minmax(0,1fr) minmax(90px,.62fr) minmax(0,1fr);align-items:stretch}
.md-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 14px;text-align:center;border-radius:18px;border:1px solid var(--line-2);background:#0c0d0c;transition:border-color .45s,box-shadow .45s}
.md-node b{font-size:16px;letter-spacing:-.015em;color:var(--text)}.md-node small{font-size:12.5px;color:var(--muted)}
.md-node img{filter:invert(1);opacity:.8;margin:2px 0 4px}
.md-kind{font:600 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
.md-server{border-style:dashed;border-color:#b9a3ec66}.md-server .md-kind{color:var(--violet)}
.md-client,.md-lock{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 10.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em;padding:7px 9px;border-radius:8px;border:1px solid var(--line-2);color:var(--soft);transition:border-color .4s,color .4s,background .4s}
.md-lock{color:var(--lime);border-color:#d7fb8b40}.md-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.md-wire{position:relative;container-type:size;min-height:120px;--tx:calc(100cqw - 10px);--ty:0px}
.md-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,#ffffff30 0 6px,transparent 6px 12px);transition:background .4s,box-shadow .4s}
.md-packet{position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #d7fb8bcc;opacity:0}
.md-label{position:absolute;left:50%;bottom:calc(50% + 12px);transform:translateX(-50%);max-width:100%;font:600 11px/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.md-wire.is-on .md-line{background:linear-gradient(90deg,#9fd24f,var(--lime));box-shadow:0 0 10px #d7fb8b66}
.md-wire.is-on .md-label{color:var(--lime)}
.md-wire.go .md-packet{animation:md-go 2.2s var(--ease) infinite}
.md-wire.back .md-packet{animation:md-back 2.2s var(--ease) infinite}
.md-wire.both .md-packet{animation:md-both 2.8s var(--ease) infinite}
.md-node.is-on{border-color:#d7fb8b80;box-shadow:0 0 40px -18px #d7fb8b88}
.md-server.is-on{border-color:#d7fb8b99}
.md-host.is-on .md-client{border-color:#d7fb8b66;color:var(--lime);background:#d7fb8b0d}
@keyframes md-go{0%{transform:translate(0,0);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate(var(--tx),var(--ty));opacity:0}}
@keyframes md-back{0%{transform:translate(var(--tx),var(--ty));opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate(0,0);opacity:0}}
@keyframes md-both{0%{transform:translate(0,0);opacity:0}8%{opacity:1}45%,55%{transform:translate(var(--tx),var(--ty));opacity:1}92%{opacity:1}100%{transform:translate(0,0);opacity:0}}
.md-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}
.md-steps button{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 12px;border-radius:12px;border:1px solid var(--line-2);background:#ffffff06;font-size:14px;font-weight:600;color:var(--soft);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.md-steps button span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:11px;opacity:.8}
.md-steps button:hover{border-color:#d7fb8b66;color:var(--text)}
.md-steps button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.md-captions{display:grid;margin-top:16px}
.md-captions p{grid-area:1/1;font-size:15.5px;line-height:1.6;color:var(--soft);text-align:center;max-width:680px;margin-inline:auto}
.md-captions p[hidden]{display:block!important;visibility:hidden}
.md-captions p:not([hidden]){animation:panel .45s var(--ease-out)}
.md-captions b{color:var(--text)}
.mcp-prims{margin-top:20px}
.mcp-prims .card p{font-size:15px}
.mcp-transport{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin-top:22px;font-size:14px;color:var(--muted);text-align:center}
.mcp-dot{width:4px;height:4px;border-radius:50%;background:#ffffff40;margin-inline:6px}

/* ── 3. What you'll be able to ask ── */
.mcp-asks{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:16px;align-items:stretch}
.ma-list{display:grid;gap:8px;align-content:start}
.ma-list button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--panel);text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .18s var(--ease)}
.ma-list button:hover{border-color:var(--line-2)}
.ma-list button:active{transform:scale(.985)}
.ma-q{font-size:16px;font-weight:600;color:var(--text)}
.ma-list code{font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.ma-list button[aria-pressed="true"]{border-color:#d7fb8b80;background:linear-gradient(90deg,#d7fb8b12,transparent 70%),var(--panel)}
.ma-list button[aria-pressed="true"] code{color:var(--lime)}
.ma-stage{display:grid;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:22px}
.ma-panel{grid-area:1/1;min-width:0;display:flex;flex-direction:column;gap:14px}
.ma-panel[hidden]{display:flex!important;visibility:hidden}
.ma-panel:not([hidden]){animation:panel .45s var(--ease-out)}
.ma-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.ma-tool{font:600 17px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--lime)}
.ma-panel .code pre{white-space:pre-wrap;word-break:break-word}
.ma-ret-label{font:600 10.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--muted)}
.ma-ret{display:grid;gap:8px}
.ma-ret li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:#ffffff04;font-size:14.5px;color:var(--soft)}
.ma-ret li code{font:12.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#d6f3a2}
.ma-ret .sev{min-width:0;padding:4px 6px;font-size:9.5px}

/* ── 4. Where it will work ── */
.mcp-hosts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mh{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px 12px;padding:20px;border-radius:var(--r-lg);border:1px dashed #ffffff26;background:#ffffff04;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.mh:hover{border-color:#b9a3ec80;background:#b9a3ec08;transform:translateY(-3px)}
.mh-logo{display:grid;place-items:center;width:44px;height:44px;padding:10px;border-radius:13px;background:#f4f6ee;box-shadow:0 1px 0 #ffffffb0 inset,0 10px 24px -14px #000;opacity:.92}
.mh-logo img,.mh-logo svg{width:100%;height:100%}
.mh-logo-any svg{fill:none;stroke:#1b2016;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mh b{display:block;font-size:16px;letter-spacing:-.015em}.mh small{display:block;font-size:12.5px;color:var(--muted)}
.mh p{grid-column:1/-1;font-size:13.5px;line-height:1.5;color:var(--soft)}
.mh .pill{grid-column:1/-1;justify-self:start}

/* ── 5. Plugin file tree ── */
.mcp-tree{padding:22px}
.mt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.mt-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:14px}
.mt-files{display:grid;gap:4px;align-content:start;padding:10px;border-radius:14px;background:#080908;border:1px solid var(--line)}
.mt-files li{position:relative}
.mt-files li+li::before{content:"";position:absolute;left:-1px;top:-4px;height:4px}
.mt-files button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:9px;border:1px solid transparent;background:none;font:12.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--soft);text-align:left;cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap;min-width:0}
.mt-files button:hover{background:#ffffff08;color:var(--text)}
.mt-files button[aria-pressed="true"]{background:#d7fb8b10;border-color:#d7fb8b55;color:var(--lime)}
.mt-ico{flex:none;width:9px;height:11px;border-radius:2px;background:#ffffff30}
.mt-json{background:#f5c46b99}.mt-md{background:#b9a3ecaa}
.mt-out{display:grid}
.mt-card{grid-area:1/1;min-width:0;padding:18px;border-radius:14px;border:1px solid #d7fb8b33;background:radial-gradient(100% 80% at 0% 0%,#d7fb8b10,transparent 60%),#0c0d0c}
.mt-card[hidden]{display:block!important;visibility:hidden}
.mt-card:not([hidden]){animation:panel .45s var(--ease-out)}
.mt-kind{font:600 10px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--lime)}
.mt-card b{display:block;margin-top:10px;font-size:17px;letter-spacing:-.015em;color:var(--text)}
.mt-card b code{font:600 16px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#d6f3a2}
.mt-card p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted)}
.mt-foot{margin-top:14px;font-size:12.5px;color:var(--muted)}

/* ── 6. Safe by design: the host asks before a write-capable tool ── */
.mcp-checks{margin-top:22px}
.mcp-gate{display:grid;gap:14px;padding:22px;align-content:start}
.mcp-gate figcaption{font-size:12.5px;color:var(--muted);text-align:center}
.mcp-gate:not(.is-playing) *{animation-play-state:paused!important}
.mg-calls{display:grid;gap:8px}
.mg-call{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:#0c0d0c;opacity:0;animation:mg-in 8s var(--ease-out) infinite;animation-delay:calc(var(--i) * .5s)}
.mg-call code{font:13px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--soft)}
.mg-ok,.mg-wait{font:600 10.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em;padding:5px 7px;border-radius:6px}
.mg-ok{color:var(--lime);background:#d7fb8b12}
.mg-wait{color:var(--amber);background:#f5c46b14}
.mg-gated{border-color:#f5c46b55}
.mg-gated .mg-wait::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:50%;background:currentColor;vertical-align:1px;animation:mg-blink 1s steps(2,start) infinite}
.mg-dialog{border-radius:16px;border:1px solid var(--line-2);background:#151715;box-shadow:0 30px 60px -30px #000;padding:16px;opacity:0;transform:translateY(10px) scale(.97);animation:mg-dialog 8s var(--ease-out) infinite}
.mg-d-head{display:flex;align-items:center;gap:9px}
.mg-d-head svg{width:16px;height:16px;fill:none;stroke:var(--amber);stroke-width:1.5}
.mg-d-head b{font-size:15px}
.mg-d-rows{display:grid;gap:4px;margin-top:12px}
.mg-d-rows li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:9px;background:#ffffff05;font-size:13px;color:var(--muted)}
.mg-d-rows em{font-style:normal;color:var(--soft);text-align:right}
.mg-d-rows .mg-no{color:var(--lime)}
.mg-d-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.mg-d-btns span{position:relative;overflow:hidden;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--soft)}
.mg-d-btns .mg-allow{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);animation:mg-press 8s var(--ease) infinite}
.mg-tap{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:#17211366;opacity:0;animation:mg-tap 8s ease-out infinite}
@keyframes mg-in{0%{opacity:0;transform:translateY(8px)}6%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes mg-dialog{0%,22%{opacity:0;transform:translateY(10px) scale(.97)}30%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes mg-press{0%,62%{transform:none}65%{transform:scale(.92)}69%,100%{transform:none}}
@keyframes mg-tap{0%,63%{opacity:0;transform:scale(0)}64%{opacity:1;transform:scale(0)}74%,100%{opacity:0;transform:scale(9)}}
@keyframes mg-blink{to{opacity:.2}}

/* ── 7. Config preview ── */
.mcp-config{max-width:880px;margin-inline:auto;padding:20px}
.mc-cfg-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.mcp-preview-pill{font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--amber);border:1px dashed #f5c46b80;background:#f5c46b10;padding:7px 10px;border-radius:999px}
.mcp-config .code pre{white-space:pre;overflow-x:auto}
.mc-cfg-note{margin-top:12px;font-size:14px;color:var(--muted)}
.mc-cfg-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mc-cfg-steps li{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#080908;font-size:14.5px;color:var(--soft)}
.mc-cfg-steps li span{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d7fb8b14;color:var(--lime);font-size:12px;font-weight:700}
.mc-cfg-steps b{color:var(--text);font-weight:600}

/* ── Responsive ── */
@media(max-width:1020px){
  .mcp-app-body{grid-template-columns:1fr;height:auto}
  .mcp-chat{height:400px}
  .mcp-tools{border-left:0;border-top:1px solid var(--line)}
  .mcp-tools ul{grid-template-columns:1fr 1fr}
  .mcp-hosts{grid-template-columns:repeat(2,1fr)}
  .mcp-asks{grid-template-columns:1fr}
  .mcp-gate{min-height:0}
}
@media(max-width:680px){
  .md-stage{grid-template-columns:1fr}
  .md-wire{min-height:72px;--tx:0px;--ty:calc(100cqh - 10px)}
  .md-line{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px;background:repeating-linear-gradient(180deg,#ffffff30 0 6px,transparent 6px 12px)}
  .md-wire.is-on .md-line{background:linear-gradient(180deg,#9fd24f,var(--lime))}
  .md-packet{left:50%;top:0;margin:0 0 0 -5px}
  .md-label{left:calc(50% + 14px);bottom:auto;top:50%;transform:translateY(-50%);max-width:calc(50% - 14px);text-align:left}
  .md-steps{grid-template-columns:repeat(2,1fr)}
  .md-captions p{text-align:left}
  .mcp-hosts{grid-template-columns:1fr;gap:10px}
  .mh{grid-template-columns:auto 1fr auto;padding:14px 16px;gap:8px 12px}.mh .pill{grid-column:3;grid-row:1;align-self:center}.mh-logo{width:40px;height:40px;padding:9px}
  .mt-body{grid-template-columns:1fr}
  .mc-cfg-steps{grid-template-columns:1fr}
  .mcp-chat{height:440px;padding:16px}
  .mcp-tools ul{grid-template-columns:1fr}
  .mc-msg p{font-size:14.5px}
  .mc-type{white-space:normal;clip-path:none}
  .crumb{flex-wrap:wrap;justify-content:center}
  .mcp-config{padding:14px}.mcp-config .tabs-list [role="tab"]{padding:9px 12px;font-size:13.5px}
}

/* ── Reduced motion: finished states ── */
@media(prefers-reduced-motion:reduce){
  .mc-msg,.mc-call,.mc-call-out span{opacity:1!important;transform:none!important}
  .mc-type{clip-path:none!important;animation:none!important}
  .mg-call,.mg-dialog{animation:none!important;opacity:1;transform:none}
  .mg-allow,.mg-tap{animation:none!important}.mg-tap{opacity:0}
  .md-packet{animation:none!important;opacity:0}
}