/* MCP Retrofit demo: person, protocol, product. Drawn on the page: type, hairlines, one accent. */
.mc-pick {display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.mc-pick button {padding:.3rem 0;font:inherit;font-size:.9375rem;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;transition:color .25s,text-decoration-color .25s}
.mc-pick button:hover {color:var(--ink);text-decoration-color:var(--rule)}
.mc-pick button[aria-pressed="true"] {color:var(--ink);text-decoration-color:var(--oxide)}
.mc-pick button:focus-visible,.mc-data li:focus-visible {outline:2px solid var(--oxide);outline-offset:3px}

.mc-stage {position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.86fr);grid-template-rows:auto auto 1fr;grid-template-areas:"l1 l2 l3" "ask trace data" "reply trace data";column-gap:clamp(3rem,6vw,6.5rem);margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:1.1rem;border-top:1px solid var(--rule)}
.mc-lane {font-size:.875rem;line-height:1.4;color:var(--ink-2);margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.mc-lane-ask {grid-area:l1}.mc-lane-trace {grid-area:l2}.mc-lane-data {grid-area:l3}

/* Person */
.mc-ask {grid-area:ask;position:relative;z-index:1}
.mc-said {min-height:2.3em;margin:0;font:400 clamp(1.75rem,2.9vw,2.85rem)/1.16 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.018em;color:var(--ink);max-width:16ch}
.mc-caret {display:inline-block;width:.05em;height:.8em;margin-left:.06em;vertical-align:-.06em;background:var(--oxide);animation:mc-blink 1s steps(1) infinite}
.mc[data-phase]:not([data-phase="typing"]) .mc-caret,.mc[data-state="done"] .mc-caret,.mc:not([data-state]) .mc-caret {opacity:0;animation:none}
@keyframes mc-blink {50%{opacity:0}}

.mc-reply {grid-area:reply;position:relative;z-index:1;align-self:start;margin-top:clamp(2.2rem,4vw,3.6rem);min-height:12rem}
.mc-who {width:fit-content;margin:0 0 .6rem;font-size:.875rem;color:var(--ink-2);opacity:0;transition:opacity .4s}
.mc-a {margin:0;font:400 clamp(1.25rem,1.75vw,1.65rem)/1.42 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.008em;color:var(--ink);max-width:30ch}
.mc-w {display:inline-block;animation:mc-word .6s var(--ease) both}
@keyframes mc-word {from{opacity:0;filter:blur(5px);transform:translateY(.18em)}to{opacity:1;filter:none;transform:none}}
.mc-meta {margin:1.1rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--ink-2);opacity:0;transition:opacity .5s}
.mc-reply.is-on .mc-who,.mc-meta.is-on {opacity:1}
.mc-meta b {font-weight:400;color:var(--oxide)}

/* Protocol */
.mc-trace {grid-area:trace;position:relative;z-index:1;font:400 .75rem/1.75 'Martian Mono',ui-monospace,monospace;letter-spacing:-.01em;color:var(--ink)}
.mc-trace p {margin:0}
.mc-grant {display:grid;gap:.1rem;margin:0 0 1.6rem;padding-bottom:1rem;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.mc-grant div {display:grid;grid-template-columns:4.6rem minmax(0,1fr)}
.mc-grant dt {color:var(--ink-2)}
.mc-grant dd {margin:0;color:var(--ink)}
.mc-scope {transition:color .35s}
.mc-scope.is-match {color:var(--oxide)}
.mc-call,.mc-gate,.mc-result {position:relative}
.mc-gate {margin:1.3rem 0;padding-left:1rem;border-left:1px solid var(--rule);transition:border-color .4s}
.mc-gate[data-verdict="block"] {border-left-color:var(--oxide)}
.mc-result {margin-top:0}
.mc-head {display:flex;align-items:baseline;gap:.7rem}
.mc-dir {color:var(--oxide)}
.mc-id {margin-left:auto;color:var(--ink-2)}
.mc-k {color:var(--ink-2)}
.mc-l {padding-left:0;overflow-wrap:anywhere}
.mc-call .mc-l:not(.mc-head),.mc-result .mc-l:not(.mc-head) {padding-left:1.45rem}
.mc-verdict {margin-top:.35rem!important;font:400 .9375rem/1.45 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;letter-spacing:0;color:var(--ink-2)}
.mc-verdict b {font-weight:500;color:var(--ink)}
.mc-gate[data-verdict="block"] .mc-verdict b,.mc-gate[data-verdict="block"] .mc-l {color:var(--oxide)}
.mc-gate[data-verdict="check"] .mc-verdict {opacity:0}
.mc-result[data-error="true"] .mc-id {color:var(--oxide)}

/* Sequenced reveal */
.mc[data-state] .mc-step {opacity:0;transform:translateY(5px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.mc[data-state] .mc-step.is-on {opacity:1;transform:none}
.mc[data-state] .mc-verdict.mc-step {transform:translateX(-6px)}
.mc[data-state] .mc-verdict.mc-step.is-on {transform:none}

/* Product */
.mc-data {grid-area:data;position:relative;z-index:1;list-style:none;margin:0;padding:0;align-self:start}
.mc-data li {display:grid;grid-template-columns:4.6rem minmax(0,1fr);column-gap:.8rem;padding:.6rem 0;border-top:1px solid var(--rule);font-size:.875rem;line-height:1.4;color:var(--ink-2);transition:opacity .5s,color .35s}
.mc-data li:last-child {border-bottom:1px solid var(--rule)}
.mc-data code {grid-row:1/3;padding-top:.12rem;font:400 .6875rem/1.6 'Martian Mono',ui-monospace,monospace;color:var(--ink-2);transition:color .35s}
.mc-data strong {font-weight:500;color:var(--ink);transition:color .35s}
.mc-data span {font-size:.8125rem}
.mc-data li.is-other {opacity:.4}
.mc-data li.is-dim {opacity:.38}
.mc-data li.is-other.is-dim {opacity:.22}
.mc-data li.is-hit code,.mc-data li.is-hit strong {color:var(--oxide)}
.mc-data li.is-hit span {color:var(--ink)}
.mc-data li.is-held strong {color:var(--ink)}
.mc-data li .mc-held {color:var(--oxide);opacity:0;transition:opacity .4s}
.mc-data li.is-held .mc-held {opacity:1}

/* Wires */
.mc-wires {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.mc-wires path {fill:none;stroke-width:1;stroke-linecap:round}
.mc-wires .mc-base {stroke:var(--rule);transition:stroke-dashoffset .9s var(--ease)}
.mc-wires .mc-comet {stroke:var(--oxide);stroke-width:1.6;transition:stroke-dashoffset .85s cubic-bezier(.55,0,.25,1),opacity .3s}
.mc-wires .mc-stop {stroke:var(--oxide);stroke-width:1.6;opacity:0;transition:opacity .3s}
.mc-wires .mc-stop.is-on {opacity:1}
.mc-wires circle {fill:var(--oxide);opacity:0;transition:opacity .4s}
.mc-wires circle.is-on {opacity:.85}

/* Static fallback (no script yet): end state of the first request. */
.mc:not([data-state]) .mc-data li:not(.is-hit):not(.is-other) {opacity:.38}
.mc:not([data-state]) .mc-who,.mc:not([data-state]) .mc-meta {opacity:1}

@media(max-width:900px){
 .mc-stage {grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"l1" "ask" "l2" "trace" "l3" "data" "reply";column-gap:0}
 .mc-lane {margin-bottom:1rem}
 .mc-lane-trace,.mc-lane-data {margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--rule)}
 .mc-said {min-height:0}
 .mc-wires {display:none}
 .mc-grant {margin-bottom:1.2rem}
 .mc-reply {min-height:0;margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--rule)}
 .mc-data li.is-dim:not(.is-other) {opacity:.5}
}